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 - JurreNawijn

Páginas: [1] 2
1
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Concatenar cadenas (strings) PHP. Extraer una palabra substr Ejercicio CU00821B
« en: 06 de Marzo 2016, 20:55 »
Dejo la respuesta al ejercicio CU00821B del curso tutorial PHP desde cero.

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
</head>
<body><div id="cabecera"><h2>Cursos aprenderaprogramar.com</h2><h3>Ejemplos PHP</h3></div>
<?php

    $contenido = 'Didáctica y divulgación de la programación';
    $a = substr($contenido,0, 10);
    $b = substr($contenido, 11, 1);
    $c = substr($contenido, 13, 12);
    $d = substr($contenido, 25, 3);
    $e = substr($contenido, 28, 3);
    $f = substr($contenido, 32);
    echo 'Las palabras primeras, tercera y sexta son:' . $a . ", " . $c . ", " . $f . "</br>";
    echo "La primera palabra es $a y tiene: " . (strlen($a)-1) . ' carácteres. </br>';
    echo "La tercera palabra es $c y tiene: " . (strlen($c)-1) . ' carácteres. </br>';
    echo "La sexta palabra es $f y tiene: " . (strlen($f)-1) . ' carácteres. </br>';
    
    ?>
</body>
</html>

2
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / while JavaScript. do while. continue. contar y mostrar letras palabra CU01132E#
« en: 23 de Febrero 2016, 14:14 »
Dejo el código al siguiente ejercicio, CU01132E del tutorial javascript básico desde cero.

Código: [Seleccionar]
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {background-color:white; font-family: sans-serif;}
.boton{padding:15px; width: 200px;  text-align:center; clear:both;
color: white; border-radius: 40px; background: rgb(202, 60, 60);}
    .boton:hover {background-color: aqua; cursor:pointer;}
</style>
<script type="text/javascript">
function separaPalabras() {
var contador = 0;
var palabra = prompt("Escribe una palabra que se te venga a la mente.");
var msg = 'Escribiste: ' + palabra + '.\n';
 while (contador<palabra.length) {
     contador++;
     msg = msg + 'Letra ' + contador + ': ' + palabra.charAt(contador-1) + '\n';
     
 }
alert(msg);
}
</script>
</head>
<body>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
<h3 class="boton" onclick="separaPalabras()">Pulsa aquí</h3>
</body>
</html>

3
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / for JavaScript (bucles o ciclos) Saber tamaño array con length. charAt CU01131E
« en: 22 de Febrero 2016, 04:28 »
Dejo la respuesta al siguiente ejercicio.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo DOM - aprenderaprogramar.com</title>
<meta charset="utf-8">
<style type="text/css">
body { font-family: sans-serif;}
.boton{padding:15px; width: 330px;  text-align:center; clear:both;
color: white; border-radius: 40px; background: rgb(202, 60, 60); margin: 10px auto;}
.boton:hover {background: rgb(66, 184, 221); cursor:pointer;}
    p {font-size: 24px; color: maroon; display: inline-block; margin:10px; border: solid black; padding:10px;}
</style>
<script type="text/javascript">

function mostrarLetras() {
var palabra = prompt("Escribe la primera palabra que se te venga a la mente.");
var msg = 'Primeras letras: \n\n';

for (var i=1; i<=palabra.length; i++){
    msg = msg + palabra.charAt(i-1) + '\n'; }
    alert (msg);
}

    function mostrarContParrafos() {
        var elementosObtenidos = document.getElementsByTagName('p');
       
        var parrafos = elementosObtenidos.length;
       
        var msg = 'Párrafos\n';
        for (i=1; i<=parrafos; i++) {
            var contenido = elementosObtenidos[i-1].firstChild.nodeValue;
            msg = msg + 'Párrafo número: ' + i + '\nContenido: ' + contenido + '\n\n';
        }
        alert(msg);
    }
   
</script>
</head>
<body>
<h3 class="boton" onclick="mostrarLetras()">Pulse aquí para separar una palabra</h3>
    <h3 class="boton" onclick="mostrarContParrafos('p')">Pulse aquí para contar los parrafos.</h3>
    <p>Manzana</p>
    <p>Pera</p>
    <p>Fresa</p>
    <p>Ciruela</p>
    <p>Naranja</p>
    <p>Kiwi</p>
    <p>Pomelo</p>
    <p>Melón</p>
    <p>Sandía</p>
    <p>Mango</p>
    <p>Papaya</p>
    <p>Cereza</p>
    <p>Nectarina</p>
    <p>Frambuesa</p></div>
   
</body>
</html>

4
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / DOM o Document Object Model en desarrollos web HTML y JavaScript CU01123E#
« en: 06 de Febrero 2016, 03:12 »
Buenas noches, dejo la respuesta al siguiente ejercicio.

Código: [Seleccionar]
<!DOCTYPE html>
<html>
    <head>
        <title> Página web DOM</title>
        <meta charset="utf-8">
        <style type="text/css">
            body {background-color: burlywood;}
            div { margin: auto;}
            p, h1 { text-align: center; margin: 20px auto;}
        </style>
    </head>
    <body>
        <div>
            <h1>Curso JavaScript aprenderaprogramar.com</h1>
        </div>
       
        <div>
            <p>Parrafo 1.</p>
            <p>Parrafo 2.</p>
            <p>Parrafo 3.</p>
        </div>
    </body>

