Desarrollo de sitios web: guía detallada para principiantes

Como profesional de SEO, es importante cultivar al menos una comprensión básica del desarrollo de sitios web.

¿Por qué? Porque el conocimiento y las habilidades asociadas pueden formar la base para un mayor éxito con su sitio web y su marca.

En esta guía, repasaré qué es el desarrollo web y los diferentes tipos, así como también echaré un vistazo más de cerca a HTML, antes de explorar cómo el desarrollo web y el SEO pueden trabajar juntos.

¿Qué es el desarrollo de sitios web?

El desarrollo web es el proceso de creación y mantenimiento de sitios web utilizando tecnologías como HTML, PHP y JavaScript, así como sistemas de gestión de contenido (CMS).

No debe confundirse con el diseño web, el desarrollo web tiene que ver con los aspectos técnicos de un sitio web. El diseño web se ocupa del aspecto gráfico del sitio web.

Es útil saber cómo funciona el código web.

Pero los CMS modernos como WordPress y Wix han hecho que el desarrollo web sea accesible para personas sin experiencia en programación.

Sin embargo, sigue siendo útil tener al menos cierta comprensión de los fundamentos de las tecnologías web, ya que ayudará a un desarrollador a resolver problemas o crear soluciones personalizadas.

El desarrollo web es importante porque afecta directamente sus resultados al crear experiencias en línea de alto rendimiento.

La diferencia entre desarrollo web y diseño web.

Generalmente se considera que el diseño web se enfoca en cómo se ve un sitio web y cómo los usuarios interactúan con el sitio web.

El desarrollo web describe el trabajo técnico de crear un sitio web.

Si bien puede haber un cruce entre las dos disciplinas en el sentido de que un diseñador web puede tener habilidades de desarrollo y viceversa, las dos son disciplinas separadas.

Las dos categorías de desarrollo web

Existen diferentes tipos de desarrollo web. Pero todos se dividen en dos categorías:

• Desarrollo frontal.
• Desarrollo de fondo.

Desarrollo web front-end

El desarrollo web front-end es el trabajo requerido para crear todo lo que un visitante del sitio web experimenta a través de su navegador.

Un navegador web, en términos técnicos, se llama cliente, que es el dispositivo que ejecuta el código del sitio web.

En consecuencia, el desarrollo front-end también se conoce como desarrollo del lado del cliente.

(Nota: un cliente es generalmente cualquier cosa que solicita una página web del servidor, como un lector de pantalla, un bot, etc.)

El conocimiento de HTML, CSS y JavaScript es esencial para el desarrollo web front-end.

Desarrollo web back-end

El desarrollo web backend se refiere al código del sitio web que se ejecuta en el servidor, incluidos los lenguajes de secuencias de comandos y los marcos web.

El desarrollo de back-end también se conoce como desarrollo del lado del servidor porque abarca lo que se ejecuta en el servidor en segundo plano.

Un ejemplo es PHP, que permite que un servidor web recupere elementos individuales de una página web desde una base de datos.

Los lenguajes de programación y secuencias de comandos como PHP, JavaScript y Python suelen formar parte del desarrollo de back-end.

HTML es el lenguaje de codificación para sitios web

El bloque de construcción más básico de los sitios web es HTML. Es una forma de decirle a una máquina cómo debería verse una página web.

HTML es un lenguaje de programación con reglas relativamente simples.

Si alguna vez has jugado a un juego de mesa como el monopolio, el ajedrez o las damas, ya sabes cómo se juegan los juegos con reglas y piezas.

HTML es casi como un juego. Las partes son los diferentes elementos HTML y sus atributos; las reglas son cómo se usan.

Las reglas permiten que una persona cree una página web que un navegador puede mostrar a un visitante del sitio.

significado de html

HTML significa lenguaje de marcado de hipertexto.

Comprender los conceptos básicos de HTML es importante para el desarrollo web y para casi cualquier persona que trabaje con un sitio web.

hipertexto

Hipertexto es solo una palabra elegante para enlaces.

En la década de 1990, la palabra hipertexto era importante porque describía una forma de crear una red de información mundial autoorganizada.

