Cómo convertirse en tipógrafo o por qué los conceptos básicos de la tipografía deben saberlo todo

En los comentarios a uno de nuestros artículos, el lector solicitó una selección del diseño de los cursos de las páginas web. Una lista simple de enlaces a sitios de instituciones educativas reales y virtuales sería útil para una parte de la audiencia del blog. Y para que la publicación interesara a todos los lectores, había que ampliarla. Este artículo será útil:

  • Propietarios y comercializadores del sitio. Aprenderás qué es el diseño HTML y qué tareas resuelve.
  • Los principiantes webmasters. Comprenderá en qué casos puede prescindir de un tipógrafo y en qué puede hacer su trabajo usted mismo.
  • Todos los partidarios del principio "si quieres hacerlo bien, hazlo tú mismo". Aprenderá qué conocimiento mínimo en el campo del diseño de páginas web es necesario para cada blogger, redactor, comercializador, propietario del sitio.
  • Futuros profesionales. Aprenderás cómo convertirte en un codificador.

¿Qué es un diseño HTML y por qué es necesario?

El diseño es la etapa de desarrollo del sitio web donde los diseños visuales se traducen en código que proporciona la visualización de páginas en los navegadores. Convencionalmente, esto se puede representar de la siguiente manera: el diseñador del diseño traduce la página del lenguaje visual del diseñador al lenguaje de los navegadores.

El diseño de página enrollado pasa de un creador de diseños a un programador que lo integra en un sistema de administración de contenido. Después de eso, el webmaster puede llenar y publicar la página, y los visitantes del sitio pueden verla.

¿Necesita servicios de diseño para propietarios de sitios existentes? La respuesta a la pregunta depende de las necesidades del webmaster.

Si el blogger o el administrador del sitio corporativo está satisfecho con la funcionalidad y apariencia del recurso y sus páginas individuales, no necesita un codificador. La publicación de notas en el blog, las descripciones de los productos en la tienda en línea y el contenido de las páginas del sitio se ocuparán de cualquier empleado con un conocimiento mínimo de HTML. Además, puede publicar una nota o descripción del producto, incluso si no ha escuchado nada sobre HTML.

En el popular CMS, hay editores visuales con los que puede dar formato al contenido y hacerlo legible. Preste atención a las capacidades del editor regular de WordPress WYSIWIG.

Puede escribir el texto directamente en el editor de CMS, formatearlo, agregar fotos. La funcionalidad de CMS proporciona una visualización correcta del contenido con algunas reservas.

Vea también: Cómo crear un sitio web en WordPress: una guía completa para principiantes

La publicación de contenido con un editor visual puede llevar a problemas. En este caso, las capacidades del editor visual regular del motor no permiten mostrar correctamente los subtítulos del primer y segundo orden. Puede resaltar visualmente el texto en negrita o cursiva, pero esto no lo convierte en un subtítulo para el navegador y los motores de búsqueda. Para los usuarios, tampoco es obvio por qué el texto está resaltado.

En teoría, el problema se puede resolver sin el conocimiento de HTML. Basta con formatear el contenido correctamente en un procesador de textos y transferirlo al editor visual de CMS.

El Editor CMS convirtió automáticamente el formato visual del contenido en código HTML. Es decir, es suficiente para que el administrador del sitio publique contenido para poder trabajar con un procesador de textos y un editor WYSIWYG CMS.

Pero a veces copiar contenido de Word a CMS lleva a errores. Preste atención al código de la página.

En la práctica, se necesita al menos un conocimiento mínimo del administrador de contenido HTML. Esto se confirma en la ilustración de arriba: las etiquetas de subtítulos adicionales están en el código de la página. Dicha basura es un efecto secundario frecuente al copiar contenido de procesadores de texto, como Word. Detalles adicionales.

"El codificador no puede ser, pero HTML debe saberlo"

Un extracto adaptado del trabajo de Nekrasov se refiere a los propietarios, administradores y administradores de contenido de los sitios. Nuevamente, preste atención a las etiquetas adicionales en la página al copiar contenido de MS Word. En este caso, no afectan directamente la experiencia del usuario: los visitantes de la página no los ven.

El código de la papelera que llega a una página al copiar contenido de los editores de texto puede causar problemas. Por ejemplo, si hay contenido dentro de las etiquetas adicionales, se mostrará incorrectamente a los usuarios. Dicho error violará la estructura de la página y la hará de mala calidad.

