Explicar por qué el estilo no se debe hacer directamente en HTML

ItamarG3 08/15/2017. 12 answers, 2.942 views
lesson-ideas web-development html css

Hace poco noté que se ha desaprobado de html según este sitio . A partir de esta respuesta en Stack Overflow , el reemplazo de marquesina está hecho de CSS. La explicación dada al cambio es que html se trata de la estructura del documento, y que el diseño y la animación y el estilo, etc. deben hacerse desde CSS.

Esto me hizo pensar:

¿Enseñaría explícitamente la diferencia entre establecer el atributo de style de una etiqueta html y hacerlo a través de CSS útil para aumentar la comprensión de los estudiantes de la unión de CSS y HTML?

Para reducirlo, estoy buscando ejemplos o explicaciones de cómo la enseñanza explícitamente podría facilitar a los estudiantes el estilo de sus páginas web . Preferiblemente una explicación.

Al "enseñar explícitamente", lo que quiero decir es dedicar una lección con el título de "Estilo a través de .CSS", o algo similar.

Algún contexto, si es necesario:

Los estudiantes aprenden diseño web básico: HTML, JavaScript (muy básico), JSP y SQL. Aprenden esto durante 1 año y al final del año deben tener un sitio web (para el cual reciben calificaciones). Me pregunto si una lección completamente sobre CSS podría eventualmente conducir a sitios web con mejor aspecto.

5 Comments
3 Puppy 07/30/2017
El problema principal aquí es que está asumiendo que el estilo no se debe hacer directamente en HTML, y que usar CSS es mejor. Ninguna de esas cosas es verdad.
ItamarG3 07/31/2017
@Puppy bien, parte de la pregunta es si debo enseñarlo por separado. Si no lo hago, entonces no usarán hojas de estilo. ¿Pero crees que cualquier sitio web en cualquier lugar realmente codifica todo lo CSS en html? Every div tiene una montaña de código en su atributo de style ?
1 David Spence 07/31/2017
Este sitio muestra el poder de mantener css por separado. csszengarden.com - Misma estructura, hoja de estilos CSS diferente.
ItamarG3 07/31/2017
@DavidSpence lindo. Definitivamente usaré eso
1 no comprende 07/31/2017
Hagas lo que hagas, no les muestres esta publicación SO sobre el análisis de HTML con Regex . Podría darles pesadillas!

12 Answers


richard 07/30/2017.

Me gusta la idea de producir algunas hojas de estilo y hacer que los alumnos las apliquen a su HTML. Luego pueden ver el poder de tener hojas de estilo separadas.

Luego pueden comenzar a editar las hojas de estilo, y ver que el poder de un pequeño cambio puede cambiar cada título, o cada párrafo, etc.

También he escrito en el pasado un archivo HTML que tenía un conjunto de botones en la parte inferior. Estos botones activarán un archivo CSS diferente para ser cargado. Fue un JavaScript muy simple.

Para responder deben mantenerse separados

W3 y muchos otros recomiendan mantener el estilo y el contenido por separado. Implementa la separación de preocupaciones y la responsabilidad individual. Ambos patrones muy importantes en el diseño de software.

Para responder, deberías dedicar una lección a separar los archivos CSS.

Sí. Si es importante mantener estos separados, que es, entonces debe enseñar a los alumnos a mantenerlos separados. Ahorre tiempo al no enseñarles a mezclarlo con el HTML (Esto ahorrará tiempo dos veces, ya que no tendrá que desentonarlo).


Solo he hecho esto con una o dos personas (no una clase).

