Dia2

HTML 5 Y CSS 3Semántica de la pagina y estética de la misma

Establecer la sintaxis del Lenguaje

Etiquetas utilizadas en HTML 5

HEADER

NAV

ARTICLE

SECTION

FOOTER

Ejemplo 1. Página Index.html

Diseñado para ser utilizable por todos los desarrolladores de Open Web, esta referencia página enlaza numerosos recursos sobre las tecnologías de HTML5, que se clasifican en varios grupos según su función.

Semántica : lo que le permite describir con mayor precisión cuál es su contenido.

Conectividad : lo que le permite comunicarse con el servidor de formas nuevas e innovadoras.

Desconectado y almacenamiento : permite a páginas web almacenar datos, localmente, en el lado del cliente y operar fuera de línea de manera más eficiente.

Multimedia : permite hacer vídeo y audio de ciudadanos de primera clase en la Web abierta.

Gráficos y efectos 2D/3D : permite una gama mucho más amplia de opciones de presentación.

Rendimiento e Integración : proporcionar una mayor optimización de la velocidad y un mejor uso del hardware del equipo.

Dispositivo de Acceso : admite el uso de varios dispositivos de entrada y salida. Styling : deja a los autores escribir temas más sofisticados.

Caracteristicas de HTML 5

Inserción de Videos en la página

No se requiere de players externos, ya que esta corriendo dentro del mismo html. Propiedades de video.

Controls – Aparece los botones de control. Autoplay – Inicia el audio o video. Preload – Precargado desde que se carga la

pagina Loop – Solo en audio, para que vuelva a

iniciar al terminar.

Inserción de Tablas Ya no se utilizan para la distribución de

contenido, sino como elemento visual de la pagina.

Se visualizaran como se muestran en Word.

Clases e Id

Class- se pueden aplicar a diferentes objetos.

Id- solo se aplica a ese elemento.

Ejemplo: <section class="noticias">

<section id=“noticias”>

CSS 3.

Lenguaje de Hojas de Estilo destinado a la presentación de los contenidos en una pagina web.

Separar los contenidos del diseño. Dar un aspecto a cada elemento de la

pagina. Algunos elementos de CSS 3

Cajas con bordes redondeados. Trasparencias y sombras.

Ventaja de “olvidarse de la versión del navegador del usuario final”.

Insertar CSS en el documento Se agrega en el head insertándolo con

etiquetas style.ó Linkear un archivo externo donde se

encuentren todos los estilos deseados. Archivo con extensión .css

Optimización del código

Navegadores antiguos. www.modernizr.com Seleccionar los elementos que se desean

compatibilizar. Se descarga los scripts de javascripts

<head> <script

src=js/modernizr.js></script>

http://www.modernizr.com/

Ejemplo

Rel = Tipo de relación que se esta realizando. Type = Tipo de recurso enlazado. Es un tipo de

texto. Href = url donde se encuentra el archivo Media = medio donde se va aplicar el archivo css.

Asignar hojas de estilo de acuerdo al medio de reproduccion: pantalla (screen), movil (handheld), television (tv), impresión (print), impresoras brailet(braille), proyector (proyection), todos (all)

Elementos CSS

Selector Regla

Declaración (instrucciones)

Propiedad (modificar características)

Valor

Regla: Ordenar en forma alfabética en base al selector y dentro de cada regla también la ordenación en base a la propiedad.

Selectores

Universal. Todos los elementos de la pagina.

De etiqueta. Actúa específicamente sobre la etiqueta establecida.

Selector múltiple. Permite aplicar las mismas propiedades a varias etiquetas.

Compartir propiedades

Selector descendente. Seleccionar elementos dentro de otros elementos. Se encuentra dentro de las { } de otro.

Conclusion

Selector de clase

Ejemplo: Solo se desea cambiar al parrafo 1.

Se tiene que definir una clase, tanto en html como en la hoja de estilo.

Compartir la misma clase…

Selector especifico en un class. Solo el elemento de la class pero que

pertenence solo a una etiqueta. Ejemplo solo a Hola

Cualquier class aviso que se encuentre dentro de p

Los p de class aviso

Los p y la class aviso Ejemplo de los 3 separados:

Selector Id

Diferencia con la class, que solo se aplica a un solo elemento de la página y no compartirlo. Un id no se repite.

Se cambia el . Por ##destacado {..}

Herencia en CSS

Las etiquetas dentro de body heredan las características, mientras no se especifique lo contrario

Dia2

Documents

Transcript of Dia2