</html>

5
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / function Javascript llamar o invocar a una función con parámetros CU01122E
« en: 05 de Febrero 2016, 04:07 »
Buenas noches, dejo la respuesta al siguiente ejercicio (CU01122E).

Creo que hice lo que pedía el enunciado del ejercicio.

Código: [Seleccionar]
<DOCTYPE html>
<html> <head> <title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
    function obtenerImporteConImpuestos(importeSinImpuesto, tipoDeProducto) {
        // Recoge datos
        tipoDeProducto = Number(prompt("Menú: \n\n 1) 21% IVA.\n 2) 10% IVA.\n 3) 5% IVA. \n\n Debes escoger unas de las tres opciones. "));
        var msg = "El importe sin impuesto es: " + (importeSinImpuesto) + "\n";
        var msg2 = "El importe con impuesto es: ";
        // Arroja datos
        switch (tipoDeProducto) {
            case 1: alert(msg + msg2 + (importeSinImpuesto*1.21)); break;
            case 2: alert(msg + msg2 + (importeSinImpuesto*110/100)); break;
            case 3: alert(msg + msg2 + (importeSinImpuesto*1.05)); break;
            default: alert("Por favor, inserta un valor entre 1 y 3."); break;
               
        }
}
    function obtenerImporteConImpuestos2(importeSinImpuesto)
    {
       
        importeSinImpuesto = Number(prompt("Inserta un valor entre 1 y 3."));
        if (importeSinImpuesto >= 4) {
            alert("Error: Solo hay tres tipos.");
        } else {
        resultado = [undefined, (100*1.21) ,(100*110/100),(100*1.05)];
        alert("El importe sin impuesto es : 100\n" + "El importe con impuesto es: " + resultado[importeSinImpuesto]);
        }
    }

</script>
</head>
<body> <div> <p>Los ejercicios</p>
<img onclick="obtenerImporteConImpuestos(100)" src="http://2.bp.blogspot.com/-hU25nwadhPI/TV1TNKRmBYI/AAAAAAAAAH8/dKxiSpvhsPE/s1600/600px-MA_Route_1_svg.png" alt="Ejercicio 1" title="Ejercicio 1" width="200px" height="150px" />
    <img onclick="obtenerImporteConImpuestos2()" src="http://cliparwolf.com/images/2/2-06.jpg" alt="Ejercicio 2" title="Ejercicio 2" width="200px" height="150px" /> </div> </body> </html>

6
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Javascript declarar array o arreglo vacío y rellenarlo prompt Ejercicio CU01121E
« en: 04 de Febrero 2016, 05:25 »
Buenas noches, dejo la respuesta al ejercicio CU01121E.

Código: [Seleccionar]
<html> <head> <title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function mostrarMensaje1() {
    var nombres = [];
    nombres[0] = prompt("Ingresa tu primer nombre."); nombres[1] = prompt("Ingresa tu segundo nombre."); nombres[2] = prompt("Ingresa tu primer apellido.");
    alert("Tu nombre completo es: " + nombres[0] + " " + nombres[1] + " " + nombres[2]);
}
</script>
</head>
<body> <div> <p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">
<p onclick ="alert('Alerta JavaScript')" style="color: #D2691E;">Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web. </p> </div> </body> </html>

7
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / switch JavaScript condicional con varios casos a elegir según opción CU01120E
« en: 04 de Febrero 2016, 00:35 »
Buenas noches a todos, dejo la respuesta de los ejercicios switch del curso de javascript desde cero entrega CU01120E.

Código: [Seleccionar]
<DOCTYPE html>
<html>
<head>
<title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function dimeTipoMotor() {
    var TipoDeMotor = Number(prompt("Inserte el tipo de motor."));
    if (TipoDeMotor == "") { alert("Error: No escribiste el tipo de motor."); } else {
            switch (TipoDeMotor) {
            case 0: alert ("No hay establecido un valor definido para el tipo de bomba."); break;
            case 1: alert ("La bomba es una bomba de agua."); break;
            case 2: alert ("La bomba es una bomba de gasolina."); break;
            case 3: alert("La bomba es una bomba de hormigón."); break;
            case 4: alert("La bomba es una bomba de pasta alimenticia."); break;
            default: alert ("No existe un valor válido para tipo de bomba"); break;
        }
        }
}
</script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="dimeTipoMotor()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">
<p onclick ="alert('Alerta JavaScript')" style="color: #D2691E;">Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web.
</p>
</div>
</body>
</html>

8
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / JavaScript document.write mostrar mensaje pantalla If else, if else if CU01119E
« en: 03 de Febrero 2016, 01:23 »
Buenas noches. Dejo la respuesta al ejercicio CU01119E del curso de javascript.

