Lenguajes de programación, Apuntes de Computación aplicada

¡Descarga Lenguajes de programación y más Apuntes en PDF de Computación aplicada solo en Docsity! CSS 1 Lenguajes de programación HTML y CSS Parte 2. Formato con CSS Aplicación de CSS Después de haber terminado la primera parte, exclusivamente en HTML, ahora nos encontramos con CSS. CSS no es más complicado que HTML, es el complemento para ayudarte a dar formato a tu página web. En esta primera parte sobre CSS, veremos la teoría CSS: ¿qué es? ¿qué aspecto tiene? ¿cuándo se escribe el código CSS? Estos aspectos teóricos no son muy complicados, pero hay que entenderlos, porque es la base de CSS. Esto es lo único que se debe recordar de memoria en CSS. Historia de CSS Había informado previamente que aprenderemos dos lenguajes. Ya hemos empezado nuestro descubrimiento de HTML, aunque hay muchas más cosas que aprender (volveremos al HTML más adelante). Sin embargo, ahora es tiempo para ocuparnos de CSS. CSS (​Cascading Style Sheets​), es otro lenguaje que complementa HTML. ¿Recordarás su papel? Consiste en gestionar el diseño de tu sitio. ¿Para qué sirve CSS? ● Permite elegir el color de tu texto. ● Permite seleccionar el tipo de letra utilizado en tu sitio. ● Establece el tamaño, bordes, fondo ... Además, puede hacer el diseño de tu sitio. Se le puede decir: quiero que mi menú esté a la izquierda y ocupe una anchura tal que la cabecera de mi sitio siempre sea visible, etc. CSS: comienzo difícil Debes saber que al principio de la Web, CSS no existía. De hecho, solo había HTML. El código HTML nació en 1991 y CSS en 1996. Por lo tanto, puedes pensar sin duda: ¿cómo se daba formato desde 1991 hasta 1996? Pues sólo en HTML. En efecto, hay etiquetas para dar ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 2 formato en HTML. Por ejemplo ​<font color = "#aab1c3">​ permite fijar el color del texto en HTML. Sin embargo, las páginas HTML llegaron a ser muy complejas. Había más y más etiquetas y eran una mezcla anárquica de contenido y formato, lo que hizo la actualización de las páginas web un proceso más complejo Es por eso que se creó CSS. Sin embargo, CSS no fue inmediatamente adoptado por los diseñadores, ni mucho menos. Tenían que deshacerse de algunos malos hábitos y eso llevó tiempo. Incluso hoy en día, es frecuente encontrar sitios web con formato HTML, viejo y obsoleto, como el uso de la etiqueta <font>. CSS: soporte de los navegadores Al igual que HTML, CSS ha evolucionado. Ha habido cuatro versiones principales de CSS: CSS 1 CSS 2.0 CSS 2.1 CSS 3 Son los navegadores web los que hacen el trabajo más complejo, deben leer el código CSS y entender cómo mostrarlo en la página. En la década del 2000, el navegador Internet Explorer (Microsoft Windows) era el más común, pero su gestión de CSS ha sido durante mucho tiempo mediocre (por no decir mala). Era el apogeo de la versión 6 (IE6), por desgracia, todavía se utiliza por una pequeña parte de los usuarios de Internet (por suerte, esta proporción tiende a disminuir). Desde entonces, muchos navegadores se crearon y ”abuchearon” a Internet Explorer: Mozilla Firefox, por supuesto, pero también Google Chrome y Opera. Y no estoy hablando del éxito de Mac y el iPhone con el navegador Safari. Esto llevó a Microsoft a responder, publicó (después de un largo período de inactividad) IE 7 e IE 8 y el IE 9. Ya se habla de IE 11. La lección de historia, tal vez sea muy bonita, pero ¿cómo me afecta hoy en día? ¿Qué podemos aprender de esto? Que los navegadores no saben todas las propiedades CSS que existen. Cuanto el navegador es más antiguo, menos sabe de las características de CSS. Mostraré en esta documentación una serie de características de CSS que no funcionan necesariamente en los navegadores más antiguos. No puedo evitarlo, es así: no hay ningún navegador que lo sepa todo. En el peor de los casos, si el navegador no sabe una propiedad CSS, lo ignora y no da formato, pero no se cuelga la página: siempre será legible. Recomiendo ​www.caniuse.com que ofrece tablas de características de compatibilidad de HTML y CSS en distintos navegadores (y sus diferentes versiones). ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 5 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <style> p { color: blue; } </style> <title>Prueba de CSS</title> </head> <body> <h1>Mi supersitio</h1> <p>¡Bienvenidos!</p> <p>Por el momento está casi <em>vacío</em>.¡Ten paciencia!</p> </body> </html> Y la tercera posibilidad es insertándolo directamente en las etiquetas (no recomendada). Este último método, se ha de manejar con cuidado, puedes agregar un atributo de estilo a cualquier etiqueta. Inserta el código CSS directamente en este atributo: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Prueba de CSS</title> </head> <body> <h1>Mi supersitio</h1> </p> <p style="color: blue;">¡Bienvenidos! <p>Por el momento está casi <em>vacío</em>.¡Ten paciencia!</p> </body> </html> Esta vez, sólo el texto del párrafo (línea 10), cuya etiqueta contiene el CSS, será de color azul. ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 6 ¿Qué método elegir? El primer método que se recomienda parece ser más complicado que los otros dos. ¿Por qué? Por qué me aconsejas crear dos archivos, en lugar de un solo archivo .html. Te recomiendo que adquieras el hábito de trabajar con el primer método, ya que es el utilizado por la mayoría de los diseñadores. ¿Por qué? Por el momento, realizas las pruebas en un único archivo HTML. Sin embargo, el sitio más tarde se compone de varias páginas HTML, estamos de acuerdo. Imagina si pones el código CSS directamente en el archivo HTML, has de copiar el código en todos los archivos HTML del sitio. Y si cambias de opinión en el futuro, por ejemplo, si quieres que los párrafos, en vez de azul aparezcan en rojo, hay que modificar cada fichero HTML. Aplicación de un estilo, mediante una etiqueta Código CSS: p { color: blue; } En el código CSS de esta manera, hay tres elementos diferentes: - Nombres de las etiquetas: escribe los nombres de etiquetas a las que deseas cambiar la apariencia. Por ejemplo, si quiero cambiar la aparición de todos los párrafos <p>, tengo que escribir p (sin los galones de HTML). - Propiedades de CSS​: "efectos de estilo" en la página se almacenan las propiedades. Existe por ejemplo la propiedad color que se utiliza para especificar el color del texto, tamaño de fuente que te permite especificar el tamaño del texto, etc. Hay muchas propiedades CSS y, como te he dicho, no es necesario conocerlas todas de memoria. - Valores​: para cada propiedad CSS, debes especificar un valor. Por ejemplo, la propiedad de color, indica el nombre del color. Por tamaño de fuente, indica el tamaño que se desea, etc. Esquemáticamente, una hoja de estilo CSS, se vería así: etiqueta1 { propriedad1: valor1; propriedad2: valor2; propriedad3: valor3; } ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 7 etiqueta2 { propriedad1: valor1; propriedad2: valor2; propriedad3: valor3; propriedad4: valor4; } etiqueta3 { propriedad1: valor1; } En este fragmento de etiquetas se ven, los atributos y valores que acabo de mencionar. Como puedes ver, se escribe el nombre de la etiqueta (por ejemplo, h1) y llaves de apertura, en el interior, pones las propiedades y los valores que desees. Se pueden indicar tantas propiedades como se desee dentro de las llaves. Cada propiedad está seguida del símbolo de "dos puntos" (:) y el valor correspondiente. Por último, cada línea termina con un punto y coma (;). Verás muchas propiedades en los capítulos siguientes. Por el momento, en los ejemplos, solo tendremos que cambiar el color. El código CSS que hemos utilizado hasta ahora, es: p { color: navy; } esto significa: "​Quiero que todos mis párrafos están escritos en azul marino​". Prueba a cambiar el nombre de la etiqueta asignada por CSS. Por ejemplo, si escribo h1 en el título que se escribe en azul. Edita tu archivo estilo.css de esta manera: h1 { color: navy; } Ahora, vuelve a abrir la página HTML (recuerda, esta es la página HTML que se abre en el navegador, no el archivo con extensión css): debes ver el título, que aparece en azul como se muestra seguidamente. ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 10 De hecho, debes escribir un nombre que identifica a la etiqueta. Lo que quieras, siempre y cuando el nombre empiece con una letra. Por ejemplo, asociar la clase introducción a mi primer párrafo (línea 11): <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" href="estilo.css" /> <title>Prueba de CSS</title> </head> <body> <h1>¡Mi supersitio!</h1> </p> <p class="introduccion">¡Bienvenidos! <p>Por el momento está casi <em>vacío</em>.¡Ten paciencia!</p> </body> </html> Ahora lo que se ha hecho, es que el párrafo esté identificado. Tiene un nombre: introducción. Serás capaz de volver a utilizar el nombre en el archivo CSS para decir: "quiero que las etiquetas que tienen nombres como" introducción "se muestren en azul." Para hacer esto en CSS, especifica el nombre de la clase, a partir de un punto (.), de la siguiente manera: .introduccion { color: navy; } Apareciendo al ejecutarlo Mi supersitio ¡Bienvenidos! Por el momento está casi ​vacío​.​¡Ten paciencia! ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 11 ¿Y entonces el atributo id? Funciona exactamente de la misma manera que la clase, excepto por una cosa: que su denominación sólo puede utilizarse una vez en el código. ¿Qué interés? Hay poco para ser honesto, será útil si luego se usa JavaScript para reconocer ciertas etiquetas. Por otra parte, ya hemos visto el atributo id en el capítulo sobre los enlaces (para hacer los anclajes)​​. En la práctica, vamos a poner ese Identificación en los elementos que son únicos dentro de la página, tales como el logotipo. <img src="images/logo.png" alt="Logo del sitio" id="logo" /> Si utilizas la Identificación, cuando se definen las propiedades en el archivo css, se precederá el nombre de la Identificación por el signo sostenido (#): #logo { /* Indica las propiedades CSS aquí */ } Etiquetas universales Llegará el momento en que se necesite aplicar una clase (o id) a ciertas palabras que, originalmente, no están rodeadas por etiquetas. En efecto, el problema de la clase es que es un atributo. Entonces no se puede poner en una etiqueta. Si, por ejemplo, quiero cambiar sólo "bienvenido" en el párrafo: <p>¡Buenos días y bienvenido a mi sitio!</p>. Sería fácil de hacer si hay una etiqueta alrededor de "bienvenido", pero por desgracia no hay ninguna. Por suerte, existe la etiqueta que no sirve para nada. De hecho, hemos inventado dos etiquetas de las llamadas universales, sin un significado especial (no indican que la palabra es importante, por ejemplo). Hay una diferencia mínima (pero importante) entre estas dos etiquetas: - <span> </ span>​: esta etiqueta es de línea, es decir que es una etiqueta se coloca dentro de un párrafo de texto, para seleccionar sólo algunas palabras. Las etiquetas <em> y <strong> son de la misma familia. Esta etiqueta, por lo tanto, se utiliza en medio de un párrafo y así la vamos a utilizar para dar color a "bienvenida". - ​<div> </ div>​: esta es una etiqueta del tipo bloque, en torno a un bloque de texto. Las ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 12 etiquetas <p>, <h1>, etc. son de la misma familia. Estas etiquetas tienen algo en común: crear un nuevo "bloque" en la página y generar por lo tanto, necesariamente un salto de línea. <div> es una etiqueta que es utilizada con frecuencia en la construcción de un diseño, como veremos más adelante. Así que por ahora, vamos a utilizar la etiqueta <span>. Se pone alrededor de "bienvenida", añadiendo una clase (con el nombre que quieras). Código HTML: <p>¡Buenos días y <span class="saludos">bienvenido a</span> mi sitio!¿</p> y el código CSS: .saludos { color: blue; } Aplicar un estilo: selectores avanzados En CSS, la parte más difícil es conocer el texto de destino al que se desea cambiar la forma. Para hacer referencia (o seleccionar) los elementos de la página a modificar, usamos lo que se llaman selectores. Has usado alguno anteriormente en este capítulo, un resumen de ellos para empezar. Selectores que ya conoces: Estos selectores, como hemos visto anteriormente, son en gran medida los más comúnmente utilizados. Se deben saber de memoria. Comienza con la base de la base: p { } quiere decir "quiero afectar a cada párrafo." Después de eso, te toca decir lo que hacer en esos párrafos (escribir en rojo, por ejemplo). También hemos visto: ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 15 Lo mismo ocurre, pero el atributo debe contener en su valor la palabra "aquí" (cualquier posición). Ejemplo de código HTML <a href="http://www.escepticismo.es" title="Cualquier parte por aquí> Existen otros selectores Aquí se ha presentado una parte de los selectores CSS, pero sabemos que hay muchos otros. Si deseas una lista completa, puedes acceder directamente a la fuente: el sitio del ​W3C​. Es muy completo. Otros selectores se considerarán más adelante. En resumen - CSS es otro lenguaje que complementa a HTML. Su función consiste en dar formato a las páginas web. - Se ha de tener cuidado con la compatibilidad del navegador con algunas características recientes de CSS3. - Cuando un navegador no tiene conocimiento de un formato de instrucción, simplemente lo ignora. - Podemos escribir el código CSS en varios lugares diferentes, lo más aconsejable es crear un archivo separado con extensión .css (ejemplo: estilo.css). - En CSS, seleccionamos qué partes de la página HTML se desean cambiar y modificar su presentación con propiedades de CSS: - Hay muchas maneras de seleccionar la parte de la página a la que se desea dar formato. Por ejemplo: - todas las etiquetas del mismo tipo, escribiendo su nombre (por ejemplo, h1); - algunas etiquetas específicas, que se le han dado nombres mediante el uso de los atributos class o id (.nombreclase o #nomid); - únicamente etiquetas que están dentro de otras etiquetas (h3 em). - etc. ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 16 Formato de texto Llegamos ahora a un apartado que te interesará mucho. Simplemente significa que vamos a cambiar la apariencia del texto. No es una sorpresa especial: todavía estamos en CSS y usamos lo que hemos aprendido en el capítulo anterior. Por lo tanto, vas a trabajar directamente en el archivo .css que hemos creado previamente. Este capítulo será una oportunidad para descubrir muchas de las propiedades CSS: vamos a ver cómo cambiar el tamaño del texto, cambiar la fuente, alinear el texto … Tamaño del texto Para cambiar el tamaño del texto, utiliza la propiedad CSS font-size. Pero, ¿cómo especificar el tamaño de la fuente? Aquí es donde las cosas se ponen difíciles, porque hay muchas técnicas disponibles: Indicar un tamaño absoluto: en píxeles, centímetros o milímetros. Este método es muy preciso, pero es aconsejable utilizarlo sólo si es absolutamente necesario, porque puede indicar un tamaño demasiado pequeño para algunos lectores. Indicar un tamaño relativo en tanto por ciento, <em> o <ex>, esta técnica tiene la ventaja de ser más flexible. lo que resulta más fácil a las preferencias de tamaño de los visitantes. Tamaño absoluto​. Para especificar un tamaño absoluto, se utilizan generalmente los píxeles. Para un texto de 16 píxeles de alto, escribe: font-size: 16px; He aquí un ejemplo de uso, puedes copiar el código en el fichero estilo.css: p { font-size: 14px; /* Párrafo de 14 pixeles */ } h1 { font-size: 40px; /* Títulos de 40 pixeles */ } ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 17 SI lo deseas, los tamaños se pueden definir en cm o mm (Sistema Internacional de Unidades, SI), reemplazando px por cm o mm. Sin embargo aunque son obligatorias legalmente, estas unidades se adaptan peor a las pantallas. Valor relativo Es el método recomendado pues el texto se adapta más fácilmente a las preferencias de todos los visitantes. Hay varias formas de indicar un valor relativo, por ejemplo se puede indicar el tamaño con palabras en inglés como: xx-small : minúscula ; x-small : muy pequeña; small : pequeña ; medium : media ; large : grande ; x-large : muy grande; xx-large : gigantesca; Es fácil probar el código p { font-size: small; } h1 { font-size: large; } Esta técnica tiene un inconveniente: hay siete tamaños disponibles (porque solo hay siete nombres). Afortunadamente, hay otros, es habitual especificar el tamaño en "em". Si escribes 1em, el texto tiene un tamaño normal. Si deseas ampliar el texto, puede introducir un valor mayor que 1, como 1.3em. Si deseas reducir el texto, introduce un valor inferior a 1, como 0.8em. Ten cuidado: para los números decimales, debes poner un punto y no una coma. Tendrás que escribir "1.4em" y no "1,4em" Ejemplo de código CSS: p ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 20 - La mayoría de las fuentes están sujetas a derechos de autor, no es legal utilizarlas en tu sitio. Afortunadamente, hay sitios como ​dafont.com y ​fontsquirrel.com que ofrecen la posibilidad de descargar fuentes libres de derechos de autor. Recomendamos especialmente fontsquirrel.com, ya que permite que descargues los paquetes listos para CSS3. - Hay varios formatos de archivos de fuentes y no funcionan en todos los navegadores, necesitas saber: . ttf: ​Font TrueType​. Funciona en IE9 y los demás navegadores. . eot: ​Embedded OpenType​. Sólo funciona en todas las versiones de Internet Explorer. Este formato es propietario, producido por Microsoft. . tfo: ​Font OpenType​. No funciona en Internet Explorer. . svg: ​SVG Font​. El único formato compatible con iPhones y iPads por ahora. . woff: ​Web Open Font Format​. Nuevo formato diseñado para la web, que funciona en IE9 y las demás navegadores. En CSS para definir un nuevo tipo de letra o fuente, debes declararlo así: @font-face { font-family: 'MiFuenteEsceptica'; src: url('MifuenteEsceptica.eot'); } El archivo de fuente (aquí MiFuenteEsceptica.eot) debe estar ubicado en la misma carpeta que el archivo CSS (o en una subcarpeta, si se utiliza una ruta relativa). Sí, además EOT sólo funciona en Internet Explorer. Lo ideal es ofrecer múltiples formatos para las fuentes que el navegador descarga y que pueda leer. Se indican como varios formatos: @font-face { font-family: 'MiFuenteEsceptica'; src: url('MiFuenteEsceptica.eot') format('eot'), url('MiFuenteEsceptica.woff') format('woff'), url('MiFuenteEsceptica.ttf') format('truetype'), url('MiFuenteEsceptica.svg') format('svg'); } Para probar, sugiero descargar una fuente de Squirrel Font, por ejemplo, Learning Curve Pro. Haz clic en "@ ​​font-face Kit" que permitirá descargar una lista para su uso con todos los formatos de la fuente. El archivo CSS se verá al final como: ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 21 @font-face { /* Definición de una fuente LearningCurveProRegular */ font-family: 'LearningCurveProRegular'; src: url('LearningCurve_OT-webfont.eot'); src: url('LearningCurve_OT-webfont.eot?#iefix') format('embedded-opentype'), url('LearningCurve_OT-webfont.woff') format('woff'), url('LearningCurve_OT-webfont.ttf') format('truetype'), url('LearningCurve_OT-webfont.svg#LearningCurveProRegular') format('svg'); } h1 /* Utilización de la fuente definida en los títulos*/ { font-family: 'LearningCurveProRegular', Arial, serif; } La primera sección @font-face sirve para definir un nuevo nombre de tipo de letra que se puede utilizar en el archivo CSS. A continuación, utilizamos este nombre de la fuente con la propiedad font-family, que ya sabemos, para cambiar la apariencia de los títulos <h1>. Se puede ver una muestra de esta fuente a continuación. Te darás cuenta de algunas peculiaridades en el CSS generado por el tipo de letra Squirrel. El objetivo es superar algunos errores de Internet Explorer porque las versiones anteriores no entienden si definimos varios formatos. Eso explica la presencia de un ?#iefix en el código. Cursiva, negrita, subrayado … Hay un número de propiedades CSS de formato de texto de forma convencional. Vamos a descubrir aquí cómo mostrar el texto en negrita, cursiva y subrayado ... y de paso veremos que incluso es posible hasta el parpadeo. Cursiva Se piensa que la etiqueta <em> permite poner texto en cursiva. Nunca dije eso. Vuelve al capítulo anterior, si tienes dudas, pero nunca he dicho que la etiqueta <em> se hizo para poner texto en cursiva (como yo nunca he dicho que <strong> se hizo para negrita). ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 22 <em>, sirve para hacer hincapié en las palabras. Esto significa que rodea a las palabras que son bastante importantes. Para representar esta importancia, la mayoría de los navegadores optan por mostrar el texto en cursiva, pero esto no es obligatorio. CSS puede decir: "Quiero que este texto esté en cursiva." Nada lo impide, por ejemplo, para decidir que todos tus títulos irán en cursiva. En concreto, en CSS, para poner en cursiva, se utiliza font-style, que puede tomar tres valores: - italic: el texto en cursiva. - oblique: el texto aparece oblicuamente (si las letras son examinadas, el resultado es ligeramente diferente de la cursiva). - normal: el texto será normal (por defecto). Esto permite cancelar la cursiva. Por ejemplo, si deseas que los textos entre <em> ya no estén en cursiva, se debe escribir: em { font-style: normal; } Por lo tanto, en el siguiente ejemplo, uso font-style poner en cursiva todos mis títulos <h2>: h2 { font-style: italic;} Negrita Así que de nuevo, recuerda que <strong> no significa negrita (su función es indicar que el texto es importante, por lo general, el navegador lo mostrará en negrita). La negrita en CSS se puede aplicar a diversos valores, algunos párrafos enteros, etc. Todo depende de ti. La propiedad CSS para poner en negrita es font-weight y toma los siguientes valores: - bold: el texto aparecerá en negrita; - normal: el texto será escrito normalmente (por defecto). Por ejemplo, la forma de escribir los títulos en negrita: h1 { font-weight: bold; } ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 25 h1 { text-align: center; } p { text-align: justify; } .signature { text-align: right; } Y por ejemplo con el siguiente código html, <head> <link rel="stylesheet" href="estilo3.css" /> <title> Ejemplo css</title> <meta name="Generator" content="Quanta + 3.5"> <meta name="Description" content="Ejemplo de alineación> <meta name="Keywords" content="css, ejemplo, alineación"> </head> <body> <h1>La Educaci&oacute;n Cient&iacute;fica No es Garant&iacute;a de Escepticismo</h1><br/> <p>Muchos esc&eacute;pticos asumen cierta medida de placer en el tipo de tareas a menudo puestas delante de ellos: evaluaci&oacute;n de fotograf&iacute;as borrosas, realizaci&oacute;n de experimentos de laboratorio que reducen o eliminan el enga&ntilde;o, cr&iacute;tica de la ciencia imperfecta y la pseudociencia, y contrarrestando las afirmaciones de evidentes charlatanes. Por supuesto, los esc&eacute;pticos esperan que su esfuerzo ayude al avance de la educaci&oacute;n cient&iacute;fica [1]. A pesar de estos esfuerzos, los datos de encuestas de diversas fuentes sugieren que la creencia en lo paranormal y el pensamiento pseudocient&iacute;fico siguen siendo comunes [2].<br/><br/> ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 26 Los esc&aecute;pticos suelen utilizar estos hallazgos para reforzar los argumentos a favor de m&aacute;s educaci&oacute;n cient&iacute;fica. Su argumento se basa en la suposici&oacute;n no comprobada de que un mayor conocimiento cient&iacute;fico reduce el n&uacute;mero de creencias paranormales que un individuo posee. Sin embargo, esta suposici&oacute;n puede no ser v&eacute;lida. Andrew Ede sostuvo recientemente que la educaci&oacute;n cient&iacute;fica puede hacer poco para elevar el nivel de pensamiento racional y, de hecho, en realidad lo desalienta! [3]. Recientes debates sobre la inclusi&oacute;n de la &quot;ciencia de la creaci&oacute;n&quot; y/o eliminaci&oacute;n de la evoluci&oacute;n del curr&iacute;culo de biolog&iacute;a en la ense&ntilde;anza secundaria [4], son un ejemplo de ello, lo que indica que muchos legisladores, miembros del p&uacute;blico, y algunos educadores est&eacute;n confundidos acerca de c&oacute;mo criticar y comparar teor&iacute;as con el fin de separar los hechos de las creencias. Ede ha identificado tres razones de porque esto puede ser cierto [5]:</p> <p class=firma>Chile Skeptic</class><br/> </body> </html> Se tendría No se puede cambiar la alineación del texto de una etiqueta inline (como <span>, <a>, <em>, <strong> ...). La alineación sólo funciona en las etiquetas de tipo bloque (<p>, <div>, <h1>, <h2>, ...) y tiene un poco de lógica, cuando piensas: no se puede cambiar la alineación de unas pocas palabras en medio de un párrafo. Por lo general es todo el párrafo el que se debe alinear. Seguidamente se indica cómo lograr el ejemplo mostrado a continuación ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 27 Supongo que ahora la pregunta que te haces es: "¿pero cuál es la propiedad mágica que hace que flote? ". La respuesta es ... float ("flotar" en Inglés). Esta propiedad puede tener dos valores simples: left: el elemento flotará a la izquierda. right: el elemento flotará a la derecha. El uso de float es muy sencillo: 1. Aplica float a una etiqueta. 2. A continuación, sigue escribiendo texto de forma normal. Puedes utilizar la propiedad float en etiquetas block e inline. Es común hacer flotar una imagen para ser rodeada por el texto, como en el ejemplo anterior. Hacer flotar una imagen Aquí vamos a aprender a flotar una imagen. El código HTML que debemos escribir: <p><img src="flash.gif" class="imageflottante" alt="Imagen flotante"/> Este es un texto normal de párrafo, escrito a continuación de una imagen y en el que aparecerá la imagen flotando.</p> El código CSS es: .imagenflotante { float: left; } ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 30 Color y fondo Continuamos con nuestra visión general de las propiedades CSS. Nos centraremos aquí en las propiedades relacionadas directamente con: cómo cambiar el color del texto; cómo poner un color o imagen de fondo; cómo añadir sombras; cómo jugar con los niveles de transparencia. Color del texto Ahora, pasamos al amplio tema del color. Ya conoces la propiedad que te permite cambiar el color del texto: es color. Veremos distintas maneras de especificar el color, ya que hay varias. Indicar el nombre del color La forma más sencilla y cómoda de elegir un color, basta con escribir su nombre (en Inglés, por supuesto). El único inconveniente de este método es que sólo hay dieciséis colores llamados "estándar". Otros colores son informales pero, no necesariamente funcionan de la misma manera en todos los navegadores, voy a evitar mostrarlos. La siguiente figura muestra los dieciséis colores que se pueden utilizar simplemente escribiendo su nombre. ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 31 Puedes aprenderlos de memoria, si quieres. Para poner todos los títulos en rojo, podemos escribir: En CSS: h1 { color: red; } Notación hexadecimal Dieciséis colores, es todavía un poco limitado si se considera que la mayoría de los monitores actuales pueden mostrar dieciséis millones. Por otra parte, si tuviéramos que dar un nombre a cada uno de los dieciséis millones de colores. Afortunadamente, hay varias maneras de elegir un color CSS de todos los existentes. La primera vez que se va a mostrar es la notación hexadecimal. Se utiliza comúnmente en la web pero también hay otro método que veremos más adelante. Un nombre de color en hexadecimal, es así: #FF5A28. En pocas palabras, se trata de una ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 32 combinación de letras y números indicando un color. Siempre hay que empezar por escribir un sostenido (#) seguido de seis letras o dígitos del 0 al 9 y de A a F. Estas letras o números operan en parejas. Los dos primeros dígitos indican la cantidad de rojo, los dos siguientes la cantidad de verde y los dos últimos la cantidad de azul. Mediante la mezcla de estas cantidades (que son componentes rojo, verde y azul) se puede obtener el color deseado. Así, #000000 es el color negro #FFFFFF el blanco. Pero ahora, no me preguntes por qué hay una combinación que produce el color naranja "puesta de sol". Por ejemplo, ¿cómo se aplicará color blanco a los párrafos en hexadecimal?: p { color: #FFFFFF; } Método RGB ¿Qué significa RGB? En inglés, ​Red-Green-Blue esto es Rojo-Verde-Azul, que se abrevia como "RGB". Al igual que con la notación hexadecimal, si eliges un color, debes definir una cantidad de rojo, verde y azul. Se verá que es mucho más cómodo y con un sencillo programa de dibujo, encontrar el color que desees, e incluso hay utilidades en línea, muy potentes para gestión del color. Introduce los valores en este orden en el archivo CSS, como en el siguiente código: p { color: rgb(240,96,204); } Color de fondo Para especificar un color de fondo, utiliza el código CSS background-color. Se emplea de la misma manera que la propiedad color, es decir, puedes escribir el nombre de un color, en notación hexadecimal o utilizar el método RGB. Para especificar el color de fondo de la página web, es necesario trabajar en <body>, que corresponde a toda la página web, así que esto es cambiando el color de fondo se cambia el color de fondo de la página. Código en CSS: ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 35 body { background-image: url("nubes.png"); } Opciones disponibles para la imagen de fondo Podemos completar la imagen de fondo, hemos visto otras varias otras propiedades que permiten cambiar el comportamiento de la imagen de fondo. - background-attachment: fija el fondo El código CSS background-attachment permite fijar el fondo. El efecto es interesante porque vemos a continuación, el texto "deslizarse" sobre el fondo. Dos parámetros están disponibles: fixed : la imagen de fondo se mantiene fija; scroll : la imagen de fondo desfila con el texto (por defecto). Código CSS body { background-image: url("nube.png"); background-attachment: fixed; /* El fondo quedará fijo*/ } - background-repeat : repetición del fondo De forma predeterminada, la imagen de fondo se repite en el mosaico. Puedes cambiar esto con el background-repeat: no-repeat: el fondo no se repite. La imagen será única en la página. repeat-x: el fondo se repetirá sólo en la primera línea, horizontalmente. repeat-y: el fondo se repetirá sólo en la primera columna, en posición vertical. repeat: el fondo se repetirá en mosaico (por defecto). Ejemplo de uso: Código: CSS ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 36 body { background-image: url("nubes.png"); background-repeat: no-repeat; } - background-position : posición de fondo Se puede indicar dónde se encuentra la imagen de fondo con background-position. Esta propiedad es interesante sólo si se combina con background-repeat: no-repeat; (un fondo que no se repite). Debes dar a background-position dos valores de los píxeles para indicar la posición relativa a la esquina inferior y parte superior izquierda de la página (o en el párrafo, si se aplica el fondo de un párrafo). Así que si escribes: Código: CSS background-position: 30px 50px; tu fondo se colocará 30 píxeles desde la izquierda y 50 píxeles desde la parte superior. También es posible utilizar estos valores en Inglés: top: parte superior; bottom: parte inferior; left: izquierda; center: centro; right: derecha. Es posible combinar estas palabras. Por ejemplo, para alinear una imagen en la parte superior derecha, tendrías que escribir: Código: CSS background-position: top right; Así que si voy a poner un sol en el fondo (figura siguiente), en una sola muestra (no-repeat), siempre visible (fixed) y se coloca en la parte superior derecha (top right), voy a escribir esto: Código: CSS ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 37 body { background-image: url("sol.png"); background-attachment: fixed; /* El fondo quedará fijo*/ background-repeat: no-repeat; /* El fondo no se repetirá */ background-position: top right; /* El fondo se colocará encima a la derecha */ } Apareciendo el sol de la siguiente forma: Combinar propiedades Si utilizas una gran cantidad de propiedades relacionadas con el fondo (como es el caso de este último ejemplo), puedes utilizar una especie de "super-propiedad" de fondo, cuyo valor puede combinar varias propiedades vistas previamente: background-image, background-repeat, background-attachment y background-position. Por tanto, podemos escribir simplemente: Código CSS body { background: url("nubes.png") fixed no-repeat top right; } Esta es la primera "super-propiedad" tal como indiqué, habrá otras. Debes saber que: El orden de los valores no importa. Se pueden combinar los valores en cualquier orden. No son obligatorios. Así que si no deseas escribir fixed, se puede quitar sin ningún problema. ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 40 Resumen - Cambiamos el color del texto con la propiedad color, el color de fondo con background-color. - Se puede especificar un color escribiendo su nombre en Inglés (black, por ejemplo), como hexadecimal (# FFC8D3) o notación RGB (rgb (250,25,118)). - Puedes agregar una imagen de fondo con background-image. Puedes optar por configurar la imagen de fondo, en la pantalla en mosaico o no, e incluso posicionarla en cualquier lugar de la página. - Puedes hacer una parte de la página transparente con la propiedad de opacidad o la notación RGBA (igual notación RGB, con un valor que indica el cuarto nivel de transparencia). ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 41 Bordes y sombreados Nuevo capítulo, nuevo lote de propiedades CSS. Aquí vamos a ver los bordes y efectos de sombra que se pueden aplicar tanto en el texto como en los bloques que componen nuestra página. Vamos a volver a utilizar, en particular, nuestro conocimiento de los colores para elegir el color de nuestros bordes y sombreados. Bordes estándar CSS ofrece una amplia selección de bordes para decorar tu página. Muchas propiedades de CSS permiten cambiar la apariencia de los bordes: border-width, border-color, border-style ... Para llegar al punto, propongo aquí utilizar directamente la propiedad border que incluye todas estas propiedades. ¿Recuerdas la propiedad background? Esto funciona con el mismo principio: vamos a ser capaces de combinar varios valores. Para border se pueden utilizar un máximo de tres valores para cambiar la apariencia de los bordes: - ancho: introduce la anchura del borde. Poner un valor en píxeles (por ejemplo 2px). - color: el color del borde. El uso, es como hemos aprendido, un nombre de color (negro, rojo, ...) o en hexadecimal (# FF0000) o un valor RGB (rgb (198, 212, 37)). - tipo de borde: aquí tienes la opción del borde que puede ser una línea o puntos, o guiones, etc. Aquí los diferentes valores disponibles: none: sin bordes (por defecto); solid: una sola línea; dotted: puntos; dashed: trazos; double: doble contorno; groove: en relieve; ridge: otro efecto en relieve; inset: efecto 3D global deprimido; outset: efecto 3D global resaltado. Por lo tanto, para tener un borde azul, tipo guiones, de tres píxeles alrededor de mis títulos, escribo: ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 42 h1 { border: 3px blue dashed; } Arriba, derecha, izquierda, abajo ... ¿Quién dice que tienes que aplicar el mismo margen en los cuatro lados de un elemento? Si quieres poner bordes diferentes según el lado (arriba, abajo, izquierda o derecha), puedes, no hay problema. En este caso, debes utilizar estas cuatro propiedades: border-top: borde superior; border-bottom: borde inferior; border-left: borde izquierda; border-right: borde derecho. También hay equivalentes para configurar cada detalle del borde, caso de ser necesario: border-top-width para cambiar el grosor del borde superior, border-top-color para el color superior, etc. También son super-propiedades, pero que funcionan como border, pero se aplican sólo a un lado. Para añadir un borde solamente a las secciones izquierda y derecha, escribir: p { border-left: 2px solid black; border-right: 2px solid black; ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 45 } Añadir difuminado a través de un tercer parámetro. El difuminado puede ser bajo (menos desplazamiento), normal (igual al cambio) o elevado (por encima de desplazamiento). Prueba con un desplazamiento normal: p { box-shadow: 6px 6px 6px black; } También puedes agregar un cuarto valor opcional en el recuadro. En este caso, la sombra se coloca dentro de la caja, para dar un efecto enfatizado. p { box-shadow: 6px 6px 6px black inset; } - text-shadow: sombra texto Con text-shadow, puedes añadir directamente una sombra en las letras del texto. Los valores de la función son exactamente de la misma forma box-shadow: desplazamiento, difuminado y color. p { text-shadow: 2px 2px 4px black; } El resultado se muestra a continuación: Resumen - Se puede aplicar un borde a un elemento con la propiedad border. Debes indicar el ancho del ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 46 borde, su color y tipo (línea sólida, línea de puntos ...). - Puedes redondear los bordes con border-radius. - Puedes agregar una sombra a bloques de texto con box-shadow. Se debe indicar el desplazamiento horizontal y vertical sombra, nivel de reblandecimiento y color. - El texto también puede tener una sombra con text-shadow. ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU CSS 47 Creación de apariencias dinámicas Este es uno de sus puntos fuertes: CSS también permite modificar la apariencia de los elementos de forma dinámica, es decir que los elementos pueden cambiar de forma, una vez cargada la página. Vamos a utilizar una potente función de CSS, pseudoformatos. Vemos en este capítulo cómo cambiar la apariencia: al vuelo; cuando se hace clic; en el foco (punto seleccionado); cuando se accede a un enlace. Verás que CSS no para de sorprendernos. - Al vuelo Vamos a descubrir en este capítulo varios pseudo-formatos. El primero que voy a mostrar se llama: hover. Al igual que todos los otros pseudo-formatos que veremos, esta es la información que se añade después del nombre de la etiqueta (o la clase) en el CSS, así: a:hover { } :hover significa "sobrevolar". a:hover se puede traducir como: "cuando el ratón está sobre el enlace". A partir de ahí, te toca definir el aspecto que debe tener al hacer clic en los enlaces. Da rienda suelta a tu imaginación, no hay límite. Aquí se indica el código de un ejemplo de representación de los enlaces, pero no dudes en inventar los tuyos propios a /* Enlaces por defecto (no al vuelo) */ { text-decoration: none; color: red; font-style: italic; } ____________________________________________________________________________________ __ Desarrollo Aplicaciones Web. Rafael Menéndez-Barzanallana Asensio. DIS. UMU