Los enlaces de hipertexto vinculan páginas web dentro de un sitio web y también sitios web vinculados a otros sitios web, creando una vasta red de información vinculada entre sí como una telaraña.

La metáfora de una tela de araña fue creado por el inventor de Internet, Tim Berners-Lee. Es por eso que las páginas web, los sitios web y las arañas de los motores de búsqueda se llaman así.

El lenguaje de marcas

El lenguaje de marcado es una forma estructurada de comunicar información sobre cómo se formatea una página web y cuáles son las partes individuales que juntas forman la página web completa.

Por lo tanto, juntándolo todo, HyperText Markup Language (HTML) es un sistema basado en enlaces para crear páginas web y sitios web que enlazan con otras páginas web y sitios web.

Los componentes de una página web HTML

HTML se compone de bloques de construcción llamados elementos.

Los elementos se pueden modificar con atributos.

Algunos elementos son secciones principales de una página web.

Piense en estas secciones principales juntas como el propio tablero de juego, dentro del cual tiene lugar toda la acción.

Las secciones principales de una página web.

Le dice al navegador que esta es una página HTML.

Este elemento encierra toda la página web.

Esta sección es donde van los metadatos.

Los metadatos son información que no es visible en la página web y está destinada a navegadores y motores de búsqueda.

Un ejemplo de metadatos es el elemento de meta descripción, que proporciona una descripción de la página web utilizada por los motores de búsqueda en sus resultados de búsqueda.

Esta sección también contiene enlaces a los recursos necesarios para construir, entre otras cosas, la parte visible del sitio.

EL es la parte visible de una página web. Continuar siempre después sección.

Los elementos principales tienen «etiquetas» de inicio y finalización que muestran dónde comienza y termina un elemento.

Una etiqueta de inicio se ve así:

<example>

Una etiqueta de cierre se ve así:

</example>

Aquí hay un boceto de nivel macro de una página web:

<HTML>
     <HEAD>
     </HEAD>
           <BODY>
           </BODY>
</HTML>

En el elemento son todos los demás elementos que definen la parte visible de la página web, como párrafos, imágenes y enlaces.

Los atributos modifican el elemento de alguna manera, a veces para proporcionar más información.

Por ejemplo, un elemento de imagen puede tener un atributo «alt» que proporciona texto alternativo que comunica el contenido de la imagen a los visitantes mediante tecnologías de asistencia, como lectores de pantalla.

Un elemento de párrafo puede tener un atributo de «clase» que agrega formato a las palabras del párrafo, como un tamaño de fuente particular para usar.

Insight: la diferencia entre un elemento y una etiqueta

Las palabras «elemento» y «etiqueta» a veces se usan indistintamente, pero en realidad hay una diferencia.

El fragmento de código del propio elemento HTML se denomina etiqueta porque suele haber una etiqueta de inicio y una etiqueta de finalización. Por ejemplo, el elemento TITLE, que transmite información sobre el tema de una página web, se ve así:

El HTML de un título se denomina elemento TITLE.

Pero los fragmentos de código en sí mismos, se llaman etiquetas, en este caso las etiquetas de inicio y fin.

Las etiquetas nombran el elemento y dónde comienza y termina ese elemento (para elementos que requieren una etiqueta de inicio y finalización).

Los elementos a menudo se denominan etiquetas. Pero técnicamente, los elementos HTML se denominan elementos, no etiquetas.

Solo la pieza de código en sí se llama etiqueta.

¿Claro como el barro?

Más información sobre etiquetas y elementos

Una referencia histórica a Etiquetas HTML en W3c.org analiza las etiquetas en el contexto de las etiquetas de inicio y final en sí y no se trata de elementos.

Las páginas para desarrolladores de Mozilla proporcionan una definición de lo que es una etiqueta:

«En HTML, se usa una etiqueta para crear un elemento».

A página de historia en W3C acerca de los elementos no se refiere a los elementos como etiquetas. Use la palabra etiqueta solo en el contexto de la etiqueta de inicio y fin.

Página del desarrollador de Mozilla explica por qué los elementos no son etiquetas:

