Ut2 HTML Css

7/24/2019 Ut2 HTML Css

1/23

IES Ramn y Cajal (Tocina)

UT2. HTML y CSS

Javier Ferrer Garca


2/23

HTML Javier Ferrer Garca

Contenido1. HTML ........................................................................................................................................2

1.1. VERSIONES ........................................................................................................................2

1.2. NORMAS BSICAS Y ELEMENTOS FUNDAMENTALES ................................ ........................3

1.3. ESTRUCTURA BSICA .........................................................................................................1

1.4. ELEMENTOS .......................................................................................................................2

1.5. FORMULARIOS...................................................................................................................3

1.6. APIS HTML5 .......................................................................................................................5

2. CSS ............................................................................................................................................7

2.1. HOJAS DE ESTILO ...............................................................................................................72.1.1. CONCEPTOS FUNDAMENTALES ..................................................................................7

2.1.2. CONCEPTOS AUXILIARES ..........................................................................................17

ANEXO I ......................................................................................................................................19

1 de 22


3/23


1. HTMLEl HTML(Hyper Text Markup Language), lenguaje de marcado de hipertexto, es un lenguaje de

marcas (utiliza etiquetas, como marcas para delimitar elementos del lenguaje), que sirve para

describir el contenido y la estructura de las pginas web, que pueden ser interpretadas y

visualizadas a travs de los navegadores de Internet (clientes web: Firefox, Internet Explorer,

Chrome, etc.).

1.1. VERSIONES

En los ltimos aos, la versin de HTML recomendada por el W3C era HTML 4.01. Al disear

una pgina web conviene especificar qu versin de HTML se est usando; esto se hace

indicando la etiqueta < ! DOCTYPE> en la primera lnea, para que el navegador sepa

interpretarla correctamente. El HTML 4.01 tena tres variantes de DTD:

HTML 4.01 Strict: Slo permite etiquetas definidas en HTML 4.01.

HTML 4.01 Transitional: Es una mezcla de todos los HTML.

HTML 4.01 Frameset: Igual que el Transitional y adems soporta marcos (frames), que

actualmente se consideran algo obsoleto y anticuado.

HTML5: Ofrece herramientas grficas de geolocalizacin, de arrastrar y soltar, nuevos

formularios, grficos, animacin, etc.

< ! DOCTYPE html>

HTML5 es la ltima versin de HTML. El trmino representa dos conceptos diferentes:

Se trata de una nueva versin de HTML, con nuevos elementos, atributos y

comportamientos.

Contiene un conjunto ms amplio de tecnologas que permite a los sitios Web y a las

aplicaciones ser ms diversas y de gran alcance. A este conjunto se le llama HTML5 y

amigos, a menudo reducido a HTML5.

Las diferentes tecnologas de HTML5 se pueden clasificar en varios grupos segn su funcin:

Semntica: Permite describir con mayor precisin cul es su contenido.

Conectividad: Permite comunicarse con el servidor de formas nuevas e innovadoras.

Sin conexin y almacenamiento: Permite a las pginas web almacenar datos

localmente en el lado del cliente y operar sin conexin de manera ms eficiente. Multimedia: Nos otorga un excelente soporte para utilizar contenido multimedia como

lo son audio y video nativamente.

Grficos y efectos 2D/3D: Proporciona una amplia gama de nuevas caractersticas que

se ocupan de los grficos en la web como lo son canvas 2D, WebGL, SVG, etc.

Rendimiento e Integracin: Proporciona una mayor optimizacin de la velocidad y un

mejor uso del hardware.

Comentado [j1]: Los actuales navegadoresya estndiseados para manejar la mayora de las funcionalidadesrecogidas en HTML5, pero no todas. Para saber si unnavegador soporta todas las caractersticas de HTML5 puedeutilizarse la aplicacin de la pginahttp://www.html5test.com.

2 de 22


4/23


Acceso al dispositivo: Proporciona APIs para el uso de varios componentes internos de

entrada y salida de nuestro dispositivo.

CSS3: Nos ofrece una nueva gran variedad de opciones para hacer diseos ms

sofisticados.

1.2. NORMAS BSICAS Y ELEMENTOS FUNDAMENTALES

Antes de comenzar a utilizar cualquier lenguaje de marcas es necesario conocer sus normas

bsicas; veamos las de los elementos fundamentalesen HTML5.

Etiquetas

