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.


Mensajes - Chompy129

Páginas: 1 2 3 4 [5] 6 7
81
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript. Crear sumas y restas aprender niños aplicación didáctico educativa
« en: 29 de Septiembre 2016, 21:32 »
De nada pedro! ;D

82
Aprender a programar desde cero / Re:JavaScript. Variables, Tipos de datos primitivos y objetos. Ejercicio CU01112E
« en: 29 de Septiembre 2016, 21:30 »
Ok de ahora en adelante colocare en un HTML :)

83
Aprender a programar desde cero / JavaScript Variables numericas Number, Infinity, potencias. Ejemplo CU01113E
« en: 29 de Septiembre 2016, 09:18 »
Tipos de variables JavaScript: numéricas Number (integer, float, double). Resultados NaN e infinity (CU01113E)

Aquí les dejo el ejercicio CU01113E del curso básico de programación web online:

Código JavaScript
Código: [Seleccionar]
var Redondeo= 0.3 - 0.2;
alert("JavaScript redondeo de forma diferente y obtuvo "+Redondeo+".\nSi somos mas especificos...")

var resultado = (3 - 2) / 10;
alert("Se espera obtener 0.1, y en efecto es "+resultado)

84
Aprender a programar desde cero / JavaScript Variables Diferencias entre tipos datos primitivos y objetos CU01112E
« en: 29 de Septiembre 2016, 07:17 »
Tipos de datos JavaScript. Tipos primitivos y objeto. Significado de undefined, null, NaN. Ejemplos (CU01112E)

¡VOLVÍ! (esta vez en JavaScript). :v

Aquí les dejo el ejercicio CU01112E del curso online de desarrollador web desde cero:

Código JavaScript
Código: [Seleccionar]
var boleano= true + 22;
alert(boleano);

alert(var error2 = false);
Es simple, pero genera el error. Con respecto al booleano, al principio no había entendido el porque del resultado pero luego de experimentar con el descubrí que true en valor numérico equivale a 1 y false en valor numérico vale 0. Gracias por la actividad, descubrí algo que no sabia de los datos booleanos.

PD: El resultado con el true en el código es 23.

85
C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más / Re:JavaScript. Crear sumas y restas aprender niños aplicación didáctico educativa
« en: 29 de Septiembre 2016, 03:54 »
Me parece GENIAL que hagas esto para niños.
No se mucho de javascript (aun). Pero tengo algunas ideas. :)
Por ejemplo:
  • Podrías poner algunas animaciones mas o menos sutiles, por ejemplo cuando se juzga la respuesta.
  • Algunos efectos de sonido(esto depende de que puedas o no).
  • Algún marcador de puntuaciones.
Bueno esas son mis propuestas, no creo que añadirlas sea díficil. :D

86
Aprender a programar desde cero / Re:CSS y HTML.Animación, duration, delay, direction. Ejercicio CU01065D.FINAL CURSO
« en: 29 de Septiembre 2016, 01:38 »
Gracias!
En verdad que el curso fue muy bueno y facil de entender.
Como dije seguiré con javascript, si veo alguna actividad o duda sobre CSS o HTML ayudare en ello. ;D

87
Aprender a programar desde cero / CSS y HTML.Animación, duration, delay, direction. Ejercicio CU01065D Final curso
« en: 28 de Septiembre 2016, 06:20 »
Animation CSS. name, duration, delay, fill-mode, iteration-count, direction, timing-function,play-state (CU01065D)

Encontré este código y me gusto, así que lo pondré aquí: :)

Código HTML
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animación CSS3</title>
<link rel="stylesheet" type="text/css" href="Ejercicio_Animacion_css.css">
</head>
<body>
<div>Una caja div cualquiera. Con una animación.<br><b>Poner mouse encima.</b></div>
</body>
</html>
Código CSS
Código: [Seleccionar]
@-webkit-keyframes desplazar{
    from{-webkit-transform: none; border-radius: 0;}
    to{background-color: #900; color: #EEE;
       -webkit-transform: rotateZ(3deg);                  /*Chrome, Safari, Opera, Ios, Android -webkit */
       -moz-transform: rotateZ(3deg);                     /*Firefox -moz */   /*Opera -o- */
       -ms-transform: rotateZ(3deg);                      /*IExplorer  -ms- */
       transform: rotateZ(3deg);
       border-radius: 10px;
       margin-left: 20%;}
}

