Hoja de estilos CSS

Instituto Politecnico NacionalEscuela Superior de Computo

Academia de Ingenierıa de Software

Practica 1

Alumno: Flores Contreras Osvaldo

M. en C. Tanibet Perez de los Santos Mondragon

Tecnologıas para la Web. Primer Parcial.

Grupo: 2CM10 2014

Indice general

1. Desarrollo y Resultados 41.1. Borders . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6

1.1.1. Border Color-Border Styles . . . . . . . . . . . . . . . . . 61.1.2. Border Width . . . . . . . . . . . . . . . . . . . . . . . . . 61.1.3. Border Radius . . . . . . . . . . . . . . . . . . . . . . . . 71.1.4. Border Radius-Hemisphere . . . . . . . . . . . . . . . . . 81.1.5. Border Radius-Advanced Hempisphere . . . . . . . . . . . 91.1.6. Round Rectangle . . . . . . . . . . . . . . . . . . . . . . . 91.1.7. Advanced Round Rectangle . . . . . . . . . . . . . . . . . 101.1.8. Bullet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 111.1.9. Advanced Bullet . . . . . . . . . . . . . . . . . . . . . . . 121.1.10. Advanced Leaf . . . . . . . . . . . . . . . . . . . . . . . . 121.1.11. Multiple Backgrounds . . . . . . . . . . . . . . . . . . . . 13

1.2. Text Effects . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 151.2.1. Colorful Style . . . . . . . . . . . . . . . . . . . . . . . . . 151.2.2. Double Font Style . . . . . . . . . . . . . . . . . . . . . . 151.2.3. Neon Glown Style . . . . . . . . . . . . . . . . . . . . . . 161.2.4. Ouset Style . . . . . . . . . . . . . . . . . . . . . . . . . . 16

1.3. Fonts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 171.4. Shadows . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

1.4.1. Example 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . 181.4.2. Example 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . 181.4.3. Example 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . 191.4.4. Example 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . 201.4.5. Example 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . 201.4.6. Example 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . 211.4.7. Example 7 . . . . . . . . . . . . . . . . . . . . . . . . . . . 221.4.8. Example 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . 22

1.5. Transformaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . 231.5.1. Scaling . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231.5.2. Rotate . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 231.5.3. Skew . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

1.6. Animations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 241.6.1. Delay . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24

2

INDICE GENERAL 3

1.6.2. Keyframes . . . . . . . . . . . . . . . . . . . . . . . . . . . 251.6.3. Multiple Columns . . . . . . . . . . . . . . . . . . . . . . 27

1.7. Gradients . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 281.7.1. Gradient1 . . . . . . . . . . . . . . . . . . . . . . . . . . . 281.7.2. Gradient2 . . . . . . . . . . . . . . . . . . . . . . . . . . . 28

1.8. Pseudo-classes . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291.9. Conclusiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 291.10. Cuestionario . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Capıtulo 1

Desarrollo y Resultados

Comenzamos por descargar Boilerplate, el cual nos facilito la construccionde la pagina mediante una plantilla de codigo preestablecida. Modificamos el ar-chivo index.html para agregar las diferentes etiquetas necesitabamos, y creamosun archivo .css para ir agregando atributos a dichas etiquetas. A continuacionse describe paso a paso el desarrollo de ambos archivos.

En la imagen se observa el inicio del documento html con la etiqueta head,el cual contiene:

Tıtulo de la pagina “Practica1”.

Charset para decodificar la pagina (en este caso permite la utilizacion deacentos y otros sımbolos).

Un link que enlaza el documento html con una hoja de estilos, indicandoel tipo y la ubicacion del archivo.

Figura 1.1: Inicio de documento .html

Nota: la hoja de estilos debe guardarse en la carpeta css para poder enlazarla.

Posteriormente encontramos la etiqueta body la cual contiene varias etiquetasp. Para diferenciar cada una de estas etiquetas utilizamos identificadores. Estosidentificadores asignan un nuevo nombre a la etiqueta: id=”nombrenuevo”

4

CAPITULO 1. DESARROLLO Y RESULTADOS 5

La mayorıa de las etiquetas que manejamos contienen la frase ”Hello World!This is practice number 1”. De no ser ası, se indicara en dicho ejercicio.

