Muchas veces la diferencia entre un codigo limpio y accesible que nos permite modificar el Look&Feel de un componente web o sencillamente "hacer lo que se pueda por el paciente" esta en la correcta estructuracion del HTML.
A lo largo de mi carrera, he pasado por diversas etapas, desde usar tablas para distribuir contenidos, pasando por la tipica conversion de imagenes de Fireworks para Dreamweaver y mostrar el site cargado de imagenes hasta el uso de div's, clases y Id's para darle look&feel a todo y posicionar todo en la interfaz de usuario.
Ha sido un largo y a veces, por que no?, tortuoso camino del cual he aprendido ciertas cosas:
1) Las secciones se estructuran a traves de la etiqueta (div)
2) Los contenidos de texto se estructuran a traves de la etiqueta (p)
3) Los diferentes contenidos de una seccion se estructuran con Listas (ul, li)
4) Los resultados de reportes se presentaran en tablas (función para la que han sido creadas)
Hasta aqui todo bien, pero detengamonos en el punto 3 y fijemonos en algo:
Cuando yo quiero jerarquizar contenido (Titulo, Subtitulo, Imagen, Contenido) que opciones tengo:
Tabular todo y mostrar el contenido en diferentes celdas Hacer uso del Divisionismo y crear div's hasta para separar los diferentes parrafosUsar al libre albedrio dentro de un Div etiquetas Perfecto, yo me quedaria con la opcion 3 .... pero que tal si el cliente a ultima hora (y creame que ocurre), decide darle un cambio drastico de posicion, visualizacion o distribucion a una zona de contenido.
A lo largo de mi carrera, he pasado por diversas etapas, desde usar tablas para distribuir contenidos, pasando por la tipica conversion de imagenes de Fireworks para Dreamweaver y mostrar el site cargado de imagenes hasta el uso de div's, clases y Id's para darle look&feel a todo y posicionar todo en la interfaz de usuario.
Ha sido un largo y a veces, por que no?, tortuoso camino del cual he aprendido ciertas cosas:
1) Las secciones se estructuran a traves de la etiqueta (div)
2) Los contenidos de texto se estructuran a traves de la etiqueta (p)
3) Los diferentes contenidos de una seccion se estructuran con Listas (ul, li)
4) Los resultados de reportes se presentaran en tablas (función para la que han sido creadas)
Hasta aqui todo bien, pero detengamonos en el punto 3 y fijemonos en algo:
Cuando yo quiero jerarquizar contenido (Titulo, Subtitulo, Imagen, Contenido) que opciones tengo:
Tabular todo y mostrar el contenido en diferentes celdas Hacer uso del Divisionismo y crear div's hasta para separar los diferentes parrafosUsar al libre albedrio dentro de un Div etiquetas Perfecto, yo me quedaria con la opcion 3 .... pero que tal si el cliente a ultima hora (y creame que ocurre), decide darle un cambio drastico de posicion, visualizacion o distribucion a una zona de contenido.
1-. El hecho de usar tablas me impide bajo toda circunstancia cambiar de posicion algun componente, en el mejor de los escenarios tengo que crear nuevas celdas y divisiones y aguantar los descuadres de medidas que esto genera.
2-. Si use divisiones, estare en una posicion mas privilegiada que con las tablas, pero igual las medidas de los divs y su opcion de flotar me crearan quebraderos de cabeza.
3-. Por ultimo, si use style, y el reposicionar todo eso se puede volver complicado al entrar en el codigo .. sino me creen, hagan la prueba.
Existe una opcion, que aunque parece bastante primitiva, desde el momento que la descubri, cambio mi vida por completo, veamos:Estructurando todo el contenido en listas tengo varios problemas resueltos:
1) La presentacion secuencial de los contenidos esta estructurada y jerarquizada, por lo que puedo con unicamente declarar una clase mover a mi antojo todo el contenido que encierra una lista o sub-lista.
2) En combinacion con la etiqueta de estilo CSS float, puedo usar tanto vertical como horizontalmente el contenido de las listas.
3) A la hora de cambiar look&Feel, el codigo es mas limpio por lo que sera mas legible y por ultimo de fácil comprension.
Desde aqui le animo a que pruebe a hacer por ejemplo una galeria de imagenes basadas en listas, o una barra de navegacion.
No hay comentarios:
Publicar un comentario