Mostrar Mensajes

Esta sección te permite ver todos los posts escritos por este usuario. Ten en cuenta que sólo puedes ver los posts escritos en zonas a las que tienes acceso en este momento.

Temas - Elanti

Páginas: [1]

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Crear un calendario con PHP con date, mktime, arrays maquetar Ejercicio CU00830B

« en: 16 de Septiembre 2015, 04:48 »

Citar

Crea un documento HTML que conste de un título h1 con el texto <<Calendario>>. En la página deberá mostrarse el mes y año actuales (en el momento en que hagas el ejercicio) y para cada día del mes, indicar si es lunes, martes, miércoles, jueves, viernes, sábado o domingo.

Ejemplo: suponiendo que hagas el ejercicio en mayo de 2050, debería mostrarse:

Día 1: Domingo, Día 2: Lunes, Día 3: Martes, Día 4: Miércoles, … etc. hasta Día 31: Martes.

Ampliación voluntaria del ejercicio: si tienes conocimiento de maquetación con HTML y CSS te proponemos que cambies el aspecto para que en lugar de mostrarse como texto, el calendario se muestre con aspecto de calendario habitual. Para la maquetación puedes usar una tabla de 7 columnas por 7 filas (total 49 celdas) con ancho de tabla 300 píxeles y tamaño de fuente en la tabla 24 píxeles. La primera columna corresponderá a lunes y la última a domingo como mostramos en el siguiente ejemplo.

La primera parte del ejercicio era casi trivial; la segunda me planteó serias dificultades. Yo lo resolví de una manera que no sé si será la más elegante. Lo que se me ocurrió fue hacer un bucle para escribir sólo el primer día del mes en su posición correspondiente, y un segundo bucle para el resto de los días. Funcionó, aunque me aparecieron una serie de comillas en la parte superior del calendario, que no sé a qué se deben.
Agradezco si alguien me puede decir si había una manera más sencilla de resolverlo, y cómo hago para que desaparezcan las comillas.
Saludos.

Código: [Seleccionar]

<h1>Calendario</h1>
<style>
table{
    width:300px;
    font-size:24px;
}
</style>
<?php 
$mes = date("m"); 
$año = date ("Y");
$semana = array ("Mon","Tue", "Wed", "Thu","Fri","Sat","Sun");
echo "<table>";
echo "<thead>";
echo "<tr>";
echo "<th colspan='7'>",date("M, Y"),"</th>";
echo "</tr>";
echo "<tr>";
echo "<th>Lu</th>,<th>Ma</th>,<th>Mi</th>,<th>Ju</th>,<th>Vi</th>,<th>Sa</th>,<th>Do</th>,";
echo "</tr>";
echo "</thead>";
echo "<tbody>";
//// MARCO EL DÍA 1º DEL MES:  ////////////////////
echo "<tr>";
for ($i=0;$i<=6;$i++){
    if (date("D",mktime(0,0,0,$mes,1,$año))==$semana[$i]){
        echo "<td>", date("d", mktime(0,0,0,$mes,1,$año)) ,"</td>"; 
        break;
    }else{
        echo  "<td>", "</td>"  ;
    }
}


/////////marco los días subsiguientes////////////////////
for ($j=2;$j<=date("t");$j++){
    if ( date("D",mktime(0,0,0,$mes,$j,$año))=="Sun" )  {
        echo      "<td>",   date("d", mktime(0,0,0,$mes,$j,$año)), "</td >", "</tr>", "<tr>"; 
    }else{
        echo      "<td>",   date("d", mktime(0,0,0,$mes,$j,$año)) ,  "</td>" ;
    }
}

echo "</tbody>";
echo "</table>";
?>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / PHP funciones count_chars in_array, chr, strstr, str_replace, substr CU00828B

« en: 12 de Septiembre 2015, 23:07 »

Citar

EJERCICIO

Crear archivos php que ejecuten la tarea indicada:

a) Dada la cadena "El abecedario completo es algo largo y detallarlo exhaustivamente es costoso", indicar cuántas veces aparece cada vocal usando funciones para cadenas PHP.

b) Dada la cadena "El abecedario completo es algo largo y detallarlo exhaustivamente es costoso", indicar qué consonantes son las que aparecen y cuántas veces aparecen usando funciones para cadenas PHP.