Figura 1.2: Identificadores

A continuacion se muestran las primeras lıneas de codigo de la hoja de estilosen donde a la etiqueta p, sin importar el identificador que tenga, se le asignaranlos siguientes atributos:

Tamano de la fuente: 20 px

Color de fuente: Blanco

Altura del cuadro de la etiqueta: 150px

Anchura del cuadro de la etiqueta: 270px

Y el padding que establece anchura de ciertas zonas del elemento

Tambien se le asigna al body una alineacion de texto centrado y se coloca unaimagen de fondo para la pagina, utilizando la etiqueta background y colocandola direccion donde se encuentra guardada dicha imagen.

Figura 1.3: Asignacion a la etiqueta p en todo el documento

Nota: Es recomendable crear una carpeta en el directorio donde se encuentrael archivo .html para lograr accesar a las imagenes y mantener un orden con losarchivos.

Para indicar en la hoja de estilos el identificador al cual nos referimos, es nece-sario utilizar el sımbolo # . Ejemplo: #identificador


1.1. Borders

1.1.1. Border Color-Border Styles

El ejercicio consistio en agregar un color de borde a la etiqueta p1, el cualse asigna con un numero hexadecimal o con el nombre en ingles. Y un estilode borde: solid, dotted, groove y double. Para indicar un color y estilo a cadaborde es necesario saber que hay que agregarlo de la siguiente manera: (supe-rior) (derecha) (inferior) (izquierda) o (top) (right) (bottom) (left). El numerohexadecimal permite colocar una gran gama de colores.

Figura 1.4: Color y estilo de borde

Figura 1.5: Visualizacion en el navegador

1.1.2. Border Width

El ejercicio consitio en observar como puedes cambiar el ancho de los bordes,indicando mediante pixeles a cada uno de los cuatro bordes. En la imagen seobserva que cada uno de los bordes tiene un ancho distinto.


Figura 1.6: top=5px, right=10px, bottom=15px, left=20px


1.1.3. Border Radius

El ejercicio consistio en observar como se pueden curvear los bordes, de igualmanera se indica mediante pixeles. Entre mas grande es el numero de pixelesmas grande es la curva del borde.

Figura 1.8: top=0px, right=30px, bottom=70px, left=20px



1.1.4. Border Radius-Hemisphere

El ejercicio consistio en observar otro comportamiento del border radiusutilizando dos nuevos atributos.

Figura 1.10: moz-border-radius, webkit-border-radius



1.1.5. Border Radius-Advanced Hempisphere

El ejercicio consitio en observar un comportamiento del border radius. Adiferencia de los otros dos, este ya tiene mas un poco mas de complejidad en suconstruccion. Solo hay que jugar con el tamano de los pixeles en los 4 bordespara lograr resultados como estos.

Figura 1.12: moz-border-radius, webkit-border-radius


1.1.6. Round Rectangle

El ejercicio consistio en hacer un rectangulo con las orillas curveadas; paraesto basto con dejar border-radius en 20px, moz-border-radius en 20px y webkit-border-radius en 20px.


Figura 1.14: Rectangle


1.1.7. Advanced Round Rectangle

Figura 1.16: Advanced Rectangle



1.1.8. Bullet

El ejercicio consistio en modificar los bordes de tal manera que se creara unafigura con forma de bala. Como ya mencione, hay que jugar con los pixeles delos bordes para poder construir distintas formas.

Figura 1.18: Bullet



1.1.9. Advanced Bullet

Se modifican los estilos de bordes y se agregan otros tamanos de pixeles aborder-radius

Figura 1.20: Advanced Bullet


1.1.10. Advanced Leaf

Este ejercicio consistio en una combinacion de los efectos y propiedades quehabıamos estado utilizando, cambiando colores, tamanos de pixeles y estilos.


Figura 1.22: Advanced Leaf


1.1.11. Multiple Backgrounds

El ejercicio consistio en colocar 3 imagenes dentro de una etiqueta. Para estose le asigno a esta una altura y un ancho distinta a las demas etiquetas, paraque de esta manera se apreciaran las 3 imagenes. Con la etiqueta backgroundindicamos que sera una imagen de fondo, y con url indicamos la ruta en dondese buscaran las imagenes ası como el nombre del archivo.


