Curso de diseño Web con HTML. Cursosindustriales. Programación HTML Página 1

Transcripción

1 Curso de diseño Web con HTML. Cursosindustriales. Programación HTML Página 1

2 POSICIONAMIENTO, FONDOS Y EFECTOS. En este capítulo voy a intentar describir otras acciones que se pueden producir mediante CSS3 como son los efectos sobre los objetos, transiciones, degradados, modificaciones del documento, etc., etc. Para empezar aprenderemos a cargar nuestras propias fuentes caligráficas en el documento para así poder personalizar la fuente de nuestra página Web. Seguiremos con el estudio del tratamiento del color en CSS3 y cómo realizar efectos sobre objetos y fondos. Por último y para terminar veremos como diseñar y crear efectos y transiciones de objetos con CSS3 y para qué sirven. OBJETIVOS DEL TEMA. Propiedades comunes de presentación. Métodos y propiedades del color en las hojas de estilo. Propiedades y métodos de las fuentes. Posicionamiento de CSS3. Cursosindustriales. Programación HTML Página 2

3 PROPIEDADES DE PRESENTACIÓN. Aunque en el anterior capítulo ya vimos parte de estas propiedades, vamos a repasar parte y otras propiedades en este punto, pues es importante no tener ninguna duda en el futuro para poder desarrollar aplicaciones en un futuro. Podemos establecer las siguientes propiedades: Box-sizing. Determina como se aplican las propiedades Height y Width al modelo de caja por defecto de los navegadores, del elemento en el que se aplique. Puede coger ciertos valores. BORDER-BOX. Esta opción permite establecer el ancho y alto específico y determina el cuadro de borde del elemento de la forma que sea lo más real posible a como se diseña. Por ejemplo, imagina que creamos una ventana en el documento con una etiqueta <div> y con los siguientes valores: Cursosindustriales. Programación HTML Página 3

4 Como puedes ver la ventana tiene un ancho de 200px y está localizado en el centro de la pantalla. También tiene un padding de 20px en cada lado y un border superior e inferior de 10px. La anterior ventana pues tiene por tanto un tamaño de 200px + 20px + 20px + 10px + 10px lo que implica una ocupación de 260px en lugar de los 200px iniciales que se dio al CSS. El problema de esto es que puede ocurrir que cuando utilizas una hoja de estilo con posicionamiento absoluto, puede que las redimensiones que le aplica el navegador pueda que se representen mal. Para eso, se creó esta propiedad ya que obliga al navegador a coger los valores absolutos y no tenga en cuenta los padding ni border especificados. En el siguiente código, puedes ver como al utilizar esta propiedad, la ventana ocupa solamente los 200px de ancho y no los 260px del anterior código. Eso sí, como el ancho de la ventana se mantiene ahora fijo, y mantiene los valores de padding y border, lo que hace es aumentar su height (al no haberlo limitado). NOTA: En el código se usan los prefijos para su funcionamiento en Opera, Chrome, Safari, Mozilla y Firefox. Cursosindustriales. Programación HTML Página 4

5 CONTENT-BOX. Este es el estilo por defecto según lo especificado por el estándar CSS. Las propiedades de anchura y altura se miden incluyendo sólo el contenido, pero no la frontera, margen, o material de relleno. Cursosindustriales. Programación HTML Página 5

6 PADDING-BOX. Las propiedades width y height son el tamaño de relleno, y no incluyen la frontera o el margen. Para que quede claro, la diferencia entre content-box y padding-box está en que el primero mantiene el ancho especificado pero no controla los bordes superiores ni inferiores (por lo que el texto es más alto), y el segundo controla los bordes superiores e inferiores pero redimensiona el espaciado a lo ancho. Aunque la apreciación es casi mínima y no se suele usar mucho. Cursosindustriales. Programación HTML Página 6

7 Display. Esta propiedad permite ocultar el elemento sin que ocupe un lugar en la página siempre que utilicemos su atributo none. Observa cuando escribimos en el cuerpo principal una frase junto a este CSS. El código es el siguiente: Observa que la ventana aparece antes del párrafo. Ahora supón que utilizamos la propiedad de hidden en el css de la ventana3 para ocultarlo. Al ejecutar la página puedes ver que ahora no se ve la ventana3, pero se mantiene el espaciado de la misma. Cursosindustriales. Programación HTML Página 7