c) Dada la cadena "El abecedario completo es algo largo y detallarlo exhaustivamente es costoso", mostrar la cadena donde todas las a hayan sido sustituídas por el símbolo *. Por ejemplo en lugar de <<El abecedario…>> se habrá de mostrar <<El *beced*rio…>>

d) Dada la cadena "El abecedario completo es algo largo y detallarlo exhaustivamente es costoso", mostrar la subcadena desde la primera aparición de <<completo>> excluyendo completo, es decir, deberá mostrarse << es algo largo y detallarlo exhaustivamente es costoso>>. Para ello usa una o varias funciones para cadenas PHP.

Logré resolver correctamente este ejercicio. Pero como siempre hay más de una forma de hacer las cosas, dejo mi código por si alguien tiene algún comentario o sugerencia de mejora:

Código: [Seleccionar]

<?php 
$cad="El abecedario completo es algo largo y detallarlo exhaustivamente es costoso";
$cad = strtolower($cad);
$vocales = array("a","e","i","o","u");

echo "<strong>Parte a)</strong><br /><br />";

///////////////////////////PARTE A:   ///////////////////////////////////////////////

foreach ($vocales as $vocal){
    echo "La vocal '$vocal' aparece ", substr_count($cad,$vocal); 
    switch (substr_count($cad,$vocal)){
        case 1:
            echo " vez. <br />";
            break;
        default:
            echo " veces. <br />";
    }
}

echo "<br />";
echo "<strong>Parte b)</strong><br /><br />";

///////////////////////////PARTE B:   //////////////////////////////////////////////////

foreach (count_chars($cad,1) as $letra=>$ocurrencias){
    if (in_array(chr($letra),$vocales)){
        continue;
    }else if (chr($letra)==" "){
        continue;        
    }else if ($ocurrencias==1){
        echo "La consonante ","'", chr($letra),"'", " aparece ", $ocurrencias, " vez<br />";
    }
    else{
        echo "La consonante ","'", chr($letra),"'", " aparece ", $ocurrencias, " veces<br />";
    }
}
echo "<br />";
echo "<strong>Parte c)</strong><br /><br />";

////////////////////////// PARTE C:   //////////////////////////////////////////////////////

echo str_replace("a","*",$cad);
echo "<br />";
echo "<br />";
echo "<strong>Parte d)</strong><br /><br />";

////////////////////////// PARTE D:   //////////////////////////////////////////////////////

$concompleto = strstr($cad,"completo");
$sincompleto = substr($concompleto, strlen("completo"));
echo $sincompleto;
?>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / arrays multidimensionales PHP con índices asociativos bucles recorrido CU00826B

« en: 04 de Septiembre 2015, 00:18 »

Citar

EJERCICIO 3

Supón que quieres representar lo siguiente: hay 2 equipos españoles, en el primero el portero es Frank, el defensa Pepe, el medio Luis y el delantero Raul. En el segundo, el portero es Tiger, el defensa Mourin, el medio Katz y el delantero Alberto. Hay 1 equipo mexicano, donde el portero es Suarez, el defensa Koltz, el medio Fernandez y el delantero Ramirez. Hay 2 equipos argentinos. En el primero el portero es Higuita, el defensa Mel, el medio Rubens y el delantero Messi. En el segundo el portero es Kostenmeiner, el defensa Lenkins, el medio Marash y el delantero Juanes.

a) Representa los datos usando un array de tres dimensiones con índices numéricos donde el primer índice indica el país, el segundo el equipo y el tercero la posición del jugador. Presenta la información del país, equipo, posiciones y jugadores de cada equipo usando un bucle for.

b) Representa los datos usando un array de tres dimensiones con índices numéricos donde el primer índice indica el país, el segundo el equipo y el tercero la posición del jugador. Presenta la información del país, equipo, posiciones y jugadores de cada equipo usando un bucle for each.

