La web, desde que empezó, ha evolucionado mucho hasta llegar en un punto en el que se pueden crear verdaderas maravillas en páginas web o aplicaciones híbridas para móviles. Todo empezó a partir de la necesidad de separar el contenido de las webs del estilo visual de las mismas, hablamos del año 1996 más o menos. En aquel entonces los estilos que se podían aplicar eran los más básicos: color del texto, fuente, formato de párrafo y poca cosa más. Además, para poder darle un diseño a las primeras páginas que salieron en la web, había que definir para cada parte el estilo que se le quería aplicar. Por ejemplo, se tenía que decir a cada uno de los títulos de la página web que fuesen un poco más grandes con una fuente distinta y tuviesen un color determinado, cosa que provocaba que para grandes proyectos pasara a ser prácticamente imposible cambiar el estilo una vez ya estaba acabado.
Beneficios del CSS
Con CSS (cascading style sheets) se consiguió separar el contenido del estilo; por una parte se tiene el fichero HTML con toda la estructura y los datos y, en otro fichero, el CSS tiene las declaraciones de estilo. De esta forma, en el ejemplo anterior bastaría con cambiar la declaración de estilo para los títulos y el cambio se aplicaría en todo el proyecto.
Esto también dio a lugar a hacer que CSS tenga muchas más funciones de las básicas que tenía inicialmente, como posicionamiento de los elementos, sombras, fondos, gradientes, animaciones, etc. que permite crear páginas web tan visualmente atractivas como las que hay actualmente. Sin embargo, CSS sigue creciendo, y desde SlashMobility hacemos una pequeña revisión de las últimas funcionalidades y las que están al caer.
– Máscaras. Estas permiten ocultar, mostrar una parte del contenido, que bien se puede definir mediante una imagen o con una forma arbitraria. Si a esta forma le aplicamos una animación (también en CSS), nos puede quedar un buen efecto que puede llamar la atención de los usuarios.
– Filtros. Funcionalidad que ya tienen instalada la mayoría de navegadores. Esta permite añadir distintos filtros a las imágenes de una forma dinámica como por ejemplo; desenfoque, contraste, brillo, saturación y sepia entre muchos otros. Los beneficios de esta funcionalidad son infinitos, pero resulta de especial utilidad para centrar la atención del usuario en alguna imagen en concreto.
– Modos de mezcla (blend modes). Esto son los métodos por la cual dos imágenes que se superponen se dibujan. La aplicación más básica es aquella que consigue que una imagen tape a la otra. Uno de los más utilizados es mediante transparencias, pero, los más nuevos se basan en la multiplicación, suma y división de colores. Aunque es posible que no pueda ser útil en muchas webs, se pueden crear fondos o imágenes con un cierto patrón ocupando muy poco espacio para evitar uno de los mayores problemas en las webs de empresa; la velocidad de carga.
– Shaders. Funcionalidad que prácticamente ningún navegador la tiene implantada todavía. Estos son fragmentos de código que se ejecutan directamente sobre la tarjeta gráfica, justo antes de que se pinte en pantalla. Esto permite crear efectos como deformar el contenido o el color sin que necesite muchos recursos de la máquina.
Estas funcionalidades demuestran que la web será cada vez más potente, aunque todavía queda bastante para acabar de implantarlas a la perfección. Además, uno de los grandes problemas en este mundo es la segmentación, que cada navegador implanta lo que más le conviene, aunque cada vez más intentan ceñirse lo más posible a los estándares para que el contenido pueda llegar a todos los usuarios. En este punto cabe destacar la importancia del responsive design y la optimización de las webs para adaptarse al canal móvil.
Aquí os dejamos la presentación que realizó el Slashboy Víctor Oliva, en la última SlashFriday.
Autor: Víctor Oliva
