07 junio 2014

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

 

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