c) Representa los datos usando arrays arrays asociativos donde el primer índice indica el país, el segundo el equipo y el tercero la posición del jugador (un ejemplo de cómo declarar un elemento sería por ejemplo: $equipos['Mexico']['Equipo1']['defensa']="koltz". A continuación usando un bucle foreach recorre los elementos del array mostrando la información del país, equipo, posiciones y jugadores de cada equipo.

Este ejercicio me resultó extremadamente difícil. Apoyándome en respuestas de otras personas en este foro, logré resolverlo; pero mi solución para la parte "a" sólo funciona parcialmente, debido a que México tiene un solo equipo, y esto hace que mi bucle "for" no funcione del todo bien. Si alguien tiene alguna idea para resolverlo, se agradece. Yo me voy a poner mis neuronas en salmuera.

Solución parte "a":

Código: [Seleccionar]

<?php 
$jugadores[0][0][0]="Frank";
$jugadores[0][0][1]="Pepe";
$jugadores[0][0][2]="Luis";
$jugadores[0][0][3]="Raúl";
$jugadores[0][1][0]="Tiger";
$jugadores[0][1][1]="Mourin";
$jugadores[0][1][2]="Katz";
$jugadores[0][1][3]="Alberto";
$jugadores[1][0][0]="Suárez";
$jugadores[1][0][1]="Koltz";
$jugadores[1][0][2]="Fernández";
$jugadores[1][0][3]="Ramírez";
$jugadores[2][0][0]="Higuita";
$jugadores[2][0][1]="Mel";
$jugadores[2][0][2]="Rubens";
$jugadores[2][0][3]="Messi";
$jugadores[2][1][0]="Kostenmeiner";
$jugadores[2][1][1]="Lenkins";
$jugadores[2][1][2]="Marash";
$jugadores[2][1][3]="Juanes";

$paises = array("España", "México","Argentina",);
$equipos = array ("primero", "segundo",);
$posiciones = array("portero", "defensa", "medio", "delantero");
for ($pai=0;$pai<count($jugadores);$pai++){ 
echo "<strong> Los jugadores de $paises[$pai] son: </strong><br /><br />";    
    for ($equi=0;$equi<count($equipos);$equi++){           
    echo "&nbsp; En el equipo $equipos[$equi]: <br/>";       
        for ($posi=0;$posi<count($posiciones);$posi++){
        echo "<ul>";    
        echo "<li> En la posición $posiciones[$posi]: </li>";
        echo "&nbsp;&nbsp;&nbsp;&nbsp;",$jugadores[$pai][$equi][$posi], "<br />";        
        echo "</ul>";
        }
    }
}    
?>

Solución parte "b":

Código: [Seleccionar]

<?php 
$jugadores[0][0][0]="Frank";
$jugadores[0][0][1]="Pepe";
$jugadores[0][0][2]="Luis";
$jugadores[0][0][3]="Raúl";
$jugadores[0][1][0]="Tiger";
$jugadores[0][1][1]="Mourin";
$jugadores[0][1][2]="Katz";
$jugadores[0][1][3]="Alberto";
$jugadores[1][0][0]="Suárez";
$jugadores[1][0][1]="Koltz";
$jugadores[1][0][2]="Fernández";
$jugadores[1][0][3]="Ramírez";
$jugadores[2][0][0]="Higuita";
$jugadores[2][0][1]="Mel";
$jugadores[2][0][2]="Rubens";
$jugadores[2][0][3]="Messi";
$jugadores[2][1][0]="Kostenmeiner";
$jugadores[2][1][1]="Lenkins";
$jugadores[2][1][2]="Marash";
$jugadores[2][1][3]="Juanes";


foreach ($jugadores as $paises=>$pais){
    echo "<strong>";
    if ($paises==0){echo "España <br />";}
    else if ($paises==1){echo "México <br />";}
    else if ($paises==2){echo "Argentina <br />";}
    echo "</strong>";
    foreach ($pais as $equipos => $equipo){
        if ($equipos == 0){echo "&nbsp; &nbsp; Primer equipo: <br />";}
        else {echo "&nbsp; &nbsp; Segundo equipo: <br />";}
        foreach ($equipo as $posicion => $jugador){
            echo "<ul>";
            if ($posicion==0){echo "<li>","Portero:", $jugador, "</li>";}
            else if ($posicion==1){echo "<li>","Defensa:", $jugador, "</li>";}
            else if ($posicion==2){echo "<li>","Medio:", $jugador, "</li>";}
            else if ($posicion==3){echo "<li>","Delantero:", $jugador, "</li>";}
            echo "</ul>";
        }
    }
}
    
?>

Solución parte "c":

Código: [Seleccionar]

<?php 
$jugadores["España"]["primero"]["portero"]="Frank";
$jugadores["España"]["primero"]["defensa"]="Pepe";
$jugadores["España"]["primero"]["medio"]="Luis";
$jugadores["España"]["primero"]["delantero"]="Raúl";
$jugadores["España"]["segundo"]["portero"]="Tiger";
$jugadores["España"]["segundo"]["defensa"]="Mourin";
$jugadores["España"]["segundo"]["medio"]="Katz";
$jugadores["España"]["segundo"]["delantero"]="Alberto";
$jugadores["México"]["primero"]["portero"]="Suárez";
$jugadores["México"]["primero"]["defensa"]="Koltz";
$jugadores["México"]["primero"]["medio"]="Fernández";
$jugadores["México"]["primero"]["delantero"]="Ramírez";
$jugadores["Argentina"]["primero"]["portero"]="Higuita";
$jugadores["Argentina"]["primero"]["defensa"]="Mel";
$jugadores["Argentina"]["primero"]["medio"]="Rubens";
$jugadores["Argentina"]["primero"]["delantero"]="Messi";
$jugadores["Argentina"]["segundo"]["portero"]="Kostenmeiner";
$jugadores["Argentina"]["segundo"]["defensa"]="Lenkins";
$jugadores["Argentina"]["segundo"]["medio"]="Marash";
$jugadores["Argentina"]["segundo"]["delantero"]="Juanes";

foreach ($jugadores as $pais => $equipos){
    foreach ($equipos as $equipo => $posiciones){
        foreach ($posiciones as $posicion => $jugador){
            echo "En $pais, en el equipo $equipo, el $posicion titular es: $jugador <br /> ";
        }
    }
}
?>

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Ejercicio PHP ejemplo condicionales if then else comprobar dimensiones CU00817B

« en: 16 de Agosto 2015, 23:20 »

Citar

EJERCICIO 2

Define las variables $tipo, $grosor, $diametro y $marca. Establece que el tipo sea “Rueda de camión”, el grosor 0.33, el diámetro 1.25 y la marca “Kimashuki”. Crea el código PHP donde a través de condicionales if realices la siguiente comprobación: si el diámetro es superior a 1.4 debe mostrarse por pantalla el mensaje “La rueda es para un vehículo grande”. Si es menor o igual a 1.4 debe mostrarse por pantalla el mensaje “La rueda es para un vehículo pequeño”. En otro caso, debe mostrarse “No existe un tamaño de rueda válido”.
Modifica los valores de diámetro y comprueba que los resultados obtenidos por pantalla sean correctos. Para comprobar si tus respuestas y código son correctos puedes consultar en los foros aprenderaprogramar.com.

Este ejercicio me salió bien, pero no sé cómo hacer para provocar la tercera opción ("no existe un tamaño de rueda válido"). Intenté colocar letras en lugar de números, pero no funcionó. ¿Qué valores darían lugar a esta opción?
Gracias.

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Ejercicio PHP CU00821B codificación caracteres no muestra acentos tildes substr

« en: 16 de Agosto 2015, 22:52 »

Hola a todos:

La letra del ejercicio es la siguiente:

Citar

EJERCICIO

Crea el código PHP que cumpla con lo que se indica a continuación:

a) Declara una variable cuyo contenido sea la cadena "Didáctica y divulgación de la programación"