8 Ya que le he dado un valor de visibility:hidden. Pues bien, si en vez de usar la propiedad visibility usamos la propiedad display y le asignamos el valor de none, la ventana quedará oculta y no se reservará el espacio en pantalla para dicha ventana, como ocurría anteriormente. Y por lo tanto veremos el identificador de párrafo en la posición superior de la pantalla. Cursosindustriales. Programación HTML Página 8

9 Overflow. Determina que debe ocurrir cuando el contenido de un elemento supera las dimensiones de éste. Esta propiedad CSS permite establecer el aspecto de un contenido cuando su interior sobresale de otro contenedor. Se suele aplicar a las ScrollBar de las páginas Web para evitar que aparezcan barras verticales u horizontales. Cursosindustriales. Programación HTML Página 9

10 Tiene varios valores que pueden coger siendo por defecto el auto, que mostrará las barras de desplazamiento siempre que el contenido sobresalga de las dimensiones de la ventana (en este caso). HIDDEN. Oculta las barras de desplazamiento del elemento contenedor. Cursosindustriales. Programación HTML Página 10

11 NO-CONTENT. Se especifica cuando se quiere que no se muestre el scroll bajo ninguna situación. Pero como es similar al hidden, se produce un escapado del elemento. Cursosindustriales. Programación HTML Página 11

12 NO-DISPLAY. Con esto se evita lo anterior y no se escapa el elemento. Esto lo que hace es resetear todo el contenido y lo deja por defecto. Depende del contenedor para que se aplique o no estilo. Por defecto hace el mismo efecto que el anterior (en este ejemplo solamente). PROPIEDADES DE FONDOS. Es muy habitual establecer fondos en los contenidos, objetos y páginas Web mediante CSS. Para ello, CSS3 establece una serie de propiedades que permiten manejar el color, la imagen, la posición entre otros. A continuación estudiaremos las propiedades más comunes. Background. Esta propiedad por excelencia se ocupa de los fondos de las páginas u elementos y se encarga de establecer su posición, y apariencia dentro de él. Podemos establecer varias propiedades dentro de este elemento. Cursosindustriales. Programación HTML Página 12

13 BACKGROUND-ATTACHMENT. Esta propiedad determina si el fondo se puede desplazar cuando el usuario hace scroll en la página o pertenece fija. Puede coger los valores siguientes: Aunque los más usados son el valor de fixed para que se desplace y scroll para que permanezca fija. BACKGROUND-CLIC. Esta propiedad especifica un área para el fondo del control por lo que puedes especificar un color o un estilo. Tiene varios valores de sus atributos. Que incluye los mismos valores que el control box-sizing con la misma configuración pero para diferentes propiedades. Así por ejemplo para producir un color de fondo dentro de la ventana anterior simplemente tenemos que establecer la siguiente instrucción. Cursosindustriales. Programación HTML Página 13

14 Y el resultado: Ten en cuenta que el valor de border-box ocupa todo el espacio de la ventana por lo que no se apreciaría el efecto. Cursosindustriales. Programación HTML Página 14

15 También la propiedad padding-box produce el mismo efecto sobre el control. BACKGROUND-IMAGE. Esta propiedad se encarga de implantar una imagen de fondo en el control. Para ello, utiliza varios atributos. Cursosindustriales. Programación HTML Página 15

16 Por lo que como puedes ver, CSS3 te permite insertar degradados lineales o radiales y repetirlos en el espacio o asignar una imagen de fondo. Veremos a continuación dichas atributos para mejor compresión. Linear-gradient. Indica un gradiente lineal. Su sintaxis básica es: Linear-gradient(dirección, color, color, color ); Las direcciones que pueden coger son: To right (derecha). To left (izquierda). To bottom (hacia abajo) To bottom right (abajo a la derecha) To bottom left (abajo a la izquierda) Angle (especifica el ángulo de ataque). To top (de abajo a arriba). Cursosindustriales. Programación HTML Página 16

17 Se puede establecer también una transparencia mediante la propiedad rgba e incluyendo los valores. NOTA: Es importante usar los prefijos para que otros navegadores entiendan el gradiente mediante los prefijos de webkit-, -moz-, -o-, para el resto de navegadores diferentes a IE. Radial-gradient. Indica un gradiente radial. Funciona igual que el anterior, pero esta vez hay que especificar por lo menos dos colores y un origen para el gradiente y por defecto (sin especificar) es el centro del control que tenga la imagen. Cursosindustriales. Programación HTML Página 17