5 comments
ItamarG3 07/30/2017
Ese segundo párrafo suena especialmente útil. Pero eso no responde si realmente debería dedicar una lección para enseñar cómo y por qué uno debería escribir una hoja de estilo css, en lugar de atributos de style html en línea.
richard 07/30/2017
Se agregó una respuesta parcial a If y why para dedicarle una lección.
1 Buffy 07/30/2017
Estoy de acuerdo en que no enseñar es un uso especialmente derrochador del tiempo de todos. Lo mejor es detectar conceptos erróneos antes de que se creen y refuercen los malos hábitos.
1 richard 07/30/2017
@tim, esto es solo una optimisation carga. Conceptualidad, debería permanecer separado. Sin embargo, Google dice ponerlo en el mismo archivo. No dicen que debas estilizar cada bit por separado. Están diciendo tomar lo que podría estar en un archivo css y agregarlo a la sección <style> del html.
1 Darren 07/31/2017
En lugar de dar a los estudiantes una variedad de hojas de estilo que afectan su código, probaría el enfoque opuesto. Después de enseñarles estilos en línea en HTML, deles una página que dependa de un documento CSS para su estilo y pídales que creen su propia hoja de estilo (usando las mismas técnicas que aprendieron al usar el código HTML en línea, solo una cuestión de etiquetar los estilos). y juntarlos en un solo lugar). Luego, todos en clase pueden comparar sus hojas de estilo en un tema de prueba común (el que proporcionó) y ver las posibilidades.

Buffy 07/30/2017.

Si solo desea crear una página que sea simple y ad-hoc y que nunca cambiará en el futuro y que solo se verá en un tipo de dispositivo, entonces, claro, construya el estilo directamente en html. Es lo mismo cuando escribe un programa que solo se ejecutará una vez en un dispositivo para obtener una respuesta, luego de lo cual el programa queda obsoleto. Entonces, no hay razón para codificar cuidadosamente. "Rápido y sucio" funciona para tales cosas.

However cosas cambian y las páginas web se visualizan en dispositivos con distintos tamaños de pantalla e incluso en modelos de color. Y pueden verse en el futuro en dispositivos que aún no existen.

Entonces, si desea construir sitios que son importantes y duraderos y que deben mantenerse en el futuro, use CSS. Probablemente no escribirías un programa C importante en main , pero al menos, factorizaría las cosas que deben ser iguales pero que se reutilizan. En la programación simple de C, tenemos en cuenta las funciones para esto. En html, tenemos en cuenta el estilo. En un nivel más profundo, el lado del servidor también considera muchos de los datos, etc. Esto permite que las cosas que se supone son las mismas, permanezcan iguales y nos permite modificar un nivel de diseño independientemente de otros niveles.

Esto no es exactamente lo mismo, pero mira el código subyacente de la página principal de Google. No sé qué usan para armarlo y mantenerlo, pero dudo que sea solo un editor de texto. Tenga en cuenta que su página principal , aunque increíblemente simple en el diseño, cambia con frecuencia.

Note to the Instructor Cuando esté listo para calificar el trabajo del alumno, visualícelo en varios dispositivos, con diferentes resoluciones de pantalla. Sin embargo, no sugiero que también les pidas que proporcionen css por dispositivo.

Para el caso, vea algunas de las páginas de StackExchange en un escritorio frente a un teléfono. Y para una sorpresa, mira tanto la fuente como las hojas de estilo de algunas de las páginas.

2 comments
1 Luke Sawczak 07/31/2017
La comparación con las funciones es buena. Supongo que el pecado en cuestión está suministrando atributos de estilo directamente en el código fuente HTML. Si es así, podría ser comparado con tomar el cuerpo de un método y simplemente pegar eso donde ibas a llamar al método. Contraproducente en el extremo.
no comprende 08/01/2017
¡Para una sorpresa real, mira la fuente y las hojas de estilo de las páginas de Microsoft y Moodle! Pueden ser cientos de líneas de largo. El concepto original de HTML era que funcionaría en dispositivos que "todavía no existen". Y actualmente hay tantos tamaños de pantalla que podría ser simplemente una variable.

AnoE 07/30/2017.

Para que realmente entiendan lo que puedes hacer con CSS solo, con only sustituir otro archivo CSS, llévalos al CSS Zen Garden . Con exactamente el mismo HTML para cada página, y only el archivo .css reemplazado, obtienes páginas absurdamente alocadas. Desde la pequeña nada serena a los cubos de desplazamiento en 3D ...

Luego explíqueles que el conjunto de habilidades necesario para hacer el HTML, frente al conjunto de habilidades para (especialmente extremo), el CSS es muy diferente, y que el HTML funciona solo como el portador de información.

Otra ventaja sería instalar un lector de pantalla (para ciegos) - hay algunos con uso libre limitado - para mostrarles cómo se ve el mismo HTML cuando se habla en voz alta.

También señale que esas herramientas para personas con discapacidad visual pueden, por ejemplo, extraer textos de enlace, etc., del HTML si están bien estructurados, y esto también permite navegar por una página solo con el teclado, lo que puede ser útil si uno está tan inclinado, incluso si la vista está bien.

Finalmente, señale que una página con buena separación de contenido y estilo tiene más posibilidades de funcionar en dispositivos portátiles; la palabra clave es diseño receptivo, donde el contenido puede fluir libremente a cualquier resolución según sea necesario.


thehayro 07/30/2017.

Para reducirlo, estoy buscando ejemplos o explicaciones de cómo la enseñanza explícitamente podría facilitar a los estudiantes el estilo de sus páginas web. Preferiblemente una explicación.

Como dice Richard, los alumnos pueden ver cómo una simple edición del estilo puede cambiar cada elemento.

Como ejemplo, puede dejar que sus alumnos "sientan" el beneficio de la separación del estilo del html. Lo que significa, darles un ejercicio, donde necesitan peinar algunos elementos (por ejemplo, colorear el fondo del elemento) en su html. Luego, permite que cambien cada elemento a otro color. La lección sería hacerles entender que esta tarea puede consumir menos tiempo si separa el estilo del html. A continuación, puede demostrar cómo cambiar una línea en el CSS, que cambia todos los elementos de color de fondo.

4 comments
thesecretmaster♦ 07/30/2017
¡HI thehayro! Bienvenido a Educadores de Informática !
Puppy 07/30/2017
Alternativamente, podrían generar su HTML a través del código como una persona cuerda, en cuyo caso, es trivial cambiar el color de cada elemento sin hojas de estilo separadas.
1 thehayro 07/30/2017
Por supuesto. Eso depende de los requisitos donde debe mostrarse la página web (móvil / computadora de escritorio). Pero la pregunta hasta donde yo lo entendía, era cómo explicar por qué y cómo hay una necesidad de una separación de HTML y CSS.
no comprende 08/01/2017
Cuando estaba aprendiendo CSS, me di la tarea de crear un tablero de ajedrez de tamaño considerable y un diseño de página canónico de tres columnas con encabezado y pie de página.

SpiritBH 07/31/2017.

Bien, pregúntate: ¿por qué separamos algo en cualquier forma de código?

En casi todos los lenguajes de programación / scripting hay separación y delegación. Hacemos esto para asegurarnos de que podamos hacer un seguimiento más fácil de todo el código y podamos identificar más fácilmente los problemas (que inevitablemente brotarán porque ningún programador es infalible).

Por lo tanto, creo que una lección dedicada sobre CSS es una buena idea, porque les ayuda a entender qué es responsable de qué. Les ayuda a comprender que si todo el HTML es correcto cuando se mira la fuente, pero todo el maquillaje aún está desordenado, es necesario que busquen el CSS.

Además de eso, CSS es grande, flexible y puede hacer mucho más que solo poner un lindo borde alrededor de las cosas. Para mostrar a la clase lo que puede hacer, y lo complejo que puede llegar a ser, conducirá a un punto más profundo en el sentido de que no es prudente mezclar el HTML y el CSS demasiado profundamente.

Al final, la separación de CSS de HTML (o cualquier código para ese asunto) es un desarrollo atticate; no se trata del funcionamiento de la creación (mejor) se trata de que el desarrollador tenga más y más fácil control sobre su creación.

Tal vez con esa nota quieras probar y hacer que la clase controle el trabajo de los demás, esto les ayudará a ver cómo es importante tener un código delegado limpio cuando trabajas en equipo.

1 comments
ItamarG3 07/31/2017
planteas algunos puntos muy interesantes. ¡Gracias! y bienvenidos a Educadores en Ciencias de la Computación

gabe3886 07/31/2017.

Una forma ligeramente diferente de mirarlo podría ser introducir el código DRY (No repetir).

Al usar CSS para hacer el estilo, usted sabe que simplemente agregando una clase a un elemento HTML, el estilo debe tomarse. Si tuvo que agregarlo manualmente, cuando necesita cambiar una parte, necesita cambiar muchas, muchas más.