b) Usando la función substr extrae cada una de las palabras de la cadena anterior a una variable. Como tenemos 6 palabras, debes tener 6 variables con las subcadenas.

c) Usando la concatenación muestra por pantalla lo siguiente: <<Las palabras primera, tercera y sexta son: Didáctica, divulgación, programación>>

d) Usando strlen muestra por pantalla lo siguiente: <<La palabra primera es Didáctica y tiene 9 caracteres, la palabra tercera es divulgación y tiene 11 caracteres. La palabra sexta es programación y tiene 12 caracteres>>

Y mi código:

Código: [Seleccionar]

<meta charset="UTF-8">
<?php 
$frase = "Didáctica y divulgación de la programación";
$did = substr($frase,0,9);
$y = substr($frase,10,1);
$div = substr($frase,12,11);
$de = substr($frase,24,2);
$la = substr($frase,27,2);
$pro = substr($frase,30,12);
echo "Las palabras primera, tercera y sexta son: $did, $div, $pro <br/>";
echo "La palabra primera es $did y tiene ";
echo strlen($did);
echo " caracteres, la palabra tercera es $div y tiene ";
echo strlen($div);
echo " caracteres. La palabra sexta es $pro y tiene ";
echo strlen($pro);
echo " caracteres";
?>

A pesar de que tuve la precaución de incluir el <meta charset="UTF-8"> como lo hago siempre en HTML (aunque no sé si es lo apropiado en este caso), y a pesar de que tengo el Notepad++ configurado en UTF-8 sin BOM, no he conseguido que la letra "o" con acento se visualice bien (aunque sí se visualiza bien la "a" con acento). Me aparece en su lugar un signo de interrogación dentro de un rombo negro, y creo que esto también me está afectando el conteo de caracteres para las funciones substr() y strlen(). ¿Cómo lo soluciono?