18 Su sintaxis básica es: Radiar-gradient(forma, tamaño y posición, color, color,, color); Y como he dicho por defecto la posición es centrada con una forma eclíptica y una tamaño que llega hasta las esquinas. Así para de esta forma podemos establecer un degradado como: Pero el degradado también puede darse en porcentajes de la forma que puedes ver. Cursosindustriales. Programación HTML Página 18

19 También se puede definir la forma que tendrá el degradado, pudiendo optar entre una forma circular y otra elíptica (que está definida por defecto). Para que esté en círculo, deberás de establecer el tipo específico. Circle Elipse Además también podemos especificar unas palabras claves para el gradiente de la imagen: closest-side farthest-side closest-corner farthest-corner Cursosindustriales. Programación HTML Página 19

20 Cursosindustriales. Programación HTML Página 20

21 Cursosindustriales. Programación HTML Página 21

22 Repiting. Este atributo repite el fondo del degradado tanto lineal como radial cuando sobrepasa los límites del control. La sintaxis es: Repiting-linear-gradient(color, color.,color); url. Especifica una dirección absoluta o relativa de una imagen para que se cargue dentro del control especificado. Observa que por defecto, se produce la repetición de la imagen para que ocupe todo el alto y ancho del control. Cursosindustriales. Programación HTML Página 22

23 BACKGROUND-POSITION Y BACKGROUND-REPEAT. Especifica la posición absoluta de la imagen respecto a los ejes x e y del contenedor y si se repite al no rellenar la imagen el alto y ancho del contenedor. Estas propiedades CSS son inferiores a las de CSS3 por lo que no se incluyen en el futuro estándar, pero se siguen usando en la actualidad. SE pueden usar valores relativos o absolutos para la posición de la imagen respecto al contenedor (en el caso, están en valores absolutos). Si usaremos la opción de repetir en el eje Y (vertical), la imagen se repetiría tantas veces como para rellenar el contenido del contenedor. Cursosindustriales. Programación HTML Página 23

24 Los atributos del primer elemento son: Siendo bottom, la parte inferior; center, la central; left, izquierda; right, derecha y top en la parte superior. Los valores de initial e inherit son el valor por defecto y el valor heredado del contenedor padre (en caso de que estuviese dentro de otro contenedor). En cuanto a los atributos del segundo elemento: Cursosindustriales. Programación HTML Página 24

25 El atributo de no-repeat sirve para no repetir la imagen cuando es más pequeña que el contenedor, repeat-x y repeat-y sirve para repetir la imagen en el eje x o en el eje y respectivamente (a lo ancho o a lo alto),round implica que si la imagen no se puede repetir un mismo número de veces entonces se redondea y se aplica a todo el contenido (por ejemplo si no se puede repetir dos veces porque el control es un poco más grande que la imagen, entonces se coloca de fondo del contenedor). Por último, el atributo space es igual que el anterior pero dejando claro que si no se puede repetir, entonces se alinea en los bordes superior e izquierdo del contenedor y deja un espaciado entre repeticiones. MEDIA QUERIES. Con la aparición de las media queries empieza un nuevo diseño web gracias a CSS3. Las media queries son la evolución para poder adaptar la web a diferentes dispositivos, por lo que en esta parte del curso vamos a hablar de ellas y veremos las más usadas en los documentos Web y cómo funcionan. Antes de la aparición de la media queries se requería de JavaScript y de librerías específicas para comprobar la resolución de pantalla del usuario y así poder presentar un documento adaptado al mismo. Por lo que era muy habitual tener varias páginas Webs en diferentes formatos de presentación visual para las diferentes resoluciones. Por fortuna, esto ha cambiado y CSS3 ya nos permite incluir normas especiales para, dependiendo del tipo de resolución, carga una hoja de estilo personalizada dentro del propio documento, sin más elementos externos, sin más páginas HTML u hojas de estilo CSS aparte. Cursosindustriales. Programación HTML Página 25

26 El navegador como elemento común. Con la aplicación de unidades relativas en el documento, conseguimos un cierto nivel de adaptación de los contenidos a las pantallas. Pero prácticamente esto no es del todo suficiente ya que en pantallas de móviles o tabletas, habrán páginas Web que no se representen igual que en pantallas de ordenador o televisores, por lo que habrá que reordenar el aspecto de ciertos elementos, sustituirlos unos por otros, etc., etc., y para eso vamos a utilizar las media queries. Factores que influyen en las media queries. Principalmente se tiene que tener en cuenta las dimensiones de la pantalla del navegador como la altura y la anchura de los dispositivos. Ya sabes que la altura no supone limitación pues los documentos crecerán de manera automática en vertical descendente. El problema está en el ancho y que según se reduzca la pantalla, deberá de adaptarse la página a la resolución y no adaptar la resolución a la página. Además también hay que tener en cuenta que muchos dispositivos permiten la lectura de contenido en posición vertical y en horizontal (en el caso de las tabletas electrónicas), por lo que el contenido debe de ser adaptado según su lectura en horizontal (landscape), o vertical (portrait). Cursosindustriales. Programación HTML Página 26

27 Y en algunos casos se definirá las media queries según la resolución de pantalla en lugar de la anchura del dispositivo (device-width), o su altura (device-height). Otro factor que influye es la densidad de la pantalla. Las nuevas pantallas con valores superiores a los 72ppp y las nueva pantallas retina hacen que las tengamos que tener en cuenta para poder representar las mejores calidades requeridas. Sintaxis. Las media queries se pueden declarar dentro de una hoja de estilo CSS3 y son similares a las funciones en los lenguajes de programación ya que se ejecutará los micros estilos CSS cargados dentro de la media querie. Así que se puede declarar como puedes ver en la imagen en la cabecera del documento, o a través de una hoja de estilo CSS asociada. La estructura general es declarar la media con el y después asignar el tipo de querie a usar. La palabra and es la palabra clave que separa la condición en la que se cargará la hoja de estilo insertada dentro de la media querie (en el ejemplo la condición es que el máximo ancho de la pantalla del navegador sea de 800px). A continuación te indico el tipo de queries que puedes usar al declarar una media querie. Cursosindustriales. Programación HTML Página 27

28 Tipos de queries. Las cuatro opciones más básicas que puedes escoger para tus media queries, son las que te indico a continuación. Apto para todos los dispositivos. ALL. Esta querie es válida para cualquier dispositivo sea pantalla, impresora, móvil, etc., etc. No se suele utilizar dicha media sino va acompañada de palabras claves ya que es muy genérica utilizada de manera única. PRINT. Destinado para el material paginado y para los documentos vistos en la pantalla en el modo de vista previa de impresión. Permite establecer documentos personalizados si el destino es una vista de impresión, por ejemplo, y que siempre será diferente de la Web habitual. Cursosindustriales. Programación HTML Página 28

29 SCREEN. Destinado principalmente para las pantallas de ordenadores habituales. SPEECH. Destinado exclusivamente a sintetizadores de voz. CSS2 tenía un tipo media que se llamaba aural para este fin. Existen otros como el tv, handlheld, aural, braille, proyection, tty y embossed pero que no serán tratados en este curso. Palabras claves. Más que palabras claves, son operadores lógicos y los componen 3 tipos como son el and, not y only. Además se puede combinar múltiples queries usando comas entre ellas y siempre que se aplique cualquiera de ellas, se aplicará el estilo en el media querie establecido. Cursosindustriales. Programación HTML Página 29

30 AND. Es utilizada para unir varias queries juntas como puedes ver anteriormente. Pero también es usada para especificar una condición específica como por ejemplo que la pantalla no sea superior a 800px y la orientación de la misma sea horizontal (Tablet). NOT. El operador not aplica a todo el querie y retorna verdadero si es posible y sino retorna falso (como por ejemplo monochrome en un monitor a color o una ventana con un ancho mínimo de min-width: 700px en un monitor de 600px). Un not negara un querie si es posible pero no a todos los querie posibles si están ubicados en una lista separada por comas. El operador not no puede ser usado para negar un querie individual, solo para un querie completo. Por ejemplo, el not es evaluado al final en la anterior instrucción y si se da que algún dispositivo no es monocroma (como puede ser una impresora) devolverá un FALSE y no cargará el estilo de la querie específica. Cursosindustriales. Programación HTML Página 30