div{width: 400px; height: 40px;
    padding: 10px; margin: 20px;
    border: 1px solid #000;
    background-color: #CCC; color: #333;
    cursor: default;}

div:hover{-webkit-animation: desplazar 2s 2 alternate linear forwards;
          -moz-animation: desplazar 2s 2 alternate linear forwards;
          animation: desplazar 2s 2 alternate linear forwards;}
Describe paso a paso qué es lo que indica cada fragmento de código CSS. ¿Es necesario usar prefijos de navegador para lograr su ejecución en otros navegadores?
El uso de prefijos depende del navegador y su versión y de la propiedad en cuestión. Ejemplo: transform, hay algunas versiones en chrome y safari que no pueden ejecutarlas.

@-webkit-keyframes desplazar{
    from{-webkit-transform: none; border-radius: 0;}
    to{background-color: #900; color: #EEE;
       -webkit-transform: rotate(3deg);
       -moz-transform: rotate(3deg);
       -ms-transform: rotate(3deg);
       transform: rotate(3deg);
       border-radius: 10px;
       margin-left: 20%;}}; Se crea una animación llamada "desplazar", inicia sin transformación ni radio en el borde. Y pasa a ser rojo oscuro, con color de fuente casi blanca, se inclina a la derecha unos 3 grados (Se usan prefijos para mejorar la compatibilidad con los navegadores), las esquinas se redondean unos 10px en X(horizontal) y Y(vertical) y se desplaza a la izquierda un 20% el tamaño de la pantalla.

div{width: 400px; height: 40px;
    padding: 10px; margin: 20px;
    border: 1px solid #000;
    background-color: #CCC; color: #333;
    cursor: default;}; Este seria el aspecto por defecto que tendría el contenedor(div), tendría un ancho de 400px, altura de 40px, tendría 10px de relleno en todas direcciones y un margen de 20px en todas direcciones, un borde solido de 1px de grosor color negro, un fondo gris, un color de fuente gris oscuro y al pasar el mouse en el se mostraría el cursor normal.

div:hover{-webkit-animation: desplazar 2s 2 alternate linear forwards;
          -moz-animation: desplazar 2s 2 alternate linear forwards;
          animation: desplazar 2s 2 alternate linear forwards;}; al pasar el mouse encima de un contenedor(div) se activaría en el una animación "desplazar", duraría 2 segundos, al completarse se repetiría pero al revés, su velocidad sería constante y al terminar el contenedor quedaría como cuando empezó(Se usan prefijos para mejorar la compatibilidad con los navegadores).
EXTRA
Este curso fue muy bueno y gracias a el pude aprender a programar un diseño en la web. Felicitaciones a los creadores del curso. También te doy agradecimento pedro por revisar las actividades que he estado enviando.

De aquí investigare un poco mas sobre CSS para ver que otras funciones tiene y empezare el curso de JavaScript desde 0, haci que volvere dentro muy poco (en serio, no tardare nada :v). Gracias a todos. ;D

88
Aprender a programar desde cero / Re:CSS y HTML. Transform: rotate, scale, skew, translate. Ejercicio CU01062D
« en: 28 de Septiembre 2016, 01:06 »
Bueno, es lógico pensar que skew sea su sintaxis corta.
De todas maneras, como siempre, gracias por revisar el ejercicio :D

89
Aprender a programar desde cero / Re:CSS y HTML. linear-gradient, degradados de color en HTML. Ejercicio CU01060D
« en: 28 de Septiembre 2016, 00:46 »
Bueno no me percate que tenia que centrarlo. -.-
Igual, gracias por revisar la actividad. :D

