Freecodecamp: [BETA] El diseño visual aplicado da una mala idea de la semántica

@ Facundo-Corradini Tienes razón, gracias por informar de esto. ¿Te sentirás cómodo arreglando esto? Si es así, diríjase a nuestras pautas de contribución . Puede cambiar el nombre del título a Applied Visual Design: Use the em Tag to Emphasize Text .

Me encantaría ayudar con este problema si es necesario

@manuhdez Eso es genial. Dirígete a nuestras pautas de contribución .
@raisedadead , @systimotic ¿Deberíamos implementar esto?

Hola @ Facundo-Corradini, gracias por plantear la inquietud y tomarse el tiempo para revisar el desafío.

¿Puede ayudarnos con algunos cambios sugeridos que deberían hacerse en la verborrea que ayuden a aclarar la importancia de esta diferencia?

Estoy de acuerdo, la verborrea actual puede introducir un concepto incorrecto en el aprendizaje.

Cosa segura. Déjame trabajar en una propuesta, luego la subiré y, si estás de acuerdo, puedo trabajar en los cambios.

No es tan simple, ya que la sección trata sobre diseño visual, no sobre semántica. Así que quizás deberíamos llamar a la sección "texto en cursiva" y explicar el caso de uso de cada etiqueta

¡Hola @ Facundo-Corradini! ¿Cómo va?

Hola chicos,

He estado pensando cómo ir con esto y trabajando en el plan de estudios para ver dónde encajaría mejor. Pero no hay una forma realmente fácil de salir de esto. Cualquier etiqueta que seleccionemos dejará de lado los casos de uso para los demás, y tratar de exprimir los diferentes casos para cada estilo en un solo desafío se sentirá apretado. La sección trata de diseño visual aplicado de todos modos, no de semántica.

Dado que parte de la semántica estructural se cubre en la sección de accesibilidad, tal vez agregar algo de semántica a nivel de texto sería el camino a seguir. O quizás como un tiempo de espera más adelante en la sección de diseño visual aplicado. Pero no estoy seguro de si todavía estamos a tiempo para los cambios del plan de estudios (creo que no, ¿verdad?)

Entonces las opciones serían:

0 - Deja el desafío como está

1- Cambie el título a "enfatizar texto ..." y explique que hay otras formas de poner el texto en cursiva, que
--- 1.A - se tratará más adelante en la nueva sección hipotética de semántica a nivel de texto
--- 1.B - Simplemente vincule una buena fuente sobre semántica a nivel de texto

2- Cambie todos los desafíos de diseño visual con respecto al estilo del texto, como subrayados, tachado, peso de fuente y cursiva en una etiqueta neutra como span, y conviértalos en desafíos basados ​​en CSS, explicando que hay diferentes etiquetas que aplican el estilo por defecto, que de nuevo
--- 2.A - se tratará más adelante en la nueva sección hipotética de semántica a nivel de texto
--- 2.B - Simplemente vincule una buena fuente sobre semántica a nivel de texto

Me inclino a pensar que la mejor solución es 2A, siendo 1A un compromiso realmente bueno.

Sin embargo, siendo realista, probablemente 1B sea el camino. Un título que tiene sentido, con una descripción que aborda el problema y un enlace para que los mejores campistas se sumerjan en ... sin necesidad de cambiar los desafíos reales o el plan de estudios.

Pensamientos

@ Facundo-Corradini, ¿qué fuente tienes en mente para la semántica a nivel de texto?

@raisedadead ,
Creo que los desafíos en cuestión son los siguientes:

Establecer el tamaño de fuente para varios elementos de encabezado
Establecer el peso de la fuente para varios elementos de encabezado
Establecer el tamaño de fuente del texto de párrafo
Establecer la altura de línea de los párrafos

Hasta que encontremos una buena solución, creo que deberíamos diferenciarlos hasta después de la versión beta.
Podría crear un PR y eliminarlo de la semilla.

Podría crear un PR y eliminarlo de la semilla.

¿Te refieres a eliminarlos ahora? Si es así. Creo que es mejor dejarlos como están para que podamos recopilar más comentarios.

@raisedadead eliminándolos por ahora y agregándolos después de la versión beta cuando se modifiquen o categoricen con mayor precisión. Si dan una idea equivocada de la semántica, tal vez no deberíamos dejar que los campistas los revisen y aprendan conceptos incorrectamente :)

@ahmadabdolsaheb lo siento de alguna manera me perdí las notificaciones

Los que citó (tamaño de fuente, peso de fuente y altura de línea) no están directamente relacionados con la semántica. Excepto si haces algo extraño, como tener todos tus textos como etiquetas <p> y ajustar el tamaño de fuente cuando intentas indicar algunos como encabezados. Pero esa aclaración está perfectamente atendida en la introducción de los elementos <h> y <p> en la primera sección, así como también se aclara más en _Diseño visual aplicado: ajustar el tamaño de un encabezado frente a un Etiqueta de párrafo_:

El tamaño de fuente de las etiquetas de encabezado (h1 a h6) generalmente debe ser mayor que el tamaño de fuente de las etiquetas de párrafo. Esto hace que sea más fácil para el usuario comprender visualmente el diseño y el nivel de importancia de todo en la página. Utiliza la propiedad font-size para ajustar el tamaño del texto en un elemento.

Las secciones impugnadas son:

- Use la etiqueta fuerte para poner el texto en negrita: el elemento <strong> es para contenido que es de mayor importancia (como una advertencia), mientras que el elemento <b> se usa para llamar la atención sobre el texto sin indicando que es más importante. Ambos están simplemente en negrita por defecto, pero su significado no es el mismo

- Utilice la etiqueta u para subrayar el texto: este es probablemente el más complicado ... citando la recomendación del W3C:

El elemento u representa un espacio de texto con una anotación no textual no articulada, aunque expresada explícitamente, como etiquetar el texto como un nombre propio en texto chino (una marca de nombre propio chino) o etiquetar el texto como mal escrito. (...) En la mayoría de los casos, es probable que otro elemento sea más apropiado

Hasta donde yo sé, en la mayoría de los idiomas solo queremos subrayados para los encabezados y demás, y eso debe abordarse con el estilo de la etiqueta <h(x)> . Los errores ortográficos son otro caso de uso, pero rara vez estaríamos en un escenario como escribir y marcar deliberadamente errores ortográficos ...

- Utilice la etiqueta em para poner en cursiva el texto:
<em> etiqueta
<em> está en cursiva por defecto, pero nada nos impide darle a la etiqueta <em> estilo que queramos. Por lo general, también le agrego un peso de fuente más audaz.
De la misma manera, no todos los textos en cursiva están destinados a dar énfasis. Piense en definiciones, palabras técnicas o escritas en un idioma extranjero (normalmente expresiones latinas). Esos son escenarios donde el
<i> etiqueta
O incluso los elementos <cite> podrían ser la forma correcta de mostrar texto en cursiva, cuando se hace referencia al nombre de un trabajo o autor, que normalmente se usa junto con un <q> o <blockquote>

-Utilice la etiqueta del para tachar el texto :
<del> está destinado a contenido eliminado, por ejemplo, cuando se marca contenido que se ha eliminado de una versión anterior de un documento, como lo hace git (hub) con un tachado y un fondo rojo en comparación con el no tachado y Fondo verde para las piezas nuevas / cambiadas.
La salida predeterminada para <del> es un tachado, pero no debes usar <del> cada vez que quieras tachar un texto.
Por ejemplo, es posible que desee utilizar el elemento <s> lugar para cosas que ya no son relevantes, por ejemplo, al marcar el precio regular de referencia en una etiqueta de precio de producto con descuento.
O simplemente elija <span> y póngalo tachado si las definiciones anteriores no se aplican a su razón particular para tachar algún texto.

No obstante, todas esas secciones son esenciales para el Diseño Visual Aplicado.

Entonces, mi recomendación no es eliminar ni aplazar, sino mantenerlos como están y agregar una pequeña aclaración sobre las secciones comprometidas, quizás vinculadas a una fuente externa sobre semántica a nivel de texto.

Mi fuente favorita de semántica a nivel de texto es la recomendación del W3C.
https://www.w3.org/TR/2016/REC-html51-20161101/textlevel-semantics.html
Además de aclaraciones sobre MDN sobre casos de uso para cada etiqueta, por ejemplo
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong

Sin embargo, podría ser un poco demasiado técnico, así que puedo encargarme de buscar algunas opciones más amigables para los novatos, o escribir una yo mismo en el blog freeCodeCamp si lo desea :)

Creo que el título del desafío y el uso de <em> para poner en cursiva es completamente incorrecto y debería cambiarse el nombre a:
Diseño visual aplicado: uso de estilo de fuente en cursiva para poner texto en cursiva

Y cambia el texto de:

Para enfatizar el texto, puede usar la etiqueta em. Esto muestra el texto en cursiva, ya que el navegador aplica el CSS de font-style: italic; al elemento.

a

Para poner el texto en cursiva, aplique la regla CSS _font-style: italic_ al elemento que desea mostrar en cursiva.

Y así, el uso de <em> podría tener una apariencia más adecuada en la Sección de Accesibilidad Aplicada con su propio desafío.

Gracias a todos por sus comentarios. Nos alejaremos del plan de estudios basado en materias y esperamos tener una mejor descripción de la semántica en el próximo plan de estudios basado en proyectos.

@scissorsneedfoodtoo , ¿pensamientos?

Gracias @ Facundo-Corradini por sus explicaciones detalladas y otros por opinar. Muchos de los proyectos aún se están desarrollando y se lanzarán de forma continua una vez que se hayan probado. Podría valer la pena mantener este problema abierto por ahora, en caso de que alguien pueda actualizar las descripciones en los desafíos actuales de diseño visual.

Cerrando esto como rancio. Si alguien quiere continuar la conversación, no dude en dejar un mensaje y podemos reabrirlo. Gracias y feliz codificación a todos 🎉