Código: [Seleccionar]
<DOCTYPE html>
<html>
<head>
<title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
    <style>
        body {
            background-color: #F7F7F7;
        }
        div {
            border-style: dashed; border-color: firebrick; margin: auto auto; padding: 25px; width: 40%;   
            }
        p {text-align: center; font-family: sans-serif;}
        h1 {text-align: center; color: crimson;}
    </style>
    <script>
        var diametro = Number(prompt('Inserte diámetro de la rueda:')); var grosor = Number(prompt("Inserte grosor de la rueda "));
    </script>
   
</head>
<body>
<div>
    <script>
    if (diametro == "" || grosor == "" ) {
        document.write("<h1>Error: Debes ingresar el diámetro y el grosor de una rueda.</h1>");
       
    } else {
       
    if (diametro > 1.8) {
        document.write("<p>La rueda es para un vehículo grande.</p>")
    } else if (diametro <= 1.8 && diametro > 0.8) {
        document.write("<p>La rueda es para un vehículo mediano.</p>");
       
       
    } else {
        document.write("<p>La rueda es para un vehículo pequeño.</p>")
    }
    if (diametro > 1.8 && grosor < 0.4 || diametro <= 1.4 && diametro > 0.8 && grosor < 0.25) {
        document.write("<p>El grosor para esta rueda es inferior al recomendado</p>");
    }
   
    }
</script>
   
</div>
</body>
</html>

9
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Javascript operadores lógicos y comparar variables que contienen NaN CU01117E
« en: 31 de Enero 2016, 23:53 »
Dejo la respuesta al ejercicio CU01117E.

Primer código:

Código: [Seleccionar]
<DOCTYPE html>
<html>
<head>
<title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function mostrarMensaje1() {
    var A = 5, B = 3, C = -12;
   
    alert("Valor de A > B: " + (A>3));
    alert("Valor de A>C: " + (A>C));
    alert("Valor de A < C: " + (A<C));
    alert("Valor de B < C: " + (B<C));
    alert("Valor de B!=C: " + (B!=C));
    alert("Valor de A == 3: " + (A==3));
    alert("Valor de A*B == 15: " + (A*B==15));
    alert("Valor de A*B==-30: "+(A*B==-30));
    alert("Valor de C / B < A: " + (C/B<A));
    alert("Valor de C/B == -10: " + (C/B==-10));
    alert("Valor de C/B==-4: "+(C/B==-4));
    alert("Valor de A + B + C == 5: "+(A+B+C==5));
    alert("Valor de (A+B == 8) && (A-B == 2): " + (A+B==8&&A-B==2));
    alert("Valor de (A+B==8) || (A-B==6): " + (A+B==8 || A-B==6));
    alert("Valor de A>3&&B>3&&C<3: " +(A>3&&B>3&&C<3));
    alert("Valor de A > 3 && B >= 3 && C < -3: " + (A>3&&B>=3&&C<-3));
}
</script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">
<p onclick ="alert("Alerta JavaScript")" style="background-color:yellow;">Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web.
</p>
</div>
</body>
</html>
Segundo código:

Código: [Seleccionar]
<html>
<head>
<title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
function mostrarMensaje1() {
    var a = "pepe", b = "elefante";
    alert("Forzamos a que de un valor NaN: " + (a*b));
    alert("Comparación a == b: " + (a==b));
    alert("Comparación a === b: " + (a===b));
    alert("Comparación a !== a: " + (a!==a));
}
</script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img onclick="mostrarMensaje1()" src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">
<p onclick ="alert('Alerta JavaScript')" style="background-color:yellow;">Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web.
</p>
</div>
</body>
</html>

10
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Javascript no funciona suma de números al intentar sumar se juntan unen CU01116E
« en: 31 de Enero 2016, 17:19 »
Buenos días a todos  :D :D

Tengo la posible respuesta a la resolución: CU01116E.Pero tuve un inconveniente, en la parte donde se deben sumar los números, no se suman, en vez de eso se juntan.

Código: [Seleccionar]
<DOCTYPE html>
<html> <head> <title>Curso JavaScript aprenderaprogramar.com</title> <meta charset="utf-8">
<script type="text/javascript">
    var numero1 = prompt("Lanza el primer número"), numero2 = prompt("Lanza el segundo número"), resultado = numero1 + numero2;
   
    document.write("<p>El resto de dividir el primer número entre 5: " + (numero1%5) + "</p>");
    document.write("<p>El resultado de divir el primer número con el segundo: " + (numero1/numero2) + "</p>" );
    resultado = numero1+numero2
    document.write("<p>EL resultado de sumar los dos números: " + resultado + "</p>");
   
   
   
</script>
</head>
<body>
<div>
<p>Aquí un párrafo de texto situado antes de la imagen, dentro de un div contenedor</p>
<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">
<p onclick ="alert('Alerta JavaScript')" style="background-color:yellow;">Aquí otro párrafo de texto. JavaScript es un lenguaje utilizado para dotar de efectos dinámicos a las páginas web.
</p>
</div>
</body>
</html>

11
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / ¿Que me conviene aprender antes? PHP o Javascript. ¿Cuáles son las diferencias?
« en: 26 de Enero 2016, 17:04 »
Me gustaría saber que debería aprender a programar antes: PHP o Javascript.

¿Cuáles son las diferencias entre ambos? ¿Y qué beneficios tiene uno de otro?