Figura 1.24: top y bottom asignan a la imagen la posicion donde se colocaran


Nota: las imagenes deben guardarse en el directorio donde esta el archivo.html


1.2. Text Effects

Para manejar estos efectos es necesario saber conocer la sintaxis:text-shadow=(X-offset)(Y-offset)(blur-radius)(color)

1.2.1. Colorful Style

El atributo text-shadow sirve para crear sombras en el texto. Se le indicala posicion de la sombra que se creara, tanto hacia arriba(x) como hacia loslados(y), ası como el color de la sombra.

Figura 1.26: text-shadow


1.2.2. Double Font Style

En este ejercicio el texto se duplico y se posiciono uno mas arriba que elotro; se cambio el color tambien.

Figura 1.28: double font



1.2.3. Neon Glown Style

Figura 1.30: Neon glown style


1.2.4. Ouset Style

Figura 1.32: Outset Style



1.3. Fonts

Este ejercicio consistio en colocar otra fuente a un texto de una etiqueta.Para esto fue necesario descargar una o mas fuentes de internet, las cuales tienenuna extension de archivo .ttf (en caso de utilizar IE era necesario convertir lasfuentes a una extension .eot). Ya teniendo las fuentes se realizo lo siguiente enla hoja de estilos:

Figura 1.34: Font

Se puede ver que se declaro una nueva fuente colocando el nombre de esta(font-family) ası como la ruta de ubicacion del archivo .ttf. Posteriormente, en la eti-queta donde se utilizara la fuente, se indica el tamano(font-size) y el nombre deesta.


Nota: se recomienda guardar las fuente en una carpeta que se encuentre enel mismo directorio que el archivo .html


1.4. Shadows

1.4.1. Example 1

Figura 1.36: effect


1.4.2. Example 2

Figura 1.38: effect



1.4.3. Example 3

Figura 1.40: effect



1.4.4. Example 4

Figura 1.42: effect


1.4.5. Example 5

Figura 1.44: effect



1.4.6. Example 6

Figura 1.46: effect



1.4.7. Example 7

Figura 1.48: effect


1.4.8. Example 8

Figura 1.50: effect



1.5. Transformaciones

1.5.1. Scaling

Figura 1.52: Scaling

1.5.2. Rotate

Figura 1.53: Rotate


Figura 1.54: Escala y rotacion de la imagen

1.5.3. Skew

Figura 1.55: Texto inclinado


1.6. Animations

1.6.1. Delay

El ejercicio consistio en que la etiqueta apareciera despues de un cierto tiem-po en la pagina, definiendo los tiempos de intervalo.


Figura 1.57: Aparecer/desaparecer


1.6.2. Keyframes

Este ejercicio consistio en hacer que la etiqueta cambiara de tamano al mo-mento de colocar el cursor sobre el. Utilizamos la pseudo-clase hover para lograreste efecto


Figura 1.59: Aparecer/desaparecer

Figura 1.60: Texto antes de colocar el cursor sobre el


Figura 1.61: Colocando el cursor sobre el

1.6.3. Multiple Columns

Figura 1.62: Texto inclinado



1.7. Gradients

1.7.1. Gradient1

Figura 1.64: Gradiente lineal


1.7.2. Gradient2

Figura 1.66: Gradiente Radial



1.8. Pseudo-classes

Figura 1.68: :root

Se coloca un margen color rojo. En caso de que la pagina no tuviera unaimagen de fondo este aparecerıa color rojo.


1.9. Conclusiones

La creacion de una pagina web conlleva la utilizacion de muchos atributos yetiquetas, los cuales permiten establecer un diseno mas estructurado pero tam-bien mas complejo. Gracias a la hoja de estilos CSS3 es mas sencillo disenarestos aspectos pues permiten llevar un control de todo lo que se utiliza. Todoslos archivos externos, como imagenes, fuentes, etc. se deben almacenar en di-rectorios distintos para que, si la pagina se vuelve demasiado grande, se puedamodificar o corregir de manera mas eficiente. Aun hay muchos atributos y eti-quetas que tenemos que abordar, pero al realizar esta practica ya comprendimosla manera conjunta en que HTML5 y CSS3 trabajan.


