Web con HTML5 Y CSS3 parte 1

Transcripción

1 Web con HTML5 Y CSS3 parte 1 En este tutorial de creación de una plantilla web basada en HTML Y CSS3, en esta primera parte vamos a ver la estructuración básica del sitio y vamos a utilizar las nuevas etiquetas y vamos a elementos de la semántica basados en HTML5, así que empezar. Lo que vamos a lograr es una plantilla web como la siguiente: Y al final veremos el resultado. Comencemos con la estructuración del documento base en HTML5 1 Doctype Y La Etiqueta Head Bueno, Primero definimos el doctype en su nueva forma, luego abrimos la etiqueta head y colocamos lo que no debe de faltar en un documento web HTML5 es decir las etiquetas básicas del head, a esto agregamos un enlace a la hoja de estilos y un enlace a la librería Modernizar Y añadimos otro enlace a html5shiv para afirmar más la compatibilidad de html5 con los antiguos navegadores. Y sería algo más o menos así el código: <!DOCTYPE HTML> <html lang="es"> <head> <meta charset="utf-8" /> <title>tutos y tips / pagina web en html5</title> <link href="style.css" rel="stylesheet" type="text/css"> <!--[if IE]><script src=" <script src="modernizr min.js"></script> </head> 2 La Etiqueta Body Antes de ocuparnos del contenido primero tenemos que colocar la etiqueta pero le asignamos una clase seria así: <body class="contenedor-general">

2 3 El Header Para el header agregamos la nueva etiqueta <header> dentro de ella colocamos el logo por medio de la etiqueta <figure> y el lema en h1 por medio de la etiqueta <figcaption>, después colocamos un div con la clase redes para meter los logos de las redes sociales y cerramos la etiqueta header. Y quedaría algo así:  <header> <figure class="logo"> <img src="imagenes/logo.jpg" alt="logo" /> <figcaption> <h1>mi Thema en HMTL5</h1> </figcaption> </figure> <div class="redes"> <img src="imagenes/red1.png" alt="redes" /> <img src="imagenes/red2.png" alt="redes" /> <img src="imagenes/red3.png" alt="redes" /> </div> </header>  4 La Etiqueta Nav Para la navegación vamos a utilizar la etiqueta nav conteniendo una lista desordenada con sus respectivo ítem de lista en enlaces. Sería algo así:  <nav> <ul> <li><a href="#">inicio</a></li> <li><a href="#">tutoriales</a></li> <li><a href="#">videos</a></li> <li><a href="#">javascript</a></li> <li><a href="#">html5 y Css3</a></li> <li><a href="#">recursos</a></li> <li><a href="#">administrador</a></li> </ul> </nav>  5 Contenedor O Fondo Del Contenido Para hacer la simulación del fondo del contenido vamos a utilizar un div y lo cerramos antes del footer. <div id="sombra-contenido"> 6 Sección Principal Etiqueta Section. En el siguiente código abrimos una etiqueta section para meter la sección de los artículos y dentro metemos un slider por medio de un div y también un artículo por

3 medio de la etiqueta article y dentro de la etiqueta article hacemos la estructura de un artículo o entrada, es decir un texto de entrada una imagen y los tag de autor, fecha y categoría a la que pertenece ese artículo, podemos duplicar esa etiqueta article para simular varios artículos. Luego cerramos la etiqueta article y la etiqueta section.  <section class="articulos"> <div id="slider"> <img src="imágenes/slider.jpg" alt="slider" /> </div>  <article class="post"> <h2><a href="#">titulo del Post</a></h2> <figure> <a href="#"><img src="imágenes/img-post.jpg" alt="img-post" /></a> </figure> <p class="meta">por <a href="#">admin</a> El <a href="#">30/05/2012.</a> En <a href="#">pruebas</a></p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p> <div class="leermas"><a href="#">leer Mas..</a></div> </article>  </section>  7 Sidebar Por Medio De La Etiqueta Aside Para el sidebar vamos a utilizar la etiqueta aside y vamos a definir los diferentes bloques para cada módulo, para el de publicidad, el buscador, las categorías, y la información importante por medio de un div con una clase bloque aside, dentro de los bloque siempre va un título en un H3 y definimos cada contenido individualmente, unas imágenes para la publicidad, un form con las nuevas propiedades html5 para la búsqueda, una lista para las categorías y un párrafo con una clase para las informaciones importante. Y cerramos la etiqueta aside. Sería algo más o menos así:  <aside> <div class="bloques-aside"> <h3>publicidad</h3> <ul> <li class="publicidad"> <img src="imágenes/publicidad.jpg" alt="publicidad" /> </li>

