Uso de las hojas de estilo CSS en la creación y diseño de una web

Las hojas de estilos son la clave principal para el diseño web, se encargan de darle el aspecto deseado a nuestro sitio online, además de añadir funcionalidades. Es por ello que cualquier trabajo relacionado con web front end es indispensable tener experiencia con ellas. Hoy en día las hojas de estilos han sido extrapoladas a otros ámbitos, como la telefonía móvil. Esto es debido a que han nacido muchos entornos que se basan en lenguajes web para poder llevar a cabo un proyecto. ¿Pero realmente se diferencian entre ellas o es exactamente lo mismo? Continúa leyendo para aprender un poco más de CSS y sus hermanos en el desarrollo multimedia.

CSS en el ámbito web y móvilUso de las hojas de estilo CSS en la creación y diseño de una web

No os voy a mentir: el ámbito web no es mi especialidad, pese a que tengo conocimientos por pura necesidad, y esto es porqué he crecido más en el mundo móvil, tal y como podréis encontrar en mi descripción profesional. Pero cuando yo entre en este mundo, después de titularme, ni de broma era como lo es hoy en día. He llegado a observar unos cambios muy interesantes que han traído beneficios a los nuevos perfiles que van apareciendo. Es por ello que antes debemos entender qué es una hoja de estilo. Las hojas de estilos son un documento externo, cuando toda la información reside en un fichero aparte, o interno, también conocidos como estilos en línea los cuales viven en el mismo fichero de la estructura, a nuestra web o aplicación. El beneficio que nos otorga es que podemos separar la lógica del diseño, algo que es altamente recomendable. Pero lo más interesante es que podemos dejar de tener datos redundantes, o que se repitan. Por ejemplo, imaginemos que queremos que todos los botones tengan el mismo color. En vez de repetir una y otra vez dicho parámetro, hacemos referencia a la hoja de estilos que nos hemos preparado y únicamente deberemos llamar el objeto, despreocupándonos totalmente de su diseño. Esto da lugar, no sólo a tener los datos más organizados, si no también a tener muy bien diferenciado lo que es la estructura del diseño.

Pero ahora bien, el título habla en el diseño web. ¿Qué tiene que ver esto con el desarrollo móvil? Mucho más de lo que puede parecer a simple vista. Aquí han habido dos evoluciones: la reinvención de las aplicaciones nativas (al menos en el caso de Android), y el nacimiento de las aplicaciones híbridas.

En el primer caso nos hemos encontrado que, gracias al lanzamiento de Android Studio, y pese a que no se usan ficheros .css, el concepto de diseño es muy similar por no decir igual, con la única diferencia de que se usa el lenguaje xml. Pero si analizamos su funcionamiento nos daremos cuenta que estamos creando el diseño, o layout, con un fichero externo que almacena toda la información en cuanto a colores, tamaño, fuente o, simplemente, elementos en pantalla, mientras que por otro lado dejamos el trabajo de la lógica al lenguaje JAVA (que no JavaScript). El beneficio de esto es que los programadores y los diseñadores pueden trabajar de manera conjunta sin que se molesten entre ellos.

Por otro lado tenemos el nacimiento y evolución de las aplicaciones híbridas. Allí en 2011 yo empecé a programar apps con Titanium Studio y el diseño venía a cargo del código de programación, es decir, no había esa separación de conceptos previamente mencionada. Hasta que decidieron adoptar los beneficios de las hojas de estilos también para estos entornos. Aquí la tarea era más sencilla porqué, recordemos, el lenguaje usado para programar no dejaba de ser web. ¡Era como crear una web dentro de un teléfono y pudiendo aprovechar todo el potencial del terminal! Esta técnica ha sido mantenida y mejorada a lo largo de los últimos años y sigue vigente, siendo el estándar de uso con Apache Cordova, Ionic Framework o Appceletor Studio (el nuevo nombre de Titanium). Y es que si algo se recomienda cuando estamos aprendiendo a programar es que debemos diferenciar de manera perfecta el diseño de la lógica, como he dicho ya.

¿Todo esto a que viene? Actualmente estamos en una época que los lenguajes y técnicas web, algo infravalorados, han logrado llegar mucho más allá de un simple sitio en internet, y esta es la conclusión a la cual quiero que lleguemos con este post: darnos cuenta de que nunca hemos salido del entorno web, sea reproducido en un teléfono, una tableta o esté alojado en un servidor. Se pueden llegar a hacer hasta juegos con HTML5 y CSS, con la ayuda de JavaScript por supuesto.

Y es que ahora la creación y diseño de una web sólo se diferencia de una aplicación en el entorno en el que va a ser ejecutado: un ordenador, un teléfono, una tableta y, muy pronto, la realidad aumentada. La web está por todos lados.

Curso relacionado: Curso de Programación con HTML5 y CSS