Gracias.

Comunidad / Errata lección CU01043D curso CSS desde cero cómo centrar un div dentro de otro

« en: 13 de Julio 2015, 02:50 »

Buenas: creo que la lección CU01043D contiene un pequeño error en el último ejemplo, en el que se demuestra cómo centrar un "div" pequeño dentro de otro más grande. El código que se proporciona como situación "inicial" o de partida, no corresponde a ese ejemplo, sino que es la repetición de un ejemplo anterior.
Un pequeño desliz que no afecta la comprensión del ejemplo ni desmerece en nada a un curso excelente.
Saludos.

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Ejemplo float CSS clear divs flotantes alinear a izquierda o derecha CU01035D

« en: 05 de Junio 2015, 03:46 »

Citar

EJERCICIO

Define un documento HTML donde a través del uso de las propiedades float y clear y de las anteriores propiedades que hemos visto a lo largo del curso crees un diseño con este aspecto:

a) En primer lugar se deben mostrar 8 cajas div de 50x50 píxeles, con margin-right de 5 píxeles para cada una de ellas, y cada una de ellas con distinto color de fondo, alineadas en horizontal hacia la izquierda gracias al uso de float left.

b) En segundo lugar se debe mostrar un div con un texto y color de fondo amarillo, con margen superior e inferior de 20 píxeles, abarcando todo el ancho disponible.

c) En tercer lugar se deben mostrar 3 cajas div de 200x50 píxeles, con margin-right de 5 píxeles para cada una de ellas, y cada una de ellas con distinto color de fondo, alineadas en horizontal hacia la derecha gracias al uso de float right.

d) En cuarto lugar un div de fondo de color #DEB887 que ocupe todo el ancho disponible y contenga el texto <<Curso CSS aprenderaprogramar.com>>

Nota: si es necesario, usa los div contenedores auxiliares que te sean necesarios. Para comprobar si tu código y respuestas son correctas puedes consultar en los foros aprenderaprogramar.com.

Mi solución:

Archivo html:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="description" content="ejercicio sobre float y clear">
<meta name="keywords" content="float, clear, html, css, tutorial">
<meta name="author" content="elanti">
<title>Ejercicio float y clear</title>
<link type="text/CSS" rel="stylesheet" href="ejercicio float y clear.css">
</head>
<body>
<div class="izq" id="una"></div>
<div class="izq"id="dos"></div>
<div class="izq"id="tres"></div>
<div class="izq"id="cuatro"></div>
<div class="izq"id="cinco"></div>
<div class="izq"id="seis"></div>
<div class="izq"id="siete"></div>
<div class="izq"id="ocho"></div>
<div id="auxiliar1"></div>
<div id="amarillo">Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos. Eu sit tincidunt incorrupte definitionem, vis mutat affert percipit cu, eirmod consectetuer signiferumque eu per. In usu latine equidem dolores. Quo no falli viris intellegam, ut fugit veritus placerat per.

Ius id vidit volumus mandamus, vide veritus democritum te nec, ei eos debet libris consulatu. No mei ferri graeco dicunt, ad cum veri accommodare. Sed at malis omnesque delicata, usu et iusto zzril meliore. Dicunt maiorum eloquentiam cum cu, sit summo dolor essent te. Ne quodsi nusquam legendos has, ea dicit voluptua eloquentiam pro, ad sit quas qualisque. Eos vocibus deserunt quaestio ei.

Blandit incorrupte quaerendum in quo, nibh impedit id vis, vel no nullam semper audiam. Ei populo graeci consulatu mei, has ea stet modus phaedrum. Inani oblique ne has, duo et veritus detraxit. Tota ludus oratio ea mel, offendit persequeris ei vim. Eos dicat oratio partem ut, id cum ignota senserit intellegat. Sit inani ubique graecis ad, quando graecis liberavisse et cum, dicit option eruditi at duo. Homero salutatus suscipiantur eum id, tamquam voluptaria expetendis ad sed, nobis feugiat similique usu ex.