Las etiquetas innecesarias hacen que el código de la página no sea válido. La validez del código no se incluye en el número de factores que clasifican los sitios de los motores de búsqueda más grandes. Sin embargo, el código de página no válido puede enviar robots de búsqueda en la ruta incorrecta y distorsionar los resultados del análisis de la página.

Un ejemplo simple: los subtítulos ayudan a los motores de búsqueda a estructurar el texto en bloques significativos. Si el subtítulo dice "Cómo crear un archivo robots.txt", el motor de búsqueda entiende que la sección relevante de la página se ocupará del archivo robots.txt.

¿Qué sucede si el subtítulo no está etiquetado con etiquetas html válidas? Yandex y Google encontrarán más difícil determinar de qué se trata la sección relevante de la página. Los robots pueden encontrar la página irrelevante para las solicitudes de un archivo robots.txt. Como resultado, el sitio recibirá menos visitantes.

Ver también: Cómo usar un archivo robots.txt.

Ahora está claro por qué un blogger, un periodista o un zapatero y un administrador a tiempo parcial del sitio del zapatero no daña al menos saber las etiquetas HTML básicas. Por ejemplo, este conocimiento puede ayudar a eliminar la basura de la página.

La mayoría de los editores WYSIWIG en CMS tienen dos modos: visual y HTML. Para encontrar y eliminar etiquetas innecesarias del código de la página, es suficiente cambiar el editor de WordPress normal al modo "Texto".

El conocimiento de HTML en un nivel básico evita que código adicional aparezca en una página durante la transferencia de contenido de un procesador de textos al editor del motor. Para resolver este problema, limpie el contenido creado en Word desde el formateo. Para hacer esto, use la función "Eliminar formato" en un editor de texto o copie el contenido y péguelo en el Bloc de notas. Luego pegue el contenido formateado en el editor de CMS en formato HTML.

Etiquetar contenido usando etiquetas HTML y publicar.

Al borrar el contenido del formato y agregar etiquetas HTML, se evitó manualmente la aparición de un código de basura en la página y se aseguró de que la publicación se mostrara correctamente a los usuarios.

Lo que necesita saber el administrador del sitio para hacer sin el codificador

Presta atención a dos puntos. Primero, estamos hablando de los sitios web de pequeñas empresas y blogs personales cuyos propietarios no desean o no pueden cooperar con un programador profesional. Los verdaderos bootstrapers publican contenido por su cuenta. Y necesitan conocimientos básicos sobre el marcado HTML para convertir un bloque de texto con una imagen que sobresale en material legible.

Bootstrapping es un enfoque para hacer negocios que involucra financiar una empresa con los recursos propios de un empresario. Los Bootstrappers no utilizan los servicios de los empleados contratados hasta que la empresa alcance los objetivos planificados.

En segundo lugar, el conocimiento de los conceptos básicos de HTML no convierte a un blogger o zapatero y administrador a tiempo parcial del sitio del taller de un zapatero en un programador. Para realizar el diseño profesionalmente, necesitas aprender y practicar.

El administrador del sitio de lavado de autos no se ruborizará ante los lectores por el contenido que es inconveniente para la percepción si tiene los siguientes conocimientos:

  • Resumen de páginas web y navegadores. Cómo los navegadores de Internet muestran las páginas del sitio para los usuarios. ¿Cuál es la estructura del documento HTML, qué tareas resuelven los hipervínculos?
  • Una idea general de HTML. Por qué necesita un lenguaje de marcado de hipertexto, dónde y cómo se usa.
  • ¿Qué es las etiquetas HTML. Cómo se designan las etiquetas.
  • Etiquetas clave. Para marcar correctamente una página simple en un sitio web o blog, en la mayoría de los casos es suficiente conocer las etiquetas de encabezados, párrafos, imágenes, enlaces. Para utilizar correctamente las etiquetas de imágenes y enlaces, deberás recordar sus atributos principales.
  • Un poco de conocimiento más avanzado ayudará con la ayuda de las etiquetas para identificar bloques semánticos importantes o separar visualmente las frases arbitrarias del texto circundante, dibujar una lista con viñetas o numerada, cita.

Para utilizar las etiquetas correctamente, el webmaster debe entender su significado. Por ejemplo, un especialista debe saber la diferencia entre los encabezados de segundo y tercer orden o las etiquetas i y em visualmente idénticas.

El estudio de la información básica ayudará a marcar y publicar contenidos. Si los conceptos básicos de HTML son fáciles y el interés en el diseño web no desaparece, realmente puede comenzar a aprender y convertirse en un creador de diseños profesional.