31 ONLY. Se da para navegadores antiguos para que carguen un código adaptado a estos. <link rel="stylesheet" media="only screen and (color)" href="ejemplo.css" /> En el anterior código puedes ver que solo carga el estilo para navegadores con pantallas a color. Condiciones. A continuación te muestro la lista de las condiciones (media_features) que puedes utilizar en tus media queries. Width: Indica el ancho del dispositivo. min-width: Indica el ancho mínimo del dispositivo. max-width: Indica el ancho máximo del dispositivo. Height: Indica el alto del dispositivo. min-height: Indica el alto mínimo del dispositivo. max-height: Indica el alto máximo del dispositivo. device-width: Describe la anchura del dispositivo de salida (ya sea la totalidad de la pantalla o página y no el área del documento a renderizar). min-device-width: Describe la anchura mínima del dispositivo de salida. max-device-width: Describe la anchura máxima del dispositivo de salida. device-height: Describe la altura del dispositivo de salida (ya sea la totalidad de la pantalla o página y no el área del documento a renderizar). min-device-height: Describe la altura mínima del dispositivo de salida. max-device-height: Describe la altura máxima del dispositivo de salida. aspect-ratio: Describe el aspecto de una zona a mostrar en el dispositivo de salida. Este valor consiste en enteros positivos separados por una barra ("/"). Esto representa la razón de aspecto de los pixeles horizontales (primer término) a los pixeles verticales (segundo término). min-aspect-ratio: Valor mínimo a mostrar. max-aspect-ratio: Valor máximo a mostrar. device-aspect-ratio: Describe la proporción de aspecto del dispositivo de salida. Este valor consiste de dos enteros positivos separados por una barra ("/"). Este representa la proporción de aspecto de los pixeles horizontales (primer término) a los pixeles verticales (segundo término). min-device-aspect-ratio: Valor mínimo a mostrar del dispositivo. Cursosindustriales. Programación HTML Página 31

32 max-device-aspect-ratio: Valor máximo a mostrar del dispositivo. color: Indica el número de bits por componente de color del dispositivo de salida. Si el dispositivo no soporta colores, este valor es 0. min-color: Indica el mínimo valor del color de salida. max-color: Indica el máximo valor del color de salida. color-index: Indica el número de entradas en la tabla de colores para el dispositivo de salida. min-color-index max-color-index monochrome: Indica el número de bits por pixel en un dispositivo monocromático (escala de grises). Si el dispositivo no es monocromático el valor será 0. min-monochrome: indica el menor valor. max-monochrome: Indica el mayor valor. Resolution: Indica la resolución (densidad de pixeles) del dispositivo de salida. La resolución puede ser especificada en puntos por pulgada (dpi) o en puntos por centímetros (dpcm). min-resolution: Indica la resolución mínima del dispositivo. max-resolution: Indica la resolución máxima del dispositivo. Scan: Describe el proceso de exploración de televisión de los dispositivos de salida. grid: Determina cuando el dispositivo de salida es un dispositivo de cuadrícula o de mapa de bits. Si el dispositivo está basado en una cuadrícula (como una terminal TTY o una pantalla de teléfono de solo texto), el valor será 1, de lo contrario será 0. orientation: Indica cuando el dispositivo esta en modo landscape (el ancho de la pantalla es mayor al alto) o modo portrait (el alto de la pantalla es mayor al ancho). Cada expresión tiene su valor por lo que ten cuidado al declarar dichas expresiones sin usar su valor correcto, ya que la media querie devolverá un FALSE y no se cargará la expresión correctamente (dependiendo del operador). Así que como puedes ver, existen muchas media queries para que te mantengas entretenido mucho tiempo y empieces a personalizar tu Web para diferentes dispositivos creando diferentes reglas CSS para cada media querie. Cursosindustriales. Programación HTML Página 32

33 Doy por terminado el temario de CSS y para el siguiente capítulo empezaremos con el estudio de JavaScript según entra en el módulo primero del certificado MSCD 480 de Microsoft. JavaScript abarcará mucho más contenido y ocuparán más temas para un mejor aprendizaje del lenguaje. NOTA: Si quieres ayudar a que crezca el sitio Web de cursosindustriales.net, plantéate realizar una donación desde cualquiera de sus páginas, visitar los enlaces de los patrocinadores, o compartir en las redes sociales dicho contenido. Gracias por tu visita. Cursosindustriales. Programación HTML Página 33