Eum hinc argumentum te, no sit percipit adversarium, ne qui feugiat persecuti. Odio omnes scripserit ad est, ut vidit lorem maiestatis his, putent mandamus gloriatur ne pro. Oratio iriure rationibus ne his, ad est corrumpit splendide. Ad duo appareat moderatius, ei falli tollit denique eos. Dicant evertitur mei in, ne his deserunt perpetua sententiae, ea sea omnes similique vituperatoribus. Ex mel errem intellegebat comprehensam, vel ad tantas antiopam delicatissimi, tota ferri affert eu nec. Legere expetenda pertinacia ne pro, et pro impetus persius assueverit.

Ea mei nullam facete, omnis oratio offendit ius cu. Doming takimata repudiandae usu an, mei dicant takimata id, pri eleifend inimicus euripidis at. His vero singulis ea, quem euripidis abhorreant mei ut, et populo iriure vix. Usu ludus affert voluptaria ei, vix ea error definitiones, movet fastidii signiferumque in qui.
</div>
<div class="der"id="first"></div>
<div class="der"id="second"></div>
<div class="der"id="third"></div>
<div id="auxiliar2"></div>
<div id="último">Curso CSS aprenderaprogramar.com</div>
</body>
</html>

Archivo css:

Código: [Seleccionar]

.izq{width:50px;
     height:50px;
     margin-right:5px;
     float:left;}
#una{background-color:red;}
#dos{background-color:blue;}
#tres{background-color:green;}
#cuatro{background-color:black;}
#cinco{background-color:orange;}
#seis{background-color:magenta;}
#siete{background-color:cyan;}
#ocho{background-color:olive;} 
#amarillo{margin-top:20px;
          margin-bottom:20px;
          background-color:yellow;
          width:100%;
          clear:left;}
.der{width:200px;
     height:50px;
     margin-right:5px;
     float:right;}
#first{background-color:darkblue;}
#second{background-color:darkred;}
#third{background-color:darkgreen;}
#último{background-color:#DEB887;
        width:100%;
        clear:right;}
#auxiliar1{clear:both;}        
#auxiliar2{clear:both;
          height:20px; }

Gracias.

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / ¿Qué son el div id=SL_shadow_translator, y otros elementos?

« en: 04 de Junio 2015, 23:59 »

Hola:

Esta es una duda que yo tengo, referido a algo curioso que ya me ha ocurrido en más de una lección del curso CSS.

Digamos, por ejemplo, que estoy estudiando la lección CU01035D. Al cargar en el navegador los códigos que se ofrecen en la lección (y hacerles las modificaciones que se indican), inicialmente logro visualizarlos correctamente, tal como se muestran en la página del curso. Al hacer click en la pantalla, aparecen elementos que no están en el código, como una barra que se observa en la parte inferior. Al recargar la página, estos elementos extraños desaparecen. Si inspecciono la página con el inspector de elementos del navegador, veo que estos elementos tienen nombre y propiedades; por ejemplo, en este caso, dice llamarse: <div id=SL_shadow_translator>.

¿De dónde salen estos elementos, y quién les pone nombre?

Gracias.

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS position relative y absolute diferencias y ejemplos Ejercicio CU01032D

« en: 03 de Junio 2015, 03:56 »

Hola:

Este ejercicio no me pareció particularmente difícil, pero me desconcierta el hecho de que sólo puedo visualizar mi respuesta en Chrome. El resto de los navegadores que he probado (Firefox, Explorer y Opera) sólo me muestran una página en blanco. Agradecería si alguien me pudiera decir qué es lo que estoy haciendo mal.

Citar

EJERCICIO 1

Define un documento HTML con un div padre (divPadre), dentro del cual existan otras 3 cajas contenedoras div (div1, div2 y div3), cada una de ellas con unas dimensiones de 300x300px, 40 píxeles de margin en todas direcciones, 30 píxeles de padding en todas direcciones y un background color diferente. Usando posicionamiento relativo genera un desplazamiento de los div de la siguiente manera:

a) El div 1 deberá desplazarse 200 píxeles a la derecha y 100 píxeles hacia abajo respecto a lo que sería su posición normal.