¿Es difícil aprender el diseño? ¿Dónde se enseña sobre el tipógrafo? ¿Qué hace este especialista en la práctica? El jefe del departamento de diseño de la empresa TexTerra, Alexey Pechenkin, habló de esto y no solo a los lectores.

"El creador realiza ideas del diseñador".

Alexey compartió información sobre la profesión tipográfica, a pesar de la carga de trabajo extrema. Inmediatamente explicó lo que tenía que distraerse por una mini entrevista para un blog.

Dmitry Dementiy: Díganos en pocas palabras acerca de la profesión tipográfica: ¿qué hacen usted y el personal de su departamento, cómo está organizado el proceso de trabajo? Un programador: ¿quién es este: un programador, un especialista técnico, un diseñador? Los británicos y los estadounidenses llaman diseñadores tipográficos. ¿Puede un codificador HTML ser llamado un artista?

Alexey Pechenkin: En su mayor parte, nuestro trabajo es agregar contenido al sitio. Las tareas con las que tenemos que trabajar son, en la mayoría de los casos, similares. Este es un diseño de artículos, secciones e infografías para publicación en sitios. Muchas veces es necesario resolver problemas más complejos. Por ejemplo, el diseño de la página de destino requiere mucho esfuerzo por parte de un especialista. Un programador no puede llamarse un programador o diseñador. Esta es una profesión independiente.

DD: ¿Qué tareas resuelven el diseño HTML desde el punto de vista del propietario del sitio? ¿Qué puede hacer el programador para ayudar al dueño de una tienda en línea?

A.P .: En pocas palabras, diseño - la encarnación de las ideas del diseñador. En la etapa de desarrollo, el diseñador dibuja la estructura general, la apariencia del sitio y, después del diseñador de diseño, implementa todo esto. Esto se hace con la ayuda de HTML y otros lenguajes de marcado que pueden "entender" y convertir el navegador en nuestras páginas web habituales.

Diseño de nuevos elementos de páginas, secciones, bloques: todo esto también lo hacen los diseñadores de diseños. Con la ayuda de un diseño web, el especialista crea una página estática a la que, si es necesario, el programador de front-end puede agregar elementos interactivos.

DD: El CMS más popular tiene editores visuales de publicaciones. ¿Esto significa que los propietarios de sitios web en WordPress, Drupal o Bitrix no necesitan los servicios de un diseñador de diseño?

A.P .: No, no lo es. El editor visual hace la vida más fácil para el usuario promedio: el editor, el blogger. Con la ayuda del editor, una persona sin conocimientos de composición puede agregar material a su blog, sitio web o página.

Estos editores realmente evitan que los no especialistas tengan que hacer el trabajo adicional por ellos: marcar el contenido. Pero la funcionalidad de los editores es muy limitada. Debido a esto, un editor sin conocimiento de HTML no siempre puede diseñar una página de acuerdo con las necesidades del usuario y los estándares W3C.

Un ejemplo simple: el editor regular del motor de WordPress más popular le permite seleccionar un pasaje de texto en negrita o cursiva. En el código de la página, puede ver que la selección se realiza utilizando las etiquetas strong y em, respectivamente. En algunos casos, este marcado se realiza preferiblemente con la ayuda de las etiquetas b e i. El editor visual WP no tiene tales herramientas, por lo que debe agregar etiquetas manualmente. Y esto requiere un conocimiento relevante.

Al crear artículos, noticias y otros materiales en los sitios, no utilizamos editores visuales. Limitan las posibilidades y, a menudo, tenemos que organizar el material a nuestra manera, con nuestros propios estilos.

DD: ¿Crees que necesitas un conocimiento mínimo de diseño HTML para publicistas, redactores, bloggers? ¿Puede un periodista o redactor crear independientemente su propio material y publicarlo en el sitio? ¿O debería cada especialista hacer su propio negocio?

A.P .: Todos pueden beneficiarse de un conocimiento mínimo en esta área. Sí, un redactor con un conocimiento mínimo en el diseño podrá imponer su material sin ningún problema. Esto requiere solo un conocimiento básico de las etiquetas en html. Pero para hacer de alguna manera el material fuera de la caja, necesitará otras habilidades que poseen los administradores de contenido o diseñadores de diseño.

DD: Como propietario del sitio, ¿quién no tiene el conocimiento relevante, puede verificar la calidad del trabajo del diseñador de diseño? ¿Qué debe hacer para hacer esto: verifique la visualización de páginas en diferentes navegadores, verifique la URL o el código en el validador W3C, vea los datos de error en las oficinas para los webmasters? ¿Cómo puede una persona, lejos de un diseño HTML, entender que todo se hace profesionalmente?