Saludos igual :)

90
Aprender a programar desde cero / CSS y HTML. Animación en CSS puntos clave. @keyframes. Ejercicio CU01064D
« en: 27 de Septiembre 2016, 23:59 »
Animación CSS. Diferencia entre transición y animación. @keyframes: fotogramas o estados clave. (CU01064D)

Aquí esta el código en CSS (como siempre) que dio el curso básico de programador web desde cero:

Código: [Seleccionar]
@keyframes anime{
    0%{ color: #f00;   font-size: 10px;  top: 10px;}
    25%{color: #A52A2A; font-size: 90px; left: 100px;}
    50%{;  color: #000; font-size: 90px; top: -56px}
    100%{color: #A52A2A; font-size: 90px; left: 0; }
}

a) ¿Cuál es el nombre de la animación? ¿Cuántos puntos clave define?

  R= La animación se llama "anime"(que mejor?), define unos 4 puntos clave.


b) ¿Qué ocurrirá (cuál será el cambio de propiedades) durante la animación?

   R= El texto al principio será de color rojo luego cambiara a rojo oscuro, luego a blanco y volverá otra vez a rojo oscuro. El tamaño de la fuente sera de 10px luego cambiara y se mantendrá en 90px hasta el final de la animación. En cuanto a su posición, empezara 10px alejado de la parte superior, luego se moverá a la derecha unos 100px, bajara a unos 56px alejado de la parte superior y volverá a estar a 0px alejado del lateral izquierdo.


c) ¿Es equivalente usar 0% en lugar de from? ¿Y 100% en lugar de to?

   R= Si, es equivalente tanto para from y to. Pero no se si se interpretara de forma correcta el código (debería hacerlo).

91
Aprender a programar desde cero / CSS y HTML Animaciones ejemplo Transition-property, transition-duration CU01063D
« en: 27 de Septiembre 2016, 23:00 »
Animaciones CSS. transition-property, transition-duration, timing-function y efecto delay. Ejemplos. (CU01063D)

Aquí les dejo el código en CSS dado por el curso bases de la programación web para principiantes:

Código: [Seleccionar]
#transEj1 div {   transition:all 2s ease-in-out;   perspective: 800px;   perspective-origin: 50% 100px; }
#transEj1:hover #rotateX {  transform:rotateX(180deg);}
#transEj1:hover #rotateY {  transform:rotateY(180deg);}
#transEj1:hover #rotateZ {  transform:rotateZ(180deg);}
Y ahora les dejo mi código en HTML en base a lo que muestra el código CSS:
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Transiciones</title>
<link rel="stylesheet" type="text/css" href="transition.css">
</head>
<body>
<div id="transEj1" style="width: 600px; height: 200px; margin: 30px auto;">
<div id="rotateX" style="float: left; width: 30%; height: 200px; background: radial-gradient(#CCC, #555); margin-left: 3%"></div>
<div id="rotateY" style="float: left; width: 30%; height: 200px; background: radial-gradient(#CCC, #555); margin-left: 3%"></div>
<div id="rotateZ" style="float: left; width: 30%; height: 200px; background: radial-gradient(#CCC, #555); margin-left: 3%"></div>
</div>
</body>
</html>
#transEj1 div {   transition:all 2s ease-in-out;   perspective: 800px;   perspective-origin: 50% 100px; }; Todos los elementos div que se encuentren dentro de un contenedor con id="transEj1" tendrán una transición para todos los atributos, durará dos segundos y su velocidad empezará lento pero después se normalizara hasta el final de la transición; el contenido 3d de "transEj1" se verá en una perspectiva de 800px; esa perspectiva se basa en 50% en la vertical y 100px en la horizontal.

#transEj1:hover #rotateX {  transform:rotateX(180deg);}; Las siguientes propiedades afectan al elemento id="rotateX" cuando el mouse se coloca encima del elemento padre con id="transEj1". Rotara unos 180 grados usando como base el eje X (gira hacia adelante).

#transEj1:hover #rotateY {  transform:rotateY(180deg);}; Las siguientes propiedades afectan al elemento id="rotateY" cuando el mouse se coloca encima del elemento padre con id="transEj1". Este rotara unos 180 grados también, solo que este usara de base el eje Y (gira a la derecha).

#transEj1:hover #rotateZ {  transform:rotateZ(180deg);}; Las siguientes propiedades afectan al elemento id="rotateZ" cuando el mouse se coloca encima del elemento padre con id="transEj1". Este rotara 180 grados pero usando de base a Z (profundidad). (girara de frente)

92
Aprender a programar desde cero / CSS y HTML efectos dinámicos Transform: rotate, scale, skew, translate CU01062D
« en: 27 de Septiembre 2016, 19:52 »
Efectos CSS. transform: rotate, scale, skew y translate. Rotar, escalar, sesgar, trasladar. Ejemplos. (CU01062D)

Aquí les dejo el codigo CSS dejada por el curso, ejercicio CU01062D del tutorial de programación web:

Código: [Seleccionar]
#caja{width:75%; margin: auto;}#skew,#scale,#rotate,#translate,#rotate-skew-scale-translate{width: 150px; margin: 50px; padding: 10px; background-color: red; border-style: solid;}/*esto es mio*/

#skew {   transform:skew(35deg); }
#scale {  transform:scale(1,0.5); }
#rotate {   transform:rotate(45deg); }
#translate {   transform:translate(10px, 20px); }
#rotate-skew-scale-translate {   transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px); }
También les dejo mi código HTML para poder visualizarlo:
Código: [Seleccionar]
<html>
<head>
<title>Transform</title>
<link rel="stylesheet" type="text/css" href="Transform.css">
</head>
<body><div id="caja">
<div id="skew"><img src="http://i.imgur.com/afC0L.jpg" alt="Error en la imagen"></div>
<div id="scale"><img src="http://i.imgur.com/afC0L.jpg" alt="Error en la imagen"></div>
<div id="rotate"><img src="http://i.imgur.com/afC0L.jpg" alt="Error en la imagen"></div>
<div id="translate"><img src="http://i.imgur.com/afC0L.jpg" alt="Error en la imagen"></div>
<div id="rotate-skew-scale-translate"><img src="http://i.imgur.com/afC0L.jpg" alt="Error en la imagen"></div>
</div>
</body>
</html>
#skew {   transform:skew(35deg); }; el elemento cuya id sea "skew" sesgará 35 grados en la horizontal (Se vera como inclinado).

#scale {  transform:scale(1,0.5); }; el elemento cuya id sea "scale" tendrá un tamaño a escala de 1 vez su anchura y 0.5 veces su altura.

#rotate {   transform:rotate(45deg); }; El elemento cuya id sea "rotate" girara 45 grados a la derecha.

#translate {   transform:translate(10px, 20px); }; El elemento cuya id sea "translate" se movera desde su posición original, 10px hacia abajo y 20px hacia la derecha.

#rotate-skew-scale-translate {   transform:skew(30deg) scale(1.1,1.1) rotate(40deg) translate(10px, 20px); }; El elemento cuya id sea "rotate-skew-scale-translate" (que id tan larga   :-\) sesgará 30 grados en la horizontal (mas o menos inclinado), tendrá 1.1 veces su ancho y 1.1 veces su altura, girara a la derecha unos 40 grados y se moverá desde su posición original 10px hacia abajo y 20px a la derecha.

93
Aprender a programar desde cero / CSS y HTML. radial-gradient, border-image borde personalizado Ejercicio CU01061D
« en: 27 de Septiembre 2016, 18:31 »
Efectos CSS. radial-gradient tipo circle o ellipse. border-image: bordes personalizados. Ejemplos (CU01061D)

Aquí les dejo este otro ejercicio CU01061D del manual de programación web desde cero con CSS:

Código HTML(CSS Interno)
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bordes y más degradado</title>
<style type="text/css">
#caja{width: 400px; height: 200px;
  background: radial-gradient(#FF0, #FFA033, #F00);
  border: 15px solid transparent;
  border-image: url(https://s-media-cache-ak0.pinimg.com/564x/b0/e0/c8/b0e0c8b53eb13e6b7591829585afb95b.jpg) 80 round;}
</style>
</head>
<body>
<div id="caja"></div>
</body>
</html>

94
Aprender a programar desde cero / CSS y HTML. linear-gradient, degradados de color en HTML efectos CU01060D
« en: 27 de Septiembre 2016, 17:58 »
Degradados CSS. Efecto lineal y radial. linear-gradient. Angulos CSS: unidades deg, grad, turn, rad. (CU01060D)

Aquí les dejo el ejercico CU01060D del curso bases de la programación web con CSS:

Código HTML(CSS Interno)
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Degradación de color</title>
<style type="text/css">
#Caja1{width: 400px; height: 200px;
   margin: 50px; border: 3px solid #000;
   background: linear-gradient(25deg, #F00, #FFF, #00F);}
#Caja1:hover{background: linear-gradient(205deg, #F00, #FFF, #00F);}
</style>
</head>
<body>
<div id="Caja1"></div>
</body>
</html>
PD: Le agregue un efecto :hover porque creí que el ejercicio era muy sencillo. :P

95
Aprender a programar desde cero / HTML y CSS cómo redondear esquinas de contenedores tabla border-radius CU01058D
« en: 26 de Septiembre 2016, 07:16 »
Efecto CSS esquinas redondeadas: border-radius. border-left-top-radius. Ejemplos círculo o elipse (CU01058D)

Bueno, logre que fuera "CASI" igual (o al menos eso pienso). Aquí les dejo una imagen de referencia:



Y aquí les dejo el codigo, ejercicio CU01058D del curso de bases de la programación web con CSS:

Código HTML
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Border-radius</title>
<link rel="stylesheet" type="text/css" href="tablas.css">
</head>
<body>
<table class="tabla-destacada">
<thead>
<th>Standard</th>
<th>Professional</th>
<th>Enterprise</th>
</thead>
<tbody>
<tr>
<td><img src="https://axelname.ru/static/i/ok2.png"></td>
<td><img src="https://axelname.ru/static/i/ok2.png"></td>
<td><img src="https://axelname.ru/static/i/ok2.png"></td>
</tr>
<tr>
<td><img src="https://axelname.ru/static/i/ok2.png"></td>
<td><img src="https://axelname.ru/static/i/ok2.png"></td>
<td><img src="https://axelname.ru/static/i/ok2.png"></td>
</tr>
<tr>
<td><img src="https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/delete_16x16.gif"></td>
<td><img src="https://axelname.ru/static/i/ok2.png"></td>
<td><img src="https://axelname.ru/static/i/ok2.png"></td>
</tr>
<tr>
<td><img src="https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/delete_16x16.gif"></td>
<td><img src="https://cdn2.iconfinder.com/data/icons/aspneticons_v1.0_Nov2006/delete_16x16.gif"></td>
<td><img src="https://axelname.ru/static/i/ok2.png"></td>
</tr>
</tbody>
<tfoot>
<th>$99</th>
<th>$199</th>
<th>$399</th>
</tfoot>
</table>
</body>
</html>
Código CSS
Código: [Seleccionar]
/*ESTILOS DE TABLA*/
/*General*/
.tabla-destacada{width: 575px; border-spacing: 1px; font-family: arial, sans-serif; color: #444;}

.tabla-destacada td,
 .tabla-destacada th{width: 33%; padding: 15px;
background-color: #E5E5E5;
text-align: center; font-size: 20px;}

.tabla-destacada td:last-child,
 .tabla-destacada th:last-child{background-color: #DDEFBF;}
/*FIN General*/

/*Por partes*/
.tabla-destacada thead th{border-bottom: 1px groove #FFF;
  border-radius: 10px 10px 0 0}

.tabla-destacada tbody td{border-bottom: 1px groove #FFF;}

.tabla-destacada tfoot th{border-radius: 0 0 10px 10px;}
/*FIN Por partes*/
/*FIN ESTILOS DE TABLA*/

96
Aprender a programar desde cero / Re:HTML y CSS. Tablas en css, diseño. Ejercicio CU01052D
« en: 26 de Septiembre 2016, 03:52 »
Bueno si, pude hacerlo...  :P
Pero bueno, creo que lo importante del ejercicio es que haya comprendido todo en el código; de todas formas como siempre Pedro por revisar la actividad. ;D

También te envió saludos. :)

97
Aprender a programar desde cero / HTML y CSS. column-count, column-rule, interpretar código. Ejercicio CU01057D
« en: 26 de Septiembre 2016, 03:02 »
Columnas CSS: column-count, column-width, columns, colum-gap y colum-rule. Ejemplos prácticos (CU01057D)

Bueno, aquí les dejo el código de la actividad:
Código: [Seleccionar]
.cols3 {
  -webkit-column-count: 3;  -webkit-column-gap: 20px;   -webkit-column-rule: 1px solid #000;
  -moz-column-count: 3;   -moz-column-gap: 20px;  -moz-column-rule: 1px solid #000;
  column-count: 3;  column-gap: 20px;  column-rule: 1px solid #000;
 }
 
 .cols3 h1 {   -webkit-column-span:all;   -moz-column-span:all;   column-span:all;
 }
ACTIVIDAD
Explica paso a paso a qué da lugar cada instrucción o fragmento de código (ejemplo: .cols3 indica que se aplicarán los estilos definidos a todos los elementos html cuyo atributo class sea igual a cols3, -webkit-column-count: 3; se escribe para lograr que …).

 ¿Qué utilidad tiene la propiedad column-span?
R=

Antes que nada responderé para que se usa column-span. La verdad que esta propiedad no termine de entenderlo bien, pero creo que se trata de una propiedad que especifica el número de columnas de un elemento debe extenderse a lo largo.
Ahora el código:

Clase "cols3". Todo contenedor que use esta clase contara con tres columnas, separados entre 20px, y aparte los separan border de 1px, solidos y de color negro. (Las propiedades anteriormente mencionadas tienen compatibilidad con versiones anteriores de mozilla[-moz-], Chrome, Safari, Android y Ios[-webkit-] y con las versiones actuales)

Tag "cols3 h1". Todo encabezado que este dentro de un contenedor con clase "cols3" estará en todo el ancho del contenedor sin importar las columnas en medio.

98
Aprender a programar desde cero / HTML CSS Atributo Cursor modificar el puntero visible ratón Ejercicio CU01054D
« en: 25 de Septiembre 2016, 21:58 »
cursor CSS. Tipos. Efectos hover: move, no-drop, resize, not-allowed, crosshair, progress, wait. (CU01054D)

 ;) Aquí esta la actividad CU01054D del curso Bases de la programación web con CSS:

Código HTML (página 1)
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tipos de cursor</title>
<link reL="stylesheet" type="text/css" href="cursor.css">
</head>
<body>
<div id="div1">
<a href="">¿El tomate es una fruta o un vegetal?</a><br><br>
<a href="">¿Avatar es animación o anime?</a><br><br>
<a href="">¿Los caballos tienen uñas?</a><br><br>
<a href="">¿Són necesarias estas preguntas?</a>
</div>
<div id="div2">
<a href="Ejercicio_Cursor-pag2.html" title="AUMENTAR IMAGEN" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/en/8/86/Avatar_Aang.png" width="200px" height="300px" alt="Avatar.png"></a>
</div>
</body>
</html>
Código CSS
Código: [Seleccionar]
/*DATOS GENERALES*/
*{font-family: "Lucida Fax", "Lucida sans", sans-serif;}

/*Links*/
a:link, a:visited{color: #6BB0FF; text-decoration: none; font-weight: 700;}
a:hover{color: #3A78FF;}

/*Div*/
div{float: left; margin: 25px; padding: 0;
width: 200px; height: 300px; border: 5px solid violet;}

#div1 a{cursor: help;}
#div2 a{cursor: zoom-in;}
Código HTML (Página 2)
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Avatar - Imagen aumentada</title>
</head>
<body>
<img src="https://upload.wikimedia.org/wikipedia/en/8/86/Avatar_Aang.png" alt="avatar.png" width="600px">
</body>
</html>

99
Aprender a programar desde cero / HTML y CSS. Tablas en css, diseño. Cómo interpretar código Ejercicio CU01052D
« en: 25 de Septiembre 2016, 05:52 »
Diseño tablas CSS. border-spacing, caption-side, empty-cells. Colores de filas intercalados alternos (CU01052D)

Aquí esta el código CSS ejercicio resuelto CU01052D del tutorial de bases de la programación web:

Código: [Seleccionar]
/* Curso CSS aprenderaprogramar.com */
table {  color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border-collapse: collapse;}
td, th { border: 1px solid transparent; height: 30px; }
th { background: #D3D3D3; font-weight: bold; }
td { background: #FAFAFA; text-align: center; }
tr:nth-child(even) td { background: #F1F1F1; } 
tr:nth-child(odd) td { background: #FEFEFE; }
tr td:hover { background: #666; color: #FFF; }
RESOLVER
a) Describe cuál es el efecto que genera cada una de las especificaciones que hemos incluido en el código CSS (Ejemplo: color: #333 da lugar a que se muestren todos los textos dentro del elemento table con color #333333, que es un color gris oscuro. Font-family: Helvetica, Arial, sans-serif; da lugar a que …).
   R=

TABLE
Color: #333; Hace que toda la fuente cambie a color #333.
font-family: Helvetica, Arial, sans-serif; Hace que la fuente de la letra sea en Helvetica; si este no es aceptado se usara arial y si este tampoco es aceptado se usara sans-serif(Una fuente derivativa).
width: 640px; Hace que su ancho sea de 640px.
border-collapse: collapse; Hace que todos los bordes se fusionen.

TD, TH (Los siguientes afectan a ambos)
border: 1px solid transparent; Crea un borde transparente a su alrededor, solido, de un píxel de grosor.
height: 30px; Hace que su altura sea de 30px.

TH
background: #D3D3D3; Hace que su color de fondo sea #D3D3D3.
font-weight: bold; Hace que la fuente tenga mas grosor.

TD
background: #FAFAFA; Hace que su color de fondo sea #FAFAFA.
text-align: center; Hace que el texto se alinee al centro.

tr:nth-child(even) td
background: #F1F1F1; Hace que sus colores de fondo sean #F1F1F1.

tr:nth-child(odd) td
background: #FEFEFE; Hace que sus colores de fondo sean #FEFEFE.

tr td:hover (Pasar el mouse encima)
background: #666; Hace que su color de fondo cambie a #666.
color: #FFF; Hace que el color de la fuente cambie a blanco.

b) Indica qué modificación habría que hacer en el código para que se muestren bordes dobles con grosor 2 píxeles.
   R=
  En esta linea "td, th { border: 1px solid transparent; height: 30px; }" cambiar el 1px por 2px y cambiar transparent por black o #000.

Luego en esta linea "table {  color: #333; font-family: Helvetica, Arial, sans-serif; width: 640px; border-collapse: collapse;}" cambiar border-collapse: collapse por "separate".
c) Indica qué modificación habría que hacer en el código para que se muestren bordes simples de color naranja de grosor 3 píxeles.
   R=
  Es parecido a la respuesta de la pregunta b, solo que hay que cambiar "border: 1px solid transparent" por "border: 3px solid orange o #FFA500"; y mantener "border-collapse: collapse"

100
Aprender a programar desde cero / HTML y CSS Border-collapse. Tablas y su estructura bordes Ejercicio CU01051D
« en: 24 de Septiembre 2016, 03:54 »
Estilos y herencia CSS en tablas. Width, height, font-size y overflow en tablas. border-collapse (CU01051D)

Aquí esta el ejercicio ya resuelto CU01051D del curso Bases de la programación web con CSS:

Código HTML(CSS interno)
Código: [Seleccionar]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Border-collapse</title>
<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
<style type="text/css">
/*DATOS GENERALES*/
*{font: 1em "Ubuntu", arial, sans-serif;}
caption{font-size: 1.5em; font-weight: 800; font-style: italic;}

/*Estilos de tablas*/
#T-estilo1{width:600px; border-collapse: collapse;}
#T-estilo1 tr th, #T-estilo1 tr td{width: 20%; border: 8px solid gray;}

#T-estilo2{width: 100%; border: 2px solid brown;}
#T-estilo2 tr th, #T-estilo2 tr td{width: 20%; border: 2px solid brown;}

#T-estilo3{width: 500px; border-collapse: collapse; border-bottom: 6px solid #00F;}
#T-estilo3 tr th, #T-estilo3 tr td{width: 100px; border-bottom: 6px solid #00F;}
</style>
</head>
<body>
<!--Una tabla de 5 columnas y 7 filas-->
<table id="T-estilo1">
<caption>Calificaciones</caption>
<tr>
<th>Persona</th>
<th>Matemáticas</th>
<th>Ciencias</th>
<th>Biologia</th>
<th>Química</th>
</tr>
<tr>
<td>Antonio</td>
<td>15</td>
<td>13</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>Juan</td>
<td>18</td>
<td>18</td>
<td>14</td>
<td>18</td>
</tr>
<tr>
<td>Maria</td>
<td>15</td>
<td>14</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>Miranda</td>
<td>20</td>
<td>20</td>
<td>09</td>
<td>15</td>
</tr>
<tr>
<td>Soka</td>
<td>18</td>
<td>17</td>
<td>16</td>
<td>20</td>
</tr>
<tr>
<td>Vanessa</td>
<td>14</td>
<td>17</td>
<td>08</td>
<td>18</td>
</tr>
</table>
<table id="T-estilo2">
<caption>Calificaciones</caption>
<tr>
<th>Persona</th>
<th>Matemáticas</th>
<th>Ciencias</th>
<th>Biologia</th>
<th>Química</th>
</tr>
<tr>
<td>Antonio</td>
<td>15</td>
<td>13</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>Juan</td>
<td>18</td>
<td>18</td>
<td>14</td>
<td>18</td>
</tr>
<tr>
<td>Maria</td>
<td>15</td>
<td>14</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>Miranda</td>
<td>20</td>
<td>20</td>
<td>09</td>
<td>15</td>
</tr>
<tr>
<td>Soka</td>
<td>18</td>
<td>17</td>
<td>16</td>
<td>20</td>
</tr>
<tr>
<td>Vanessa</td>
<td>14</td>
<td>17</td>
<td>08</td>
<td>18</td>
</tr>
</table>
<table id="T-estilo3">
<caption>Calificaciones</caption>
<tr>
<th>Persona</th>
<th>Matemáticas</th>
<th>Ciencias</th>
<th>Biologia</th>
<th>Química</th>
</tr>
<tr>
<td>Antonio</td>
<td>15</td>
<td>13</td>
<td>17</td>
<td>18</td>
</tr>
<tr>
<td>Juan</td>
<td>18</td>
<td>18</td>
<td>14</td>
<td>18</td>
</tr>
<tr>
<td>Maria</td>
<td>15</td>
<td>14</td>
<td>18</td>
<td>19</td>
</tr>
<tr>
<td>Miranda</td>
<td>20</td>
<td>20</td>
<td>09</td>
<td>15</td>
</tr>
<tr>
<td>Soka</td>
<td>18</td>
<td>17</td>
<td>16</td>
<td>20</td>
</tr>
<tr>
<td>Vanessa</td>
<td>14</td>
<td>17</td>
<td>08</td>
<td>18</td>
</tr>
</table>
</body>
</html>

Páginas: 1 2 3 4 [5] 6 7

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".