12
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Degradados CSS. Efecto lineal y radial color que va cambiando Ejercicio CU01060D
« en: 24 de Enero 2016, 22:31 »
Dejo la respuesta al ejercicio CU01060D.

Código: [Seleccionar]
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8" />

<style type="text/css">

    div {
        margin: 50px auto auto auto; border: 2px solid black; width: 400px; height: 200px;
        background: linear-gradient( 25deg, red, white, blue);
    }
   
</style>
</head>

<body>
    <div></div>
</body>
</html>

13
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS crear tabla con efecto esquina redondeada border-radius ejemplo CU01058D
« en: 24 de Enero 2016, 16:19 »
Dejo la respuesta al ejercicio del curso básico de programación web con CSS usando Notepad++ como editor

Código: [Seleccionar]
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8" />

<style type="text/css">
* {margin:0;}
    table {
        background-color: #EBEBEB;
        text-align: center;
        margin: 45px 1px 45px 1px;
        font-size: 1.3em;
        float:left;
        border-radius: 3%;
        font-family:cursive;
    }
    #tabla3 {
        background-color: #E1F3C3;
    }
    .incluye {
        color: #7EE57E;
        font-weight:900;
        text-shadow: 1px 1px green, -1px -1px green;
    }
    .noincluye {
        color: #FF6F71;
        font-weight: 900;
        text-shadow: 1px 1px red, -1px -1px red;
    }

   
    th, td {
        padding: 15px 50px 15px 50px;
        margin:20px;
        border-bottom: 1px solid #CDCDCD;
    }
    tfoot th {
        border-bottom-style: hidden;
    }
</style>
</head>

<body>
<table id="tabla1">
<thead>
<tr>
<th>Standard</th>
</tr>
</thead>
<tbody>
<tr class="incluye">
<td>&#10003;</td>
</tr>
<tr class="incluye">
<td>&#10003;</td>
</tr>
<tr class="noincluye">
<td>&#10008;</td>
</tr>
        <tr class="noincluye">
<td>&#10008;</td>
</tr>
    <tbody>
        <tfoot>
            <th>$99</th>
        </tfoot>
</table>
   
<table id="tabla2">
<thead>
<tr>
<th>Professional</th>
</tr>
</thead>
<tbody>
<tr class="incluye">
<td>&#10003;</td>
</tr>
<tr class="incluye">
<td>&#10003;</td>
</tr>
<tr class="incluye">
<td>&#10003;</td>
</tr>
        <tr class="noincluye">
<td>&#10008;</td>
</tr>
    </tbody>
    <tfoot>
            <th>$199</th>
        </tfoot>

</table>

<table id="tabla3">
<thead>
<tr>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr class="incluye">
<td>&#10003;</td>
</tr>
<tr class="incluye">
<td>&#10003;</td>
</tr>
<tr class="incluye">
<td>&#10003;</td>
</tr>
        <tr class="incluye">
<td>&#10003;</td>
</tr>
    </tbody>
    <tfoot>
            <th>$399</th>
        </tfoot>

</table>
</body>
</html>

Intenté hacerlo lo más parecido que pude, pero no pude conseguir el tipo de fuente.

14
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Estilos CSS para tablas ancho de tabla y anchura de celdas bordes CU01051D
« en: 23 de Enero 2016, 00:59 »
Dejo la respuesta del siguiente ejercicio acá.

HTML:
Código: [Seleccionar]
<html>
    <head> <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>

    <body>
        <table id="tabla1">
            <caption>Tabla 1</caption>
   <thead>
<tr>
<th>Alimento</th>
<th>Calorías (kCal)</th>
<th>Grasas (g)</th>
<th>Proteina (g)</th>
            <th>Carbohidratos (g)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Arándano</td>
<td>49</td>
<td>0.2</td>
<td>0.4</td>
            <td>12.7</td>
</tr>
<tr>
<td>Plátano</td>
<td>90</td>
<td>0.3</td>
<td>1.0</td>
            <td>23.5</td>
</tr>
<tr>
<td>Cereza</td>
<td>46</td>
<td>0.4</td>
<td>0.9</td>
            <td>10.9</td>
</tr>
        <tr>
<td>Fresa</td>
<td>37</td>
<td>0.5</td>
<td>0.8</td>
            <td>8.3</td>
</tr>
        <tr>
<td>Mandarina</td>
<td>44</td>
<td>0.2</td>
<td>0.6</td>
            <td>9.2</td>
</tr>
        <tr>
<td>Banana</td>
<td>90</td>
<td>0.33</td>
<td>1.09</td>
            <td>22.84</td>
</tr>
</tbody>
</table>
        <table id="tabla2">
            <caption>Tabla 2</caption>
   <thead>
<tr>
<th>Nombre</th>
            <th>Apellido</th>
<th>Teléfono</th>
<th>Dirección</th>
<th>Edad</th>
           
</tr>
</thead>
<tbody>
<tr>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
            <td>Pellentesque habitant</td>
</tr>
<tr>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
            <td>Pellentesque habitant</td>
</tr>
<tr>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
            <td>Pellentesque habitant</td>
</tr>
        <tr>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
            <td>Pellentesque habitant</td>
</tr>
        <tr>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
            <td>Pellentesque habitant</td>