1.10. Cuestionario

1. ¿Cuales son las etiquetas semanticas de HTML5?

R: <header> </header><hgroup> </hgroup><nav> </nav><article> </article><section> </section><aside> </aside><figure> </figure><footer> </footer><address> </address>

2. Menciona cual es la diferencia entre CSS2 y CSS3

R: La mayor diferencia entre CSS2 y CSS3 es que este ultimo ha sidodividido en diferentes secciones llamadas modulos. Cada uno de estosmodulos hace su camino a traves de WC3 en varios niveles del procesorecomendado. CSS2 fue presentado como un unico documento con todala informacion dentro de las hojas de estilo en cascada Gracias a estosmodulos, se ha podido trabajar independientemente; tenemos un rangomucho mas amplio de navegadores que soporten modulos CSS3 CSS3 traenuevos selectores y 16 nuevas pseudoclases.

3. Enlista las ventajas y desventajas de usar HTML5 y CSS3. Analizar losresultados (pagina Web) de la practica en varios navegadores (Internetexplorer version 7, 8 y 9, Chrome, Firefox y Opera)

Ventajas

Sitios web de alto impacto visual, llamativos y modernos.

Desarrollo de aplicaciones web amigables con iPhone, Andriod, Black-Berry y otros dispositivos moviles.

Optimizar y alcanzar un excelente posicionamiento seo en google yotros buscadores.

Reproducir con HTML5 de forma nativa en el navegador audio yvideo, ente otros elementos, que antes solo era posible incorporarmediante plugins.

Evitar las desventajas que el uso de plugins puede traer en compati-bilidad, rendimiento y seguridad.

Mejorar la semantica de los sitios web adaptando de mejor manerael contenido tematico para mostrar a los buscadores y agregadoresel significado de su contenido permitiendo que la indizacion de losdocumentos sea mas certera.


CSS3 es el lenguaje encargado de que se vea amigable el sitio web.Permite lograr estilos y efectos visuales que antes no era posible lo-grar.

Un sitio hecho en HTML5 y CSS3 te coloca a la vanguardia frente atus competidores.

Desventaja

La parte de compatibilidad con los navegadores. El mas problematicoes Internet Explorer y al tener que hacer una pagina compatible conla mayorıa de los navegadores es necesario trabajar con muchas lıneasde codigo extra y por ahora no hablamos de sitios responsivos, lo cualgenerarıa de 3 a 4 veces mas de codigo en el CSS.

4. Los resultados de la practica ¿Son iguales en los navegadores mencionadospreviamente?R: En algunos aspectos son distintas. Por ejemplo, en Chrome se puedenutilizar las fuentes .ttf pero al momento de abrir la pagina con InternetExplorer no lo hace, es necesario convertir la fuente a una extension .eot.Los gradientes no se observan en Internet Explorer, mientras que en Chro-me sı.

5. Enlista 10 caracterısticas no compatibles entre navegadores R:

6. Investiga las tecnologıas que permiten compatiblilidad entre navegadoresR: Existen diferentes formas de hacerlo, una es crear las etiquetas deHTML5 en javascript y despues aplicar los estilos CSS a dichas etique-tas, el codigo javascript seria:

Figura 1.70: script

Y como CSS pondrıamos


Figura 1.71: css

Si bien otra solucion seria utilizar el fichero html5.js con lo que no tendrıamosque utilizar el codigo javascript simplemente incluirle en nuestro archivohtml con la orden:

Figura 1.72: script

7. Aplica alguna tecnologıa para que las caracterısticas que no son compati-bles lo sean.R: Crear las etiquetas de HTML5 en javascript y despues aplicar los estilosCSS a dichas etiquetas

8. Evidencia (con impresiones de pantalla) el antes y el despues de aplicarlas tecnologıas que brindan compatibilidad

Figura 1.73: Sin fuente en Internet Explorer


Figura 1.74: Haciendo compatibles los navegadores

Figura 1.75: Agregando en css

Figura 1.76: Fuente en Internet Explorer

Hoja de estilos CSS

Documents

Transcript of Hoja de estilos CSS