Cómo semánticas X/HTML puede ahorrar tiempo cuando vamos a escribir CSS?
-
18-09-2019 - |
Pregunta
Cómo Semánticas X/HTML mark-up puede ahorrar tiempo -
- cuando vamos a escribir CSS para sitio web
- y si alguno de los cambios de diseño viene de cliente en el futuro.
- Y por qué de Mesa basado en diseños tomar más tiempo siempre en los dos condición
Hoy tengo que Explicar estas cosas a los estudiantes.
He de ejemplo pero quiero algo más de buen ejemplo y las ideas para explicar muy bien.
Quiero explicar cuáles son los beneficios Semántico X/HTML mark-up de los desarrolladores punto de vista.
Gracias de antemano
Actualización:
Los beneficios del uso de la semántica de mark-up:
- Será legible en buena manera a la gente ver el documento en un entorno donde CSS no puede ser aplicada.
- Será mucho más fácil para los desarrolladores web para mantener el código, y para separar el contenido (HTML) de presentación (CSS).
- Marcado semántico puede reducir las necesidades de css grupo selectores en algunos casos.
Solución
Desde mi experiencia de trabajo:He tenido varias veces ahora a ver legado de marcado de mi predecesor, o desde totalmente de otras personas (y de hecho una o dos veces de mí mismo).A veces he tenido sólo lo que vino a partir de la visualización de la fuente en un navegador.Mis conclusiones hasta el momento fueron:
Si el autor utiliza marcado semántico la medida de lo posible, junto con clara y lógica de los nombres de clase, era muy fácil y divertida de descubrir la estructura de la página y, por ejemplo, el código de un nuevo widget o reestructurar el diseño de la columna o cosas
Si el autor utiliza la tabla se basa el diseño, y yo también tenía cosas desde el final de la década de los 90 a la vista, es un completo desastre.Usted tiene que averiguar, los cuales fila de la tabla hace qué, de que la celda de la tabla donde pertenece y si usted comienza a pensar que vas a tener un agarre, se han pasado por alto un
rowspan="3"
300lines de marcado anteriormente.Incluso en Firebug puede vuelto loco con una sopa de etiqueta.Añadiendo cosas nuevas aquí puede llegar a ser bastante aventurero.Si va a agregar contenido a una celda de la tabla, y no completamente fijar la anchura y la altura de las cosas nuevas, puede que te encuentres con desagradando brechas de toda la página y olvidar para abrir o cerrar
<td>
s en algún lugar (con 200 errores de validación en la página original que probablemente se pierda algo en algún lugar) puede conducir a una completamente atornillada a la vista.Si el autor utiliza divs y se extiende por todo el lugar, pero no con marcado semántico (es decir, de la escritura
<div class="header1"/>
en lugar de<h1/>
), es aún maneras mejor que la tabla de diseño (en la mayoría de los porque de la mencionada rowspan y colspan y porque hav una posibilidad de que la página no totalmente volar, si hay un</div>
desaparecidos en algún lugar), pero todavía se puede ir loco en el marcado como</div></div> </div> </div> </div> </div></div> </div>
Además, si tuviera que acompaña a una hoja de estilos, era sobre todo un completo desastre, demasiado.La diferenciación entre
.header
,.header1
,div.header_level1
y#middle .h1
te obliga a saltar hacia atrás y adelante entre la hoja de estilos y marcas.
Otros consejos
La principal ventaja, además de la más fiable y controlable código, para los desarrolladores es claro código.Con la escritura semántica XHTML puedes evitar escribir vaga código que va a ser difícil de descifrar por otros desarrolladores o a ti mismo en el futuro.
Es decir. <address>
es mejor para la inclusión de una dirección que el uso de un <div>
(lo cual sucede mucho...), a pesar de tener la misma flexibilidad, el estilo y la mejora de la legibilidad.
- vamos a escribir CSS primera vez, para el sitio web
Cada sitio web tiene diferente aspecto/diseño, tienes que escribir el css para que, por primera vez, a menos que hay una cierta similitud entre sus diseños.
- y si alguno de los cambios de diseño viene de cliente en el futuro.
Usted puede hacer que sus sitios web utilizando el patrón de diseño MVC, esto va a elevar un montón de cambios en el diseño de su sitio.
- Y por qué Tabla diseños basados tomará más tiempo siempre en los dos condición
Debido a su marcado está diseñado de manera que usted tiene que escribir más, mientras que en div diseños basados utilizamos claro y flotador principalmente que hacen un gran trabajo de creación rápida de los diseños.