</tr>
        <tr>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
<td>Pellentesque habitant</td>
            <td>Pellentesque habitant</td>
</tr>
</tbody>
</table>
        <table id="tabla3">
            <caption>Tabla 3</caption>
   <thead>
<tr>
<th>verbum significatium</th>
<th>verbum significatium</th>
<th>verbum significatium</th>
<th>verbum significatium</th>
            <th>verbum significatium</th>
</tr>
</thead>
<tbody>
<tr>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
            <td>verbum significatium</td>
</tr>
<tr>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
            <td>verbum significatium</td>
</tr>
<tr>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
            <td>verbum significatium</td>
</tr>
        <tr>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
            <td>verbum significatium</td>
</tr>
        <tr>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
            <td>verbum significatium</td>
</tr>
        <tr>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
<td>verbum significatium</td>
            <td>verbum significatium</td>
</tr>
</tbody>
</table>
    </body>
</html>
CSS:

Código: [Seleccionar]
table {
    text-align: center;
}
#tabla1 {
    width: 600px;
    border: 8px solid gray;
    border-collapse: collapse;
}

#tabla1 th, #tabla1 td{
    width: 20%;
    border: 8px solid gray;
    border-collapse: collapse;
}

#tabla2 {
    margin-top: 20px;
    width: 100%;
    border: 2px solid brown;
}

#tabla2 td, #tabla2 th {
    width: 20%;
    border: 2px solid brown;
}

#tabla3 {
    margin-top: 20px;
    width: 500px;
    border-bottom: 6px solid blue;
    border-collapse: collapse;
}

#tabla3 td, #tabla3 th {
    width: 100px;
    border-bottom: 6px solid blue;
    border-collapse: collapse;
}

15
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS selector nth-of-type font-family tipografía font-variant. Ejercicio CU01045D
« en: 21 de Enero 2016, 02:06 »
Dejo el correspondiente código al ejercicio CU01045D del curso de CSS.

HTML:
Código: [Seleccionar]
<!DOCTYPE html>
    <html>
        <head>
            <title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
            <style type="text/css">
            /*  El CSS se encuentra en la pestaña de abajo*/
</style>
        </head>
        <body>
            <div id="caja1"> <!-- Primera caja -->
                <p>HTML nació públicamente en un documento llamado HTML Tags (Etiquetas HTML), publicado por primera vez en Internet por Tim Berners-Lee en 1991. En esta publicación se describen 22 etiquetas que mostraban un diseño inicial y relativamente simple de HTML. Varios de estos elementos se conservan en la actualidad. Otros se han dejado de usar, y muchos otros se han ido añadiendo con el paso de los años. De esta manera, podemos hablar de que han existido distintas versiones de HTML a lo largo de la historia de internet. Nosotros vamos a trabajar con el HTML estándar actual, que es el utilizado por los navegadores y páginas web de hoy en día. Sin embargo, no vamos a prestarle atención a las versiones y especificidades de cada versión, ya que el objetivo de este curso es aprender los fundamentos de HTML y entender cómo funciona, no conocer la sintaxis o especificidades de una versión concreta. ¿Por qué no le damos importancia a la versión? Porque una persona que cuenta con los fundamentos y comprensión básica sobre el lenguaje es capaz de adaptarse a las características particulares de una versión sin problema. En cambio, centrarse en los detalles de una versión sin conocer los fundamentos hará que no tengamos capacidad para comprender lo que hacemos ni para adaptarnos a los continuos cambios que tienen lugar en el ámbito de los desarrollos web.</p>
                <p>¿Qué ocurriría si una etiqueta que abramos no tiene su correspondiente cierre? Digamos que se trataría de un código HTML mal construido, y los navegadores esto lo pueden interpretar de distintas maneras. Quizás nos muestren la página tal y como esperábamos sin aparente error. Quizás nos muestren una página de error o se quede en blanco el navegador. Nuestro objetivo ha de ser siempre construir páginas HTML bien estructuradas y sin ambiguedades, es decir, hacer un correcto uso del lenguaje para que los navegadores puedan saber exactamente qué es lo que pretendemos mostrar.</p>
            </div>
            <div id="caja2">
                <p>CSS es un lenguaje utilizado en la presentación de documentos HTML. Un documento HTML viene siendo coloquialmente “una página web”. Entonces podemos decir que el lenguaje CSS sirve para organizar la presentación y aspecto de una página web. Este lenguaje es principalmente utilizado por parte de los navegadores web de internet y por los programadores web informáticos para elegir multitud de opciones de presentación como colores, tipos y tamaños de letra, etc.</p>
                <p>La filosofía de CSS se basa en intentar separar lo que es la estructura del documento HTML de su presentación. Por decirlo de alguna manera: la página web sería lo que hay debajo (el contenido) y CSS sería un cristal de color que hace que el contenido se vea de una forma u otra. Usando esta filosofía, resulta muy fácil cambiarle el aspecto a una página web: basta con cambiar “el cristal” que tiene delante. Piensa por ejemplo qué ocurre si tienes un libro de papel y lo miras a través de un cristal de color azul: que ves el libro azul. En cambio, si lo miras a través de un cristal amarillo, verás el libro amarillo. El libro (el contenido) es el mismo, pero lo puedes ver de distintas maneras.</p>
                <p>Algunas opciones básicas del lenguaje CSS por ejemplo pueden ser el poder cambiar el color de algunas típicas etiquetas HTML como  (h1 es una etiqueta en el lenguaje HTML destinada a mostrar un texto como encabezado, en tamaño grande). Pero también hay funciones algo más complejas, como introducir espaciado entre elementos (div es una etiqueta HTML para identificar una determinada región o división de contenido dentro de una página web) o establecer imágenes de fondo.</p>
            </div>
            <div id="caja3">
                <p>
                    La respiración humana, como la de todos los animales terrestres, está basada en la absorción del aire atmosférico que está formada por una mezcla de oxigeno, nitrógeno y dióxido de carbono,  así como otros elementos (algunos contaminantes) en diversa proporción. Sin embargo, esta no es la única mezcla respirable por el hombre. De hecho, son harto conocidos los sketches televisivos en que se inhala helio o hexafluoruro de azufre, que si bien son inocuos, producen el efecto secundario de una voz aguda y grave respectivamente.  Ahora bien... una cosa es respirar una mezcla diferente de aire y otra muy diferente respirar un líquido como si se tratase de un pez. Pues, aunque le parezca mentira, si se llena sus pulmones de perfluorocarbono puede respirar como si estuviera en la superficie.
                </p>
                <p>
                    El ahogamiento, en todos los animales exclusivamente terrestres, se produce cuando los pulmones se llenan de agua y estos no pueden obtener el oxigeno del liquido que los rellena. En este caso, los pulmones no están diseñados para poder extraer el oxígeno de un líquido, de tal forma que bajo el agua dejan de estar operativos y el organismo acaba por morir más temprano que tarde.  No obstante, los científicos descubrieron que un compuesto líquido, el perfluorocarbono, tenía la capacidad de ser respirable como si fuera el aire.
                </p>
               
            </div>
        </body>
</html>
CSS:

Código: [Seleccionar]
   *{margin:0; padding:0;}
                div{margin:33px;padding:25px; border: 5px solid red; width: 100%;}
               
                #caja1 {font:18px serif;} /*    Ahora si tiene sentido   */
                #caja1 p:nth-of-type(2) {text-variant: small-caps; text-transform: uppercase; font-variant: small-caps; }
               
                #caja2 {font: 14px sans-serif; color:#B22222;}
               
                #caja3 {font: 36px fantasy;}

16
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS display table-cell Centrar verticalmente imagen, texto Ejercicio CU01043D#
« en: 20 de Enero 2016, 16:12 »
Respuestas para ejercicios de entrega CU01043D del curso de programación web co CSS:

a) ¿Cuántas cajas contenedoras hay? ¿Están identificadas por id o por class o por ninguno de ellos?

R: Hay dos cajas contenedoras, lo cual unas de ellas está identificada por una id y la otra no.

b) Visualiza el resultado en al menos dos navegadores distintos. ¿Qué diferencias observas entre ambos? ¿A qué crees que se deben?

R: En mi caso, probé con Microsoft Edge y Google Chrome. Pude notar que los dos contenedores en Edge se movieron un poco hacia arriba pero esto es debido a que la barra de menú de ambos navegadores tienen diferentes tamaños.

c) ¿Por qué el texto <<Línea de texto contenedor 2>> se muestra centrado verticalmente?

R: En el css, se le asignó la propiedad display:table-cell  que hará que el div se comporte como una celda de tabla y la propiedad vertical-align:middle se encarga de centrar verticalmente el texto que esta dentro de las etiquetas <span> ya que esta propiedad afecta a contenidos inline como lo son las etiquetas <span>

d) Modifica el código para que el texto <<Línea de texto contenedor 1>> se muestre centrado verticalmente.

R: Es muy sencillo, solo hay que cambiar el atributo id tanto en el css como en el html por una class y en el primer contenedor agregar el atributo class="vcent" creando como resultado final que el texto dentro del contenedor 1 se centre.

 
Código: [Seleccionar]
<html>
<head>
<title>Portal web - aprenderaprogramar.com</title> <meta charset="utf-8">
<style type="text/css">
*{font-family: arial; }
div { width: 360px; height: 210px; margin: 10px; padding:5px 20px;
border-style: solid; border-color: red; border-width: thin;
background-color: yellow; text-align: center; float: left;}
.vcent { display: table;  }
.vcent span { display: table-cell; vertical-align:middle;}
</style>
</head>
<body>
<div class="vcent"><span>Línea de texto contenedor 1</span></div>
<div class="vcent"><span>Línea de texto contenedor 2</span></div>
</body>
</html>

17
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS text-transform first-letter, letter-spacing word-spacing Ejercicio CU01042D
« en: 20 de Enero 2016, 14:45 »
Buenos días, dejo la posible solución a este ejercicio.

HTML:
Código: [Seleccionar]

