Muy buenas! En este post quiero comentarles lo que aprendí el día de ayer con la ayuda de mi amigo y compañero de equipo, en un par de horas.
Sé que para muchos no es útil, o quizás ya lo sepan, pero a mi me sirvió mucho para entender algunas cosas. Empecé por diseñar una página web sencilla (muy sencilla) con Photoshop y Expression Design.
No utilicé ningun framework como 960gridsystem porque mi amigo me recomendó no utilizarlos, ya que así obtendría una web mas a mi medida.
El diseño era este mismo:
La idea era sencilla, pero al no saber absolutamente nada de HTML, (mucho menos HTML5) ni CSS, se ponía difícil. Ahora voy a mostrar capturas del código que fue surgiendo, y para qué sirve cada sección.
Primero lo primero. Asumiendo que uno ya sabe las etiquetas básicas de HTML, y CSS, (son realmente faciles de aprender) puedo pasar a mostrar lo que aprendí 
Bueno, aquí tenemos la primera imagen. Aqui declaramos cual doctype usaremos, y si se fijan, dentro de la etiqueta Head, tenemos dos tags mas: Meta, y Title.
En el meta, indicamos qué juego de caracteres vamos a usar. En este caso, es “utf-8”, correspondiente a HTML5 si no me equivoco.
En “title” estamos indicando que cuando nuestra página comience a cargar, el navegador mostrará, como título de la ventana, y/o pestaña, Lo que indiquemos dentro de las marcas de apertura y cierre. Es decir, mostrará “Boddy Music” (sin comillas) Vamos a la segunda imagen:
Aquí podemos ver un fragmento de código, llamado reset. Esto lo que hace básicamente es suavizar muchas incoherencias del navegador asignando valores exactos a elementos como los márgenes y el relleno, obligando, por ejemplo, a todos los elementos que tengan el mismo tamaño de fuente, y así sucesivamente. Se pueden encontrar resets en la mayoría marcos CSS, y son un buen punto de partida para crear sus propios “estilos”. Por el mismo motivo que no usé ningun framework, usamos este fragmento de código descargable, para continuar con nuestro propio estilo…Igualmente, cada uno puede decidir si usarlo o no, en mi caso, me fue de utilidad.
Tal como vieron en la captura, se puede descargar desde aquí: http://meyerweb.com/eric/tools/css/reset/
Siguiendo con la maqueta de mi diseño, pasamos a la tercera imagen:
Cuando cerramos la etiqueta HEAD, la que sigue es BODY. En esta sección, vamos a desarmar todo esto y voy a tratar de explicar casa sector de la web.
Lo primero que sigue debntro del body, probablemente sea el header. En este caso, el diseño que hice amerita unicamente dos titulos grandes y marcados. Uno será el titulo principal y el otro el “eslogan”.
Las etiquetas “hx” (donde x es un numero) indican el grosor de la fuente que tendrá esa sección. Todo lo que esté dentro de las etiquetas, se vera afectado.
En este caso, use h1 y h2, que son los tamaños mas grandes, ya que necesito diferenciar el titulo del subtitulo, y a la vez, ambos del resto de la página. Aquí una imagen mas clara:
Si presionamos F5, en mi caso (porque usé Expression Web 4), veremos en el navegador, cómo va quedando nuestra web. Obviamente no estará quedando como el diseño, porque no le hemos aplicado estilos aún. Esto veremos mas adelante.
Siguiendo con esta guía orientativa 
ya empezamos con el cuerpo de la web. Es la sección mas amplia, generalmente, y es donde se posicionan la mayoria de los contenidos. Puede ser Estático o dinámico dependiendo de las funciones que la web vaya a tener. Por ejemplo, puede incluir efectos con jQuery…
Una web que desarrollamos tiempo atrás con fines educativos es ésta: http://bit.ly/metrohub aquí pueden ver muchos efectos de movimiento, ocultación, selección y demás logrados con jQuery. (sí, es una red social )
Si miran la imagen de más arriba, pueden ver que despues del header, se creó un elemento llamado section. Con este elemento, cualquier pagina web puede tener varios section.Por ejemplo, una pagina de inicio puede tener una section para introducir una historia, otra para noticias, y otra para contacto. El tag section, es un estandar de HTML5…
Normalmente dentro de las sections, existen articles, otro estandar incluido con HTML5. Los article pueden ser, por ejemplo, un post en un foro, una noticia de diario, una entrada de algun blog, o un comentario hecho por algun usuario.
Una captura mas de cerca:
Aqui podemos apreciar que dentro del section, tenemos un article. En este caso, el article, (horizontal en este caso) está compuesto de dos tags “a” que a la vez son links “clickeables”. Obviamente es una maqueta, y si el usuario clickea estos enlaces, no verá ninguna pagina nueva, porque usamos el valor “#” para indicar que es un link pero que no lleva a ningun lado. Por este codigo se puede deducir que se trata de dos elementos ubicados horizontalmente, y que pretenden redirigirnos a otra seccion de la web en cuanto los clickeemos. (Ver diseño)
Pueden notar que luego de crear el article, añadí “class” y un valor de texto “columna-1”. Los class sirven para poder identificar mas tarde ese elemento con CSS, y aplicarle el estilo que queramos. También incluí un class a cada elemento, pues pienso modificarlos mas adelante para que quede com el diseño que hice.
Y cerramos el article.
Ahora continuamos con el código:
Podemos ver otro article, horizontal también, pero que contiene 3 elementos. Haremos lo mismo que en el anterior ejemplo, nombrando con classes cada uno de los elementos del article.
Continuamos:
Aquí creamos otro article horizontal también, pero solo con un elemento. (Ver diseño) También nombramos con un class este elemento.
Si seguimos, en la foto que subi mas arriba, podemos ver que despues de crear estos 3 articles, cerramos la section.
Esto es porque vamos a empezar con la parte final de la web: el footer.
El footer contiene informacion, normalmente sobre derechos de autor, copyright, y alguno que otro link hacia algun contrato digital y ese tipo de cosas.
Vamos a ver mas de cerca como quedo el nuestro:
El footer por defecot se posiciona debajo de toda la web. Solo queda llenarlo con el contenido que deseemos en este caso informacion legal, y un par de hyperlinks (los tags <a>). Como dije antes, al ser una maqueta no llevan mas que el simbolo “#”.
Acto seguido terminamos cerrando las etiquetas body y html.
SEGUNDA PARTE – ESTILOS
En esta segunda parte, voy a intentar explicar como se aplican estilos al html. Los que sepan mas que yo me podrán corregir si digo algo mal 
Empezamos por el principio, de arriba para abajo, en orden
Cuando uno descarga e inluye el reset en su codigo, este genera ciertos parámetros:
siguiendo el esquema de estos parámetros, vamos a ir agregando estilo a cada seccion de nuestra web. Hay cientos de parámetros para elegir, miles de estilos, formas de programar y diseñar, pero en este caso seran las siguientes:
Primero el body:
aqui nombramos la seccion que queremos editar su estilo, y abrimos y cerramos llaves.Entre las llaves, le indicaremos atributos. Uno sera la fuente que usara todo el body y el fondo que este tendrá. (#fff)
Editaremos el header, indicando su margen y su tamaño. Luego, le decimos que a los elementos del header, h1 y h2, les de determinado tamaño de fuente, grosor de fuente y color, tambien padding superior para separarlos un poco entre si.
Luego de esto, iremos por el section y cada uno de sus elementos. Indicaremos también sus tamaños, su forma, su color de fondo, altura anchura, margenes, hasta que cada elemento quede como queremos.
Lo mismo haremos con el resto de la web:
Awui hay algunos detalles especificos como:
-----text-decoration:
eso sirve para indicar que tipo de “decoracion” va a tener el texto. (subrayado,tachado, etc)
-----hover:
aqui indicaremos que ocurrirá cuando posicionemos el mouse por encima del texto, en este caso, de todos los links <a> que esten dentro del footer.
----section .cuadrado:hover, section .rectangulo:hover:
aqui indicamos que cuando se ponga el cursos sobre el cuadrado de la section, o sobre el rectangulo de la section, sea cual sea, el efecto del hover sera cambiar de background negro a un gris especifico, que es el #999
Al finalizar todo este trabajo, y ver como quedo nuestra maqueta, podremos observar el resultado:
Gracias por leer! Un saludo!
Guillermo Diéguez
Subscribe