Si tu deseo o aspiración es aprender a hacer páginas web escribiendo su código fuente, lo que te interesa es aprender a escribir código en los lenguajes HTML5 y CSS. En este artículo te contaremos todo sobre el diseño web por dónde empezar, cómo iniciarte en este atrevido y divertido mundo.
Índice de contenidos
Qué es un sitio web
Un sitio web no deja de ser un conjunto de archivos en un ordenador que está siempre conectado a internet (servidor – alojamiento web). Allí se encuentran, del mismo modo que tú tienes tus archivos guardados en tu ordenador, teléfono o tablet.
Dentro de un sitio web hay archivos de imágenes, de vídeo, de audio, documentos de texto, ordenados en carpetas. Dependiendo del tema tratado en el sitio web el contenido será de una forma y otra. Y junto con esos archivos hay otros que contienen el código de los distintos lenguajes que hacen que todo funcione. Dependiendo cual sea el lenguaje en el que estén escritos dichos archivos, tendrán una extensión u otra: html, css, js, php, etc…
El navegador que tú utilizas en tu dispositivo se comunica con el servidor en el que están los archivos alojados utilizando el protocolo http, basado en TCP/IP, que permite al navegador hacer peticiones de recursos al servidor y éste le responde enviando dichos recursos.
En el Desarrollo Web existen dos tipos de tecnologías, las que tienen lugar en el lado del cliente (Front-End) y las que ocurren del lado del servidor (Back-End). Sin importar por el que te decidas, siempre es bueno saber un poquito del otro. Especializarte en una parte, pero también controlar un poquito de la otra, al menos lo más básico.
El lado del cliente (Front-End) es todo lo que tiene que ver con lo que ocurre en el navegador web, con el diseño de la página, la creación de la interface para poder comunicarse con el servidor, todo lo que el usuario puede ver. Conocer estos conceptos conceptos básicos para conocer el diseño web por dónde empezar y qué saber acerca del mismo.
El navegador es el cliente, y hace peticiones al servidor solicitando recursos. Los lenguajes que se utilizan para ello son: HTML, CSS y lenguajes de Scripting, siendo JavaScript el más utilizado.
HTML (HyperText Markup Language – Lenguaje de Marcado de Hipertexto) es un lenguaje de marcado, no de programación. Se basa en etiquetas y es el lenguaje que leen y muestran los navegadores, cualquier sitio web va a necesitar siempre HTML. Sin HTML no hay página web. Es lo primero que se necesita aprender. Se utiliza para dar estructura al contenido del sitio web. Se encarga de lo que va a tener la página: cabecera, pie, secciones, menús, títulos, párrafos, imágenes, enlaces, etc… La versión actual es HTML5 de la que hablaremos más adelante en este post.
Después de HTML, lo suyo sería aprender CSS (Cascading Style Sheets – Hojas de Estilo en Cascada). Tampoco es un lenguaje de programación, es un lenguaje de diseño gráfico. Le da estilo a los elementos de HTML, hace que todo sea visualmente más atractivo. Se encarga del cómo se va a ver la página: del color, del tamaño, la posición, los tipos de letra, los efectos, etc… La versión actual es CSS3.
JavaScript, abreviado JS, es un lenguaje de programación interpretado, conocido como el lenguaje de scripting de la web. Nació para la web, pero hoy día se utiliza para más cosas. Este lenguaje le da interacción a los sitios web, les da vida.
El lado del servidor (Back-End) tiene más que ver con darle funcionalidad al sitio web, con el comportamiento de la aplicación web, con lo que el usuario no puede ver, pero que es esencial para que todo funcione correctamente. El servidor recibe peticiones del cliente (navegador) y responde a las peticiones enviando recursos. Los lenguajes de este lado se encargan de la seguridad, de conectar con las bases de datos, de la configuración del servidor, etc… Hay muchos lenguajes: PHP, Phyton, Perl, C#, Java, ASP.NET, Ruby, etc… JavaScript, ha evolucionado y también tiene su parte en este lado, a través de NodeJS.
Además de los lenguajes, si tienes un buen nivel de inglés, mejor que mejor, porque la mayoría de la documentación para poder consultar como funciona todo, está en inglés.
De todos estos lenguajes (cliente y servidor) hay librerías y frameworks que facilitan el trabajo a los desarrolladores, pero esto lo dejamos para más adelante. Ahora, si quieres, puedes empezar por HTML. Lo más básico, donde puedes ver la estructura básica de un documento HTML y algunas etiquetas, también básicas.
Diferencia entre lenguaje de programación y maquetación
HTML5 no es un lenguaje de programación. Es un lenguaje de maquetación. ¿Qué diferencia hay?
Un lenguaje de programación te permite definir comportamientos. Por ejemplo, si quieres que cuando pulses un botón, se añada un producto a tu carrito de la compra, necesitarás un lenguaje de programación. En resumen, la toma de acciones o decisiones que un consumidor puede hacer dentro de tu sitio web, los diferentes botones con sus funcionalidades.
Un lenguaje de maquetación te permite mostrar información y definir su apariencia. En este sentido, con HTML5 pones la información en pantalla y con CSS le das apariencia.
En general, aprender a maquetar es infinitamente más fácil que aprender a programar, aunque las maquetaciones más sofisticadas son más fáciles que los códigos de programación más básicos.
Por tanto, si quieres aprender diseño web por dónde empezar y comenzar a desenvolverte con el código fuente de una página web, lo primero que deberías aprender es HTML y CSS.
Una vez te encuentres cómodo con HTML5 y CSS, de entre la ingente cantidad de lenguajes de programación que puedes seguir aprendiendo, es muy recomendable continuar con Javascript. No es especialmente difícil, es muy fácil de ejecutar, está super extendido, y todo apunta a que va a seguir extendiéndose en un futuro próximo.
Hacer páginas web sin aprender código fuente
En este caso, tu deseo no es diseñar o maquetar páginas web. Quizás quieres tener una tienda online para tu producto y no quieres tener que pelearte con el código fuente. Si es así, lo que necesitas es un gestor de contenidos. Hay muchísimos: Prestashop, Joomla, Magento… Probablemente, el que mejor relación facilidad de uso/potencia ofrece es WordPress. Este gestor es además el más extendido. Este artículo mismo en el que estás leyendo, ha sido creado a través de WordPress con el objetivo de facilitarte información sobre diseño web por dónde empezar.
No obstante, si eres capaz de escribir y modificar el código fuente de una web, podrás ajustar WordPress totalmente a tus necesidades y al diseño que buscas. Si no sabes código fuente, tendrás que ceder y aceptar lo que la plantilla o el plugin de WordPress que instales te ofrezca.
Estética de una web
Quizás sólo te interese definir el aspecto estético de una web; es decir, hacer una imágen con la apariencia final de cómo va a quedar la web. Esto es a lo que se dedica un diseñador..
Para lograr hacer esta tarea, no sólo basta con que aprendas Photoshop o GIMP. El conocimiento de estas herramientas, no es suficiente para crear un diseño bonito de una web, se necesita un buen sentido del gusto estético, conocimiento de teoría del diseño, y un proceso de aprendizaje y educación del ojo.
Una vez que el diseñador acaba su diseño, se lo pasa al maquetador para que lo materialice en una página web.
¿Qué hace un diseñador web?
Una vez hayas entendido qué es el diseño web por dónde empezar y los lenguajes de programación con los que se puede diseñar una web, es interesante que conozcas el trabajo del diseñador web y a lo que se dedica en su día a día.
El diseñador web es la persona o profesional que reúne los conocimientos necesarios para crear sitios web con las características y requisitos necesarios para representar y defender un negocio, empresa o actividad en Internet. Pero además, su condición de diseñador le permite dotar al conjunto de las páginas del sitio de un aspecto personalizado y diferencial, algo muy importante.
Encargar el trabajo a un diseñador web supone un gasto adicional ,pero normalmente cualquier empresario no reúne los conocimientos técnicos y artísticos de diseño web necesarios para crear su web obteniendo buenos resultados.
¿Qué aporta un diseñador web?
Los diseñadores web son profesionales con multitud de conocimientos técnicos y creativos. Muchos de ellos diseñan y desarrollan páginas web de diversos tipos: blogs, páginas de aterrizaje, tiendas online o webs corporativas.
Utilizan habitualmente herramientas de diseño y prototipado, frameworks, gestores de contenidos, editores o maquetadores visuales, y todo tipo de módulos y componentes. Son especialistas en los lenguajes de estructurado y programación, como HTML, CSS, Javascript o PHP, entre otros.
Pero además su trabajo implica la personalización de tu página para que sea única. Y está ligado a la creación, revisión, búsqueda y disposición de los contenidos, como textos, imágenes y vídeos, y la manera de organizarlos estéticamente.
Los diseñadores web deben estar al tanto de las últimas tendencias en diseño y ser capaces de realizar propuestas útiles y atractivas que despierten el interés de los usuarios.
Otras funciones del diseñador web
El diseñador web, también puede desempeñar la función de webmaster, e incluso labores de mantenimiento y actualizaciones.
Los mejores diseñadores web realizan su trabajo en diferentes etapas de desarrollo, y deberían dominar las artes del SEO. Además del diseño web por dónde empezar, pueden encargarse de optimizar los contenidos con las palabras clave adecuadas que favorezcan el posicionamiento. Esto es importante si el objetivo es tratar de lograr un buen resultado en los motores de búsqueda para aumentar las visitas a la página.
También pueden intermediar en la contratación o gestión de servicios de reserva de dominios y alojamiento y solucionar problemas que puedan presentarse por la respuesta de la página (WPO) en el servidor. A menudo se encargan de realizar backups o copias de seguridad de los archivos previniendo posibles caídas o borrado de datos.
Ir un paso más allá, supondría trabajar en la externalización del contenido de la web. Utilizar recursos para facilitar que este sea difundido en las redes sociales por ejemplo, de manera que se muestren las imágenes al insertar las URL en su cronología. Asegurarse también de que los contenidos son interpretados y mostrados correctamente por otras aplicaciones como los lectores de feeds o agregadores de noticias.
Empresas de diseño web
Comunicare
Somos una agencia de marketing digital con más de 12 años de experiencia. Para que logres los mejores resultados en tu estrategia de marketing online, desde Comunicare:
– Analizamos clientes, mercados, competidores y plataformas. Fruto del análisis, proponemos un plan con una batería de tests iniciales. Medimos los resultados de los tests y modificamos nuestro plan. No nos gusta equivocarnos.
– Optimizamos al máximo posible para garantizar el éxito de cada campaña a corto plazo. Nuestros esfuerzos están enfocados a desarrollar estrategias digitales de contenidos que combinamos con email marketing para sacar el máximo partido a tu presupuesto.
– Medición, seguimiento y análisis profundo de todos los KPI’s relacionados para seguir el plan propuesto. La clave de los proyectos es la creación de un plan de marketing ganador. Por eso, monitorizamos todos los KPI’s para asegurarnos que lo vamos cumpliendo. En caso contrario, rectificamos.
Nos encargamos de otras áreas relacionadas con el marketing online, como el diseño gráfico, diseño web, desarrollo web o posicionamiento orgánico en buscadores (SEO).
Sneakerlost
En Sneakerlost su trabajo se basa en el desarrollo de páginas web que potencian la acción y la autoridad de marca. Sus páginas web están diseñadas orientadas al usuario y son responsivas en todas las plataformas y dispositvos, tanto en ordenadores de escritorio, portátiles o móviles.
Marketeros web
Desde 2011 son una agencia de servicios digitales, posicionada como líderes en el mercado, ofreciendo soluciones integrales en Marketing Digital. Cuentan con un equipo de profesionales multidisciplinares capaces de hacer diagnósticos en medios digitales para ofrecer recomendaciones que se adapten a las necesidades de cada cliente.
La Banana
En La Banana son expertos en el desarrollo y diseño de webs de cualquier tipo, hacen que tu negocio tenga la presencia necesaria en la red para desarrollarse en un mundo 2.0.
Te ofrecen el diseño de una web personalizable 100% con wordpress, con la posibilidad de incluir: Publicidad por email, tienda, calendarios, blog entre muchas otras posibilidades.