Mejor por diseño
He tenido muchas respuestas a mis comentarios recientes sobre la escasez de buenos libros sobre diseño y desarrollo web básicos. La mayoría de los libros de renombre actualmente disponibles simplemente no son adecuados para su propósito, cubriendo a medida que hacen malas prácticas y tecnologías desactualizadas. Sus autores pueden salirse con la suya solo porque el software moderno del navegador es muy tolerante, pero al enseñar estas técnicas desapercibidas simplemente perpetúan las prácticas pobres, o en el mejor de los casos condenan a los recién llegados a desaprender todo lo que acaban de aprender.
En mi última columna, le mostré cómo usar WordPress para crear sitios web que se adhieran bien a las mejores prácticas en términos de tecnología, si no diseño. Al igual que los sistemas de gestión de contenido similares, como Joomla y Drupal, WordPress le permite crear sitios web con un conocimiento mínimo de las tecnologías subyacentes. Sin embargo, es solo una herramienta y, a menos que simplemente copie un diseño de sitio existente, deberá comprender los conceptos básicos del formato CSS para modificar un tema preconstruido. Para crear un nuevo diseño desde cero, o modificar el diseño básico de un tema, requiere no solo las habilidades de CSS, sino también una comprensión de cómo el diseño, la tipografía y el color funcionan en línea.
No se aleja de la importancia del diseño cuando se trata del desarrollo de sitios web
No se aleja de la importancia del diseño cuando se trata del desarrollo de sitios web. Desearía que esto no fuera cierto, ya que estoy mucho más feliz codificando el back-end de mis aplicaciones web y rara vez estoy más frustrado que cuando me empujan y nudo con su diseño. Dicho esto, el hecho de que entiendo los fundamentos del diseño web significa que no perderé el tiempo en esta etapa: al menos sé que el tiempo que paso implementando su aspecto otorgaré un sitio guapo.
Bastics de diseño
El aspecto del diseño web que más me desconcertó cuando comencé era cómo armar un diseño: parecía haber un número infinito de posibilidades, así que dónde comenzar? Me equivoqué al respecto, ya que la mayoría de los sitios web usan uno de un pequeño número de diseños básicos. Las limitaciones de su navegador significan que solo unos pocos diseños tienen sentido práctico, porque hacen que sea más fácil para los visitantes de los nuevos sitios encontrar su camino, y son más fáciles de crear.
Los diseños de CSS se basan en bloques, áreas rectangulares que pueden contener cualquier elemento marcado HTML, incluidos texto, imágenes y enlaces (o, de hecho, nada en absoluto). La mayoría de las páginas web emplean al menos estos artículos:
- Contenido
La información real, que tiende a ocupar la mayor parte del área de la página.
- Navegación
Si bien es posible que tenga enlaces integrados dentro del contenido, también debe tener menús de navegación claramente identificables y comprensibles
- Logo
Los sitios web comerciales o de caridad casi siempre comenzarán con el logotipo de la organización, que la mayoría de las veces estará en la esquina superior izquierda
- Pie de página
La mayoría de las páginas incorporan un pie de página que contiene información de derechos de autor, y a menudo se repite los enlaces de la página principal
Por lo general, toda la página se ajustará dentro de algún tipo de contenedor. Para ver lo que quiero decir con esto, mire la página de inicio multimedia Nlightn donde el área gris alrededor del borde es el contenedor. Cambiar el tamaño de la ventana del navegador y observar lo que sucede: a medida que hace que el navegador sea más grande o más pequeño, el área gris crece y encoge para que el contenido de la página dentro del rectángulo blanco permanezca del mismo tamaño. (Obviamente, una vez que la ventana del navegador se encoge por debajo de un cierto tamaño mínimo, entonces también debe el área blanca.) Este es un ejemplo de un diseño de "ancho fijo", en contraste con los diseños "líquidos" que cambian de tamaño a medida que el usuario cambia de tamaño de la ventana de su navegador.