<html>
    <head>
        <title>Ejemplo aprenderaprogramar.com</title>
        <meta charset="utf-8">
        <style type="text/css">
        <!-- El código CSS está en la pestaña de abajo -->
        </style>
    </head>
    <body>
        <div id="div1">
            <P>El div 1 debe contener un texto suficientemente largo, con numerosos párrafos, como para exceder el tamaño del contenedor. El texto del html debe transformarse completamente a mayúsculas mediante el uso de propiedades CSS. La separación entre letras debe ser un 5% superior a lo normal. La primera letra de cada párrafo debe tener un tamaño un 250% lo normal. Relleno Relleno Relleno Relleno Relleno Relleno Relleno Relleno  Relleno Relleno Relleno</P>
       
        </div>
   
        <div id="div2">
            <p> El div 2 debe contener un TEXTO SUFICIENTEMENTE largo como para exceder el tamaño del contenedor. El texto del html debe transformarse completamente a minúsculas mediante el uso de propiedades CSS. La separación entre letras debe ser un 10% superior a lo normal. Debe contener una palabra (cadena de texto cualquiera) de gran longitud, de modo que no quepa en el contenedor, y “romperse” para no exceder la capacidad del contenedor usando la propiedad word-wrap.</p>
        </div>
   
        <div id="div3">
        <p>El div 3 debe contener un texto suficientemente largo como para exceder el tamaño del contenedor. Aprenderaprogramar.com El texto del html debe transformarse para que toda palabra comience con una letra mayúscula mediante el uso de propiedades CSS. La separación entre palabras debe ser un 10% superior a lo normal. Debe contener una palabra (cadena de texto cualquiera) de gran longitud, de modo que no quepa en el contenedor, y no romperse.</p>
        </div>
    </body>
</html>
CSS:
Código: [Seleccionar]
            * {padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:border-box;}
            div {width: 180px; height:300px; margin:33px; border: 6px solid red; display: inline-block; vertical-align:top;}
   
            #div1 {text-transform:uppercase; word-spacing: 5px; }
            #div1 p:first-letter {font-size: 250%;}
   
            #div2 {text-transform: lowercase; letter-spacing: 10px; word-wrap: break-word;}
   
            #div3 {letter-spacing: 10px;}
            #div3 p:first-letter {text-transform: uppercase;}

18
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Crear efectos de sombras en el texto con CSS text-shadow volumen CU01041D
« en: 18 de Enero 2016, 06:17 »
Posible solución al ejercicio de textshadow, text-overflow, line-height.

HTML:
Código: [Seleccionar]
<div id="caja1"> <p>En la <span id="sombra1">primera caja</span> escribire un texto suficientemente largo y sin coherencia. Escribo mas cosas para darle mas relleno a esto, blablablablablabla. Parece ser que el texto de este cuadro se esta superponiendo. HTML, siglas de HyperText Markup Language («lenguaje de marcas de hipertexto»), hace referencia al lenguaje de marcado para la elaboración de páginas web. Es un estándar que sirve de referencia para la elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código
        elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código
        elaboración de páginas web en sus diferentes versiones, define una estructura básica y un código</p>       
    </div>
    <div id="caja2"><p> <span id="sombra2">El relleno</span> es un término televisivo referido a los capítulos de una serie de anime u otro programa en la línea argumental. Estos episodios son hechos normalmente para dar una semana de descanso a los creadores, por lo que la calidad suele ser inferior, como en el caso de muchas series de larga duración entre 2 a 5 años. Otras veces los capítulos de relleno son capítulos centrados en un personaje en concreto y en su vida o también que cambian a otra historia alternativa, aprovechando para darle algo de trasfondo. Este "episodio de personaje" sí puede llegar a ser útil, sobre todo en series donde durante su transcurso "normal" no se puede explorar a los personajes.</p>
    </div>
    <div id="caja3"><p><span id="sombra3">Es un término televisivo</span> referido a los capítulos de una serie de anime u otro programa en la línea argumental. Estos episodios son hechos normalmente para dar una semana de descanso a los creadores, por lo que la calidad suele ser inferior, como en el caso de muchas series de larga duración entre 2 a 5 años. Otras veces los capítulos de relleno son capítulos centrados en un personaje en concreto y en su vida o también que cambian a otra historia alternativa, aprovechando para darle algo de trasfondo. Este "episodio de personaje" sí puede llegar a ser útil, sobre todo en series donde durante su transcurso "normal" no se puede explorar a los personajes.</p>
    </div>
CSS:
Código: [Seleccionar]
*{font-family: arial;}
    div {width: 240px; height: 300px; margin: 18px; padding: 8px; border-style:solid; border-width: 3px; display:inline-block; vertical-align:top; border-color: blue;}
    #caja1 p {overflow: hidden; white-space:nowrap; text-overflow:ellipsis; line-height: 105%}
    #caja2 {line-height: 110%; overflow:hidden;}
    #caja3 p {text-align: justify; line-height: 120%; color: #8B4513;}
    span {font-size: 18px;}
    #sombra1 { text-shadow: 2px 2px 2px red; }
    #sombra2 { text-shadow: -2px 2px blue; }
    #sombra3 { text-shadow: 0px 0px 7px green;}

19
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / CSS y HTML mostrar espacios dentro de un texto pre-wrap text-indent CU01040D
« en: 18 de Enero 2016, 04:29 »
Aquí la posible respuesta al ejercicio mencionado anteriormente en el título.