4 <li class="publicidad"> <img src="imágenes/publicidad.jpg" alt="publicidad" /> </li> <li class="publicidad"> <img src="imágenes/publicidad.jpg" alt="publicidad" /> </li> <li class="publicidad"> <img src="imágenes/publicidad.jpg" alt="publicidad" /> </li> </ul> </div> <div class="bloques-aside"> <h3>buscador</h3> <form class="searchform"> <input type="text" onblur="if (this.value == '') {this.value = 'Buscar...';" onfocus="if (this.value == 'Search...') {this.value = '';" value="search..." class="searchfield"> <input type="button" value="go" class="searchbutton"> </form> </div> <div class="bloques-aside"> <h3>categorías</h3> <ul class="categoría"> <li><a href="#">categoría 1</a></li> <li><a href="#">categoría 2</a></li> <li><a href="#">categoría 3</a></li> <li><a href="#">categoría 4</a></li> <li><a href="#">categoría 5</a></li> <li><a href="#">categoría 6</a></li> <li><a href="#">categoría 7</a></li> </ul> </div> <div class="bloques-aside"> <h3>información Importante</h3> <p class="info"> <img src="imágenes/img-post.jpg" alt="img-post" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis. </p> </div> </aside>  8 El Pie De Página Por Medio De La Etiqueta Footer Y Cierre Del Html

5 Bueno para el pie de página vamos a utilizar la etiqueta <footer> dentro vamos hacer una navegación por medio de una lista desordenada y el copyright, cerramos el footer, cerramos el body y cerramos el html. <footer> <nav class="footer"> <ul> <li><a href="#">inicio</a></li> <li><a href="#">tutoriales</a></li> <li><a href="#">videos</a></li> <li><a href="#">javascript</a></li> <li><a href="#">html5 y Css3</a></li> <li><a href="#">recursos</a></li> <li><a href="#">administrador</a></li> </ul> </nav> 2012 tutosytips.com - un plantilla creada en html5 y css3 </footer> </body> </html> Listo, tenemos la estructura del documento en totalmente en HTML5!