Para robar una idea de ilustración de W3 Schools , si quería, por ejemplo, que los párrafos tuvieran diferentes colores de fondo, podría hacerlo de esta manera:

Paragraph 1

Paragraph 2

Paragraph 3

Paragraph 4

Pero, si quiero cambiar el orden para que sea 2,4,3,1 pero mantener el color, entonces tengo que cambiar todos los estilos incorporados en cada etiqueta. Si eso está en varias páginas, entonces la carga de trabajo puede ser enorme.

Si lo hice en CSS, puedo hacer lo siguiente:

p:nth-child(odd) {
    background: red;
}

p:nth-child(even) {
    background: blue;
} 

Ahora ya no le importa cuál es el contenido, puedo ordenarlos cómo me gusta y el estilo todavía funciona. Mucho esfuerzo cambiado Ignorando el orden, si quería cambiarlos a colores más sensibles para que sean fáciles de leer, cambio el valor en CSS una vez, y se aplica a cada elemento DOM coincidente.

Más allá de eso (como CSS se puede incrustar en HTML en la etiqueta head), dividirlo en un archivo e incluir eso significa que no tengo que repetir mi (ahora más sensible) CSS en varios archivos, hacia abajo en las estructuras de carpetas para cada página que tengo. Incluyo el archivo CSS en el encabezado y los estilos entran en vigencia. Ahora, si necesito hacer cambios en los colores o agregar estilos adicionales, obtengo los mismos beneficios de no tener que duplicar lo que tenía al no usar estilos en línea.

Otro beneficio de tener un archivo separado, lejos de las responsabilidades divididas, es el rendimiento. Los navegadores son bastante buenos para almacenar en caché los archivos, por lo que si tiene que descargar un único archivo CSS (idealmente modificado) para el sitio una vez que puede volver a aplicar, es una cosa menos que se descargue para otras páginas. El rendimiento siempre debe ser una consideración para las personas, especialmente con el aumento de la navegación móvil. Si una página web tiene mucho CSS, la fuente es, por supuesto, grande. Esto demora más tiempo en descargarse y / o volverse utilizable, lo que puede alejar a las personas y la espera se vuelve inaceptable para ellos.


ncmathsadist 08/01/2017.

Enseñamos que hay tres capas en una página web: estructura, apariencia y comportamiento. La estructura está determinada por el DOM, que se crea con un marcado HTML5 bien formado. Cuando aprendemos sobre HTML, inmediatamente comenzamos a dibujar el árbol de documentos, para que podamos entender cómo los elementos en una página se relacionan entre sí.

La apariencia está determinada por CSS, que accede al DOM para formatear y darle estilo a la página. Esto se guarda en un archivo separado para que pueda ser compartido por un grupo de páginas relacionadas. HTML maneja situaciones ad hoc utilizando id o class . El uso de estos hace que mantener páginas sea más fácil, ya que el estilo para los artículos que llevan estos atributos se hace en one place en un archivo CSS.

La tercera capa es el comportamiento, que debería aparecer en un archivo JavaScript. JavaScript never necesita aparecer en una página, excepto para las funciones de llamada desde el código de manejo de eventos. Incluso esto se puede adjuntar en un archivo JS. Asegúrese de que sus alumnos conozcan los eventos de load y la load anticipada, para que puedan retrasar la invocación del código hasta que existan elementos de página.

Si instala Node, puede ejecutar pruebas de código JS en la línea de comandos y desarrollar suites de prueba para las funciones que ha creado.

Separar las tres capas mantiene las cosas ordenadas y maximiza la reutilización del código.


user1639154 07/31/2017.

Parece que muchas respuestas aquí no abordan el tema de la herencia en el estilo, ya que esto también debería enseñarse. La regla básica es que se aplicará lo último que se leyó.

el primero en cargar suele ser la hoja externa en el encabezado del documento. Una hoja de estilo enlazada en el encabezado del documento será superada por los estilos colocados en línea en el cuerpo html, y estos a su vez también serán anulados por estilos colocados directamente en el elemento DOM. La etiqueta! Important se puede usar para alterar este comportamiento también.

