Figura 1: Estadísticas de acceso a la Web entre mayo 2016 y abril 2017 según StatCounter
¿Cómo se escribe una regla en CSS? ¿Qué propiedades y valores existen en CSS? ¿Cómo se selecciona un elemento de una página web para aplicarle una regla de CSS?
¿Cómo puedo saber que el código CSS que he escrito es correcto?
¿Cómo se representan los colores en CSS? Para trabajar con los colores necesitas conocer la codificación RGB (red, green, blue):
¿Qué combinaciones de colores son correctas? Los colores armónicos son aquellos que funcionan bien juntos, es decir, que producen un esquema de color atractivo a la vista. Algunas páginas donde puedes encontrar combinaciones de colores armónicos:
¿Existen plantillas de CSS que pueda emplear en mi sitio web? Existen multitud de sitios web donde se pueden encontrar plantillas gratuitas y de pago. Algunos sitios que ofrecen plantillas gratuitas son:
¿Existe alguna herramienta que me pueda ayudar a escribir el código CSS?
¿Cómo se maqueta con CSS?
¿Cómo se maqueta un formulario con CSS?
¿Cómo se maqueta una tabla con CSS?
¿Existe alguna herramienta que me pueda ayudar a escribir el código CSS necesario para maquetar una página web?
¿Qué es el diseño adaptativo?
¿Cómo se realiza un diseño adaptativo?
En esta práctica tienes que crear el estilo visual de las páginas web de la práctica anterior y del resto de páginas que harás en las próximas prácticas. Como mínimo, tienes que emplear las siguientes propiedades de CSS:
Además, define al menos un par clases para definir el estilo particular de algunos elementos, como por ejemplo, .anuncio para aplicarlo a un párrafo que define un anuncio o .conBorde para aplicarlo a aquellos elementos que tienen que aparecer con un borde.
En esta práctica debes realizar la maquetación (layout) de la página. Según el Diccionario de la Lengua Española39 de la Real Academia Española, maquetar es “Hacer la maqueta de una publicación que se va a imprimir”. Si buscamos maqueta, obtenemos varias acepciones y una de ellas dice “Boceto previo de la composición de un texto que se va a publicar, usado para determinar sus características definitivas”.
En el desarrollo de las páginas web, se entiende por maquetación a la acción de distribuir o posicionar los distintos elementos que queremos que aparezcan en una página web. En especial, haz una correcta maquetación de los controles de los formularios para que aparezcan alineados.
¿Hoy en día se accede a la Web exclusivamente desde un ordenador? No, es muy normal acceder a la Web desde un dispositivo móvil como un teléfono inteligente (smartphone) y es muy probable que en el futuro se acceda también desde otros tipos de dispositivos que en la actualidad no contemplamos. En realidad, según StatCounter, entre octubre y noviembre de 201640, el acceso a la Web mediante teléfono móvil superó al acceso mediante ordenador, tal como se puede observar en la Figura 1, donde la línea azul representa el acceso mediante ordenador y la línea verde representa el acceso mediante teléfono móvil. Este cambio de tendencia se mantiene hasta la actualidad.
Por tanto, tienes que crear una hoja de estilo que incluya un diseño adaptativo (responsive design), que tu sitio web se visualice de forma adecuada en un dispositivo con una pantalla de baja resolución (480px de ancho) o de alta resolución (1920px de ancho). Puedes definir todos los puntos de ruptura (breakpoints) que consideres necesarios.
Para definir el estilo visual tienes que emplear el lenguaje de estilos CSS. No tienes que crear un fichero distinto para cada página, sino que el mismo fichero lo utilizarás en todas las páginas, a no ser que existan algunas páginas con estilos visuales muy diferentes (por ejemplo, la página de inicio, la página principal y el resto de páginas).
Tienes varias formas de crear una hoja de estilo CSS:
Si quieres escribir directamente el código CSS, cualquier editor de texto sencillo como el Bloc de notas es suficiente. Sin embargo, puedes emplear un programa como Notepad++41, que posee algunas características que ayudan a escribir el código, como la sintaxis coloreada o la función de autocompletado (pulsa Ctrl+Espacio).
Si prefieres emplear una herramienta que te permita crear un CSS de forma visual, emplea EclipseStyle42, que evita tener que conocer las propiedades y valores de CSS.
También existen herramientas online, como CSS Generator43 y CSS Style Editor44 que permiten escribir un CSS sin conocer el nombre de las propiedades y valores.
Para indicar que se está usando un fichero CSS en una página web se emplea la etiqueta <link />. En una misma página web se pueden indicar varios ficheros CSS que se combinan todos ellos o también se puede indicar de forma que definan estilos alternativos. Por ejemplo, en el siguiente código se define un estilo CSS que se debe emplear cuando se imprima una página web (print) y un estilo que se debe emplear en el resto de casos (cuando no se indica el atributo media de forma explícita, este toma el valor all que significa que se aplica a cualquier dispositivo):
En el ejemplo anterior aparece el atributo type="text/css" que ya no es necesario ponerlo en HTML5, pero que lo puedes encontrar en muchos ejemplos.
Las variables CSS, oficialmente conocidas como CSS Custom Properties45, son un mecanismo que permite escribir hojas de estilo más fáciles de mantener. El primer borrador de la especificación oficial se publicó en el año 201246, pero no fue hasta el año 2016 que la mayoría de los navegadores web implementaron las variables CSS. En la Figura 2 podemos ver el soporte actual (octubre 2019) de las variables CSS en los principales navegadores web. Solo Microsoft Internet Explorer y algunos navegadores minoritarios no soportan esta característica de CSS.
Las variables se declaran con el prefijo -- (dos guiones) dentro de un selector. El selector :root permite declarar las variables en un ámbito global para que estén disponibles dentro de cualquier otro selector. Para utilizar una variable se emplea var() y entre paréntesis se escribe el nombre de la variable que se quiere utilizar.
Por ejemplo, el siguiente código define las variables color1 y color2 que se emplean para definir el color de dos párrafos:
Aunque en el ejemplo anterior se han escrito las reglas de CSS directamente en la página web con la etiqueta <style>, recuerda que lo correcto es escribirlas en un fichero separado y enlazarlo con la etiqueta <link />.
En la Figura 3 se puede ver el resultado del código anterior en un navegador web.
En el siguiente ejemplo, dentro del selector #contenedor se redefine la variable color1 que ha sido definido en el ámbito global. Como resultado de este cambio, los dos últimos párrafos no muestran los mismos colores que los dos primeros párrafos, aunque compartan las mismas reglas de CSS. Este ejemplo muestra que los mecanismos de la herencia y la cascada siguen funcionando con las variables.
En la Figura 4 se puede ver el resultado del código anterior en un navegador web.
Para maquetar con CSS un formulario existen varias técnicas. Una sencilla consiste en definir un tamaño fijo para las etiquetas de los controles. Por ejemplo:
Aunque en el ejemplo anterior se han escrito las reglas de CSS directamente en la página web con la etiqueta <style>, recuerda que lo correcto es escribirlas en un fichero separado y enlazarlo con la etiqueta <link />.
En la Figura 5 podemos observar como se visualiza esta página en un navegador web:
Y si se añade una propiedad text-align: right se puede lograr otro diseño, tal como podemos ver en la Figura 6:
Sin embargo, un tamaño fijo no es la mejor opción. Otra opción un poco mejor es basar el tamaño no en píxeles, sino en el tamaño del texto:
Pero todavía se puede hacer mejor, esta solución no es adaptativa. En How to structure an HTML form47 y Styling HTML forms48 se explican algunas técnicas básicas de maquetación de formularios. Y en 10 CSS HTML Form Designs49 se proporcionan 10 estilos visuales de formularios, con el código HTML y CSS.
Un buen diseño y una buena maquetación es aquella que está preparada para adaptarse a diferentes dispositivos. ¿Cómo se puede lograr? Una solución que se aplica en la actualidad es el diseño adaptativo, adaptable o flexible (responsive design).
El diseño adaptativo se basa principalmente en el uso de Media Queries50, un estándar del W3C. Una media query es una expresión que implica la evaluación de una o varias media features, que da como resultado un valor booleano de verdadero o falso.
La media query se puede utilizar desde HTML en la etiqueta <link /> con el atributo media:
En el ejemplo anterior, si el dispositivo de visualización es una pantalla, se usa el estilo sans-serif.css. Pero si el dispositivo de visualización es la impresora, se usa el estilo serif.css.
También se puede utilizar directamente desde CSS con la declaración @media:
En el ejemplo anterior, se define un tipo de letra serif para todos los dispositivos de visualización, pero si el dispositivo de visualización es una pantalla, el tipo de letra se redefine como sans-serif para todos los elementos de la página web.
Una media query suele evaluar alguna de estos atributos:
Por ejemplo, en el siguiente fragmento de código se definen tres hojas de estilo CSS que se aplicarán según la anchura que tenga el dispositivo en el que se visualice la página web:
También se puede emplear la instrucción @import51, que permite importar un CSS desde otro CSS. Esta instrucción es muy útil cuando se quiera modularizar y reutilizar ciertas partes de un CSS.
El ejemplo anterior con tres etiquetas <link> en el código HTML, se puede convertir en una única etiqueta:
Y en el fichero estilos.css se importan las tres hojas de estilo:
Para que un diseño adaptativo funcione correctamente, se debe añadir la siguiente instrucción52 en la sección <head> de la página web:
Los siguientes vídeos te pueden ayudar a realizar tu diseño adaptativo:
El empleo de iconos en una página web ayuda a mejorar la usabilidad, ya que permite una identificación visual de los elementos de la página. Por ejemplo, en la Figura 7 se puede ver un formulario que tiene un icono de una persona para representar el nombre de usuario y un icono para representar la contraseña. Y a la derecha hay un panel para identificarse mediante redes sociales, donde cada opción tiene su icono correspondiente.
Sin embargo, si se eliminan los iconos (por ejemplo, porque el usuario decide no cargar las imágenes), aparece un problema importante de usabilidad porque no se sabe qué escribir en los dos cuadros de texto del formulario, tal como se puede ver en la Figura 8. Además, este problema de usabilidad evidencia que también hay un problema de accesibilidad: los usuarios que utilicen un lector de pantalla (screen reader) no sabrán qué escribir en cada cuadro de texto, aunque aparezcan los iconos.
Este problema de usabilidad y accesibilidad no surge en el panel de la derecha porque, además de los iconos, existe la explicación textual de cada opción.
Utiliza alguna biblioteca de iconos, como Font Awesome56 o Fontello57 para añadir iconos a tu sitio web y así mejorar su usabilidad y su apariencia visual. Los puedes añadir a los formularios, a las barras de navegación o a otros elementos de las páginas de tu sitio web que consideres apropiado. Pero asegúrate de que todo lo que hagas no perjudica la usabilidad y la accesibilidad de las páginas web.
El estilo que definas no debe ser muy simple (no vale con cambiar el color de fondo de la página y definir un estilo para el texto), pero tampoco es necesario que sea muy complejo. Con unas pocas reglas de CSS bien elegidas se puede lograr un estilo visual impactante. Y no es necesario que implementes animaciones y transiciones: si lo quieres hacer para aprender más, puedes hacerlo, pero no cuenta para la evaluación de la práctica.
En general, se recomienda que como mínimo se utilicen tres colores diferentes (y suele ser lo suficiente en la mayoría de los casos) y no más de seis.
En general, se recomienda que se utilicen dos tipos de letra (un tipo de letra para los títulos y otro para el contenido principal) y como máximo tres (un tipo de letra para contenido adicional, como puede ser una barra lateral, o para destacar algo en el texto principal). Si quieres usar tipos de letra especiales, prueba con Google Fonts58.
Una mala práctica es definir múltiples clases (class) e identificadores (id). Siempre que sea posible, emplea selectores simples que hagan referencia a elementos de HTML.
Recuerda que hay propiedades que se heredan, por lo que no es necesario definirlas para todos los elementos, sino que si se define en un elemento padre, todos sus hijos la tomarán. Por ejemplo, para aplicar un mismo estilo de texto en toda una página web, lo más sencillo es definirlo en el elemento html o body. Pero a veces un elemento no hereda una propiedad, aunque otros elementos sí que lo hagan. El ejemplo típico de esto es el enlace, que no hereda el color, aunque otros elementos sí que lo hacen.
Un fichero CSS puede llegar a tener cientos o incluso miles de líneas, por lo que pueden aparecer problemas importantes:
Para evitar estos problemas, es necesario organizar un fichero CSS de alguna forma. Cada uno tiene que desarrollar su estilo propio, con el que se sienta más a gusto. Algunas posibilidades son:
También existen algunas herramientas que te pueden ayudar a organizar un fichero CSS. Format CSS Code59 es una herramienta online que formatea el aspecto de un CSS: introduce saltos de línea, espacios en blanco, etc. CSS Optimizer60 es otra herramienta online que ayuda a reducir el tamaño de un fichero CSS al aplicar algunas transformaciones, como por ejemplo, cambiar el nombre de algunas propiedades y valores.
Utiliza los comentarios de CSS /* …*/ para separar las diferentes partes de un CSS y para desactivar ciertas propiedades cuando quieras realizar pruebas.
¿Estás realizando un diseño adaptativo o adaptable? En español nos “faltan palabras”, cuesta distinguir adaptativo (Perteneciente o relativo a la adaptación o a la capacidad de adaptación61) y adaptable (Capaz de ser adaptado62), pero en inglés se distinguen dos tipos de diseño, responsive design y adaptive design. Los siguientes artículos explican las diferencias entre estos dos tipos de diseño:
Y recuerda: evita la divitis66, la spanmania y la classitis67.
Importante:
3http://www.digilife.be/quickreferences/QRC/Cascading%20Style%20Sheets%201.0.pdf
4http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
5http://www.webtutoriales.com/tutoriales/html-css/hoja-referencia-css.26.html
6http://www.smashingmagazine.com/2010/05/13/css-2-1-and-css-3-help-cheat-sheets-pdf/
7http://jigsaw.w3.org/css-validator/
8http://es.wikipedia.org/wiki/Colores_HTML
9http://es.wikipedia.org/wiki/Anexo:Colores_HTML
10http://www.webusable.com/coloursMix.htm
12http://www.freecsstemplates.org/
13http://www.free-css-templates.com/
14http://notepad-plus.sourceforge.net/es/site.htm
16http://www.greeneclipse.com/eclipsestyle.html
17http://cssmate.com/csseditor.htm
18http://www.effectivetranslations.com/stupidtables/everything_es.html
19http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/
20http://css-discuss.incutio.com/?page=CssLayouts
22http://www.maxdesign.com.au/presentation/page_layouts/
23http://www.websiteoptimization.com/speed/tweak/forms/
24http://www.informit.com/articles/article.aspx?p=456144
25http://www.alistapart.com/stories/practicalcss/
26http://jeffhowden.com/code/css/forms/
27http://icant.co.uk/csstablegallery/
28http://csslayoutgenerator.com/
29http://csscreator.com/version2/pagelayout.php
30http://www.cssportal.com/layout-generator/
31http://blogs.ua.es/pi/2012/04/17/diseno-web-responsivo-sensible-adaptable/
32http://alistapart.com/article/responsive-web-design
33http://www.lukew.com/ff/entry.asp?1436
34http://bradfrost.com/blog/web/responsive-web-design-missing-the-point/
35https://css-tricks.com/css-media-queries/
36https://www.smashingmagazine.com/2011/07/responsive-web-design-techniques-tools-and-design-strategies/
37https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
38http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
40http://www.digilife.be/quickreferences/QRC/Cascading%20Style%20Sheets%201.0.pdf
41http://notepad-plus.sourceforge.net/es/site.htm
42http://www.greeneclipse.com/eclipsestyle.html
43http://csscreator.com/tools/cssgenerate
44http://www.cssportal.com/css-style-editor/
45https://www.w3.org/TR/css-variables-1/
46https://www.w3.org/TR/2012/WD-css-variables-20120410/
47https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/How_to_structure_an_HTML_form
48https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Styling_HTML_forms
49https://www.sanwebe.com/2014/08/css-html-forms-designs
50https://www.w3.org/TR/css3-mediaqueries/
51https://developer.mozilla.org/en-US/docs/Web/CSS/@import
52https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
53https://youtu.be/ktGF7Dda0wI
54https://youtu.be/96U4zPbyq9c
55https://youtu.be/cbtJ4udg7sM
59http://www.cssportal.com/format-css/
60http://www.cssportal.com/css-optimize/
61http://dle.rae.es/adaptativo
63http://mediumwell.com/responsive-adaptive-mobile/
64https://css-tricks.com/the-difference-between-responsive-and-adaptive-design/
65https://www.mockplus.com/blog/post/difference-between-responsive-and-adaptive
66https://csscreator.com/divitis
67https://www.456bereastreet.com/lab/web_development_mistakes/es/
68https://developer.mozilla.org/en-US/docs/Web/CSS/@charset
69http://www.digilife.be/quickreferences/QRC/Cascading%20Style%20Sheets%201.0.pdf