6 Web con HTML5 Y CSS3 parte 2 Ahora vamos a crear los estilos a la estructura que organizamos en el primer tutorial. Así que empecemos. 1 Añadimos los estilos para resetear los estilos de los navegadores /* --- reset de los sstilos de los navegadores ---*/ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; /* --- Fin de reset de los sstilos de los navegadores ---*/ 2 Estilos de la estructura básica Seguimos con la estructura base del documento HTML5, es decir las columnas y cajas que contendrán toda la web. (el body, header, contenido, la sección base, la barra lateral o Aside y el footer) /* --- comienzo de los estilos de la estructura ---*/ body.contenedor-general { font-family: Arial,Helvetica,sans-serif; font-size: 14px; margin: 0 auto; position: relative; width: 1023px; header, nav, section, article, footer { display: block; header{ height: 141px; position: relative; #sombra-contenido { background: url("imágenes/conten-bg.png") no-repeat scroll 0 0 transparent; overflow: hidden; padding: 10px 30px;

7 width: 970px; section.articulos { width: 630px; aside { float: right; margin: 0 10px 0 0; width: 320px; footer { background: none repeat scroll 0 0 #FAFAFA; border-top: 6px solid #CCCCCC; clear: both; padding: 10px; text-align: center; /* -- fin de los estilos de la estructura -- */ 3 Estilos de el header Seguimos aplicando los estilos del contenido del header el logo y el lema en el elemento figure, y los estilos al div con la clase de redes para mostrar los iconos de las redes sociales, les damos a ambos posiciones relativas y uno lo flotamos a la izquierda y el otro a la derecha, dentro de figure que es el logo tenemos figcaption y le aplicamos los estilos al h1 que esta hay y le aplicamos un estilo de sombra con textshadow. /* -- comienzo de los estilos del contenido del header-- */ figure.logo { position: relative; top: 20px; left:20px; figure.logo figcaption h1 { font-size: 21px; color: #fff; text-shadow: 1px 1px 2px #666; text-transform: uppercase; font-size: 25px ;.redes { position: relative; top: 40px; right: 20px; float: right;.redes img {

8 margin: 5px; float:left; /* -- fin de los estilos del header -- */ 4 estilos de la navegación Seguimos con los estilos de la barra de navegación. 1º a la etiqueta nav aplicamos un border radius y un degradado que si no lo sabemos hacer podemos utilizar alguna de las herramientas online para conseguir este efecto y le coloque una imagen de fondo por si falla el degradado la imagen hará este trabajo, luego a los enlaces de las listas es decir a los link le aplique unos estilos para diferenciar y mejorar la apariencia y en el estado hover le aplique un color de fondo y un borde para simular un efecto de rollover. /* -- comienzo de los estilos de la navegación -- */ nav { border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; background-image: url(imágenes/menu-barr.png); background: #fe7021; /* Old browsers */ background: -moz-linear-gradient(top, #fe7021 2%, #fcb088 21%, #fe %, #e %, #d0380c 95%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, colorstop(2%,#fe7021), color-stop(21%,#fcb088), color-stop(41%,#fe7021), colorstop(65%,#e95617), color-stop(95%,#d0380c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fe7021 2%,#fcb088 21%,#fe %,#e %,#d0380c 95%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fe7021 2%,#fcb088 21%,#fe %,#e %,#d0380c 95%); /* Opera */ background: -ms-linear-gradient(top, #fe7021 2%,#fcb088 21%,#fe %,#e %,#d0380c 95%); /* IE10+ */ background: linear-gradient(top, #fe7021 2%,#fcb088 21%,#fe %,#e %,#d0380c 95%); /* W3C */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#fe7021', endcolorstr='#d0380c',gradienttype=0 ); /* IE6-9 */ height: 46px; margin: 0; display: block; nav li { display: block; margin: 5px; nav li a { color: #FFFFFF; font-family: arial; font-weight: bold; line-height: 37px;

9 padding: 12px; text-decoration: none; text-transform: uppercase; nav li a:hover { background-color: #CD3A0C; border: 1px solid #ba1706; /* -- fin de los estilos de la navegación -- */ 5 estilos del contenido del post Bueno lo siguiente es crear los bloques de los post o artículos, utilizamos la etiqueta article, le damos margin y padding, luego nos ocupamos los estilos de la imagen en estado de reposo y en estado hover le damos 8px de borde de ancho en ambos estados, luego los estilos del título en un h2 que es un enlace que lleva al contenido completo del post, luego aplicamos los estilos de los meta, es decir la caja que nos muestra la fecha en que fue escrito, por quien y la categoría a que pertenece, luego al párrafo y el leer más. /* -- comienzo del articulo o el post -- */ article.post { margin: 0; border-bottom: 1px solid #ccc; padding-bottom: 20px; border-top: 1px solid #aaa; padding-top: 20px; overflow: hidden; article.post figure { margin: 10px 10px 0 0; width: 180px; article.post a img { border: 8px solid #ccc; article.post a:hover img { border: 8px solid #de4912; article.post h2 { font-family: Arial, Helvetica, sans-serif; article.post h2 a { color: #888888; font-family: Arial,Helvetica,sans-serif; font-size: 28px; font-weight: bold; margin: 5px;

10 text-decoration: none; article.post.meta { font-family: Arial, Helvetica, sans-serif; font-size: 12px; article.post p.meta { display: block; background: #fafafa; margin: 10px 0; padding: 10px; border-radius: 10px; box-shadow: 1px 2px 2px #ccc; article.post p.meta a { color: #888; text-decoration: none; font-style: italic; article.post p.meta a:hover { color: #DE4912; article.post p { width: 410px; article.post div.leermas { margin: 23px 1px 0; article.post div.leermas a{ color: white; text-decoration:none; font-style:italic; background: none repeat scroll 0 0 #ccc; border-radius: 10px 10px 10px 10px; margin: 5px 0; padding: 10px; article.post div.leermas a:hover { background: none repeat scroll 0 0 #DE4912; /* -- fin del articulo de introduccion -- */

11 6 estilos del contenido del sidebar o Aside Seguimos con el contenido de la barra lateral o aside, tenemos los h3 que son los títulos de los módulos con un background de degradado igual al que le aplicamos al nav, un border radius, le damos un color blanco y otras propiedades más para dar un buen estilo. Luego para el bloque de publicidad colocamos las imágenes de publicidad por medio de una lista y que cada ítem es una imagen le damos un display block y que se floten cada uno a la izquierda del otro, luego para las categorías le damos un color de texto en estado de reposo y otro en hover, seguimos con los estilos de la caja de búsqueda, el bloque de información importante que le damos un estilo al párrafo para darle un padding y un color diferente y el estilo a la respectiva imagen que se va a alinear a la izquierda. /* -- comienzo de la barra latera o aside -- */ aside h3 { background-image: url(imágenes/menu-barr.png); background: -moz-linear-gradient(top, #fe7021 2%, #fcb088 21%, #fe %, #e %, #d0380c 95%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, colorstop(2%,#fe7021), color-stop(21%,#fcb088), color-stop(41%,#fe7021), colorstop(65%,#e95617), color-stop(95%,#d0380c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #fe7021 2%,#fcb088 21%,#fe %,#e %,#d0380c 95%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #fe7021 2%,#fcb088 21%,#fe %,#e %,#d0380c 95%); /* Opera */ background: -ms-linear-gradient(top, #fe7021 2%,#fcb088 21%,#fe %,#e %,#d0380c 95%); /* IE10+ */ background: linear-gradient(top, #fe7021 2%,#fcb088 21%,#fe %,#e %,#d0380c 95%); /* W3C */ filter: progid:dximagetransform.microsoft.gradient( startcolorstr='#fe7021', endcolorstr='#d0380c',gradienttype=0 ); /* IE6-9 */ border-radius: 15px; -webkit-border-radius: 15px; -moz-border-radius: 15px; color: #fff; font-size: 17px; font-weight: bold; margin: -15px 0 15px 0; padding: 10px; text-align: center;

12 aside div.bloques-aside { padding: 10px 0; border: 1px solid #ccc; background: #fafafa; border-radius: 10px; margin: 25px 0; aside li.publicidad { width: 152px; display: block; background: none!important; margin: 3px; aside ul { overflow: hidden; aside ul.categoria li a { text-decoration: none; font-size: 16px; color: #666; aside ul.categoria li a:hover { color: #DE4912; aside ul.categoria li { margin: 10px 30px; padding: 0 10px 5px 0; border-bottom: 1px dotted #555;.searchform { background: -moz-linear-gradient(center top, #FFFFFF, #EDEDED) repeat scroll 0 0 transparent; border: 1px solid #D2D2D2; border-radius: 2em 2em 2em 2em; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1); display: inline-block; padding: 3px 5px; margin: 0 25px;.searchform input { font: 12px/100% Arial,Helvetica,sans-serif;

13 .searchform.searchfield { background: none repeat scroll 0 0 #FFFFFF; border: 1px solid #BCBBBB; border-radius: 2em 2em 2em 2em; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) inset; outline: medium none; padding: 6px 6px 6px 8px; width: 202px;.searchform.searchbutton { background: -moz-linear-gradient(center top, #9E9E9E, #454545) repeat scroll 0 0 transparent; border: 1px solid #494949; border-radius: 2em 2em 2em 2em; color: #FFFFFF; font-size: 11px; height: 27px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6); width: 27px; aside div.bloques-aside p.info { margin: 10px; div.bloques-aside p.info img { width: 100px; height: 100px; margin: 5px 10px; /* -- fin de la barra latera o aside -- */ 7 estilos del contenido del footer Y por ultimo aplicamos los estilos del footer, es decir la navegación con clase footer, sus enlaces y el estado hover da cada ítem. /* -- contenido del footer -- */ nav.footer li a { color: #333; font-weight: normal; line-height: 20px; padding: 10px; font-size: 14px; text-transform: none;

14 nav.footer { background: none repeat scroll 0 0 #CCCCCC; height: 30px; margin: px; padding: 0 18%; nav.footer li a:hover{ background:none; border: none; color: #CD3A0C; /* -- fin del contenido del footer -- */ Y listo, trate de ser muy resumido para no extender este tutorial y también estaba asumiendo que manejabas las hojas de estilos css.