La mayoría colocará todo su CSS en su propio archivo porque es más fácil de mantener y no requerirá tanto trabajo cuando se actualice / cambie.

EDITAR: solo para aclarar un poco más, solo los estilos específicos que coinciden en las clases se chocarán / anularán entre sí, si el en línea agrega un estilo para subrayar el texto, que no está en la clase en la hoja externa para ejemplo, solo agregará ese estilo extra. Las clases no se reemplazan directamente entre sí, sino que se fusionan entre sí.

5 comments
1 ItamarG3 07/31/2017
Guau. Bienvenido a Educadores en Informática . Esto es realmente algo que no había considerado. Me encantaría que pudieras agregar algunos ejemplos o descripciones que muestren eso. (Puedo escribirlos yo mismo, pero estoy más interesado en ver lo que se te ocurre). Esta es realmente una respuesta interesante :)
1 ItamarG3 07/31/2017
No relacionado: ¿por qué no haces nuestro recorrido ? Estoy seguro de que lo encontrarías interesante.
user1639154 07/31/2017
Lo tengo un poco equivocado, primero su hoja de estilo externa, luego los estilos del documento y luego el elemento, mi cerebro nunca está al 100% en un lunes por la mañana. :)
ItamarG3 07/31/2017
perdona y olvida ;). Puedes editar tu respuesta. Hay un botón edit \ vínculo directamente debajo de su respuesta. Mientras lo hace, ¿desea agregar algún ejemplo para demostrar a qué responde su respuesta? Realmente lo convertiría en una respuesta mucho mejor: D
user1639154 07/31/2017
Lamentablemente, no tengo tiempo en este momento. Solo quería mencionar la herencia de css, ya que es un aspecto importante de css.

rackandboneman 08/03/2017.

Haga un proyecto en el que el resultado sea DOS vistas completamente diferentes del same document , por ejemplo, una versión que se ve muy bien en un monitor grande y otra que se ve muy bien en un iPhone.

El uso de una página web no estática, sino de documentos generados por computadora, actualizará aún más el punto, ya que la incorporación de información de estilo en el generador de documentos lo hará visiblemente más complejo: las únicas opciones para alterar el estilo serán cambiar el generator documentos con toda la molestia involucrada o la stylesheet que es exactamente lo que pretendía. Aún mejor: asigne two grupos en rincones separados de la sala para hacer las partes generadoras de documentos y hojas de estilo, y regule cómo se comunican las especificaciones entre las dos.

4 comments
ItamarG3 08/03/2017
Esto es increíble. Guau.
rackandboneman 08/03/2017
Bueno, hazlo creíble entonces.
ItamarG3 08/03/2017
Es increíble porque resuelve un problema con circunstancias que no puedo revelar (material escolar), pero no aborda exactly la cuestión ...
1 rackandboneman 08/03/2017
Ah, y me estoy entrometiendo en la discusión no como un profesor, sino como un profesional de TI. Lo que describí es por qué las cosas se hacen en la práctica, como dice la teoría que quieres enseñar :)

Chris M. 08/02/2017.

Aquí hay muchas buenas respuestas. Un punto que todavía no he visto es que el contenido y el diseño a menudo son creados por personas o equipos separados, por lo que al definir cada uno con sus propias herramientas y lenguaje, permite los flujos de trabajo necesarios por separado.

4 comments
ItamarG3 08/02/2017
Guau. No había pensado en eso. ¿Te importaría ampliar un poco sobre cómo puedo explicar esto en una lección aparte sobre el uso de hojas de estilo CSS?
Chris M. 08/02/2017
Yo usaría una analogía. Los ingenieros automotrices no eligen los colores del automóvil. Los guionistas generalmente no hacen diseño de vestuario.
ItamarG3 08/02/2017
Ya veo. Quizás deberías incluir tales analogías en tu respuesta editando la respuesta.
1 Buffy 08/03/2017
En realidad, es peor que eso. En algunas grandes empresas con una presencia web importante, hay un equipo de estándares que se encuentra por encima de los equipos de contenido y diseño. Si el diseño está a un píxel del estándar, lo hace de nuevo. Un pixel

