Crea tu web, tutor html, css

El diseño del sitio

Ahora viene la tarea de dar un aspecto atractivo al sitio, atractivo y útil por supuesto. Es el momento de decidir cuestiones sobre la forma que vas a darle. Aquí entra lo que es puro diseño estilístico y también diseño técnico, estás a punto de comenzar con el desarrollo de la aplicación web completa.

Tu primer paso va a ser una hoja de papel, digo bien: papel y bolígrafo. Haz un boceto de todo el sitio: estructura, aspecto, una idea de colores. Algo que no va a ser definitivo pero te va a dar la idea inicial desde la que partir cuando te pongas a trabajar delante del ordenador a materializar el sitio web en archivos, scripts, imágenes, enlaces.

Este trabajo puedes iniciarlo desde cero, comenzando con una amenazante hoja en blanco que tendrás que ir llenado con tus ideas (el boceto) hasta tener la página que quieres, y como tu quieres. La conocerás a fonod y serás capaz de modificarla o depurarla en caso de malfuncinamiento sin demasiado esfuerzo.

También puedes comenzar con plantillas, sitios o páginas web funcionales que tendrás que personalizar para tu caso concreto. El trabajo consistirá en cambiar imágenes, menús, textos y poco más, hasta tener las páginas como la has pensado. Si lo haces, busca plantillas que vayan con un estilo actual y con diseño responsive (la mayoría lo son).

Como ves tienes dos caminos: hacerlo (casi) todo tu o usar algo ya hecho. Por supuesto también cabe algo intermedio, usar modulos prefabricados en sitios construidos desde cero.

El proceso de diseñar la web

El uso de elementos prefabricados tiene una gran ventaja: ya están hechos y funcionan bien, te ahorran el trabajo de codificar, programar, decidir. Solo elegir un estilo en la linea de lo que quieres obtener.

Y tienen una gran desventaja, puedes estar matando moscas a cañonazos. Es como si vas de viaje y llenas tus maletas con ropas para el desierto, el trópico y los polos. Pero solo vas a la selva ¿para qué quieres los esquies?. Es fácil, por ejemplo, que acabes con enormes scripts para cambiar el color a un texto cuando lo clicas con el ratón, algo que necesitas en una sola página de todo tu sitio. Y eso puede significar que una página doble su tamaño, aumente el tiempo de carga: sea menos eficiente.

Entonces ¿usar plantillas?¿usar frameworks?¿si? ¿no?. No hay una respuesta única, depende del contexto. Si vas a crear una página web tan solo para tener presencia en la red o anunciar tu producto sin más pretensiones, pues una buena plantilla bien personalizada puede ser suficiente. Para un objetivo tan simple quizás no merezca la pena tanto trabajo. Si vas a crear un sitio que va más a allá pues puede que el tiempo empleado sea rentable.

No te lances a codificar o editar las páginas sin un trabajo previo.

Empieza a crear tu sitio en papel, ten claro el objetivo.

Estilos: Material Design

Los estilos de las páginas cambian con el tiempo, como cambian las modas, cambios muy influenciados por la tecnología. Actualmente el estilo imperante es el llamado Material Design, una creación de Google muy enfocada a las pantallas de dispositivos móviles (al sistema Android). Y del móvil lógicamente ha pasado a la pantalla del ordenador. Lo que se ve en un ordenador de sobremesa debe ser lo mismo que en una tablet o en un smartphone.

En este diseño se considera que las páginas web son superficies físicas, que se pueden tocar. Se cumplen las leyes físicas: los objetos pueden desplazarse unos sobre otros pero no atravesarse. Todo es bastante plano, poca textura 3D. Piensa en una hoja de papel sobre la que están depositados los elementos de la página. Estos elementos tienen profundidad, pueden tener sombras, estar apilados, tienen bordes. Hay tarjetas con encabezados, contenidos, y como no imágenes. Las sombras tienen sentido, dan idea de las distancias entre un elemento a la superficie base de la página, y dan una idea sobre la fuente de luz. Los objetos pueden desplazarse (las hojas pueden girarse, doblarse) y no tienen porque aparecer o desaparecer instantáneamente, de ahí el uso de animaciones y transiciones para mostrar elementos que cambian.

En el diseño las imágenes tienen una importancia que va más allá del simple adorno. Se deben buscar imágenes que digan o que signifiquen algo relativo al contexto, de manera muy clara. Sencillas, esquemáticas, colores vivos. Por supuesto imágnes con cierta calidad, nada de fotografías pixeladas al ser ampliadas.

Se prefieren textos con tipografía y colores que faciliten la lectura, con contrastes adecuados. Nada de diseños pesados, todo lo más ligero posible. Los iconos deben ser planos, sin efectos 3D.

Los colores siguen la misma linea: deben facilitar la lectura, cierta uniformidad que no distraiga sobre el foco de lo que trata de comunicar la página. Mostrar contrastes claros entre botones o menús y fondos.

Material Design
Material Design, un diseño pensado desde Google para las aplicaciones de Android

Diseño Responsive

Y en cuanto al aspecto técnico del diseño, actualmente lo que manda es el llamado Responsive Design, que podríamos traducir como Diseño Adaptativo. Con este diseño se busca que las páginas web sean viisibles en un móvil con las mismas prestacines que en un ordenador de sobremesa, o un portátil o una tablet. Es decir la página debe ser independiente del medio que se utilize para verla.

Diseño adaptativo o responsive

Para lograr este objetivo existen dos técnicas muy diferentes. La más elemental es crear varias versiones que se mostrarán en función del dispositivo usado para visitarla. Un poco de javscript y configuración del servidor web es suficiente para discernir que tamaño de pantalla se está usando (que viewport) y en función de ese parámetro mostar una u otra versión. Habrás visto páginas que en el ordenador se ve con una url tipo sitio.com y en el móvil la url es como m.sitio.com.

El otro método se basa en diseñar una única versión que se adapte al dispositivo, usando para ello estilos CSS diferentes según ese contexto y a veces auxiliándose de rutinas escritas en Javascript.

Para facilitar el trabajo de los diseñadores existen unas especies de librerías de estilos CSS y Javascript con elementos utilizables en cualquier diseño. Son los denominados frameworks (entornos de trabajo).

La web W3School utiliza un framework con tan solo una archivo estilos predefinidos (W3.css) que pueden usarse perfectamente para crear sitios responsives, con un uso mínimo de javascript. Este framework ofrece también una amplia colección de paletas de colores. Su principal ventaja: tan solo un archivos CSS es suficiente para desarrollar páginas responsive.

El otro framework más extendido en la actualidad es el Bootstrap, esta plataforma se basa en el uso de estilos CSS predefinidos y en una amplia colección de scripts basados en la libreria JQuery. La mayoría de los editores Drag & Drop usan esta plataforma para crear las páginas. Ventaja, posee muchos efectos creados con javascript a costa de incrementar el peso de cada página con las librerías.

Actualmente se diseña pensando en el móvil, no en la pantalla del ordenador

Las plataformas CMS

Los CMS son otra vía para el diseño de páginas web. No me refiero a los CMS de los servidores, sino a las plataformas como WordPress, Joomla o la más específicas de comercio electrónico como Magento, Prestashop entre otras.

Sistemas CMS enfocado a páginas web

Estas plataformas se basan mayoritariamente en el lenguaje de programación php y te permiten crear un sitio web a partir de plantillas. Ofrecen una gran colección de complementos (widgets y pluggins) para casi todo lo que se te ocurra. En estos sistemas las páginas son dinámicas, es decir, se crean en el momento de ser visitadas a partir de sus contenidos almacenados en una base de datos. Realmente las páginas de estos sistemas son archivos php, no archivos html. Los archivos php pueden combinar etiquetas html con instrucciones de programa. Esots programas leen los contenidos de las bases de datos y construyen la pa´gina web que finalmente ves en el navegador.

Los CMS tiene la ventaja de que se crea un sitio web completo en poco tiempo (si no necesitas demasiada personalización). No requiere un conocimiento profundo de los lenguajes de la web (HTML, CSS, Javascript, PHP). Tienen una gran comunidad de usuarios. Lógicamente esto es un nicho de mercado y existe una gran cantidad de utilidades y plantillas de pago. Estos productos los crean quienes si tienen buenos conocimientos de los lenguajes de la web.

Cualquier utilidad que desees se soluciona con módulos extras (widgets y plugins), añadidos que hacen crecer al sitio web con módulos de código que requieren tiempo para ser examinados. Esto conlleva que los fallos no siempre son fáciles de solucionar, puede ser necesario contar con un soporte. Y estás metiendo código ajeno en tu servidor, por lo que hay que cuidar my bien donde los compras.

También en los CMS es necesario tener muy presente el tema de la seguridad. Son sistemas muy extendido y muy conocidos por gente que se lo pasan bien toqueteando cosas que no son suyas. Por supuesto si usas una de estas plataformas ni se te ocurra utilizar plantillas, pluggins o widgets pirateados (los llamados nulled) salvo que los hayas examinado bien a fondo y sepas perfectamente lo que hacen.

Los productos de las plataformas CMS suelen ser tiene poca personalidad, también requieren trabajo para personalizarlos