[7] Como crear tu pagina web HTML5/CSS3 desde cero - Extras y mejoras

07 junio 2014

[7] Como crear tu pagina web HTML5/CSS3 desde cero - Extras y mejoras

    6 comentarios

Publicaciones relacionadas: 

Hasta que por fin llegó el día del último tutorial, los abandoné estos 2 últimos días puesto que estaba trabajando en algunas mejoras que le hice a la pagina web con la que estamos trabajando. Podría decirse que me esmeré lo suficiente para traerles en este tutorial un contenido de calidad, y comentarles ademas, que mejoras se les pueden hacer muchas, infinidades, así que no te quedes con solo lo que hoy te daré, también, estaré dejando los archivos y recursos de la página listos para que los descarguen, y así trabajen de manera directa sobre el archivo que llevo yo en mi computador.

Antes de empezar a mostrar codigos, solo quiero comentar que este tutorial no se trata mas que de dar estilos extras a lo que ya llevamos de manera que luzca mucho mejor, eso es lo que queremos, ademas, tambien hablarles un poco sobre ciertas y nuevas etiquetas que trajo consigo el HTML5 y que serán aplicables en tu blog. Comenzamos

Elemento Dialog

La etiqueta <dialog> no es mas que un elemento que te permite mostrar una conversación entre dos individuos, en esta era de las redes sociales, como facebook, twitter, whatsapp o BBM puede llegar a ser muy útil y mucho mas divertido para los usuarios.

Codigo HTML (Ejemplo)

                        <dialog>
         <dt id="p1">Samuel</dt>
         <dd id="m1">Knock, Knock.<time>Hace 9 minutos</time></dd>
         <dt id="p2">Eric</dt>
         <dd id="m2">Quien está allí?<time>Hace 8 minutos</time></dd>
         <dt id="p1">Samuel</dt>
         <dd id="m1">Justo.<time>Hace 4 minutos</time></dd>
         <dt id="p2">Eric</dt>
         <dd id="m2">Cual Justo?<time>Hace 3 minutos</time></dd>
         <dt id="p1">Samuel</dt>
         <dd id="m1">Justo a tiempo para la cena!<time>Hace 1 minuto</time></dd>
      </dialog>

Codigo CSS


   dialog {
    width:100%;
    color:#333;
    font-family:Georgia, "Times New Roman", Times, serif;
   }
   dialog dt {
    clear:both;
    width:54%;
    font-family:"Arial", Gadget, sans-serif;
    font-size:11px;
    text-transform:uppercase;
    font-weight:bold;
    padding:2px 4px 2px 4px;
    border-top:1px solid #999;
    border-left:1px solid #999;
    border-right:1px solid #999;
    border-radius:9px 9px 0px 0px;
    -webkit-border-radius:9px 9px 0px 0px;
    -moz-border-radius:9px 9px 0px 0px;
    -o-border-radius:9px 9px 0px 0px;
    -ms-border-radius:9px 9px 0px 0px;
   }
   dialog dd {
    clear:both;
    width:54%;
    font-size:14px;
    padding:2px 4px 2px 4px;
    margin-left:0px;
    margin-bottom:13px;
    border-bottom:1px solid #999;
    border-left:1px solid #999;
    border-right:1px solid #999;
    border-radius:0px 0px 9px 9px;
    -webkit-border-radius:0px 0px 9px 9px;
    -moz-border-radius:0px 0px 9px 9px;
    -o-border-radius:0px 0px 9px 9px;
    -ms-border-radius:0px 0px 9px 9px;

   }
   dialog dt#p1 {
    background: linear-gradient(#EEE, #CCC);
    background: -webkit-linear-gradient(#EEE, #CCC);
    background: -moz-linear-gradient(#EEE, #CCC);
    background: -o-linear-gradient(#EEE, #CCC);
    background: -ms-linear-gradient(#EEE, #CCC);
    box-shadow:2px 0px 4px #333;
    -webkit-box-shadow:2px 0px 4px #333;
    -moz-box-shadow:2px 0px 4px #333;
    -o-box-shadow:2px 0px 4px #333;
    -ms-box-shadow:2px 0px 4px #333;
   }
   dialog dt#p2 {
    background: linear-gradient(#666, #333);
    background: -webkit-linear-gradient(#666, #333);
    background: -moz-linear-gradient(#666, #333);
    background: -o-linear-gradient(#666, #333);
    background: -ms-linear-gradient(#666, #333);
    text-align:right;
    color:#EEE;
    float:right;
    box-shadow:-2px 0px 4px #333;
    -webkit-box-shadow:-2px 0px 4px #333;
    -moz-box-shadow:-2px 0px 4px #333;
    -o-box-shadow:-2px 0px 4px #333;
    -ms-box-shadow:-2px 0px 4px #333;

   }
   dialog dd#m1 {
    background: linear-gradient(#CCC, #EEE);
    background: -webkit-linear-gradient(#CCC, #EEE);
    background: -moz-linear-gradient(#CCC, #EEE);
    background: -o-linear-gradient(#CCC, #EEE);
    background: -ms-linear-gradient(#CCC, #EEE);
    box-shadow:2px 2px 4px #333;
    -webkit-box-shadow:2px 2px 4px #333;
    -moz-box-shadow:2px 2px 4px #333;
    -o-box-shadow:2px 2px 4px #333;
    -ms-box-shadow:2px 2px 4px #333;
   }
   dialog dd#m1 time {
    display:block;
    font-family:"Arial", Gadget, sans-serif;
    font-size:8px;
    text-transform:uppercase;
    padding:3px 0px 3px 0px;
    text-align:right;
   }
   dialog dd#m2{
    background: linear-gradient(#333, #666);
    background: -webkit-linear-gradient(#333, #666);
    background: -moz-linear-gradient(#333, #666);
    background: -o-linear-gradient(#333, #666);
    background: -ms-linear-gradient(#333, #666);
    text-align:right;
    float:right;
    color:#EEE;
    box-shadow:-2px 2px 4px #333;
    -webkit-box-shadow:-2px 2px 4px #333;
    -moz-box-shadow:-2px 2px 4px #333;
    -o-box-shadow:-2px 2px 4px #333;
    -ms-box-shadow:-2px 2px 4px #333;
   }
   dialog dd#m2 time {
    display:block;
    font-family:"Arial", Gadget, sans-serif;
    font-size:8px;
    text-transform:uppercase;
    padding:3px 0px 3px 0px;
    text-align:left;
   }

Hemos definido una clase para cada persona del elemento, de manera que el dialogo se divida en dos tipos de burbujas como se muestra en la imagen



Elemento Figure y Figcaption

Las etiquetas <figure> y <figcaption> no es mas que una representación de una imagen con una leyenda, texto informativo o un subtitulo si así prefiere llamarlos, dentro de <figure> deberá ir todo el contenido que deseas introducir, y dentro de <figcaption> el texto informativo, recordemos que la etiqueta <figcaption> debe abrir y cerrar dentro las las etiquetas <figure>...</figure>

Codigo HTML

<figure>
                         <img src="imagenes/adn.jpg" />
                         <figcaption>El ADN en los seres humanos</figcaption>
                        </figure>

Codigo CSS


   figure {
    background:#999;
    padding-left:7px;
    padding-right:7px;
    border:1px solid #CCC;
    border-radius:4px 4px 4px 4px;
    box-shadow:2px 2px 4px #333;
   }
   figure figcaption {
    font-size:13px;
    text-align:center;
    color:#333;
    padding:2px 2px 2px 2px;
   }

y tenemos esto


Elemento Mark

Podría llamarse una sustitución del SPAN, y muestra simplemente un texto resaltado

Codigo HTML (ejemplo)

<mark>Texto resaltado</mark>

Codigo CSS


   mark {
    background:linear-gradient(#EEE, #CCC);
    font-size:16px;
    padding:2px 2px 2px 2px;
    box-shadow:2px 2px 4px #333, -2px -2px 4px #333;
   }
Y así quedaría


Elemento Details/Summary


Al hacer clic sobre el elemento, despliega una sección que mostrará todo contenido que introduzca dentro de el

Codigo HTML (ejemplo)

                          <details>
         <summary>Muestrame/Ocultame</summary>
         <p>Texto u elementos que se mostrarán al hacer clic sobre el elemento</p>
        </details>

Codigo CSS

   details {
    background:linear-gradient(#EEE, #CCC);
    font-family:'Raleway', sans-serif;
    font-size:14px;
    padding:4px 4px 4px 8px;
    color:#333;
    border-radius:4px 4px 4px 4px;
    box-shadow:2px 2px 4px #333;
   }
   details summary {
    font-weight:bold;
    font-size:18px;
    padding:4px 2px 4px 8px;
    transition:all ease-out .3s;
   }

y así se vera


Hay gran cantidad de nuevos elementos en HTML5 como la integración de audio y vídeo sin necesidad de usar flash player u otro, sin embargo, hasta aqui llego este tutorial, solo fue una pequeña muestra de algunas mejoras que he hecho, espero que les haya gustado la serie de tutoriales, y hasta la próxima.

Descargar archivos y recursos

Enlaces para compartir en tu blog o pagina web.




Widget por Friki Bloggeo


6 comentarios :

  1. Anónimomayo 01, 2015 9:59 p. m.

    Maestro!! Gran punto de partida para comenzar a programar con HTML5 y CSS... Saludos desde Chile

    ResponderEliminar
    Respuestas
    1. Anthony Medinaagosto 13, 2015 3:17 p. m.

      me contenta que lo veas asi, saludos desde Venezuela mi amigo!!

      Eliminar
  2. Anónimojulio 30, 2015 5:06 p. m.

    Buena Tarde. He visto tu blog y de verdad que es lo que buscaba, me servirá de mucho. me haz salvado la vida. pero tengo una duda enorme, soy principiante y me gustaria saber como integrar todo ese codigo para construir mi pagina web. espero me puedas ayudar. Gracias

    ResponderEliminar
    Respuestas
    1. Anthony Medinaagosto 13, 2015 3:16 p. m.

      si te sirve en el ultimo tutorial de esta serie, puedes descargar el proyecto entero, lo unico que harias es sustituir lo que quieras cambiar, cualquier cosa, dejame tu comentario aca, saludos

      Eliminar
  3. Anónimoseptiembre 08, 2016 7:32 p. m.

    AMIGO QUE GRAN TUTORIAL MUCHAS GRACIAS
    DESDE COLOMBIA KEVIN

    ResponderEliminar

Suscribirse a: Enviar comentarios ( Atom )