thesecretmaster 08/03/2017.

Una razón importante por la cual los estilos en línea son malos es la legibilidad del código, simple y llanamente. En este caso, un ejemplo debería ser suficiente para probar su punto:

  
The Title
This is a super great article

Comparado con:

  
The Title
This is a super great article

Además de este ejemplo, sin utilizar clases e identificadores, el DOM es mucho más difícil de manipular mediante javascript y hace que sea imposible utilizar pseudoelementos y algunos de los selectores de CSS realmente agradables, como :nth-child() y :first-child , por nombrar algunos.


Puppy 07/31/2017.

Estaría totalmente en desacuerdo: el estilo debe hacerse directamente en HTML.

El problema principal es que el estilo no es remotamente independiente de la estructura HTML. Simplemente escribir los estilos en un archivo separado físicamente no cambia esto. Un buen ejemplo es el soporte de dispositivos móviles. En teoría, podrías hacer un archivo CSS móvil. Pero en realidad, es probable que necesite un diseño de interfaz de usuario completamente separado para producir una buena experiencia en un dispositivo móvil, y luego una estructura HTML separada para respaldar esto, y luego un conjunto separado de estilos. "Hacer que el botón sea igual pero un poco más pequeño" solo funciona para las piezas más pequeñas.

Producir la interfaz de usuario correcta implica producir la estructura HTML que admite los estilos que necesita. Dado que los dos están, de hecho, íntimamente acoplados, hacer que se coloquen solo hace que todo sea fácil de entender y todo en un solo lugar.

Además, dado que presumiblemente está generando su HTML a través del código, no hay problema con la generación de HTML con estilos duplicados, ya que su generador de código puede escupir estilos durante todo el día.

Tener CSS sin procesar es tremendamente problemático ya que los estilos son completamente aleatorios y de alcance global, y difíciles de reutilizar. Haces un nombre de clase con la esperanza de que nadie más lo use. Anida sus propias clases dentro de ese elemento para tratar de resolver este problema un poco, pero ahora no puede volver a utilizar estas clases en otros lugares, ya que no están en la estructura DOM correcta. Luego descubres que algún tipo al azar en alguna parte completamente separada de tu página usó tu clase sin avisarte y ahora la has roto cambiando tus estilos. Y buena suerte obteniendo verificación de tipos, soporte IDE, etc. También es difícil crear, por ejemplo, clases parametrizadas, o aplicar reemplazos de forma global, por ejemplo, display: flex con display: flex y display: -webkit-flex para iOS.

La forma correcta de tratar con los estilos es lidiar con ellos como con cualquier otro código: encapsularlos en algunas funciones.

5 comments
1 thesecretmaster♦ 07/31/2017
¡Hola Puppy, bienvenido a Educadores de Ciencias de la Computación ! Si quieres conocer a otro cachorro, puedes saludar a Buffy , que es un bulldog, en el chat . Esta es una respuesta interesante, ¡gracias por compartir tu perspectiva aquí!
2 richard 07/31/2017
Aunque no estoy de acuerdo con todo lo que dices. Veo tu punto. Especialmente la última línea (creo que deberías ampliar esto). Muéstranos cómo crees que debería hacerse. Incluso si no estamos 100% de acuerdo, podríamos aprender algo.
no comprende 08/01/2017
Tu respuesta me recuerda la vez que hice una pregunta y alguien dijo: "Si lees la misa en latín". Hay muchas formas "correctas" de hacer las cosas, y desde su punto de vista, con HTML generado, de hecho no hace ninguna diferencia. Pero la mayoría de los instructores no enseñan HTML generado, al igual que la mayoría de los programadores no aprenden a escribir compiladores. La capa que agregamos para facilitar el mantenimiento de los archivos de HTML es superflua con el descarte de HTML. A mí también me gusta generar cosas, pero estoy en la gran minoría. Tal vez podamos hablar sobre idiomas específicos del dominio en algún momento?
Puppy 08/01/2017
Los instructores que no enseñan HTML generado no enseñan HTML útil.
ItamarG3 08/02/2017
@Puppy ¿Es así?

Related questions

Hot questions

Language

Popular Tags