A.P .: Sí, en primer lugar, puede ver páginas en diferentes resoluciones y dispositivos, así como escanear la página en el validador. Con un mal diseño, todas las fallas generales que dejó el diseñador del diseño se notarán de inmediato. En cuanto al código en sí, entonces una persona sin conocimiento no determinará la calidad.

Puede verificar la visualización de la página en pantallas con diferentes resoluciones utilizando el servicio Screenfly. Puedes revisar la página en diferentes navegadores usando Browsershot.

DD: Los lectores están interesados ​​en la posibilidad de aprender diseño HTML. ¿Es posible que todos se conviertan en un buen especialista en este campo? ¿Qué cualidades necesita un buen programador?

A.P .: Sí, creo que cualquiera puede aprender esto. Lo principal es tener deseo y paciencia. Si algo no funciona de inmediato, solo necesitas practicar más. Todo depende de ti.

DD: ¿Dónde enseñan diseño? Estas son instituciones educativas de tiempo completo, cursos en línea? ¿Es posible aprender de forma independiente con la ayuda de libros de texto y manuales?

A.P .: Hay muchos cursos en línea, así como varios canales en YouTube, donde las personas comparten experiencias, publican lecciones y mucha información útil sobre este tema. También hay muchos libros sobre el diseño. Sin embargo, con los libros es más difícil: será difícil encontrar algo realmente bueno.

Adquirir conocimientos y aprender a imponer no es difícil. Lo principal es estar más interesado en los temas y la práctica con el conocimiento adquirido.

DD: ¿Qué tipo de conocimiento necesita un buen programador?

A.P .: Un buen tipógrafo en primer lugar debe seguir las noticias en el mundo de TI, todas las innovaciones y tecnologías que aparecen de vez en cuando en esta área, ya que la web no se detiene. Por lo tanto, los diseñadores deben aprender y mejorar constantemente sus habilidades. Si hablamos del conjunto básico de conocimientos, entonces esto es HTML y CSS, así como al menos un conocimiento básico de Javascript (Jquery).

DD: Gracias por la información.

A.P .: Por favor Lectores de éxito en el aprendizaje.

Vea también: Qué CMS elegir: una guía para elegir un "motor" para el sitio

Donde aprender diseño

La siguiente selección de recursos de capacitación le ayudará a tener una idea general del diseño HTML o convertirse en un programador profesional. Para la formación, solo necesitas el deseo y una PC con acceso a Internet. También le es útil el conocimiento del idioma inglés, ya que hay recursos en idioma inglés en la colección.

Los siguientes recursos te ayudarán a aprender diseño web:

Cursos online para principiantes y avanzados.

  1. Curso gratuito "Fundamentos de HTML y CSS" de la "Netología". Las clases de cinco horas le enseñarán los conceptos básicos de HTML y CSS. El curso será útil no solo para los futuros diseñadores web, sino también para todos los profesionales que trabajan en el campo del marketing en Internet.
  2. El curso de video gratuito en HTML y CSS de WebForMyself.com se adaptará a los usuarios con cualquier nivel de capacitación. Puede considerarse como la primera etapa de capacitación para futuros diseñadores web o una herramienta de desarrollo profesional para bloggers, periodistas o administradores de sitios.
  3. Curso en línea "HTML básico y CSS" de Html-academy.
  4. El curso semestral "Diseño profesional de sitios según los estándares modernos" de Geekbrains le permitirá aprender de forma remota la profesión de tipógrafo.
  5. Si el diseño en el que está interesado, puede continuar su educación en el curso de "Netology" "HTML-layout: desde cero hasta el primer diseño". Después de recibir un diploma, puede llamarse un tipógrafo novato.

Sitios temáticos útiles

  1. Sitio htmlbook.ru. Este centro de información será útil tanto para futuros y principiantes diseñadores web, como para profesionales experimentados. Este recurso para diseñadores web es el mismo que Surch para SEOs y el blog de Texterra para vendedores de Internet. Presta atención al foro.
  2. En la diseñadora de blogs Julia Panina, encontrará sabiduría universal sobre el diseño, la búsqueda y el trabajo con el popular CMS. Desafortunadamente, la revista no se actualiza muy a menudo. Pero hay tantos materiales publicados sobre el tema, que es suficiente para un libro completo.
  3. ¿Dominó la información básica? Luego desarrolle y busque la información útil sobre "Habré". Куда же без этого ресурса, если вы решили стать технарем?
  4. Css-live.ru. Этот ресурс будет полезным для дизайнеров, верстальщиков и веб-программистов.
  5. Справочный хаб для верстальщиков от студии Артемия Лебедева.
  6. Консорциум всемирной паутины. Эта организация занимается разработкой и валидацией интернет-стандартов. Будущим и состоявшимся верстальщикам будет полезен валидатор разметки.

