TALLER |
|
PIXABAY montaje kasmangou Bienvenidos de nuevo a nuestro curso de programación. Después de analizar cómo se estructura una página usando HTML5, ha llegado la hora de darle forma, ya hemos hablado acerca de la integración de HTML5 junto a CSS y Javascript, también hemos aclarado el papel que desempeña cada uno de ellos dentro de esta confluencia, así que no vamos a perder el tiempo dándole ya más vueltas y vamos a empezar a ver cómo podemos darle la imagen exacta que queremos a nuestra web con CSS3. CSS oficialmente no tendría nada que ver con HTML5, no es parte de la especificación que se desarrolló para reducir las limitaciones y excesiva complejidad de HTML. Al principio las etiquetas HTML y sus atributos eran todo lo que se usaba para dar el estilo y aspecto característico a una página, su evolución cada vez era más compleja y a su vez no llegaba a cumplir las nuevas peticiones de los desarrolladores, dando lugar a que CSS fuera usado como una forma de dividir lo que sería por un lado la parte estructural de la página, o sea su armazón y la forma en que esta se nos presenta visualmente ante los que la ven por otro. La evolución de CSS y HTML se puede decir que desde ese momento que poco a poco avanzando de forma más o menos paralela. La versión que analizaremos de CSS, en este caso la 3, ha alcanzado más relevancia dado que HTML5 fue desarrollado considerando afianzar el concepto de que la representación gráfica o visual desde el plano artístico o conceptual de la imagen si lo queremos llamar así, debe ser independiente de la estructura semántica y de los datos del documento con el que trabajamos, dejando que CSS sea el encargado del diseño y otorgue el plano creativo al aspecto visual de una página, por esta razón cuando se habla de HTML5 queda implícito de alguna manera que se está también hablando de CSS, como parte integrante de un todo que es una página Web, aunque se puedan considerar dos tecnologías distintas, puesto que esta versión de HTML toma conciencia profunda de su función como armazón estructural, esta nueva especificación HTML5 retira del estándar aquellos elementos relacionados con la representación, para hacer más eficiente el uso de hojas de estilo y ceder el testigo a CCS en los aspectos que hemos mencionado. Aunque oficialmente CSS3 y HTML5 sean cosas distintas un navegador que es compatible con HTML5 lo será también con CSS3 una decisión realmente necesaria dado que ambos son dependientes el uno del otro en las nuevas webs y la representación correcta de dichas páginas resulta imposible sin la correcta interpretación de ambos. En estas nuevas líneas queremos enseñaros los conceptos básicos del lenguaje CSS y las nuevas funciones que otorga la versión CSS3 para crear la representación visual en una página y los nuevos selectores y pseudo clases que facilitan la forma de selección e identificación de los elementos HTML. Base del aspecto visual: Los estilos y la estructura Los navegadores otorgan estilos por defecto a los elementos HTML, de carecer de especificaciones para alterar su estilo visual y andamiaje, todas estas páginas se verán exactamente igual en un navegar, en ese característico blanco y negro con enlaces en azul y esas conocidas fuentes de letra básicas y que normalmente querremos modificar para darle a nuestra página un estilo propio para conseguir la organización y efecto visual que agrade a nuestros visitantes. ¿Qué son los elementos “block” e “inline”? Analicemos con un poco más de destalle la estructura y que hace nuestro navegador al representar una página web, pues bien, este ordenará los elementos por defecto dependiendo del tipo que sean: block que sería en forma de bloque o inline que sería en línea, las dos hacen referencia a de qué manera se nos mostrarán los elementos en nuestra pantalla. Especifiquemos: Elementos block estos se posicionarán por defecto uno sobre otro de arriba hacia abajo, algo así como apilar caja o “bloques” cubos uno encima de otro, de ahí el término. Elementos inline estos se posicionarán por defecto uno al lado del otro en la misma línea de izquierda a derecha, sin saltos de línea a no ser que no haya espacio para continuar distribuyendo, en tal caso el contenido irá a la siguiente línea. Ahora que ya diferenciamos estos dos elementos “block” e “inline”, volvamos a recordar los elementos estructurales que usamos en HTML5, <header>, <nav>, <section>, <aside> y <footer> , los navegadores van a tratar estos elementos por defecto como elementos block. Imagen 1. En esta imagen podemos apreciar los elementos estructurales, en la izquierda se ven estos estructurados de una forma lógica mientras que en la derecha están organizados por bloques. Al realizar la estructura en HTML5 tenemos que pensar en lo que queremos conseguir, la imagen de la izquierda sería el resultado que queremos lograr. Pero una vez terminado de escribir el código en HTML5 nos damos cuenta que lo ha organizado como en la imagen de la derecha. En este momento es cuando entra CSS a ayudarnos en la presentación final, el resultado de la derecha es porque el navegador ha interpretado las etiquetas como elementos block, los cuales son los estilos por defecto del navegador, conforme vayamos avanzando veremos cómo conseguir la imagen de la izquierda, que puede resultar muy útil por ejemplo para la representación en teléfonos móviles. Modelos de caja ¿Qué es esto?, fácil, los navegadores como vemos en la imagen 1 interpretan los elementos HTML como si fueran cajas, esto es muy importante tenerlo en cuenta y entender como los navegadores lo interpretan, si queremos crear un organización especifica en nuestra página. Una página web cuando es representa correctamente en la pantalla de nuestro dispositivo por el navegador, va organizando la información, lo que vemos no es más que un conjunto de cajas ordenadas con unas reglas que pueden ser las que el navegador aplica por defecto como en la imagen 1 derecha, o una organización realizada por el diseñador mediante la aplicación de estilos con CSS como en la imagen 1 izquierda, donde se toma el control de cómo se colocan los elementos estructurales más allá del sistema predefinido por el navegador. Con CSS tenemos un conjunto predeterminado de propiedades que están destinadas a sobrescribir y posponer los estilos por defecto de los navegadores con el objeto de obtener una organización personalizada según los designios diseñador web. Estas propiedades de las que hablamos no son unas propiedades específicas sino que su combinación creará reglas, para que podamos organizar las cajas de manera que muestren la información clara y de forma intuitiva para el usuario en su pantalla sin olvidar que sea agradable a la vista. Esta combinación de reglas se le puede denominar modelo o sistema de disposición, mientras que todas estas reglas aplicadas a la vez sería lo que llamaríamos un modelo de caja. Tened muy en cuenta esto: La información que queremos ofrecer en nuestra página web es lo más relevante del conjunto, pero de no programarlo de una manera ágil, creativa y brillante decepcionaremos al usuario y entonces no servirá de nada un contenido que desde un principio no sea agradable y atractivo, pues es muy importante que sea contemplado de forma agradable a la vista sobre todo si son trabajos extensos donde podríamos generar un cansancio prematuro en el usuario provocando un desinterés por el resto del contenido, pues el cerebro necesita estímulos variados para mantener la atención más allá del interés subyacente en la redacción y que es involuntario para el lector, esto es importante remarcarlo, pues es tan importante como saber programar aunque no sea la finalidad del curso. Planteamientos conceptuales iniciales en los estilos Antes de introducirnos a fondo en modelos de caja, reglas, archivos de estilos y demás usos de CSS, deberemos analizar los estilos básicos, los cuales como su nombre indica son los primeros que debemos dominar para entender los siguientes. Los estilos en línea Empecemos con una de las técnicas más simples que podemos usar para incorporar estilos con CSS, esta sería empleando el atributo style en un documento HTML dentro de la etiqueta que deseamos alterar, así pues veamos un ejemplo previo: Imagen 2 La técnica que acabamos de usar es muy útil a la hora de realizar pruebas de forma rápida y de poder ver los cambios realizados, pero no es útil si debemos aplicar el estilo elegido a todo el documento. - ¿Porqué? Sencillo: esta técnica nos obligaría a ir elemento por elemento uno por uno aplicándole el cambio, creando más y más código que hará a nuestra página más pesada y no solo eso, si por ejemplo ahora, los textos de los artículos están representados con una fuente de tamaño 12 y en el futuro queremos cambiarla, la manera será realizando las alteraciones una por una y en una página tipo blog, por ejemplo, donde publiquemos cada 3 o 4 días, tan solo en un año puede convertirse en una faena titánica e irrealizable yendo bloque por bloque. Uso de estilos embebidos La manera más aconsejable y adecuada para realizar la aplicación de estilos no es elemento por elemento, esa forma está muy bien para realizar pruebas, y ver variaciones o cambios que nos puedan gustar más, rápidamente, pero para aplicar estilos a una página la mejor manera sería insertar los estilos dentro de la cabecera y a partir de ahí usar referencias que afecten a los distintos elementos de HTML que queramos modificar. Gracias al código insertado en la cabecera conseguimos lo mismo que con la otra técnica que vimos antes, sin tener que pegarnos la paliza uno por uno, así ahorramos en código y al utilizar este sistema de referencias cualquier cambio que queramos aplicar en el futuro se podrá realizar de forma que sea rápida. Imagen 3 Como podemos ver el uso del elemento <style> nos permite añadir estilos a nuestra página. Aunque en HTML5 los estilos por defecto son CSS y esto hace que no sea necesario indicarlo con ningún atributo en la etiqueta <style>, esto no era así en versiones anteriores de HTML, donde sí que era requisito necesario especificar qué tipo de estilos serían insertados. Empleando archivos externos Al emplear el método anterior declarando los estilos dentro de la cabecera de nuestro documento conseguimos varias ventajas, por un lado conseguimos ahorrar espacio volviendo el código más consistente, fácil de mantener y actualizar en el tiempo, esta forma de programar provocará indefectiblemente que necesitemos realizar una copia de cada grupo de estilos de cada documento de nuestra web… Por tanto ¿Este sistema se puede mejorar? - Si claro, aún más: El camino sería creando un archivo externo al que podríamos acceder a través del elemento <link> donde podemos especificar claro está, nombre y ruta de acceso de ser necesaria. En este archivo pondríamos todos los estilos pertenecientes a cada uno de los documentos de nuestra web. Este método nos permitirá en el futuro cambiar los estilos por completo tan solo corrigiendo el contenido o cambiando el archivo donde están especificados los estilos o adaptar nuestros documentos a las nuevas circunstancias y dispositivos como veremos más adelante. Imagen 4 En el primer capítulo de esta serie de artículos sobre HTML5, estuvimos hablando de cómo y dónde usaríamos la etiqueta <link> para añadir los estilos CSS y pusimos: <link rel=”stylesheet” href=”estilosdenegocioscontra.css”> Con esta línea le indicamos al navegador que para cargar los estilos tiene que usar el archivo estilosdenegocioscontra.css pues este contiene todos los estilos que necesitará la página para que se nos la pueda presentar debidamente. Con la etiqueta <link> de esta forma indicaremos en cada documento de nuestra web los estilos que debe cargar el navegador. Si vais a realizar pruebas os aconsejo de momento crear el archivo en la misma carpeta donde creasteis el archivo HTML de los artículos anteriores para evitar problemas de localización entre otros, hasta que dominemos este aspecto mejor. El uso de referencias El método de crear un archivo externo con todos los estilos y a su vez insertarlo dentro de cada documento de nuestra web que lo necesite facilita mucho las cosas, pero para que funcione debidamente la relación entre los estilos CSS y los elementos de HTML5 que deban ser afectados por esos estilos, deberemos relacionarlos y referenciándolos debidamente y eso es lo que vamos aprender ahora, los mecanismos a nuestra disposición de los que nos podremos valer para llegar a buen puerto. Hasta ahora hemos dicho como incluir los estilos que necesitamos en un documento y os hemos mostrado una de las formas empleadas para en CSS poder referenciar a los elementos de HTML. En la imagen 3, el estilo usado para cambiar el tamaño de la letra referenciaba cada elemento <p> usando la palabra clave p. De esta manera el estilo insertado entre las etiquetas <style> hacía referencia a todas las etiquetas <p> del documento asignándoles ese estilo elegido a todas ellas. Para referenciar adecuadamente elementos HTML y que estos se vean afectados por los estilos que elijamos con CSS podemos usar distintos métodos, aunque no nos olvidaremos nunca que CSS3 es bastante flexible a este respecto, más adelante veremos la nuevas y más específicas técnicas para referenciar elementos, pero por ahora analizaremos estas tres:
Como se referencia por palabra clave Al aplicar estilos CSS mediante el uso de la palabra clave del elemento, los estilos se aplicarán a cada elemento de la misma clase en el documento. Imagen 5 En la imagen 5 podemos observar la misma técnica usada en la imagen 2 solo que se han añadido atributos. La técnica utilizada es referenciando por palabra clave, la palabra clave de la etiqueta <p> es p, pues usando este sistema le podemos indicar al navegador que todos los textos que envuelven las etiquetas <p> y </p> queremos que tengan un tamaño de 25px, en color rojo y que el texto quede justificado. Hasta ahora hemos visto esta manera que es la que os aconsejamos y también hemos visto el método de estilos en línea usando el atributo style dentro de las etiquetas HTML. Esta técnica aconsejamos solo usarla para pruebas rápidas y debería evitarse que quedase en nuestro código final. ¿Por qué decimos esto? -Conforme vayamos programando nuestra página puede surgir la necesidad de que solo necesitemos referenciar una etiqueta específicamente y si no es con el atributo style necesitaremos… Para estas situaciones que nos surgirán en las cuales tengamos una etiqueta especifica que queramos que se salga de la regla general del estilo creado, tenemos dos atributos: id y class Referenciando con el atributo “id” El atributo id lo usaremos dentro de una etiqueta así mismo como un atributo y asignaremos un nombre el cual será único en el documento ¡MUY IMPORTANTE! Este nombre no puede ser duplicado, revisadlos siempre. Imagen 6 Si observamos la imagen 6, La etiqueta <p> que esta resaltada en gris se le ha puesto el atributo id=”importante” con id le decimos que queremos darle un nombre que en este caso esta etiqueta <p> la hemos nombrado como: importante, si la quisiéramos llamar pepito sería <p id=”pepito”> de esta manera la referenciamos con un nombre especifico. Ahora veamos como actuamos sobre ella para modificar el estilo de esta etiqueta nombrada de forma específica y que queremos diferenciar. Imagen 7 Acabamos referenciar la etiqueta <p> con el id=”importante” y la que queríamos llamar pepito, en nuestro archivo de CSS usaremos el símbolo # seguido del nombre elegido y el resto exactamente igual que con el modo de referencia con palabra clave como podemos observar en la imagen 7. Recapitulemos: haciendo uso de este procedimiento para referenciar, cada vez que hagamos una referencia a “importante” en nuestro archivo de estilosdenegociosdenegocioscontra.css (el archivo que desde el principio de esta serie de artículos usaremos para guardar los estilos de nuestra página de pruebas) el elemento con ese valor de id será modificado, pero a los demás elementos <p>, o cualquier otro elemento del documento no les afectará. El uso de esta técnica es muy específico a la hora de referenciar un elemento y suele usarse más en elementos más generales como serían las etiquetas estructurales vistas en la primera serie de artículos de HTML5. De hecho esa extrema especificación es más apropiada en el uso de referencias en Javascript como veremos más adelante. Referenciando con el atributo “class” En la mayoría de las ocasiones, es más aconsejable usar el atributo class, en lugar del atributo id, este atributo es más flexible pudiéndose asignar a cada elemento HTML en el documento que comparta un diseño similar, por ejemplo: Imagen 8 Observemos en la imagen 8 la línea 40 y la línea 54, tiene el atributo class con el valor pepito, que como dijimos antes, con una misma regla podemos hacer que afecte a varios elementos en el mismo documento. Miremos ahora a la imagen 9: estos dos elementos de la línea 40 y 54 serán afectados por el código escrito, mientras que cualquier otro elemento no será afectado. Imagen 9 El código de la imagen 9 nos muestra que es muy parecida al uso del atributo id solo que cambiamos la # por un punto, y no solo esta sería la diferencia pues class permite construir referencias más complejas, pongamos un ejemplo para comprender esto mejor, el valor pepito lo podemos utilizar como valor del atributo class en elementos distintos como podrían ser <p> o <h2> pero querer que afecte de manera distinta a <h2> que a <p>. Como podemos hacer esto: Imagen 10
En la imagen 10 le hemos dicho al navegador que las etiquetas <p> marcadas con la clase pepito se representen con una fuente de tamaños 18px, cualquier otro elemento con un atributo class con un valor pepito que no sea p no le afectará este código. Bueno por esta semana lo vamos a dejar aquí, hay mucho que aprender pero aquí ya hay mucho que practicar, nos vemos la semana que viene con el siguiente capítulo en el que seguiremos ampliando las referencias y más. Estudiad y disfrutar practicando nóveles programadores! Manuel Castelló (kasmangou) Temas relacionados: Programación, Redacción independiente, kasmangou Reconocimientos y más información sobre la obra gráfica ADVERTENCIA: En este foro, no se admitirán por ninguna razón el lenguaje soez y las descalificaciones de ningún tipo. Se valorará ante todo la buena educación y el rigor sobre el tema a tratar, así que nos enorgullece reconocer que rechazaremos cualquier comentario fuera de lugar.
0 Comentarios
Deja una respuesta. |