El objetivo de éste artículo es mostrarte una breve introducción al desarrollo web, así como algunos consejos para novatos. Dentro de esto te explicaremos la base principal para todo sitio web: HTML. Es tan importante que prácticamente es una necesidad para todos los usuarios y clientes.
Si no tienes conocimientos en materia web y necesitas crear un sitio web, tal vez solo será necesario que adquieras un servicio como el mostrado aquí.
Tabla de contenidos
¿Qué es HTML?
HTML es un lenguaje de marcas y se considera el lenguaje más popular para el desarrollo web. Es uno de los más utilizados, al igual que XHTML, otra versión XML de HTML. Ambos lenguajes tienen las mismas características y funciones.
A través de éstos lenguajes, que son interpretados (es decir, se ejecuta al vuelo y no es necesario compilar el código) se pueden transmitir la información de forma separada al aspecto y diseño. Se califica como un lenguaje semántico y por ello no se define su aspecto sino el significado.
Tanto HTML como XHTML funcionan con el uso de marcas. Esto significa que las partes de un texto están delimitados por los signos (<) y (>), las cuales le dicen al navegador de que manera debe presentar el contenido de un documento.
Como introducción al desarrollo web primero deberás conocer las etiquetas, que son complementadas con diversos atributos que permiten ponerle valores y propiedades con el fin de personalizar los elementos.
Algunos de los elementos más comunes son:
- html: Indica el inicio y fin de documento.
- p: Indica un párrafo.
- h1: Indica un título.
- h2: Indica un subtítulo, igual que otros niveles de subtítulos determinados por h3, h4, etc.
- a: Muestra un hipervínculo.
- br: Determina un salto de línea.
- ul: Inicia una lista:
- li: Determina cada elemento de la lista.
- div: Muestra una división del código.
- img: Inserta una imagen.
- head: Aquí va el código e información para el encabezado del sitio.
- body: Muestra el cuerpo del sitio web.
Entre otros elementos que están fuera del alcance de esta introducción al desarrollo web.
Introducción al desarrollo web – Lista de consejos
Una vez que conoces los elementos básicos para el desarrollo web, ahora te daremos algunos consejos que te ayudarán a desarrollar con estilo, para que puedas aprender buenas prácticas para tu desarrollo web.
Consejos para desarrollo web en textos
- La alineación correcta de los textos debe ser hacia el lado izquierdo, ya que si se hace al lado contrario la lectura de los textos puede resultar complicada.
- Las líneas de texto cortas resultan más sencillas de leer y entender. Utiliza la etiqueta <br> para dar un salto de línea.
- Si la página contiene mucho texto, puede que no lo lean por completo ya que puede volverse aburrido. Es mejor que el contenido esté dividido en varias páginas.
- Si se ocupa más de una fuente para el contenido de la página, su lectura puede resultar confusa y complicada, utiliza al menos dos fuentes distintas, o en cualquiera de sus variantes: itálica, bold, etc.
- Normalmente se debe usar una altura para el texto entre 10 y 12 puntos.
- No abusar de las mayúsculas, ni de textos que distraen a los usuarios, como las etiquetas blink y marquee.
- Los colores del texto y del fondo deben trabajar por igual ya que si no combinan mucho la concentración del lector puede ser afectada.
- No incluyas contenido que pueda distraer al lector, esto hace que pierda la concentración.
- El título debe describir el contenido de tu página y debe ser breve, así parecerá más interesante.
Consejos de estilo para el desarrollo web
- Los colores pastel son una buena opción para el fondo ya que permite que sea mejor la legibilidad del contenido.
- Se debe tomar en cuenta que lo importante de la página es el contenido y no el fondo, si el fondo resalta más que el contenido puede confundir al usuario y la página cargará mas lento.
- El diseño de la página no debe ser para un solo navegador, trata de usar métodos sencillos para que pueda abrirse en cualquier navegador.
Consejos para las imágenes
- Se recomienda utilizar ilustraciones para sustituir parte del texto si es posible, ya que esto hace que se vea más profesional. Recuerda su etiqueta: img.
- Utiliza las etiquetas alt para mostrar un texto adecuado a la imagen.
- Las imágenes deben tener el menor tamaño posible, ya que esto provoca que el tiempo de carga de la página sea más tardado. De preferencia utilizar formato webp y si no es posible, uno de compresión como jpeg.
- El uso de mapas de imagen en forma de texto funciona como un buen complemento y resumen del contenido. Es mejor las imágenes de mapas en formato vectorial svg en lugar del formato ráster (o png).
- Usar thumbnails en caso de carga de imágenes de gran pero. Un consejo de experiencia de usuario.
- Coloca pocas animaciones para que la página no demore en cargar y toma en cuenta que no todos los visitantes cuentan con dispositivos potentes.
- Coloca un ícono que pueda redirigir al lector al inicio de la página.
- Usa el mismo estilo para todos los íconos, mismo tamaño y estilo gráfico, así parecerá que no los escogiste de forma aleatoria.
Consejos para los enlaces
- Si pones enlaces que dirijan a otras páginas, permite que puedan abrirse en otras pestañas, es decir agregar el atributo target=”_blank”
- Rectifica que constantemente que los enlaces colocados sigan activos, es decir procurar que no existan enlaces rotos o que enlacen a páginas 404.
- Si sabes de otros sitios que contengan información relacionada con el tema, coloca un enlace que dirija a ese sitio. Di no al plagio de contenidos.
- Los enlaces debes describirlos de forma breve y clara. Agrega atributos nofollow a los sitios web no seguros y ugc a los comentarios de usuarios.
- Solamente coloca los enlaces que sean totalmente necesarios ya que puede resultar fastidioso entrar a un enlace que no contiene nada relacionado con el sitio.
Otros consejos
- Si revisas y actualizas constantemente tu página el lector se sentirá cómodo y puede frecuentar más el sitio.
- Coloca una panel de control que sirva para indicar en que parte de la página esta lector. Colócalo de la misma forma en todas tus páginas para que el lector se sienta familiarizado con ella.
- Posibilita la comunicación de tus lectores contigo para que puedan darte su opinión y sugerencias, así podrás mejorar la calidad de tu página.
- Procura que tu sitio web sea responsivo, es decir, que pueda abrirse desde cualquier versión de navegador y desde cualquier dispositivo.
Introducción al desarrollo web – Conclusiones
Al finalizar esta introducción al desarrollo web, pudiste conocer algunas técnicas que te servirán en tu trayectoria como desarrollador. Si deseas seguir complementando tu aprendizaje, te recomendamos leer sobre los siguientes temas: