Desarrollo de Aplicaciones Telem´ aticas (2016-17) Grado en Ingenier´ ıa Tecnolog´ ıas de Telecomunicaci´ on (URJC) Jes´ us M. Gonz´ alez Barahona, Gregorio Robles Mart´ ınez http://cursosweb.github.io GSyC, Universidad Rey Juan Carlos 20 de marzo de 2017 GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telem´ aticas 20 de marzo de 2017 1 / 268
268
Embed
Desarrollo de Aplicaciones Telem aticas (2016-17) · Desarrollo de Aplicaciones Telem aticas (2016-17) Grado en Ingenier a Tecnolog as de Telecomunicaci on (URJC) Jesus M. Gonz alez
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Desarrollo de Aplicaciones Telematicas (2016-17)Grado en Ingenierıa Tecnologıas de Telecomunicacion (URJC)
Jesus M. Gonzalez Barahona, Gregorio Robles Martınez
http://cursosweb.github.io
GSyC, Universidad Rey Juan Carlos
20 de marzo de 2017
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 1 / 268
Generalmente, explicacion de los conceptos masimportantes y luego realizacion de ejercicios
No hay descanso
Ejercicios para hacer fuera de clase (y entregar)
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 14 / 268
Presentacion de la asignatura
Fundamentos “filosoficos”
El estudiante es el centro delaprendizaje
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 15 / 268
Presentacion de la asignatura
Evaluacion
Micropracticas diarias (entrega foro/GitHub): 0 a 1
Minipracticas preparatorias: 0 a 2
Practica final (obligatorio): 0 a 2.
Opciones y mejoras practica final: 0 a 3
Teorıa (obligatorio): 0 a 4.
Nota final: Suma de notas, moderada por la interpretacion del profesor
Mınimo para aprobar:
Aprobado en teorıa (2) y practica final (1), y5 puntos de nota final en total
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 16 / 268
Presentacion de la asignatura
Evaluacion (2)
Evaluacion teorıa: prueba escrita
Micropracticas diarias y minipracticas incrementales:
es muy recomendable hacerlas
Evaluacion practica final
posibilidad de examen presencial para practica final¡tiene que funcionar en el laboratorio!enunciado mınimo obligatorio supone 1, se llega a 2 solo con calidad ycuidado en los detalles
Opciones y mejoras practica final:
permiten subir la nota mucho
Evaluacion extraordinaria:
prueba escrita (si no se aprobo la ordinaria)nueva practica final (si no se aprobo la ordinaria)
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 17 / 268
Aquı se ensenan como son las cosasque se usan en el mundo real
Las buenas noticias son. . .que no son tan difıciles
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 19 / 268
HTML: HyperText Markup Language
HTML: HyperText MarkupLanguage
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 20 / 268
HTML: HyperText Markup Language
Basic structure of a document
<!DOCTYPE html>
<html>
<head>
<title> Tittle </title>
</head>
<body>
<p>This is a paragraph</p>
</body>
</html>
Ejercicio: Escribe una pagina HTML simple, y mırala en el navegador.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 21 / 268
HTML: HyperText Markup Language
Basic structure of a document (2)
[Nota: en general, se describira HTML5]
<!DOCTYPE html> es la marca de HTML5
En HTML 4.x era mas complicado...
En general, cada elemento se abre y se cierra
La estructura de un documento es un arbol(cada elemento va dentro de otro)
Elemento raız: HTML
Elementos bajo HTML: HEAD (indicaciones) y BODY (contenidos)
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 22 / 268
HTML: HyperText Markup Language
Sintaxis basica
Sintaxis similar a la de XML:
Etiquetas (elementos, marcas):
<p> ... </p>
<p/>
Atributos:
<p id="abstract">
Las etiquetas han de estar “encapsuladas”:se cierran en orden inverso al que se abrieron(esto es, van siempre “unas dentro de otras”, son contenedores)
Las etiquetas son nodos en el arbol,los atributos anotaciones de los nodos
Caracteres “escapados”: < (<) > (>)
Ejercicio: Escribe una pagina HTML con cabecera (que tenga al menosun tıtulo) y cuerpo, con las dos sintaxis de etiquetas, y con elementos quetengan atributos.GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 23 / 268
HTML: HyperText Markup Language
Elemento HTML
Sintaxis basica:
<html lang="es">
“lang” es el idioma (primario) del texto
Contiene un elemento HEAD y un elemento BODY
Language tags in HTML and XML:http://www.w3.org/International/articles/language-tags/
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 24 / 268
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 25 / 268
HTML: HyperText Markup Language
Elemento HEAD (2)
META:
juego de caracteres(simplifica versiones pre-HTML5, http-equiv)description
LINK puede apuntar a complementos para la pagina
rel=”stylesheet”: hoja de estilo CSS
LINK puede apuntar a otros recursos relacionados
rel="alternate": contenido equivalente de otros tipos (type)o en otros idiomas (hreflang)rel="author": autorrel="next", rel="prev": anterior, posteriorrel="shortcut icon": icono de la paginaOtros: license, nofollow, search, tag, etc.
Otros: STYLE, SCRIPT (CSS o JavaScript embebidos)
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 26 / 268
HTML: HyperText Markup Language
Elementos en BODY
H1 - H6: cabeceras (headings)
P: parrafos de texto
A: ancla (anchor) (absoluto a url, absoluto a recurso, relativo)
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 32 / 268
Hojas de estilo CSS
¿Que es CSS?
Es un lenguaje de hojas de estilos creado para controlar el aspecto opresentacion de los documentos electronicos definidos con HTML
Es la mejor forma de separar los contenidos y su presentacion y esimprescindible para crear paginas web complejas
Obliga a crear documentos HTML bien definidos y con significadocompleto (tambien llamados documentos semanticos)Mejora la accesibilidad del documentoReduce la complejidad de su mantenimientoPermite visualizar el mismo documento en infinidad de dispositivosdiferentes
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 33 / 268
p { color: gray; font-family: Verdana; font-size: medium; }
</style>
</head>
<body>
<h1>Titular de la pagina</h1>
<p>Un parrafo de texto no muy largo.</p>
</body>
</html>
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 35 / 268
Hojas de estilo CSS
CSS en un documento HTML
Se pueden integrar instrucciones CSS de varias maneras en un documentoHTML:
1 Incluir CSS en el mismo documento HTML
2 Definir CSS en un archivo externo
3 Incluir CSS en los elementos HTML
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 36 / 268
Hojas de estilo CSS
Glosario Basico (I)
Regla: cada uno de los estilos que componen una hoja de estilos CSS.Cada regla esta compuesta de una parte de “selectores”, un sımbolode “llave de apertura” ({), otra parte denominada “declaracion” y porultimo, un sımbolo de “llave de cierre” (}).
Selector: indica el elemento o elementos HTML a los que se aplica laregla CSS.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 37 / 268
Hojas de estilo CSS
Glosario Basico (y II)
Declaracion: especifica los estilos que se aplican a los elementos.Esta compuesta por una o mas propiedades CSS.
Propiedad: caracterıstica que se modifica en el elementoseleccionado, como por ejemplo su tamano de letra, su color defondo, etc.
Valor: establece el nuevo valor de la caracterıstica modificada en elelemento.
CSS 2.1 define 115 propiedades, mientras que CSS 3 define 239propiedades.GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 38 / 268
Hojas de estilo CSS
Selectores
A un mismo elemento HTML se le pueden aplicar varias reglas
Cada regla puede aplicarse a un numero ilimitado de elementos
Cuando el selector de dos o mas reglas CSS es identico, se puedenagrupar las declaraciones de las reglas para hacer las hojas de estilosmas eficientes
Cuando se establece el valor de una propiedad CSS en un elemento,sus elementos descendientes heredan de forma automatica el valor deesa propiedad
CSS 2.1 incluye una docena de tipos diferentes de selectores, que permitenseleccionar de forma muy precisa elementos individuales o conjuntos deelementos dentro de una pagina web.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 39 / 268
Hojas de estilo CSS
Selectores basicos
1 Selector universal
2 Selector de tipo o etiqueta
3 Selector descendente
4 Selector de clase
5 Selector de identidad
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 40 / 268
Hojas de estilo CSS
Selector Universal
No se utiliza habitualmente
Generalmente es equivalente para poner estilo a < body >
Se suele combinar con otros selectores y ademas, forma parte dealgunos hacks muy utilizados
* {
margin: 0;
padding: 0;
}
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 41 / 268
Hojas de estilo CSS
Selector de tipo o etiqueta
Selecciona todos los elementos de la pagina cuya etiqueta HTMLcoincide con el valor del selector
Se pueden agrupar todas las reglas individuales en una sola regla conun selector multiple.
Buena practica: agrupar las propiedades comunes de varios elementosen una unica regla CSS y posteriormente definir las propiedadesespecıficas de esos mismos elementos
h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 42 / 268
Hojas de estilo CSS
Selector descendente
Selecciona los elementos que se encuentran dentro de otroselementos. Un elemento es descendiente de otro cuando se encuentraentre las etiquetas de apertura y de cierre del otro elemento.
p span { color: red; }
[...]
<p>
...
<span>texto1</span>
...
<a href="">...<span>texto2</span></a>
...
</p>
Al resto de elementos < span > de la pagina que no estan dentro de unelemento < p >, no se les aplica la regla CSS anterior.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 43 / 268
Hojas de estilo CSS
Ejercicio
¿Que elementos se seleccionarıan con estos tipos de selectores?
p a span em { text-decoration: underline; }p, a, span, em { text-decoration: underline; }p a { color: red; }p * a { color: red; }
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 44 / 268
Hojas de estilo CSS
Selector de clase
Se utiliza el atributo class de HTML sobre ese elemento para indicardirectamente la regla CSS que se le debe aplicar
Se crea en el archivo CSS una nueva regla llamada destacado contodos los estilos que se van a aplicar al elemento
Se prefija el valor del atributo class con un punto (.)
.destacado { color: red; }
[...]
<p class="destacado">Lorem ipsum dolor sit amet...</p>
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 50 / 268
Hojas de estilo CSS
Colision de estilos (simplificado)
1 Cuanto mas especıfico sea un selector, mas importancia tiene su reglaasociada.
2 A igual especificidad, se considera la ultima regla indicada.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 51 / 268
Hojas de estilo CSS
Unidades de medida
Unidades absolutas
in, cm, mm, pt, pc
Unidades relativas
em, ex, px
Porcentajes
En general, se recomienda el uso de unidades relativas siempre que seaposibleNormalmente se utilizan pıxel y porcentajes para definir el layout deldocumento (basicamente, la anchura de las columnas y de los elementosde las paginas) y em y porcentajes para el tamano de letra de los textos.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 52 / 268
Hojas de estilo CSS
Colores
Palabras clave
aqua, black, blue, fuchsia, gray...
RGB decimal
RGB porcentual
RGB hexadecimal
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 53 / 268
Hojas de estilo CSS
Tipos de elementos (I)
El estandar HTML clasifica a todos sus elementos en dos grandes grupos:Elementos de lınea:
Los elementos en lınea (“inline elements” en ingles) no empiezannecesariamente en nueva lınea y solo ocupan el espacio necesario paramostrar sus contenidos.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 54 / 268
Hojas de estilo CSS
Tipos de elementos (II)
Elementos de bloque:
Los elementos de bloque (“block elements” en ingles) siempreempiezan en una nueva lınea y ocupan todo el espacio disponiblehasta el final de la lınea
Por sus caracterısticas, los elementos de bloque no pueden insertarsedentro de elementos en lınea y tan solo pueden aparecer dentro de otroselementos de bloque. En cambio, un elemento en lınea puede aparecertanto dentro de un elemento de bloque como dentro de otro elemento enlınea.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 55 / 268
Hojas de estilo CSS
El modelo de cajas
Es el comportamiento de CSS que hace que todos los elementos delas paginas se representen mediante cajas rectangulares
Cada vez que se inserta una etiqueta HTML, se crea una nueva cajarectangular que encierra los contenidos de ese elemento
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 56 / 268
Hojas de estilo CSS
El modelo de cajas (II)
No son visibles a simple vista porque inicialmente no muestran ninguncolor de fondo ni ningun borde
Ejemplo de http://www.alistapart.com/ despues de forzar a que todas las cajas
muestren su bordeGSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 57 / 268
Hojas de estilo CSS
El modelo de cajas (III)
Los navegadores crean y colocan las cajas de forma automatica, peroCSS permite modificar todas sus caracterısticas. Cada una de las cajasesta formada por seis partes, tal y como muestra la siguiente imagen:
Representacion tridimensional del box model de CSS (Esquema utilizado con permiso de
http://www.hicksdesign.co.uk/boxmodel/)GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 58 / 268
Hojas de estilo CSS
Partes que componen cada caja
Contenido (content): se trata del contenido HTML del elemento (laspalabras de un parrafo, una imagen, el texto de una lista deelementos, etc.)
Relleno (padding): espacio libre opcional existente entre el contenidoy el borde.
Borde (border): lınea que encierra completamente el contenido y surelleno.
Imagen de fondo (background image): imagen que se muestra pordetras del contenido y el espacio de relleno.
Color de fondo (background color): color que se muestra por detrasdel contenido y el espacio de relleno.
Margen (margin): separacion opcional existente entre la caja y elresto de cajas adyacentes.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 59 / 268
Hojas de estilo CSS
Margen, relleno, bordes y modelo de cajas (I)
El margen, el relleno y los bordes establecidos a un elementodeterminan la anchura y altura final del elemento
div {
width: 300px;
padding-left: 50px;
padding-right: 50px;
margin-left: 30px;
margin-right: 30px;
border: 10px solid black;
}
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 60 / 268
Hojas de estilo CSS
Margen, relleno, bordes y modelo de cajas (y II)
De esta forma, la anchura del elemento en pantalla serıa igual a la sumade la anchura original, los margenes, los bordes y los rellenos:30px + 10px + 50px + 300px + 50px + 10px + 30px = 480 pıxel
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 61 / 268
Hojas de estilo CSS
Visualizacion
CSS define otras cuatro propiedades para controlar su visualizacion:display, visibility, overflow y z-index.
La propiedad display permite ocultar completamente un elementohaciendo que desaparezca de la pagina. Como el elemento oculto nose muestra, el resto de elementos de la pagina se mueven para ocuparsu lugar.
La propiedad display tambien permite modificar el comportamiento deun elemento a bloque (block) o en lınea (inline).
La propiedad visibility permite hacer invisible un elemento, lo quesignifica que el navegador crea la caja del elemento pero no lamuestra. En este caso, el resto de elementos de la pagina no modificansu posicion, ya que aunque la caja no se ve, sigue ocupando sitio.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 62 / 268
Hojas de estilo CSS
Diferencias entre display y visibility
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 63 / 268
Se aplica a Todos los elementos salvo algunos casos especia-les de elementos mostrados como tablas
Valorinicial
-
Descripcion Establece de forma directa todos los margenes deun elemento
Cuadro : Definicion de la propiedad margin de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 65 / 268
Hojas de estilo CSS
Propiedad margin (propiedad shorthand) (y II)
La notacion 1, 4 de la definicion anterior significa que la propiedad marginadmite entre uno y cuatro valores, con el siguiente significado:
Si solo se indica un valor, todos los margenes tienen ese valor.
Si se indican dos valores, el primero se asigna al margen superior einferior y el segundo se asigna a los margenes izquierdo y derecho.
Si se indican tres valores, el primero se asigna al margen superior, eltercero se asigna al margen inferior y el segundo valor se asigna losmargenes izquierdo y derecho.
Si se indican los cuatro valores, el orden de asignacion es: margensuperior, margen derecho, margen inferior y margen izquierdo.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 66 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
CSS: Consideraciones adicionales
CSSConsideraciones Adicionales
(transparencias de referencia)
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 67 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Orden de visualizacion
El relleno y el margen son transparentes, por lo que en el espacioocupado por el relleno se muestra el color o imagen de fondo (si estandefinidos)
En el espacio ocupado por el margen se muestra el color o imagen defondo de su elemento padre (si estan definidos)
Si ningun elemento padre tiene definido un color o imagen de fondo,se muestra el color o imagen de fondo de la propia pagina (si estandefinidos)
Si una caja define tanto un color como una imagen de fondo, laimagen tiene mas prioridad y es la que se visualiza
Si la imagen de fondo no cubre totalmente la caja del elemento o si laimagen tiene zonas transparentes, tambien se visualiza el color defondo.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 68 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Se aplica a Todos los elementos, salvo los elementos en lıneaque no sean imagenes, las columnas de tabla ylos grupos de columnas de tabla
Valorinicial
auto
Descripcion Establece la altura de un elemento
Cuadro : Definicion de la propiedad height de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 70 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Margenes
En vez de utilizar la etiqueta < blockquote > de HTML, deberıautilizarse la propiedad margin-left de CS
Los margenes verticales (margin-top y margin-bottom) solo se puedenaplicar a los elementos de bloque y las imagenes, mientras que losmargenes laterales (margin-left y margin-right) se pueden aplicar acualquier elemento
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 71 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
El margen vertical
Es algo peculiar:
Cuando se juntan dos o mas margenes verticales, se fusionan deforma automatica y la altura del nuevo margen sera igual a la alturadel margen mas alto de los que se han fusionado.
Si un elemento esta contenido dentro de otro elemento, sus margenesverticales se fusionan y resultan en un nuevo margen de la mismaaltura que el mayor margen de los que se han fusionado
Si no se diera este comportamiento y se estableciera un determinadomargen a todos los parrafos, el primer parrafo no mostrarıa unaspecto homogeneo respecto de los demas.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 72 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Descripcion Establece el estilo completo de todos los bordesde los elementos
Cuadro : Definicion de la propiedad border de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 82 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Mas sobre bordes
Como el valor por defecto de la propiedad border-style es none, si unapropiedad shorthand no establece explıcitamente el estilo de un borde,el elemento no muestra ese borde
Cuando los cuatro bordes no son identicos pero sı muy parecidos, sepuede utilizar la propiedad border para establecer de forma directa losatributos comunes de todos los bordes y posteriormente especificarpara cada uno de los cuatro bordes sus propiedades particulares:
h1 {
border: solid #000;
border-top-width: 6px;
border-left-width: 8px;
}
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 83 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Fondos
Puede ser un color simple o una imagen.
Solamente se visualiza en el area ocupada por el contenido y surelleno, ya que el color de los bordes se controla directamente desdelos bordes y las zonas de los margenes siempre son transparentes
Se puede establecer de forma simultanea un color y una imagen defondo. En este caso, la imagen se muestra delante del color, por loque solamente si la imagen contiene zonas transparentes es posiblever el color de fondo.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 84 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad background-color
Propiedad background-colorValores color > — transparent — inherit
Se aplica a Todos los elementos
Valorinicial
transparent
Descripcion Establece un color de fondo para los elementos
Cuadro : Definicion de la propiedad background-color de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 85 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Descripcion Controla la forma en la que se visualiza la imagende fondo: permanece fija cuando se hace scroll enla ventana del navegador o se desplaza junto conla ventana
Cuadro : Definicion de la propiedad background-attachment de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 89 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad shorthand background
Propiedad backgroundValores ( background − color —— background − image
Descripcion Establece todas las propiedades del fondo de unelemento
Cuadro : Definicion de la propiedad background de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 90 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Posicionamiento y visualizacion
Los navegadores crean y posicionan de forma automatica todas lascajas que forman cada pagina HTML
El disenador puede modificar la posicion en la que se muestra cadacaja.
Existen cinco tipos de posicionamiento definidos para las cajas
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 91 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Tipos de posicionamiento
1 Normal o estatico: posicionamientosi no se indica lo contrario.
2 Relativo: consiste en posicionar una caja segun el posicionamientonormal y despues desplazarla respecto de su posicion original.
3 Absoluto: la posicion de una caja se establece de forma absolutarespecto de su elemento contenedor y el resto de elementos de lapagina ignoran la nueva posicion del elemento.
4 Fijo: variante del posicionamiento absoluto que convierte una caja enun elemento inamovible, de forma que su posicion en la pantallasiempre es la misma independientemente del resto de elementos eindependientemente de si el usuario sube o baja la pagina en laventana del navegador.
5 Flotante: desplaza las cajas todo lo posible hacia la izquierda o haciala derecha de la lınea en la que se encuentran.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 92 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Descripcion Selecciona el posicionamiento con el que se mos-trara el elemento
Cuadro : Definicion de la propiedad position de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 93 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Significados propiedad position
static: corresponde al posicionamiento normal o estatico. Si se utilizaeste valor, se ignoran los valores de las propiedades top, right, bottomy left que se veran a continuacion.
relative: corresponde al posicionamiento relativo. El desplazamientode la caja se controla con las propiedades top, right, bottom y left.
absolute: corresponde al posicionamiento absoluto. El desplazamientode la caja tambien se controla con las propiedades top, right, bottomy left, pero su interpretacion es mucho mas compleja, ya que el origende coordenadas del desplazamiento depende del posicionamiento desu elemento contenedor.
fixed: corresponde al posicionamiento fijo. El desplazamiento seestablece de la misma forma que en el posicionamiento absoluto, peroen este caso el elemento permanece inamovible en la pantalla.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 94 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Pseudo-clases
Como con los atributos id o class no es posible aplicar diferentes estilos aun mismo elemento en funcion de su estado, CSS introduce un nuevoconcepto llamado pseudo-clases. Por ejemplo, en enlaces:
:link: enlaces que apuntan a paginas o recursos que aun no han sidovisitados por el usuario.
:visited: enlaces que apuntan a recursos que han sido visitadosanteriormente por el usuario. El historial de enlaces visitados se borraautomaticamente cada cierto tiempo y el usuario tambien puedeborrarlo manualmente.
:hover: enlace sobre el que el usuario ha posicionado el puntero delraton.
:active: enlace que esta pinchando el usuario. Los estilos solo seaplican desde que el usuario pincha el boton del raton hasta que losuelta.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 95 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Descripcion Indican el desplazamiento horizontal y vertical delelemento respecto de su posicion original
Cuadro : Definicion de la propiedad top, right, bottom, left de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 96 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Posicionamiento normal (o estatico)
Utilizado por defecto por los navegadoresSolo se tiene en cuenta si el elemento es de bloque o en lınea, suspropiedades width y height y su contenido.Las cajas se muestran una debajo de otra comenzando desde elprincipio del elemento contenedor. La distancia entre las cajas secontrola mediante los margenes verticales.Si un elemento se encuentra dentro de otro, el elemento padre sellama “elemento contenedor” y determina tanto la posicion como eltamano de todas sus cajas interiores.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 97 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Posicionamiento normal (o estatico) (y II)
Los elementos en lınea forman los “contextos de formato en lınea”.Las cajas se muestran una detras de otra de forma horizontalcomenzando desde la posicion mas a la izquierda de su elementocontenedor.Si las cajas en lınea ocupan mas espacio del disponible en su propialınea, el resto de cajas se muestran en las lıneas inferiores.Si las cajas en lınea ocupan un espacio menor que su propia lınea, sepuede controlar la distribucion de las cajas mediante la propiedadtext-align para centrarlas, alinearlas a la derecha o justificarlas.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 98 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Posicionamiento relativo
Desplaza una caja respecto de su posicion original establecidamediante el posicionamiento normal. El desplazamiento de la caja secontrola con las propiedades top, right, bottom y left.
la propiedad top se emplea para mover las cajas de formadescendente, la propiedad bottom mueve las cajas de formaascendente, la propiedad left se utiliza para desplazar las cajas haciala derecha y la propiedad right mueve las cajas hacia la izquierda.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 99 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Posicionamiento absoluto
Se emplea para establecer de forma exacta la posicion en la que semuestra la caja de un elemento.
Cuando una caja se posiciona de forma absoluta, el resto deelementos de la pagina se ven afectados y modifican su posicion.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 100 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Posicionamiento absoluto
El primer elemento contenedor que este posicionado de cualquierforma diferente a position: static se convierte en la referencia quedetermina la posicion de la caja posicionada de forma absoluta.
Si ningun elemento contenedor esta posicionado, la referencia es laventana del navegador, que no debe confundirse con el elemento< body > de la pagina.
Una vez determinada la referencia del posicionamiento absoluto, lainterpretacion de los valores de las propiedades top, right, bottom yleft se realiza como sigue:
Top: desplazamiento desde el borde superior del elemento contenedorque se utiliza como referencia.Right: ıdem pero desde el borde derecho al borde derecho.Left: ıdem pero desde el borde izquierdo al borde izquierdo.Bottom: ıdem pero desde el borde inferior al borde inferior.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 101 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Diferencias entre posicionamiento absoluto y relativo
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 102 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Posicionamiento fijo
Es un caso particular del posicionamiento absoluto, ya que solo sediferencian en el comportamiento de las cajas posicionadas.
La principal caracterıstica de una caja posicionada de forma fija esque su posicion es inamovible dentro de la ventana del navegador.
El posicionamiento fijo hace que las cajas no modifiquen su posicionni aunque el usuario suba o baje la pagina en la ventana de sunavegador.
Si la pagina se visualiza en un medio paginado (por ejemplo en unaimpresora) las cajas posicionadas de forma fija se repiten en todas laspaginas.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 103 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Posicionamiento flotante
Cuando una caja se posiciona con el modelo de posicionamientoflotante, automaticamente se convierte en una caja flotante, lo quesignifica que se desplaza hasta la zona mas a la izquierda o mas a laderecha de la posicion en la que originalmente se encontraba.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 104 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Posicionamiento flotante (y II)
Cuando se posiciona una caja de forma flotante:La caja deja de pertenecer al flujo normal de la pagina, lo que significaque el resto de cajas ocupan el lugar dejado por la caja flotante.La caja flotante se posiciona lo mas a la izquierda o lo mas a laderecha posible de la posicion en la que se encontraba originalmente.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 105 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Posicionamiento flotante (y III)
Si existen otras cajas flotantes, al posicionar de forma flotante otracaja, se tiene en cuenta el sitio disponible.
Si no existiera sitio en la lınea actual, la caja flotante baja a la lıneainferior hasta que encuentra el sitio necesario para mostrarse lo mas ala izquierda o lo mas a la derecha posible en esa nueva lınea
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 106 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad float
Propiedad floatValores left — right — none — inherit
Se aplica a Todos los elementos
Valorinicial
none
Descripcion Establece el tipo de posicionamiento flotante delelemento
Cuadro : Definicion de la propiedad float de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 107 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Posicionamiento flotante (y IV)
Los elementos que se encuentran alrededor de una caja flotanteadaptan sus contenidos para que fluyan alrededor del elementoposicionadoUno de los principales motivos para la creacion del posicionamientofloat fue precisamente la posibilidad de colocar imagenes alrededor delas cuales fluye el texto.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 108 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad clear
La propiedad clear indica el lado del elemento HTML que no debe seradyacente a ninguna caja posicionada de forma flotante. Si se indicael valor left, el elemento se desplaza de forma descendente hasta quepueda colocarse en una lınea en la que no haya ninguna caja flotanteen el lado izquierdo.
La especificacion oficial de CSS explica este comportamiento como“un desplazamiento descendente hasta que el borde superior delelemento este por debajo del borde inferior de cualquier elementoflotante hacia la izquierda”.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 109 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad clear
Propiedad clearValores none — left — right — both — inherit
Se aplica a Todos los elementos de bloque
Valorinicial
none
Descripcion Indica el lado del elemento que no debe ser ad-yacente a ninguna caja flotante
Cuadro : Definicion de la propiedad clear de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 110 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Descripcion Permite hacer visibles e invisibles a los elementos
Cuadro : Definicion de la propiedad visibility de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 112 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad overflow
En algunas ocasiones el contenido de un elemento no cabe en elespacio reservado para ese elemento y se desborda.
La situacion mas habitual en la que el contenido sobresale de suespacio reservado es cuando se establece la anchura y/o altura de unelemento mediante la propiedad width y/o height.
Los valores de la propiedad overflow tienen el siguiente significado:
visible: el contenido no se corta y se muestra sobresaliendo la zonareservada para visualizar el elemento. Este es el comportamiento pordefecto.hidden: el contenido sobrante se oculta y solo se visualiza la parte delcontenido que cabe dentro de la zona reservada para el elemento.scroll: solamente se visualiza el contenido que cabe dentro de la zonareservada para el elemento, pero tambien se muestran barras de scrollque permiten visualizar el resto del contenido.auto: el comportamiento depende del navegador, aunque normalmentees el mismo que la propiedad scroll.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 113 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad overflow (y II)
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 114 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Se aplica a Elementos de bloque y celdas de tablas
Valorinicial
visible
Descripcion Permite controlar los contenidos sobrantes de unelemento
Cuadro : Definicion de la propiedad overflow de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 115 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad z-index
CSS permite controlar la posicion tridimensional de las cajasposicionadas
Es posible indicar las cajas que se muestran delante o detras de otrascajas cuando se producen solapamientos.
Cuanto mas alto sea el valor numerico, mas cerca del usuario semuestra la caja.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 116 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad z-index (II)
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 117 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad z-index (y III)
Propiedad z-indexValores auto — < numero > — inherit
Se aplica a Elementos que han sido posicionados explıcita-mente
Valorinicial
auto
Descripcion Establece el nivel tridimensional en el que semuestra el elemento
Cuadro : Definicion de la propiedad z-index de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 118 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Selectores avanzados
1 Selector de hijos
p > span { color: blue; }
2 Selector adyacente
p + p { text-indent: 1.5em; }
3 Selector de atributos
a[class="externo"] { color: blue; }
a[class~="externo"] { color: blue; }
*[lang=en] { ... }
*[lang|="es"] { color : red }
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 119 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Colision de estilos
El metodo seguido por CSS para resolver las colisiones de estilos semuestra a continuacion:
1 Determinar todas las declaraciones que se aplican al elemento para elmedio CSS seleccionado.
2 Ordenar las declaraciones segun su origen (CSS de navegador, deusuario o de disenador) y su prioridad (palabra clave !important).
3 Ordenar las declaraciones segun lo especıfico que sea el selector.Cuanto mas generico es un selector, menos importancia tienen susdeclaraciones.
4 Si despues de aplicar las normas anteriores existen dos o mas reglascon la misma prioridad, se aplica la que se indico en ultimo lugar.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 120 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Medios CSS
Permiten definir diferentes estilos para diferentes medios odispositivos: pantallas, impresoras, moviles, proyectores, etc.
Define algunas propiedades especıficamente para determinadosmedios: la paginacion y los saltos de pagina para los medios impresoso el volumen y tipo de voz para los medios de audio.
Ejemplos:
screen: Pantallas de ordenadorprint: Impresoras y navegadores en el modo “Vista Previa paraImprimir”handheld: Dispositivos de mano: moviles, PDA, etc.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 121 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Formas de indicar el medio
1 Reglas de tipo @media@media print {
body { font-size: 10pt }
}
@media screen {
body { font-size: 13px }
}
2 Reglas de tipo @import@import url("estilos_basicos.css") screen;
@import url("estilos_impresora.css") print;
3 Medios definidos con la etiqueta<link rel="stylesheet" type="text/css" media="screen" href="basico.css" />
4 Medios definidos mezclando varios metodos<link rel="stylesheet" type="text/css" media="screen" href="basico.css" />
@import url("estilos_seccion.css") screen;
@media print {
/* Estilos especıficos para impresora */
}
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 122 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Comentarios
El comienzo de un comentario se indica mediante los caracteres /* yel final del comentario se indica mediante */
/* Este es un comentario en CSS */
Pueden ocupar tantas lıneas como sea necesario, pero no se puedeincluir un comentario dentro de otro comentario
/* Este es un
comentario CSS de varias
lineas */
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 123 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Tipografıa
CSS define numerosas propiedades para modificar la apariencia deltexto
color se utiliza para establecer el color de la letra
Como el valor de la propiedad color se hereda, normalmente seestablece la propiedad color en el elemento body para establecer elcolor de letra de todos los elementos de la pagina
font-family se utiliza para indicar el tipo de letra con el que semuestra el texto
Suele definirse como una lista de tipos de letra alternativos separadospor comas. El ultimo valor de la lista es el nombre de la familiatipografica generica que mas se parece al tipo de letra que se quiereutilizar.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 124 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad color
Propiedad colorValores < color > — inherit
Se aplica a Todos los elementos
Valorinicial
Depende del navegador
Descripcion Establece el color de letra utilizado para el texto
Cuadro : Definicion de la propiedad color de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 125 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad font-family
Propiedad font-familyValores (( < nombre familia > — < familia generica >
) (,nombre familia > — < familia generica)* )— inherit
Se aplica a Todos los elementos
Valorinicial
Depende del navegador
Descripcion Establece el tipo de letra utilizado para el texto
Cuadro : Definicion de la propiedad font-family de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 126 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad font-size (I)
Ademas de medida relativas, absolutas y de porcentajes, CSS permiteutilizar una serie de palabras clave para indicar el tamano de letra deltexto:
tamano absoluto: indica el tamano de letra de forma absoluta mediantealguna de las siguientes palabras clave: xx-small, x-small, small,medium, large, x-large, xx-large.tamano relativo: indica de forma relativa el tamano de letra del textomediante dos palabras clave (larger, smaller) que toman comoreferencia el tamano de letra del elemento padre.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 127 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Descripcion Establece la anchura de la letra utilizada para eltexto
Cuadro : Definicion de la propiedad font-weight de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 129 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad font-style
Propiedad font-styleValores normal — italic — oblique — inherit
Se aplica a Todos los elementos
Valorinicial
normal
Descripcion Establece el estilo de la letra utilizada para eltexto
Cuadro : Definicion de la propiedad font-style de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 130 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad font-variant
Propiedad font-variantValores normal — small-caps — inherit
Se aplica a Todos los elementos
Valorinicial
normal
Descripcion Establece el estilo alternativo de la letra utilizadapara el texto
Cuadro : Definicion de la propiedad font-variant de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 131 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad short-hand font
Propiedad fontValores ( ( < font − style > —— < font − variant >
—— < font − weight > )? < font − size > (/ < line − height > )? < font − family > )— caption — icon — menu — message-box —small-caption — status-bar — inherit
Se aplica a Todos los elementos
Valorinicial
-
Descripcion Permite indicar de forma directa todas las propie-dades de la tipografıa de un texto
Cuadro : Definicion de la propiedad font de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 132 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad short-hand font (y II)
El orden en el que se deben indicar las propiedades del texto es elsiguiente:
En primer lugar y de forma opcional se indican el font-style,font-variant y font-weight en cualquier orden.A continuacion, se indica obligatoriamente el valor de font-size seguidoopcionalmente por el valor de line-height.Por ultimo, se indica obligatoriamente el tipo de letra a utilizar.
font: bold 1em "Trebuchet MS",Arial,Sans-Serif;
font: normal 0.9em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif;
font: normal 1.2em/1em helvetica, arial, sans-serif;
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 133 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Texto
Ademas de las propiedades relativas a la tipografıa del texto, CSSdefine numerosas propiedades que determinan la apariencia del textoen su conjunto.
Estas propiedades adicionales permiten controlar
la alineacion del texto,el interlineado,la separacion entre palabras,etc.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 134 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad text-align
Propiedad text-alignValores left — right — center — justify — inherit
Se aplica a Elementos de bloque y celdas de tabla
Valorinicial
left
Descripcion Establece la alineacion del contenido del elemento
Cuadro : Definicion de la propiedad text-align de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 135 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad line-height
Propiedad line-heightValores normal — < numero > — < medida > — <
porcentaje > — inherit
Se aplica a Todos los elementos
Valorinicial
normal
Descripcion Permite establecer la altura de lınea de los ele-mentos
Cuadro : Definicion de la propiedad line-height de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 136 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Se aplica a Los elementos de bloque y las celdas de tabla
Valorinicial
0
Descripcion Tabula desde la izquierda la primera lınea del tex-to original
Cuadro : Definicion de la propiedad text-indent de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 140 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad letter-spacing
Propiedad letter-spacingValores normal — < medida > — inherit
Se aplica a Todos los elementos
Valorinicial
normal
Descripcion Permite establecer el espacio entre las letras queforman las palabras del texto
Cuadro : Definicion de la propiedad letter-spacing de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 141 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad word-spacing
Propiedad word-spacingValores normal — < medida > — inherit
Se aplica a Todos los elementos
Valorinicial
normal
Descripcion Permite establecer el espacio entre las palabrasque forman el texto
Cuadro : Definicion de la propiedad word-spacing de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 142 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad white-space
Propiedad white-spaceValores normal — pre — nowrap — pre-wrap — pre-line
— inherit
Se aplica a Todos los elementos
Valorinicial
normal
Descripcion Establece el tratamiento de los espacios en blancodel texto
Cuadro : Definicion de la propiedad white-space de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 143 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad white-space (y II)
El significado de cada uno de los valores es el siguiente:
normal: comportamiento por defecto de HTML.
pre: se respetan los espacios en blanco y las nuevas lıneas(exactamente igual que la etiqueta < pre >). Si la lınea es muy larga,se sale del espacio asignado para ese contenido.
nowrap: elimina los espacios en blanco y las nuevas lıneas. Si la lıneaes muy larga, se sale del espacio asignado para ese contenido.
pre-wrap: se respetan los espacios en blanco y las nuevas lıneas, peroajustando cada lınea al espacio asignado para ese contenido.
pre-line: elimina los espacios en blanco y respeta las nuevas lıneas,pero ajustando cada lınea al espacio asignado para ese contenido.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 144 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Descripcion Permite reemplazar las vinetas automaticas poruna imagen personalizada
Cuadro : Definicion de la propiedad list-style-image de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 147 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Propiedad shorthand list-style
Propiedad list-styleValores ( < list − style − type > —— < list − style −
position > —— < list − style − image > ) —inherit
Se aplica a Elementos de una lista
Valorinicial
-
Descripcion Propiedad que permite establecer de forma si-multanea todas las opciones de una lista
Cuadro : Definicion de la propiedad list-style de CSS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 148 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Imagenes segun el estilo del enlace
En ocasiones, puede resultar util incluir un pequeno icono al lado deun enlace para indicar el tipo de contenido que enlaza.
Este tipo de imagenes son puramente decorativas en vez de imagenesde contenido, por lo que se deberıan anadir con CSS y no conelementos de tipo < img >. Utilizando la propiedad background (ybackground-image) se puede personalizar el aspecto de los enlacespara que incluyan un pequeno icono a su lado.
La tecnica consiste en mostrar una imagen de fondo sin repeticion enel enlace y anadir el padding necesario al texto del enlace para que nose solape con la imagen de fondo.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 149 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Imagenes segun el estilo del enlace (II)
a { margin: 1em 0; float: left; clear: left; }
.rss {
color: #E37529;
padding: 0 0 0 18px;
background: #FFF url(imagenes/rss.gif) no-repeat left center;
}
.pdf {
padding: 0 0 0 22px;
background: #FFF url(imagenes/pdf.png) no-repeat left center;
}
<a href="#">Enlace con el estilo por defecto</a>
<a class="rss" href="#">Enlace a un archivo RSS</a>
<a class="pdf" href="#">Enlace a un documento PDF</a>
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 150 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Imagenes segun el estilo del enlace (y III)
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 151 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Mostrar los enlaces como si fueran botones
a { margin: 1em 0; float: left; clear: left; }
a.boton {
text-decoration: none;
background: #EEE;
color: #222;
border: 1px outset #CCC;
padding: .1em .5em;
}
a.boton:hover {
background: #CCB;
}
a.boton:active {
border: 1px inset #000;
}
<a class="boton" href="#">Guardar</a>
<a class="boton" href="#">Enviar</a>
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 152 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Crear un menu vertical
1 Definir anchura del menu2 Eliminar las vinetas automaticas y todos los margenes y espaciados
aplicados por defecto3 Anadir un borde al menu de navegacion y establecer el color de fondo
y los bordes de cada elemento del menu4 Aplicar estilos a los enlaces: mostrarlos como un elemento de bloque
para que ocupen todo el espacio de cada <li¿ del menu, anadir unespacio de relleno y modificar los colores y la decoracion por defecto
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 153 / 268
Hojas de estilo CSS CSS: Consideraciones adicionales
Menu horizontal basico
1 Aplicar los estilos CSS basicos para establecer el estilo delmenu (similares a los del menu vertical)
2 Establecer la anchura de los elementos del menu. Si el menu es deanchura variable y contiene cinco elementos, se asigna una anchuradel 20 % a cada elemento
3 Establecer los bordes de los elementos que forman el menu
4 Se elimina el borde derecho del ultimo elemento de la lista, paraevitar el borde duplicado
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 154 / 268
Hojas de estilo CSS3
Hojas de estilo CSS3
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 155 / 268
Hojas de estilo CSS3
¿Que es CSS3?
CSS3 ofrece una gran variedad de maneras nuevas para el diseno dehojas de estilo
Al ser tan amplio el desarrollo de CSS3, se ha dividido en modulos:
El modelo de cajaListasPresentacion de hipervıculosVozFondos y bordesEfectos de texto...
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 156 / 268
Hojas de estilo CSS3
CSS3 todavıa en desarrollo
Hay modulos, la mayorıa, cuya especificacion no esta terminada
Hay modulos terminados, pero los navegadores no los implementan
Es muy importante conocer el estado de la implementacion ennavegadores
Hay navegadores que tienen reglas especıficas (temporales)
Comprobar si esta implementado en http://caniuse.com/
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 157 / 268
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 168 / 268
Bootstrap
Bootstrap en CDN
Con un CDN (Content Delivery Network) no hace falta tenerBootstrap en nuestros archivos. Ademas, si un usuario ya hadescargado esas URLs, probablemente las tenga ya en la cache delnavegador (con el consiguiente ahorro de tiempo).
fillText(”texto”, x, y): introduce ”texto” en la posicion (x, y).
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 200 / 268
Canvas
Imagenes (I)
drawImage(image, dx, dy): toma la imagen ”image” y la pinta en elcanvas. Las coordenadas dx y dy dan la esquina superior izquierda dela imagen.
drawImage(image, dx, dy, dw, dh): toma la imagen ”image” y lapinta en el canvas. Las coordenadas dx y dy dan la esquina superiorizquierda de la imagen escalandola a una anchura dw y a una alturadh.
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh): toma la imagen”image” y la introduce en el rectangulo (sx, sy, sw, sh), escalandola alas dimensiones (dw, dh), y la pinta en las coordenadas (dx, dy).Vease la siguiente transparencia.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 201 / 268
Canvas
Imagenes (y II)
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 202 / 268
Canvas
Referencias sobre Canvas
Canvas HTML element:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/canvas
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 210 / 268
Deteccion de funcionalidad HTML5
Tecnicas de deteccion de caracterısticas HTML5
Dependiendo de la caracterıstica, hay que:
1 Comprobar si existe una propiedad en un objeto global (como windowo navigator). P.ej. geolocalizacion.
2 Crear un elemento y entonces comprobar si existe una propiedadespecıfica en ese elemento. P.ej. soporte para canvas.
3 Crear un elemento, comprobor si existe un metodo especıfico en eseelemento y entonces llamar al metodo y comprobar el valor deretorno. P.ej. comprobar formatos de vıdeo soportados
4 Crear un elemento, poner un valor a una propiedad, y comprobar si lapropiedad ha retenido ese valor. P.ej. comprobar los tipos de< input > soportados
... o simplemente se puede utilizar la biblioteca JavaScript Modernizr (quete abstrae de todo lo anterior)
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 211 / 268
Deteccion de funcionalidad HTML5
Modernizr
if (Modernizr.ELEMENT) {
// let’s go!
} else {
// no native ELEMENT support available :(.
// Maybe try a fallback
}
donde ELEMENT puede ser: canvas, canvastext, video, video.webm,video.ogg, video.h264, localstorage, webworkers, applicationcache,geolocation, input.autofocus, history...
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 212 / 268
Deteccion de funcionalidad HTML5
Polyfills
Si una caracterıstica HTML5 no esta soportada por el navegador,podemos usar polyfills
Los polyfills son bibliotecas, modulos externos que ofrecenfuncionalidad parecida a los que HTML5 ofrece de forma nativa.
Puede haber varios polyfills para cada caracterıstica.
Se tienen que evaluar y probar de manera independiente.
Para probarlo, hace falta un navegador que no implemente HTML5(p.ej. Konqueror para algunas funcionalidades)
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 213 / 268
Geolocalizacion
Geolocalizacion
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 214 / 268
Geolocalizacion es opt-in para el usuario. Este codigo ofrece unmenu donde puede compartir su geolocalizacion o no.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 215 / 268
Geolocalizacion
Sigamos con el ejemplo
function show_map(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
// let’s show a map or do something interesting!
}
La funcion callback se llamara con un unico parametro: un objeto con dospropiedades: coords y timestamp
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 216 / 268
Geolocalizacion
El objeto posicion
Propiedad Tipo Nota
coords.latitude double decimal degreescoords.longitude double decimal degreescoords.altitude double or null meters above reference ellipsoidcoords.accuracy double meterscoords.altitudeAccuracy double or null meterscoords.heading double or null degrees clockwise from true northcoords.speed double or null meters/secondtimestamp DOMTimeStamp like a Date() object
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 217 / 268
Web Workers
Web Workers
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 218 / 268
Web Workers
¿Que son?
Scripts en JavaScript que se ejecutan en el background
Por tanto, no bloquean la pagina (los navegadores suelen ser de ununico hilo)
Son parecidos a los threads (¡pero no comparten memoria!)
Son relativamente pesados... solo deberıan utilizarse si van a realizartareas pesadas que hagan que el coste de iniciar uno (en memoria yen procesamiento) valga la pena
Los Web Workers no tienen acceso al DOM, se comunican con elprograma principal mediante envıo de mensajes.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 219 / 268
Web Workers
¿Como se lanzan?
1 Se instancia un objeto Worker, cuyo parametro es una URL con elcodigo JavaScript La URL tiene las mismas limitaciones de seguridadque JavaScript. Se puede empotrar en codigo JavaScript en la mismapagina HTML, pero entonces hay que crear un objeto URL.
var worker = new Worker("worker.js");
2 Se pasa un mensaje al Worker. Normalmente este mensaje estara enformato JSON (con stringify).
worker.postMessage("Hello World!");
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 220 / 268
Web Workers
¿Como se lanzan? (y II)
3 En caso de recibir un mensaje de respuesta, se captura el evento y sehace lo que queramos con los datos que recibidos (nota: generalmenterecibiremos un JSON, al que se le pasa parse):
worker.onmessage = function(event) {
console.log("Hemos recibido " + event.data);
hacemosAlgo();
}
4 Se da por cerrado el Worker (cuidado, ¡orientacion a eventos!):
worker.terminate();
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 221 / 268
Web Workers
¿Como se ejecutan?
El codigo del Worker estara en un fichero JavaScript separado (p.ej.,worker.js)
Utiliza la misma interfaz de comunicacion, con la salvedad de que envez de realizarse sobre el objeto tipo Worker lo hace sobre sı mismo,con self.
Recuerda: no puede acceder al DOM
Puede enviar varios mensajes, no tiene por que ser un unico
Ejemplo de codigo de un Workder (en su fichero .js):
self.onmessage = function(event) {
console.log("He recibido " + event.data);
salida = hacemosAlgo();
self.postMessage("Te devuelvo " + salida)
}
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 222 / 268
History API
History API
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 223 / 268
History API
¿Que es la History API?
El objeto window del DOM proporciona acceso al historial del browsera traves del objeto history
Tendremos metodos y propoiedades que nos permitan avanzar yretroceder a traves del historial (esto lo hemos podido hacer desde(casi) siempre)
Podemos manipular el contenido del historial (¡nuevo en HTML5!)
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 224 / 268
History API
Moviendonos en el historial
Hacia atras: window.history.back();
Hacia adelante: window.history.forward();
A un punto especıfico del historial: window.history.go(-2);
Longitudo de la pila: window.history.length;
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 225 / 268
History API
Manipulando el historial
Anadir entradas en el historial: history.pushState();
var stateObj = { foo: "bar" };
// puede ser cualquier cosa que puedas pasar a JSON.stringify.
history.pushState(stateObj, "titulo pagina",
"introducida.html");
Modificar entradas en el historial: history.replaceState();
var stateObj = { foo: "bar" };
history.replaceState(stateObj, "titulo pagina",
"nueva.html");
Evento popstate: se lanza cada vez que la entrada al historialcambia. la propiedad state del evento popstate contiene una copia delhistorial de entradas del objeto estado.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 226 / 268
WebSocket
WebSocket
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 227 / 268
WebSocket
¿Que son los WebSockets?
Protocolo que permite tener comunicacion full-duplex sobre TCP(RFC 6455)
Usa el puerto 80 (bueno para evitar firewalls)
Es independiente de HTTP - el handshake es interpretado por losservidores como una peticion Upgrade
Permite que el servidor envıe contenido al navegador sin que este lahaya solicitado
Antes de la estandarizacion por el W3C, la solucion pasaba portecnologıas como Comet
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 228 / 268
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 250 / 268
La API de Google+
6. Procesar el resultado
La API devuelve dos objetos a la funcion callback:1 jsonResp: un objeto JSON2 rawResp: un string con la respuesta HTTP
Cuando la respuesta no pueda ofrecerse como JSON, el valor de jsonRespsera false; pero rawResp seguira ofreciendo la respuesta HTTP completacomo string.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 251 / 268
Firefox OS
Firefox OS
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 252 / 268
Firefox OS
¿Que es Firefox OS?
Sistema operativo basado en Linux para smartphones y tabletas
Promovido por Mozilla (y otros partners industriales, entre ellosTelefonica)
Basado completamente en estandares abiertos: HTML5, CSS3 yJavaScript
Incluye un modelo de privilegios y una API web abierta paracomunicarse con el hardware del dispositivo
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 253 / 268
Firefox OS
La pila de Firefox OS
Source: http://kumar303.github.io/mozilla-apps-talk/images/firefox-os-stack.pngGSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 254 / 268
Firefox OS
El manifiesto
1 El archivo manifest.webapp proporciona informacion importantesobre la aplicacion
2 Solo el nombre y la descripcion son obligatorios.
{
"version": "0.1",
"name": "Open Web App",
"description": "Your new awesome Open Web App",
"launch_path": "/app-template/index.html",
"icons": {
"16": "/app-template/app-icons/icon-16.png",
"48": "/app-template/app-icons/icon-48.png",
"128": "/app-template/app-icons/icon-128.png"
},
"developer": {
"name": "Your Name",
"url": "http://yourawesomeapp.com"
},
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 255 / 268
Firefox OS
El manifiesto (y II)
"locales": {
"es": {
"description": "Su nueva aplicacion impresionante Open Web",
"developer": {
"url": "http://yourawesomeapp.com"
}
},
"it": {
"description": "Il vostro nuovo fantastico Open Web App",
"developer": {
"url": "http://yourawesomeapp.com"
}
}
},
"default_locale": "en"
}
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 256 / 268
Firefox OS
Tipos de Aplicaciones en Firefox OS
1 Empaquetadas: archivos .zip conteniendo todos los archivosnecesarios: HTML, CSS, JavaScript, imagenes, manifest, etc.
2 Alojadas: en un servidor (con su URL). Requieren tambien unmanifest.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 257 / 268
Firefox OS
WebAPIs
Source: arewemobileyet.com
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 258 / 268
Firefox OS
Web APIs
APIs para interactuar con el hardware de dispositivo
Algunas APIs requieren permisos
Hay APIs previstas para el futuro
Se puede ver un listado completo enhttps://wiki.mozilla.org/WebAPI
// If this device supports the vibrate API...
if(’vibrate’ in navigator) {
// ... vibrate for a second
navigator.vibrate(1000);
}
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 259 / 268
Hay tres tipos de APIs, segun el tipo de permisos que hacen falta para serejecutadas, que dan lugar a tres tipos de aplicaciones diferentes:
1 Normales: APIs que no necesitan ningun tipo de permisos de accesoespeciales.
2 Privilegiadas: APIs disponibles para los desarrolladores para su uso enaplicaciones. Han de indicar los permisos de acceso en el manifiesto, yhan de distribuirse a traves de una fuente (app store) de confianza.
3 Certificadas: APIs que controlan funciones crıticas en un dispositivo,como el marcador de llamadas y los servicios de mensajerıa. Estos porlo general no estan disponibles para desarrolladores terceros.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 260 / 268
Firefox OS
Herramientas de desarrollo
Firefox OS Simulator: integrable en Firefoxhttps://marketplace.firefox.com/developers/docs/
firefox_os_simulator
App Manager: permite conectar Firefox a un dispositivo compatiblecon Firefox OS y enviar las aplicaciones para probarlashttps://developer.mozilla.org/en-US/docs/Mozilla/
Firefox_OS/Using_the_App_Manager
A partir de Firefox 33, App Manaer esta siendo reemplazado porWebIDE
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 262 / 268
Optimizacion
¿Por que optimizar?
Se ha realizado mucho trabajo de optimizacion en las maquinas deJavascript de los navegadores en los ultimos anos.
Sin embargo, JavaScript requiere que el desarrollador realizaoptimizaciones que en otros lenguajes harıa el compilador.
Cada vez que se encuentra una etiqueta < script >, el navegador separa, descarga el codigo JavaScript (si fuera necesario), y se ejecutaantes de procesar el resto de la pagina.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 263 / 268
Optimizacion
Carga y ejecucion de JavaScript
Pon todos los < script > al final de la pagina, antes del < /body >.De esta manera, hay contenido que se muestra que no tiene queesperar.
Agrupa los scripts. Cuantos menos < script >s tiene una pagina,antes cargara y se volvera interactiva.
Utiliza tecnicas para descargar JavaScript de manera no bloqueante:
Utilizando el atributo defer de < script > (solo IE y Firefox 3.5+)Crea elementos < script > dinamicosDescarga codigo JavaScript utilizando AJAX y luego inyecta el codigoen la pagina.
Maximiza el uso de la cache (y CDN) para scripts en JavaScript.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 264 / 268
Optimizacion
Trabajando con el DOM
El acceso al DOM es caro. Minimiza el acceso al DOM. Intentatrabajar al maximo en JavaScript.
Realiza todos los cambios en una unica vez. Tambien (oespecialmente) con los cambios de estilos.
Para accesos repetidos al DOM, utiliza variables locales.
Utiliza document.getElementById o el identificador en JQuery
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 265 / 268
Optimizacion
Algoritmos y control de flujo
Los bucles for, while y do-while tienen caracterısticas de potenciasimilares y ninguno es significativamente mas rapido que los demas.
Se han de evitar los bucles for-in, a menos de que desconozcamos elnumero de propiedades de un objeto.
En general, switch es mas eficiente que if-else, aunque no siemprees la mejor solucion.
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 266 / 268
Optimizacion
Manteniendo la responsividad del interfaz
Ningun codigo de JavaScript es tan importante como para afectarnegativamente la experiencia de usuario
Ningun script de JavaScript deberıa llevar mas de 20 segundos.
Utiliza Web workers para ejecutar codigo JavaScript fuera el hilo deinterfaz de usuario, evitando ası su bloqueo
GSyC (http://cursosweb.github.io/) Desarrollo de Aplicaciones Telematicas 20 de marzo de 2017 267 / 268
Optimizacion
Herramientas para optimizar
Firebug Profiler: recoge informacion de cada funcion de JavaScript yde cuanto tiempo ha llevado su ejecucion