HTML:
Código: [Seleccionar]
    <div id="caja1">
        Hola, ¿Cómo estas? <span id="subrayado">Soy caja número 1</span> y vine hacer nuevos amigos en este vecindario.
    </div>
    <div id="caja2"> <p>Un texto <span id="subrayadoporencima">     
        suficientemente</span> largo para elaborar cosas extrañas de manera injusta :v</p>
    </div>
    <div id="caja3"> <p>¿Por qué siempre somos el villano del cuento? ¿No podemos ser el héroe?               15 </p>
    </div>
CSS:
Código: [Seleccionar]
*{font-family: arial;}
    div {width: 200px; height: 400px; margin: 20px; padding: 10px; border-style:solid; border-width: 4px; display:inline-block; vertical-align:top;}
    #caja1 {text-align:center; color: #FF6347; text-indent: 10%;}
    #subrayado {text-decoration: underline;}
    #caja2 {text-align: right; color: #008080; text-indent: 50px; white-space:pre-line;}
    #subrayadoporencima {text-decoration: overline;}
    #caja3 {text-align: justify; color: #8B4513; text-indent: 20%; white-space: pre-warp;}

20
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Maquetación de páginas web con float ejercicio CU01036D del curso de CSS
« en: 17 de Enero 2016, 06:15 »
Hola, buenas noches. Aquí traigo la posible solución al ejercicio CU01036D. Me ha costado bastante crear la web, quisiera que me ayuden a entender más a fondo esto del float y el position dándome su opinión personal y explicandome con algunos ejemplos. Gracias.

Index.html
Código: [Seleccionar]
<html>
    <head>
        <title>Portal web - aprenderaprogramar.com</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <h1>Bienvenidos a aprenderaprogramar.com</h1>
        </header>
        <div id="menu">
            <div id="menu_titulo">Menu</div>
            <div id="nav_menu">
                <ul>
                    <li><a href="#">- Cursos</a></li>
                    <li><a href="#">- Humor</a></li>
                    <li><a href="#">- Divulgación</a></li>
                </ul>
            </div>
        </div>
        <div class="contenido">
            <div class="informacion">
                <h2>Javascript 1.7</h2>
                <p>JavaScript 1.7 es una actualización del lenguaje que le añade algunas nuevas características, como generadores, iteradores,                      comprensión de arrays, sentencias let y asignación desestructurada. Evidentemente también incluye todas las características de                    JavaScript 1.6.
                    El soporte para JavaScript 1.7 estará disponible a partir de Firefox 2 Beta 1, así como en compilaciones actuales.
                    Los ejemplos de código incluidos en este artículo pueden ser probados en la consola JavaScript. Si quieres aprender a                              construir o utilizar esta consola, lee Introducción al shell de JavaScript.</p></div>
        </div>
        <div id="publicdad">
        <p>Reservado para publicidad</p>
        </div>
        <div class="contenido" style="background-color:#90EE90">
            <div class="informacion">
                <h2>GMP</h2>
                <p>GIMP (GNU Image Manipulation Program) es un programa de edición de imágenes digitales en forma de mapa de bits, tanto dibujos                    como fotografías. Es un programa libre y gratuito. Forma parte del proyecto GNU y está disponible bajo la Licencia pública                        general de GNU y GNU Lesser General Public License1

                Es el programa de manipulación de gráficos disponible en más sistemas operativos (Unix, GNU/Linux, FreeBSD, Solaris, Microsoft                   Windows y Mac OS X, entre otros).

                La interfaz de GIMP está disponible en varios idiomas, entre ellos: español, inglés (el idioma original), catalán, gallego,                       euskera, alemán, francés, italiano, ruso, sueco, noruego, coreano y neerlandés.
                </p> </div>
       
        </div>
        <div id="footer" style="background-color:#DDA0DD;">
            <div id="contacto">
                <p>Contacta con nosotros: <a href="mailito:ejemplo@ejemplo.com">ejemplo@ejemplo.com</a></p>
            </div>
            <div id="legal">
                <p>Apartir de acá, el aviso legal &copy; 23 a.C - 3871</p>
            </div>
        </div>
    </body>

</html> 

style.css

Código: [Seleccionar]
* { padding: 0; margin:0; font-family: arial;}
h1, h2 {margin: auto; text-align: center; padding: 10px;}
header {background-color:#DEB887; border-style: solid; border-width: 2px; border-color: blue; }
div { border-style:solid; border-width: 2px;}
a {text-decoration: none; color:crimson;}
#menu {float:left; border-color:red; clear:left; height: 62.7%;}
#menu_titulo {text-align: center;}
#nav_menu ul {list-style: none;}
#nav_menu ul li{margin:20px;}
.contenido, #footer {width: 80%; float:left; background-color: #ADD8E6; border-color:green;}
.informacion p, #publicidad p {text-align: center; margin: 30px;}
#publicidad {float: both; border-color:blueviolet; height:700px; display:block;}
#contacto{margin:20px;}
#legal, #contacto {position:relative; left: 20%; display: inline-block; margin-left: 50px; float:both;}
#footer {width:100%;}

Páginas: [1] 2

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".