Las marcas o etiquetas definen los elementos que conforman el lxico del lenguaje HTML. Sedelimitan por los signos "menor que" (). Las etiquetas de HTML pueden ser

de dos tipos, cerradas o abiertas:

Las etiquetas cerradasson aquellas formadas por una palabra reservada del lenguaje

para indicar el principio de la etiqueta (etiqueta de apertura) y otra para el final

(etiqueta de cierre); en esta ltima se incluye el carcter "/" antes de la misma palabra

reservada de dicha etiqueta. Ejemplo de una etiqueta cerrada es:

Prrafo bien

cerrado

Se denominan etiquetas abiertasa las que constan de una sola palabra reservada que

indica a la vez el principio y fin del elemento, es decir, no tienen la correspondiente

etiqueta de cierre. Ejemplos de etiquetas abiertas son:,
, ,

HMTL5 dispone de varios elementos que no se representan ni se visualizan en pantalla, pero

que permiten agrupar a otros elementos dndoles un significado semntico comn: article,

asde, header, footer, nav, div,

Las etiquetas de HTML pueden anidarse, de manera que un elemento HTML puede contener a

otros. Las etiquetas anidadas deben estar bien "balanceadas", es decir, si se abren en un orden

determinado, se deben cerrar en el orden inverso al de apertura, debindose cerrar primero

las etiquetas de nivel inferior antes que la del nivel superior que la contiene. Ejemplos:

Ejemplo

incorrecto

Ejemplo

correcto

Atributos

Las etiquetas pueden contener atributos, los cuales sirven para configurar diferentes

caractersticas de las propias etiquetas donde se indiquen. Los atributos se deben especificar a

continuacin de la palabra reservada de la etiqueta de apertura (nunca de la de cierre)

separados por un espacio, y antes del signo de cierre de etiqueta "mayor que" (>) que la

delimita. Detrs del nombre del atributo, se indicar el valor del atributo que se quiera asignar,

separando el atributo y su valor por el signo "igual"(=). Se recomienda indicar el valor entre

3 de 22


5/23


comillas dobles para aumentar la legibilidad del cdigo y su compatibilidad con otras versiones

de HTML, aunque no sea obligatorio, salvo que el valor contenga caracteres de espacio.

Ejemplo:

Tanto las etiquetas como los atributos se pueden indicar en minsculas o en maysculas, en

cambio los valores de los atributos s se diferencian segn se indiquen en maysculas o en

minsculas. Se recomienda usar minsculas tanto para las etiquetas corno para los atributos.

Comentarios

Los comentarios son lneas de texto que no son interpretadas por el navegador y, por lo tanto,

no sern visualizadas al navegar sobre la pgina. Permiten realizar anotaciones y aclaraciones

sobre el cdigo fuente de una pgina web, muy tiles en futuras revisiones y modificaciones.Los comentarios se incluyen entre los smbolos.

Ejemplo:

Se recomienda seguir estas normas bsicas

1.3. ESTRUCTURA BSICA

Ttulo del documentos

1 de 22


6/23


Uso Semntico de las etiquetas:

Representa contenido introductorio del elemento que lo contiene (elemento padre).

Se usa para definir la cabecera general de la pgina o la cabecera de cualquier contenido, por

lo tanto se puede usar ms veces en una misma pgina.

Representa un grupo de links que navega a otras partes o pginas de nuestras web. Al

representar un grupo de links tenemos que maquetarlos usando listas para que

semnticamente sea perfecto. No todos los grupos de links necesitan estar en un

elemento . Es muy comn tener un footer con enlaces a poltica de privacidad, pgina de

inicio o copyright. En estos casos la etiqueta se basta por si misma y no es necesario

ponerla.

es muy similar a y por eso son de las que ms dudas producen, incluso los

expertos no se ponen de acuerdo a la hora de usar uno u otro. Engloba un grupo temtico de

contenido que normalmente viene seguido de un encabezado. Por ejemplo una pgina de

inicio puede ser separada en diferentes secciones, como introduccin, contenido o

informacin de contacto. Para identificarlo mejor nos podemos hacer la pregunta est todo el

contenido relacionado?

Usaremos esta etiqueta si al quitarlo del contenido que lo rodea es capaz de seguir

teniendo sentido por s mismo, es decir que se pueda publicar solo.

Est diseado para representar contenido relacionado. Puede ser usado en elementos

como notas, barras laterales, grupos de enlaces y todo contenido que se considere