“Los elementos y las etiquetas no son lo mismo.

Las etiquetas comienzan o terminan un elemento en el código fuente, mientras que los elementos son parte del DOM, el modelo de documento para mostrar la página en el navegador».

El mal uso de la palabra etiqueta al referirse al elemento HTML parece menor. Pero es una buena práctica en el desarrollo web para ser precisos, usar la jerga correcta para que todos entiendan lo que significa cuando te refieres a algo.

CSS: cómo se ve un sitio

Otro elemento fundamental del desarrollo web son las hojas de estilo en cascada (CSS) que controlan la apariencia de una página web.

Los archivos CSS contienen información de estilo, como fuentes, tamaños de borde y colores.

En versiones anteriores de HTML, la información de estilo estaba incrustada en el propio HTML. Pero las cosas cambiaron con el lanzamiento de HTML 4, cuando se introdujeron hojas de estilo para separar los datos de estilo de los datos de contenido.

La innovación de CSS significa que puede diseñar un sitio web completo con un solo archivo.

tipos de desarrollo web

Puede crear páginas web desde cero usando HTML, pero es un inconveniente publicar sitios a diario.

Es por eso que la forma más popular de crear sitios web es con un sistema de administración de contenido (CMS).

Hay sistemas de gestión de contenido de código abierto y versiones de código cerrado.

Ejemplos de CMS de código abierto:

• Drupal.
• Joomla.
• wordpress

Ejemplos de CMS de código cerrado:

• Duda.
• Shopify.
• espacio cuadrado.
• Wix.

wordpress y desarrollo web

WordPress es la forma más popular de crear cualquier sitio web, incluidas las tiendas de comercio electrónico, los sitios de noticias, los sitios de información sobre temas y los sitios de negocios locales.

Con WordPress, puede elegir una plantilla para el diseño de su sitio y comenzar a publicar. Pero para que la plantilla se vea exactamente como usted quiere, se requiere una modificación de la plantilla.

No necesita saber codificar HTML, CSS o PHP para editar una plantilla.

Si bien WordPress está diseñado para ser fácil de usar, la verdad es que las habilidades de desarrollo web son útiles para crear plantillas alternativas (llamadas «plantillas secundarias») y para crear funciones útiles que no forman parte de la plantilla.

Es por eso que existen creadores de sitios de WordPress de terceros para facilitar la creación de sitios con WordPress.

Los sistemas de administración de contenido de código cerrado generalmente están diseñados para ser fáciles de usar, por lo que el desarrollo web es un problema menor con estos sistemas.

Cómo trabajan juntos el desarrollo web y el SEO

El desarrollo web es cada vez más importante para el SEO.

La velocidad de la página afecta directa e indirectamente las clasificaciones de búsqueda de las páginas web.

La optimización de la velocidad de la página a menudo se reduce a comprender los aspectos técnicos del desarrollo web que afectan la forma en que se muestran las páginas web en un navegador.

La herramienta de Chrome para depurar el rendimiento del sitio se llama Chrome Developer Tools (no Chrome SEO Tools).

Si bien algunos profesionales de SEO pueden intentar instalar complementos de WordPress para encontrar formas de mejorar el rendimiento del sitio, la verdad es que las habilidades de desarrollo web son más efectivas para solucionar problemas de rendimiento.

El desarrollo web ofrece soluciones para escalar las necesidades de SEO, como datos estructurados, automatización de metadescripciones y optimización de código para un rastreo óptimo del sitio por parte de los motores de búsqueda.

Desde el front-end hasta el back-end, el desarrollo web puede desempeñar un papel importante en la optimización de búsqueda exitosa de un sitio web.

El desarrollo de sitios web es la clave del éxito en línea

Comprender el desarrollo web no se trata solo de comprender cómo resolver un problema.

También es útil porque te da la oportunidad de identificar el problema en primer lugar y al menos una idea general de la solución.

Además, aprender los conceptos básicos del desarrollo web lo ayudará a aumentar su éxito en línea.

Otros recursos:

---

Imagen cortesía de Shutterstock/Elenco de miles