Web Design: programmare in html, css, javascript, jQuery, php, xml, ajax
Curso HTML 5 & jQuery - Leccion 9
-
Upload
emmanuel-ortiz-gutierrez -
Category
Internet
-
view
65 -
download
2
Transcript of Curso HTML 5 & jQuery - Leccion 9
HTML
CSS
Texto y Tipografía
Las dificultades que históricamente han existido en relación al uso de tipos de letra en páginas web se debía principalmente, a que los navegadores se venían basando en un archivo de fuente instalada en el propio ordenador del usuario y no se podía garantizar que el usuario tuviera disponible la fuente que especificaba el programador o diseñador.
@FONT-FACE CSS
Para superar la limitación de tener que depender de las fuentes disponibles por parte de cada usuario se creó la regla @font-face que permite especificar un nombre y la localización (url) de un archivo con la fuente que se desea usar en una página web.
De esta manera, cambia el concepto tradicional, ya que con @font-face podremos usar fuentes que hemos definido y localizado nosotros mismos, sin depender de las fuentes de que disponga el usuario.
Ten en cuenta que @font-face está disponible en todos los navegadores modernos, pero que versiones antiguas de navegadores no admiten el uso de esta regla, de ahí que siempre debamos especificar una familia tipográfica genérica como alternativa de seguridad para el caso de que una fuente especificada no pueda cargarse.
REGLA @FONT-FACE
Una fuente es un archivo informático con la información necesaria para que un sistema operativo o programa puede mostrar un tipo de letra determinado.
Por ejemplo, en Windows se dispone de la fuente “Arial” gracias a que dentro del sistema de archivos existe un archivo denominado arial.ttf. Si borramos ese archivo, la fuente deja de estar disponible. El tipo (formato o extensión) del archivo puede variar de unos sistemas a otros: extensiones habituales son ttf, otf, woff, svg, etc.
REGLA @FONT-FACE
La extensión woff (Web Open Font Format) ha sido creada específicamente como tipo de fuente para desarrollos web y aspira a convertirse en un estándar. Sin embargo, la realidad es que no existe todavía un formato de archivo estándar que se haya impuesto para todos los navegadores.
El uso básico de la regla @font-face conlleva definir dos parámetros: por un lado, el “alias” o nombre con el que vamos a designar a la fuente cuando la empleemos en nuestras reglas CSS. Por otro lado, la ruta donde se localiza el archivo que contiene la fuente.
La sintaxis básica a emplear es de este tipo:@font-face {font-family: "nombreDeFuente"; src: url(nombreDeArchivo.extension); }
REGLA @FONT-FACE
Debido a que la regla @font-face se ha ido introduciendo en los últimos años y los diferentes navegadores han ido admitiendo formatos de fuentes distintos poco a poco, un “truco” al que recurren muchos diseñadores y programadores para garantizar que la mayor parte de navegadores usen la fuente deseada es especificar las rutas de los archivos fuente en distintos formatos, de modo que se usará el primero en ser reconocido por el navegador.
Ejemplo@font-face { font-family: Sansat;src: url('Sansation_Light.woff'), url('Sansation_Light.ttf'), url('Sansation_Light.eot') ; }
REGLA @FONT-FACE
La regla @font-face permite que se especifique si se debe buscar la fuente primero en el ordenador del usuario y usarla en caso de estar disponible, antes que usar una fuente especificada mediante un archivo. Para ello se especifica el origen como local(“nombreDeFuenteEnSistemaUsuario”).
Ejemplo@font-face { font-family: Sansat; src: local(“Sansation Light”), url('Sansation_Light.woff'), url('Sansation_Light.ttf'), url('Sansation_Light.eot') ; }
REGLA @FONT-FACE
Existen diferentes páginas web donde se ofrecen archivos de fuentes gratuitos. Es difícil decir cuál es la página que ofrece las mejores fuentes, entre otras cosas porque en estas páginas hay cambios continuos y se van incorporando nuevas fuentes y nuevos formatos continuamente.
Fuentes externas
Muchas veces las fuentes que tenemos disponibles para descarga están en un solo formato como ttf y para asegurarnos de que se visualicen bien deseamos disponer de ellas en varios formatos. Los formatos más usados son: WOFF, EOT, TTF, OTF y SVG.. Hay varios tipos de fuentes para web:◦ woff - Web Open Font Format (.woff)◦ truetype (.ttf)◦ opentype (.otf)◦ embedded-opentype (.eot)◦ svg (.svg, .svgz)
En principio usando TTF y EOT nos garantizamos que nuestra fuente sea reconocida por la mayoría de los navegadores, aunque si buscamos el máximo de seguridad convendría incluir los cinco formatos.
Fuentes externas
Fuentes externas
La regla @font-face se ha introducido en los últimos años y su estandarización todavía no es suficiente, aunque su uso es cada vez más amplio. Te podrás encontrar con situaciones como que:
a) Un determinado navegador no reconozca la regla @font-face, con lo cual recurrirá a la fuente estándar que hayas definido, o si no la has definido, a la fuente por defecto.b) Un determinado navegador no reconozca el formato de la fuente que hayas indicado.c) Un determinado navegador no responda bien a la sintaxis que hemos descrito y sea necesario aplicar “un parche” o código específico para ese navegador.d) Algunas reglas CSS no se aplican bien con un determinado formato de fuente. Por ejemplo, quizás te encuentres que al aplicar text-transform: uppercase; con algunas fuentes no te funcione.
PROBLEMAS CON @FONT-FACE
Los em son escalables mientras que los rem apuntan directamente al tamaño del body.
EjemploP{
font-size: 3em;}
Tamaño de fuente em y rem
Los valores para font-weight pueden ser 100, 200, 300, 400, 500, 600, 700, 800, normal, lighter, bold y bolder.
Las palabras reservadas tiene su equivalencia: normal = 400, bold = 700, bolder = 900 y lighter = 100.
El grosor de la fuente, también depende de la configuración de la fuente seleccionada.
EjemploP{font-weight: normal;}
Grosor de Fuente
Los valores para font-style pueden ser normal, italic u oblique.
EjemploP{
font-style: normal;}
Estilo de Fuente
Los valores para text-align pueden ser left, right, center o justif.
EjemploP{
text-align : center;}
Alineación de Texto
Interlineado de texto (espacio entre lineas)
EjemploP{ line-height: normal; (valor por defecto)}
P{ line-height: 40px;}
Altura de Línea
Los valores para text-decoration pueden ser normal o none, underline, overline o line-through.
EjemploP{ text-decoration: none;}
Las etiquetas a traen por defecto subrayado y lo quitamos aplicando text-decoration: none;
Subrayado de Texto
Los valores para text-transform pueden ser capitalize, uppercase o lowercase.
EjemploP{
text-transform : uppercase ; }
Transformaciones de Texto
También podemos darle a font-variant el valor small-caps
EjemploP{
font-variant: small-caps; }
Transformaciones de Texto
Para lograr efecto de tabulacion, en los parrafos, se utiliza la propiedad text-indent
EjemploP{
text-indent: 50px; }
Indentación de Texto
EjemploP{letter-spacing: 50px; (mayor espacio entre letras)word-spacing: 15px; (mayor espacio entre palabras)}
P{letter-spacing: -2px; (menor espacio entre letras)word-spacing: -9px; (menor espacio entre palabras)}
Espacio entre letras y entre palabras
CSS
Bordes
Los tres atributos fundamentales para establecer el borde a un elmento son: border-width: indica la anchura del bordeborder-style: indica el tipo del borde (solid, dashed, double, dotted, inset, outset o none)border-color: indica el color del borde
Estos atributos pueden resumirse en una sola linea con la estructura border: anchura estilo color. Ejemplo: border 2px solid red;
Así mismo se puede aplicar a un borde concreto con border-top-style o border-left-color, etc.
Estilos básicos
Se puede establecer el radio de curbatura de las esquinas de forma igualada, pero tambien se pueden hacer curvaturas avanzadas especificando en qué esquina se aplicarán y cual será el radio en el eje X y en el eje Y para aplicar el radio de la esquina.
Código CSSborder-radius: 20px;border-top-left-radius: 30px (radio horizontal)10px (radio vertical)
Border-radius
Usar una imagen como color de border.
Border-image: url(../imagen.jpg)20 (cantidad de px que deseo que se muestre de la imagen seleccionada como border)Repeat/stretch (comportamiento);Border-width: 15px;
Border-image
CSS
Fondos
Para posicionar el fondo de un elemento tenemos 3 opciones: border-box (desde el borde), padding-box (desde la zona del padding) y content-box (desde la zona del contenido)
EjemploBorder 10px solid transparent;Background: url(..0/imagen.jpg)Background-origin: paddin-box/border-box/content-box
Background-origin
Colocar varias imágenes de fondo.
Border: 10px solid black;background-color: green;background: url(..0/firma.gif),url(..0/imagen.jpg);Background-repeat: no-repeat, repeat;Background-position: right-bottom, center center;
Múltiples Imágenes
Disposición de gradiente:Left, right, top, bottom
Border: 10px solid black;background-color: green;Background: -moz-linear-gradient(left, black 0%, orange 20%, blue 80%, green 100%)
OLeft 40deg, right 30deg
Degradados Lineales
Se agrega la nomenclatura de grados (deg)
Border: 10px solid black;background-color: green;Background: -moz-linear-gradient(left 30deg, black 0%, orange 20%, blue 80%, green 100%)
Degradados Lineales - Diagonal
Navegadores Soportados
background: red; /*Safari*/ background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /*Opera*/ background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /*Firefox */ background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /*Standard*/ background: repeating-linear-gradient(red, yellow 10%, green 20%);
Repitiendo un linear-gradient
background: red; /* Safari */background: -webkit-radial-gradient(center, circle, red, yellow, green); /* Opera */background: -o-radial-gradient(center, circle, red, yellow, green); /* Firefox */background: -moz-radial-gradient(center, circle, red, yellow, green); /* Standard */background: radial-gradient(center, circle, red, yellow, green);
Degradados Circulares
¿Preguntas?
Emmanuel OrtizConsultor [email protected] / gtalkemmanueltizSkype