b) El div 2 deberá desplazarse 50 píxeles a la izquierda y 50 píxeles hacia arriba respecto a lo que sería su posición normal.

c) El div 3 deberá desplazarse 450 píxeles a la derecha y 300 píxeles hacia arriba respecto a lo que sería su posición normal.

Mi código HTML:

Código: [Seleccionar]

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejercicio propiedad position</title>
<link type="text/CCS" rel="stylesheet" href="estilosposition.css"/>
</head>
<body>
<div id="DivPadre">
 <div id="div1"></div>
 <div id="div2"></div>
 <div id="div3"></div>
</div>
</body>
</html>

Mi hoja de estilos:

Código: [Seleccionar]

#DivPadre{border:solid 5px green;
}
div div{width:300px;
      height:300px;
      margin:40px;
      padding:30px;
}
#div1{background-color:magenta;
      position:relative;left:200px;top:100px;
} 
#div2{background-color:cyan;
      position:relative;right:50px;bottom:50px; 
}
#div3{background-color:skyblue;
      position:relative;left:450px;bottom:300px;
}

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / data URL image base64 ¿Para qué sirve? Ventajas e inconvenientes CU01031D

« en: 02 de Junio 2015, 21:05 »

Hola:

Citar

EJERCICIO

Crea un documento HTML con 4 elementos div de 400 píxeles de ancho y 400 píxeles de alto, todos ellos con un margin de 40 píxeles en todas direcciones y un padding de 40 píxeles en todas direcciones. En cada uno de los elementos div crea un borde y coloca una imagen de fondo diferente y un background-color diferente. Usa la propiedad background-position para hacer que la imagen esté centrada tanto vertical como horizontalmente respecto al borde del div (por ejemplo, si una imagen mide 100x100 píxeles, deberá existir la misma distancia hasta el borde del div en las cuatro direcciones).

Yo lo resolví de la siguienta manera:

HTML

Código: [Seleccionar]

<!DOCTYPE html/>
<html lang="es">
<html>
<title>Ejercicio background</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" type="text/CSS" href="ejerciciobackground.css"/> 
<head>
</head>
<body>
<div id="primero"></div>
<div id="segundo"></div>
<div id="tercero"></div>
<div id="cuarto"></div>

</body>
</html>

CSS

Código: [Seleccionar]

div{
   width:400px;
   height:400px;
   margin:40px;
   padding:40px; 
   background-repeat:no-repeat;
   background-position:50% 50%;
     
}
#primero{
    background-image:url(data:image/jpeg;base64,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);
    background-color:orange;
    border:solid 5px blue;
    
}
#segundo{background-image:url(data:image/jpeg;base64,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);
   background-color:cyan;
   border:dotted 3px #FF0000;
}
#tercero{background-image:url(data:image/jpeg;base64,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);
   background-color:lightgreen; 
   border:dashed 7px #00DD00;
}
#cuarto{background-image:url(data:image/jpeg;base64,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);
   background-color:yellow;
   border:groove 10px #0000EE;
   }

Una cosa que me resultó extraña, es que inicialmente yo había identificado los elementos div utilizando números simples (1,2,3 y 4) y no lograba visualizarlos en el navegador. Sólo cuando les cambié los id a "primero, segundo, etc.", pude visualizarlos. No sé cuál puede ser la causa de esto.

C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS ¿qué significa em? Ancho o width medido en em unidad relativa (CU01025D)

« en: 01 de Junio 2015, 02:09 »

Hola a todos:

Soy principiante total, y me está resultando de gran utilidad el tutorial de CSS. Está muy bien escrito, y todo está explicado de forma muy didáctica y amena.

Sin embargo, no estoy entendiendo bien el ejemplo práctico de la entrega nº25 del tutorial (CU01025D). Allí se establece que el elemento h2 tenga un width de 8em. Según entiendo, esto significaría que el elemento h2 debería tener un ancho equivalente a 8 veces el tamaño de la fuente. O sea, deberían caber dentro de ese elemento 8 caracteres de tamaño normal de fuente. Sin embargo, se aprecia claramente que el elemento tiene un ancho mucho mayor, ya que contiene la frase "la programación", que tiene una longitud de 15 caracteres... ¿Qué es lo que no estoy comprendiendo bien?

Páginas: [1]

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias: