Datos del Curso
Duración:
hasta 20 horas
Introducción:
HTML5 y CSS3 son las nuevas versiones de los lenguajes básicos para crear aplicaciones en internet. Con estas nuevas herramientas de markup, se expanden las posibilidades para los desarrolladores, permitiendo una web más interactiva y con mejor diseño los requisitos son conocimiento básico-intermedio de HTML y CSS. Nota: En el presente curso no se incluye javascript para HTML y este sería un requisito deseable.
Objetivos del Curso:
Que el estudiante obtenga las herramientas y conocimiento básicos necesarios para poder crear un sitio Web con markup validado para HTML5, además de obtener las bases para su contínuo aprendizaje en esta nueva y cambiando área de diseño
Temario
- HTML5
- Introducción
- ¿Qué es HTML?
- HTML Tags
- Elementos HTML
- Estructura de una página HTML
- Versiones de HTML
- Declaración <!DOCTYPE>
- Editores
- Dreamweaver
- TextMate
- Eclipse
- Aptana
- Note Pad
- Elementos
- ¿Qué es un elemento?
- Sintaxis
- Elementos anidados
- Elementos vacíos
- Atributos
- ¿Qué es un atributo?
- Sintaxis
- Tipos de atributos
- Recordando HTML (Headings, Paragraphs, Formatting, Links, Images, Tables, Lists, etc.)
- HTML Head
- <head>
- <title>
- <link>
- <style>
- <meta>
- <script>
- CSS
- Aplicar estilos con CSS
- Good practices
- Inline styles
- CSS interno
- CSS externo
- Bloques
- Elementos en bloque
- Elementos inline
- <div>
- <span>
- Layouts
- <div> vs <table>
- ¿Cómo hacer layouts?
- Elementos HTML5
- Canvas
- Media
- Elementos semánticos
- Elementos ya no existentes en HMTL5
- <canvas>
- ¿Qué es canvas?
- Soporte en navegadores
- Crea un canvas
- Dibuja con javascript
- Coordenadas del canvas
- Paths, text, gradients, images (javascript)
- Drag & Drop
- <video>
- Formatos y soporte en navegadores
- Métodos y propiedades
- Video tags
- <audio>
- Formatos y soporte en navegadores
- Audio tags
- Input types
- Atributos para formas
- Elementos semánticos
- <section>
- <article>
- <nav>
- <aside>
- <header>
- <footer>
- <figure>
- <figcaption>
- CSS
- Introducción
- ¿Qué es CSS?
- Sintaxis
- Recordando CSS
- Bordes
- Esquinas redondeadas
- Box Shadow
- Border image
- Backgrounds
- Background size
- Background origin
- Múltiples backgrounds
- Efectos en Textos
- Text Shadow
- Word Wrapping
- Propiedades de texto nuevas
- Fuentes
- Usa la fuente que quieras
- Font Descriptors
- 2D Transforms
- Translate
- Rotate
- Scale
- Skew
- Matrix
- Métodos de transformación 2D resumidos
- 3D Transforms
- Rotate X & Y
- Propiedades de transformación
- Métodos de transformación 3D resumidos
- Transiciones
- ¿Cómo funciona?
- Cambios múltiples
- Propiedades de transformación
- Animaciones
- ¿Cómo animar?
- ¿Cómo funcionan las animaciones?
- Propiedades de animación
- Boilerplate y otras herramientas útiles
- ¿Qué es el boilerplate?
- Modernizer
- Otros front-end templates y frameworks
- Validación de Markup por W3C