separado del contenido principal. Slo por el hecho de que cierto contenido aparezca a la

derecha o izquierda del contenido principal no tiene por qu ser un elemento . Para

identificarlo mejor hay que preguntarse si se puede quitar ese elemento sin reducir el

significado del contenido principal.

Se usa para definir el pie general de la pgina o el pie de cualquier seccin, por lo

tanto se puede usar ms de una vez en la misma pgina.

Identifica el contenido principal de la pgina y solo puede haber uno por cada pgina.

Se usa cuando necesitamos juntar contenido sin necesidad de tener sentido semntico,

es decir que no signifique nada.

1.4. ELEMENTOS

Aqu tienes una detallada y organizadalista de elementos HTML5.Tambin podis consultar la

Tabla Peridica de Elementos de HTML5.

Tambin puedes consultar la web deW3Schoolsdonde encontrars infinidad de ejemplos paracada elemento (tambin tienes CSS, Javascript, PHP, SQL, )

Utilizar img o picture: http://librosweb.es/tutorial/el-nuevo-elemento-picture-de-html5-para-

crear-imagenes-responsive/

2 de 22
https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementoshttps://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementoshttps://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementoshttp://tablaelementoshtml.esy.es/http://tablaelementoshtml.esy.es/http://www.w3schools.com/http://www.w3schools.com/http://www.w3schools.com/http://www.w3schools.com/http://tablaelementoshtml.esy.es/https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos


7/23


1.5. FORMULARIOS

Mencin especial merecen los formularios, los cules nos permiten comunicarnos con el sitio

web.

3 de 22


8/23


4 de 22


9/23


1.6. APIS HTML5HTML5 introduce varias APIs (interfaces de programacin de aplicaciones) para proveer acceso

a poderosas libreras desde simple cdigo Javascript. El potencial de estas incorporaciones es

tan importante que pronto se convertirn en nuestro objeto de estudio. Veamos rpidamente

sus caractersticas para obtener una perspectiva de lo que nos encontraremos en el resto del

libro.

La siguiente es solo una introduccin, ms adelante estudiaremos cada una de estas

tecnologas con mayor profundidad.

5 de 22


10/23


Canvas Esta API es una API de dibujo, especfica para la creacin y manipulacin de grficos.

Utiliza mtodos Javascript predefinidos para operar.

Drag and Drop Esta API hace que arrastrar y soltar elementos con el ratn en la pantalla sea

posible tambin en la web.

Geolocation Esta API tiene la intencin de proveer acceso a informacin correspondiente con

la ubicacin fsica del dispositivo que est accediendo a la aplicacin. Puede retornar datos

como la latitud y longitud utilizando diferentes mecanismos (como informacin de la red o

GPS).

Web Storage Esta API permite a los desarrolladores hacer un seguimiento de la actividad de

los usuarios almacenando informacin que estar disponible en cada instancia de la aplicacin

durante la duracin de la sesin, adems ofrece a los desarrolladores un rea de

almacenamiento, creada para cada aplicacin, que puede conservar varios megabytes deinformacin, preservando de este modo informacin y datos en el ordenador del usuario de

forma persistente.

Indexed Database Esta API agrega la capacidad de trabajar con bases de datos del lado del

usuario. El sistema fue desarrollado independientemente de previas tecnologas y provee una

base de datos destinada a aplicaciones web. La base de datos es almacenada en el ordenador

del usuario, los datos son persistentes y, por supuesto, son exclusivos de la aplicacin que los

cre.

File Este es un grupo de APIs desarrollada para proveer la capacidad de leer, escribir y procesar

archivos de usuario.

XMLHttpRequest Level 2 Esta API es una mejora de la vieja XMLHttpRequest destinada a la

construccin de aplicaciones Ajax. Incluye nuevos mtodos para controlar el progreso de la

operacin y realizar solicitudes cruzadas (desde diferentes orgenes).

Cross Document Messaging Esta API introduce una nueva tecnologa de comunicacin que

permite a aplicaciones comunicarse entre s a travs de diferentes cuadros o ventanas.

WebSockets Esta API provee un mecanismo de comunicacin de dos vas entre clientes y

servidores para generar aplicaciones en tiempo real como salas de chat o juegos en lnea.

Web Workers Esta API potencia Javascript permitiendo el procesamiento de cdigo detrs de

escena, de forma separada del cdigo principal, sin interrumpir la actividad normal de la

pgina web, incorporando la capacidad de multitarea a este lenguaje.

History Esta API provee la alternativa de incorporar cada paso en el proceso de una

aplicacin dentro del historial de navegacin del navegador.

Offline Esta API apunta a mantener las aplicaciones funcionales incluso cuando el dispositivoes desconectado de la red.

Trabajaremos estas APIs en el tema de javascript (si tenemos tiempo!!)

6 de 22


11/23


2. CSSEl objetivo fundamental de CSS es separar el contenido y la estructura de un documento

HTML, de su estilo y formato de presentacin.

2.1. HOJAS DE ESTILO

Estn compuestas por reglas de estilo, las cuales tienen dos partes:el selector, que determina

a qu elementos se asignar el estilo definido en la regla, y la declaracin, que est compuesta

por uno o ms pares (propiedad:va!or;), que asignan un valor a la propiedad de los elementos

seleccionados por el selector.

A la hora de aplicar un estilo, se puede hacer en lnea (dentro de la etiqueta HTML), como una

hoja de estilo interna con las etiquetas dentro del elemento o como hoja de

estilos externa, en un archivo diferente con extensin .css y enlazndolo con la etiqueta

Esta ltima es intentaremos utilizar siempre.

2.1.1. CONCEPTOS FUNDAMENTALES

Comentarios

Para incluir un comentario es necesario incluir el texto a comentar entre los caracteres /* y */,

por ejemplo:

/* Esta es la forma de incluir un comentario vlido entre las reglas de estilo css */

Identificadores

Todos los elementos HTML tienen un atributo opcional llamado identificador (id).

Para identificar un determinado elemento en el cdigo HTML, es necesario darle un nombre

por medio del atributo id, y, posteriormente, ser necesario acceder a este elemento desde

una regla CSS para aplicarle el diseo. Esto se hace a travs del selector, que se formar con elnombre de la etiqueta seguido del smbolo # y del nombre del atributo id.

Clases

Su utilidad es la de poder agrupar los elementos por clases o grupos para que, posteriormente,

CSS los pueda seleccionar y distinguirlos de los dems. Se utiliza el smbolo . seguido del

nombre de la clase.

7 de 22


12/23


Ejemplos:

Pseudo-clases

Las pseudo-clases permiten clasificar los elementos HTML segn el estado en el que se

encuentren. El elemento de HTML, utilizado para crear hiperenlaces, tiene definidas

las siguientes pseudo-clases:

Selectores

Selectoruniversal

Si se utiliza el asterisco (*) como selector, las propiedades especificadas afectarn a todos los

elementos de la pgina; el asterisco es el selector universal. Para declarar el color azul a todos

los elementos sera: * {color:blue}

Selector de tipo o nombre de elemento

Permite aplicar un determinado estilo a todos los elementos del tipo seleccionado, con

independencia de posibles clases, identificadores, etc. Para poder afinar ms la seleccin se

8 de 22


13/23


deben utilizar otros criterios de seleccin. Un ejemplo que declara el color azul a todos los

prrafos sera: p {color:blue}

Selector por combinacin de elementos

Por ejemplo, si se quiere formatear de color rojo los elementos p que estn dentro de un

elemento div, se debe escribir la siguiente regla: div p {color : #OOFFOO}

Selector por clase o identificador de elemento

Ya los hemos visto antes, pero no viene mal recordarlos. Si al usar un selector por clase o id, se

omite el nombre del elemento, entonces se vern afectados todos los elementos que

pertenezcan a dicha clase o todos los elementos con ese identificador. Por ejemplo, para

alinear a la izquierda todos los elementos de la clase Clase_Primera y a los que tienen como

identificador Nombre_Identificador:.Clase_Primera {text-align:left;}

#Nornbre_Identificador {text-align:left;}

Para dar estilo a los prrafos de la clase "uno", y a los que tengan el identificador "dos",

definidos en un documento HTML, se tienen que escribir las reglas CSS:p.uno {text-align:#00FF00;}

p#dos {color : #00FF00;}

Selector por pseudo-clase del elemento

Las pseudos-clases clasifican elementos basndose en el estado en el cual se encuentren los

mismos. Se utilizan a menudo con los hiperenlaces. As, en funcin de si, por ejemplo, el enlace

ha sido visitado o no, si el usuario est pasando por encima con el cursor, poder darles

diferente estilo. Por ejemplo: a: link {color: red;}

Unin de selectores

Cuando sea necesario aplicar las mismas reglas de estilo a varios elementos, se pueden

reutilizar declaraciones, agrupando selectores, en lugar de repetir las mismas reglas de estilo

con diferentes selectores. Para ello se separan los selectores con una coma (,). Por ejemplo, si

se quiere formatear los elementos ul y ol con las mismas propiedades, se puede escribir la

siguiente regla: ul, ol {color:#00FF00;}

Colores, fondos, textos y fuentes

Para dar estilo a un documento HTML existen muchas propiedades CSS. Estas son algunas de

las que permiten establecer colores y tipos de letra:

9 de 22


14/23


Elementos HTML y

Los elementos de HTML y ,junto con los atributos class e id,se suelen utilizar para

organizar la estructura de un documento HTML cuando no necesitamos aadir contenido

semntico (es decir, no utilizamos las etiquetas header, nav, section, article, aside, footer o

main).

El elemento permite definir una especie de gancho, una parte de un texto, para

aadirle posteriormente un estilo diferente. Por ejemplo:

El elemento permite crear bloques, capas o cajas, es decir, una agrupacin de elementos

para darles a todos ellos el mismo estilo y con ello poder estructurar una pgina web con estas

divisiones. Por ejemplo:

10 de 22


15/23


11 de 22


16/23


Para el elemento div o span se pueden utilizar las siguientes propiedades:

12 de 22


17/23


Tamao y posicionamiento: modelo de cajas

Importante: en los siguientes enlaces tienes todo lo necesario para aprender los conceptos

fundamentales del modelo de cajasy elposicionamiento.

A continuacin un breve resumen:

Ejemplo:

13 de 22
http://librosweb.es/libro/css/capitulo_4.htmlhttp://librosweb.es/libro/css/capitulo_4.htmlhttp://librosweb.es/libro/css/capitulo_5.htmlhttp://librosweb.es/libro/css/capitulo_5.htmlhttp://librosweb.es/libro/css/capitulo_5.htmlhttp://librosweb.es/libro/css/capitulo_5.htmlhttp://librosweb.es/libro/css/capitulo_4.html


18/23


Herencia y colisiones

Una de las caractersticas principales de CSS es la herencia de los estilos definidos para los

elementos. Cuando se establece el valor de una propiedad CSS en un elemento, sus elementos

descendientes heredan de forma automtica el valor de esa propiedad. Si se considera el

siguiente ejemplo:

Ejemplo de herencia de estilos

body { color: blue; }

Titular de la pgina

Un prrafo de texto no muy largo.

En el ejemplo anterior, el selectorbodysolamente establece el color de la letra para el

elemento. No obstante, la propiedadcolores una de las que se heredan de forma

automtica, por lo que todos los elementos descendientes demuestran ese mismo

color de letra. Por tanto, establecer el color de la letra en el elementode la pgina

implica cambiar el color de letra de todos los elementos de la pgina.

14 de 22


19/23


Aunque la herencia de estilos se aplica automticamente, se puede anular su efecto

estableciendo de forma explcita otro valor para la propiedad que se hereda, como se muestra

en el siguiente ejemplo:

Ejemplo de herencia de estilos

body { font-family: Arial; color: black; }

h1 { font-family: Verdana; }p { color: red; }

Titular de la pgina

Un prrafo de texto no muy largo.

En el ejemplo anterior, se establece en primer lugar el color y tipo de letra del

elemento, por lo que todos los elementos de la pgina se mostraran con ese mismo

color y tipo de letra. No obstante, las otras reglas CSS modifican alguno de los estilos

heredados.

De esta forma, los elementosde la pgina se muestran con el tipo de

letraVerdanaestablecido por el selectorh1y se muestran de color negro que es el valor

heredado del elemento. Igualmente, los elementos

de la pgina se muestran del

color rojo establecido por el selectorpy con un tipo de letraArialheredado del

elemento.

La mayora de propiedades CSS aplican la herencia de estilos de forma automtica. Adems,

para aquellas propiedades que no se heredan automticamente, CSS incluye un mecanismo

para forzar a que se hereden sus valores, tal y como se ver ms adelante.

Por ltimo, aunque la herencia automtica de estilos puede parecer complicada, simplifica en

gran medida la creacin de hojas de estilos complejas. Como se ha visto en los ejemplos

anteriores, si se quiere establecer por ejemplo la tipografa base de la pgina, simplemente se

debe establecer en el elementode la pgina y el resto de elementos la heredarn de

forma automtica.

En las hojas de estilos complejas, es habitual que varias reglas CSS se apliquen a un mismo

elemento HTML. El problema de estas reglas mltiples es que se pueden dar colisionescomo

la del siguiente ejemplo:

p {color:red;}

p {color:blue;}

15 de 22


20/23


...

De qu color se muestra el prrafo anterior? CSS tiene un mecanismo de resolucin de

colisiones muy complejo y que tiene en cuenta el tipo de hoja de estilo que se trate (de

navegador, de usuario o de diseador), la importancia de cada regla y lo especfico que sea el

selector.

El mtodo seguido por CSS para resolver las colisiones de estilos se muestra a continuacin:

1. Determinar todas las declaraciones que se aplican al elemento para el medio CSS

seleccionado.

2. Ordenar las declaraciones segn su origen (CSS de navegador, de usuario o de

diseador) y su prioridad (palabra clave !important).3. Ordenar las declaraciones segn lo especfico que sea el selector. Cuanto ms genrico

es un selector, menos importancia tienen sus declaraciones.

4. Si despus de aplicar las normas anteriores existen dos o ms reglas con la misma

prioridad, se aplica la que se indic en ltimo lugar.

El mecanismo simplificado que se puede aplicar es el siguiente:

1. Cuanto ms especfico sea un selector, ms importancia tiene su regla asociada.

2. A igual especificidad, se considera la ltima regla indicada.

Como en el ejemplo anterior los dos selectores son idnticos, las dos reglas tienen la misma

prioridad y prevalece la que se indic en ltimo lugar, por lo que el prrafo se muestra de color

azul.

En el siguiente ejemplo, la regla CSS que prevalece se decide por lo especfico que es cada

selector:

p {color:red;}

p#especial{color:green;}

*{color:blue;}

...

Al elemento

se le aplican las tres declaraciones. Como su origen y su importancia es la

misma, decide la especificidad del selector. El selector * es el menos especfico, ya que se

refiere a "todos los elementos de la pgina". El selector pes poco especfico porque se refiere

a "todos los prrafos de la pgina". Por ltimo, el selector p#especialslo hace referenciaa "el prrafo de la pgina cuyo atributo idsea igual a especial". Como el

selector p#especiales el ms especfico, su declaracin es la que se tiene en cuenta y por

tanto el prrafo se muestra de color verde.

Comentado [j2]: La hoja de estilos del navegador seutiliza para establecer el estilo inicial por defecto atodos los elementos HTML: tamaos de letra,decoracin del texto, mrgenes, etc. Esta hoja deestilos siempre se aplica a todas las pginas web, porlo que cuando una pgina no incluye ninguna hoja deestilos propia, el aspecto con el que se muestra en elnavegador se debe a esta hoja de estilos delnavegador.Por su parte, la hoja de estilos del usuario es la quepuede aplicar el usuario mediante su navegador.

Aunque la inmensa mayora de usuarios no utiliza estacaracterstica, en teora es posible que los usuariosestablezcan el tipo de letra, color y tamao de lostextos y cualquier otra propiedad CSS de los elementosde la pgina que muestra el navegador.Por tanto, las reglas que menos prioridad tienen son lasdel CSS de los navegadores, ya que son las primerasque se aplican. A continuacin se aplican las reglas

definidas por los usuarios y por ltimo se aplican lasreglas CSS definidas por el diseador, que por tantoson las que ms prioridad tienen.

16 de 22


21/23


2.1.2. CONCEPTOS AUXILIARES

Transiciones y animaciones CSS

Las transicionesCSS, parte del borrador de la especificacin CSS3, proporcionan una forma de

animar los cambios de las propiedades CSS, en lugar de que los cambios surtan efecto de

manera instantnea. Por ejemplo, si cambias el color de un elemento de blanco a negro,

normalmente el cambio es instantneo. Al habilitar las transiciones CSS, el cambio sucede en

un intervalo de tiempo que puedes especificar, siguiendo una curva de aceleracin que puedes

personalizar.

Las animaciones CSS3 permiten animar la transicin entre un estilo CSS y otro. Las

animaciones constan de dos componentes: un estilo que describe la animacin y un conjunto

de fotogramas que indican su estado inicial y final, as como posibles puntos intermedios en la

misma. Las animaciones CSS tienen tres ventajas principales sobre las tcnicas tradicionales de

animacin basada en scripts:

1. Es muy fcil crear animaciones sencillas, puedes hacerlo incluso sin tener

conocimientos de Javascript.

2. La animacin se muestra correctamente, incluso en equipos poco potentes.

Animaciones simples realizadas en Javascript pueden verse mal (a menos que estn

muy bien programadas). El motor de renderizado puede usar tcnicas de optimizacin

como el "frame-skipping" u otras para conseguir que la animacin se vea tan suave

como sea posible.

3. Al ser el navegador quien controle la secuencia de la animacin, permitimos que

optimice el rendimiento y eficiencia de la misma, por ejemplo, reduciendo la

frecuencia de actualizacin de la animacin ejecutndola en pestaas que no estn

visibles.

Puedes investigar ms y ver algunos ejemplos en la web de Mozilla sobretransicionesy

animaciones.

Diseo en Photoshop como plantilla en Dreamweaver

Utilizar Extract.

Verhttp://www.aulaclic.es/dreamweaver-cc/t_13_5.htmo

https://helpx.adobe.com/es/dreamweaver/using/dreamweaver-integration-

extract.html#main-pars_header_1

Prefijos para propiedades CSS experimentales

Existen propiedades CSS que se encuentra en estado experimental en algunos navegadores.

Para aplicarla efectivamente a sus documentos, debe declararla con los correspondientes

prefijos. Los prefijos para los navegadores ms comunes son los siguientes:

-moz- para Firefox.

-webkit- para Safari y Chrome. -o- para Opera.

-khtml- para Konqueror.

-ms- para Internet Explorer.

-chrome- especfico para Google Chrome.

Ejemplo con la propiedad box-sizing:

div {

width: 100px;

Comentado [j3]: como la especificacin de lastransiciones CSS todava se encuentra en fase deborrador, a todas las propiedades asociadas con ellasse les aade el prefijo "-moz-" para usarse en Gecko.Para la compatibilidad con WebKit, se aconseja usartambin el prefijo "-webkit-" y para la compatibilidad conOpera, el prefijo "-o-". Es decir, por ejemplo, lapropiedad de transicin se especificara como-moz-transition, -webkit-transition y -o-transition.

17 de 22
https://developer.mozilla.org/es/docs/Web/CSS/Transiciones_de_CSShttps://developer.mozilla.org/es/docs/Web/CSS/Transiciones_de_CSShttps://developer.mozilla.org/es/docs/Web/CSS/Transiciones_de_CSShttps://developer.mozilla.org/es/docs/Web/CSS/Usando_animaciones_CSShttps://developer.mozilla.org/es/docs/Web/CSS/Usando_animaciones_CSShttp://www.aulaclic.es/dreamweaver-cc/t_13_5.htmhttp://www.aulaclic.es/dreamweaver-cc/t_13_5.htmhttp://www.aulaclic.es/dreamweaver-cc/t_13_5.htmhttp://www.aulaclic.es/dreamweaver-cc/t_13_5.htmhttps://developer.mozilla.org/es/docs/Web/CSS/Usando_animaciones_CSShttps://developer.mozilla.org/es/docs/Web/CSS/Transiciones_de_CSS


22/23


margin: 20px;

padding: 10px;

border: 1px solid #000000;

-moz-box-sizing: border-box;

-webkit-box-sizing: border-box;

box-sizing: border-box;

}

Sitios de plantillas

http://templated.co/

http://www.bestpsdfreebies.com/category-freebie/themes/

Pginas de recursos tiles para desarrolladores

18 de 22
http://templated.co/http://templated.co/http://www.bestpsdfreebies.com/category-freebie/themes/http://www.bestpsdfreebies.com/category-freebie/themes/http://www.bestpsdfreebies.com/category-freebie/themes/http://templated.co/


23/23


ANEXO ICurso completo Dreamweaver en Youtube.

Tutoriales ejercicios Dreamweaver.

19 de 22
https://www.youtube.com/playlist?list=PLBQF2TwZfgj9fUcKxD1ly2fcbTpHUarjuhttps://www.youtube.com/playlist?list=PLBQF2TwZfgj9fUcKxD1ly2fcbTpHUarjuhttp://www.dreamweaver-tutoriales.com/http://www.dreamweaver-tutoriales.com/http://www.dreamweaver-tutoriales.com/https://www.youtube.com/playlist?list=PLBQF2TwZfgj9fUcKxD1ly2fcbTpHUarju

Documents

Ut2 HTML Css