Post on 18-Jan-2016
description
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
Estab
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>
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:
<p class”error destacado especial>Hola</p>
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