Очные курсы по веб-верстке

  1. Если вы хотите обучаться очно, запишитесь на месячный курс "Верстка для начинающих" от CubeComp Development. Las clases se imparten en Moscú.
  2. El Centro de Capacitación de Especialistas de la Universidad Técnica del Estado de Moscú ofrece otro curso gratuito a tiempo completo para diseñadores principiantes. N.E. Bauman.

Encuentra el diseño de cursos a tiempo completo en tu ciudad, puedes usar los motores de búsqueda.

Libros de diseño web

  1. "Aprendiendo HTML 5," B. Lawson, R. Sharp. Puedes adquirir este libro en formato electrónico o en papel.
  2. "CSS. Hojas de estilo en cascada. Guía detallada", E. Meyer. Este libro se considera un clásico con el que todo programador debería familiarizarse.
  3. "HTML y CSS. El camino a la perfección", B.Henik. Otro libro de texto, obligatorio para los principiantes.
  4. "Diseño web según estándares", D. Zeldman. El libro está dirigido a profesionales que tienen un conocimiento básico de HTML y CSS. Se publicó hace más de 10 años, pero sigue siendo relevante.
  5. "HTML, JavaScript, PHP y MySQL. El conjunto de maestros de la web de Gentleman", Nikolai Prokhorenok.

Recursos de habla inglesa

El conocimiento del inglés se considera casi obligatorio para el creador. Uno de los argumentos: los libros y artículos más modernos y relevantes aparecen primero en inglés y luego se traducen al ruso. Si se comunica con calma en un idioma extranjero, los recursos que se enumeran a continuación le serán útiles.

  1. W3school.com. Este recurso puede ser usado como una referencia al diseño. Se puede llamar el análogo inglés de htmlbook.ru. Los expertos extranjeros no recomiendan usar el sitio para el diseño de la capacitación, aunque tiene lecciones sobre HTML y CSS.
  2. Aprende a codificar HTML y CSS. Este es un completo tutorial en línea que lo ayudará a dominar los conceptos básicos de la composición tipográfica.
  3. Guía de diseño web para principiantes. En este enorme artículo guía de Ian Lloyd, se abordan casi todos los temas relacionados con la formación de la profesión tipográfica. Aprenderá qué software es mejor usar, cómo marcar páginas, cómo trabajar con hojas de estilo y mucho más.
  4. Activejump es un entrenador de sitios web para HTML y CSS. Esto no es solo un tutorial en línea, sino un curso en línea en el que puede adquirir conocimientos y habilidades de forma independiente en el campo de la composición tipográfica.
  5. En el video blog de Channel 9 encontrará 21 tutoriales de video HTML y CSS de desarrolladores de Microsoft. El curso está diseñado para principiantes que quieran convertirse en profesionales.
  6. Tutorial HTML5. Otro sitio-tutorial sobre el diseño para principiantes.
  7. Introducción a HTML y CSS por Khan Academy. Otro tutorial en línea gratuito para los diseñadores web principiantes.

Puede seleccionar uno o más recursos de forma remota o interna para aprender el diseño.

Cualquiera puede convertirse en un diseñador de diseño.

Aprende el diseño HTML bajo la fuerza de cada persona. Si planea dominar una nueva profesión, tendrá que sumergirse en el mundo de HTML, CSS y JavaScript, seguir los cambios en estándares y tecnologías y practicar mucho. Puede estudiar en persona y en ausencia, por una tarifa y de forma gratuita, con un mentor o de forma independiente. Estas capacidades pueden realizarse utilizando los recursos de capacitación ofrecidos anteriormente.

El último subtítulo del artículo se puede formular de la siguiente manera: todos deben convertirse en diseñadores de diseños. El conocimiento básico de HTML y CSS será útil para todos los profesionales que trabajan en marketing en Internet. Un blogger, periodista, redactor, comercializador, propietario del sitio debe poder marcar y publicar contenido de forma independiente. Por supuesto, estamos hablando del marcado estándar y los estilos.

Loading...

Deja Tu Comentario