Curso programación html5 CSS3 maquetación 2.0 tutorial español

Curso Html5 Y Css3 Programación Tutorial en Español Web Programador Web Diseño Site Lenguaje Etiquetas

 

 Objetivos del Curso:

• Aprender las nuevas etiquetas y propiedades del lenguaje, saber utilizarlas y conocer la importancia de la semántica en el entorno web.

 

• Finalizarás el curso con los conocimientos necesarios para poder crear y desarrollar webs actuales, que se basen en el nuevo lenguaje del Diseño Web.

 

• Curso de HTML5 y CSS3 dirigido

 

• Dirigido a Diseñadores Web, Programadores Web y Responsables Técnicos de portales web que quieran ponerse al día en las últimas tendencias para la creación web.

 

CONTENIDO GENERAL DEL  VIDEO CURSO

 

 INTRODUCCIÓN

 

 HTMLY CSS3: HISTORIA, PRESENTE Y FUTURO

 

INSTALACIÓN DE NAVEGADORES Y HERRAMIENTAS

 

Descarga e instalación de Mozilla Firefox

Descarga e instalación de Google Chrome

Descarga e instalación de Opera

Descarga e instalación de Apple Safari

Descarga e instalación de Gedit y Notepad

 

ESTRUCTURA Y SEMÁNTICA

ESTRUCTURA

 

Doctype

Header y Footer

Nav

Article, Section y Aside

 

SEMÁNTICA

Word Break

Time

Ruby

 

MICRODATOS

Microdatos

 

TRABAJO FUERA DE LÍNEA

App caché

Manifiesto

 

CONTENIDO EDITABLE

Activar el contenido editable

 

MULTIMEDIA VÍDEO

 

Vídeo

Múltiples fuentes

 

AUDIO

Audio

Múltiples formatos

Parámetros adicionales

 

GRÁFICOS EN HTML5

CANVAS

 

Contenedor y JavaScript asociado

Creación de trazados

Creación de círculos

Degradados

 

SVG

Gráficos vectoriales con SVG

Algunas instrucciones de SVG

Insertar código externo

 

FORMULARIOS

NUEVOS TIPOS DE FORMULARIOS

 

Campos requeridos

Campos inválidos

Date

Sliders

Color

Valor numérico

 

CSS3

 

BORDES

Border Radius

Compatibilidad con Firefox

Múltiples radios en las esquinas

Shadow

 

FONDOS

Tamaño

Origen

Fondos Múltiples

 

EFECTOS DE TEXTO

Sombra

Word-wrapping

 

FUENTES

 

Configuración de fuentes personalizadas

 

TRANSFORMACIONES

 

Transformación de posición

Transformación de rotación

Transformación de escala

Transformación de distorsión

 

TRANSICIONES

 

Primera transición

Varios elementos simultáneos

 

ANIMACIONES

 

Primera animación

Múltiples fotogramas clave

Animación de posición

 

COLUMNAS MÚLTIPLES

 

Creación de múltiples columnas

Separación entre columnas

Línea separadora

Inserción de imágenes

 

COLOR

 

Colores predeterminados

Transparencia

 

EJERCICIO DEL CURSO: DISEÑAR UN BLOG

 

INTRODUCCIÓN

 

Objetivo del ejercicio

Prefijos de compatibilidad con navegadores

 

PLANTEAMIENTO

 

Configuración del espacio de trabajo

Creación de la estructura de archivos

 

ESTRUCTURA

 

Esqueleto estructural

Truco Auto-refresh

Título y metaetiquetas

Etiquetas estructurales

Esbozo de contenido en el Header

Contenido inicial del Body y el Footer

Cambio de UTF a ISO

Ayudas para la estructuración con DIV

Añadido de contenido a la página índex

 

SEMÁNTICA

 

Marcado de tiempo con Time

Preparación para microdatos: fotografía

Añadido de microdatos

Añadido de microformatos: Tarjeta de visita virtual

 

MULTIMEDIA

 

Preparación de archivos para su inclusión

Inclusión de vídeo

Inclusión de audio

Preload de audio y de vídeo

 

CONTENIDO OFFLINE

 

Guardado permanente de información en el servidor

Guardado de información de sesión

 

GRÁFICOS Y EFECTOS

 

Icono de navegación: canvas

JavaScript asociado

Trucos de automatización

Icono de contacto

Icono de inicio

Icono de noticias

Añadir un logo con SVG

 

MAQUETACIÓN

 

Creación de una hoja de estilo externa

Usar fuentes personalizadas

Maquetación principal

Maquetando header y footer

Maquetando el bloque principal

 

CREANDO UN ESTILO VISUAL

 

Estilizando el Header

Estilizando el Footer y el contenido

Título de la web

Creación de un menú de navegación

Estilización de canvas

Maquetando artículos y aumento de la compatibilidad con Firefox y Opera

Maquetando fechas

Maquetando el contenido tangencial

Maquetación del DIV "sobre mí"

Logotipos para los artículos

 

TRANSICIONES, ANIMACIONES Y EFECTOS

 

Transiciones de opacidad y sombra de caja

Transición de escala

Transición de color

Animación

Múltiples fondos y transparencias

Sombra en el texto

Creación de un manifiesto

 

DISEÑO DE FORMULARIOS CON HTML5 y CSS3

 

Duplicación de index.html

Formulario de contacto

Nombre e e-mail

Área de texto y propiedades HTML5

Estilizado con elementos HTML5

Estilizado del formulario

Transparencias

Creación del archivo PHP

Configuración de las variables

Enviar el mail con PHP

 

EJERCICIO DEL CURSO: WEB CON ANIMACIONES

 

Introducción: objetivo del ejercicio

 

ESTRUCTURA

 

Creación del índex y estructura

Formulario de entrada

Estructura de la sección principal y el Footer

Contenido de la sección principal y el Footer

 

ESTILO DE LA CABECERA

 

Estilo para el bloque principal

Fuentes personalizadas

Inserción del logotipo vectorial

Maquetación del logotipo

Maquetación del formulario

Animación del logotipo

Refinado de la animación

Animación del enlace al registro

Transiciones en los formularios

 

CREACIÓN DE UN BANNER ANIMADO CON CSS3

 

Animación de cierre del banner

Creación de un fondo animado

Textos animados

Retoques en los tamaños de los objetos

 

ESTILIZADO DE LAS TABLAS

 

Estilizado de tablas

Efectos adicionales en la tabla

Estilizado del Footer

Transiciones en las etiquetas

Pruebas en columnas

 

EJERCICIO DEL CURSO:

INTEGRACIÓN DE APLICACIONES WEB 2.0

 

Material de partida

Fusión de las dos ramas del proyecto

 

INTEGRACIÓN DEL INDEX

 

Externalización del CSS

Selección de los archivos de igual función

Adaptación del formulario de usuario

Integración del enlace a nuevo usuario

Inserción del código PHP en la maquetación HTML

Integración de la tabla de resultados

Actualización del fondo del banner

 

INTEGRACIÓN DE LA PÁGINA PRINCIPAL

 

Objetivo

Fusión del archivo html con el archivo php

Creación de elementos de sesión: saludo por usuario

Creación de elementos de sesión: cierre de sesión

Inserción del código PHP en la maquetación HTML

Cambio de formato de la tabla principal

Inclusión de enlaces para actualizar y eliminar registros

Transformación de la tabla de favoritos propuestos

Ayuda visual para diferenciar las etiquetas

Usando el formulario de tipo range

 

EJERCICIOS VARIOS

CREACIÓN DE UN ACORDEÓN

 

Estructura básica en html

Inserción de contenido mixto

Estilo del body y el contenedor

Estilizado de elementos de texto

Estilizado de elementos visuales

Añadido de títulos a los artículos

Creación del acordeón animado

 

CREACIÓN DE UN LIGHTBOX

 

Creación de la estructura y las secciones

Contenido en las secciones

Estilo del body y de la sección

Estilo del texto, la imagen y el vídeo

Montaje del contenido encima de los botones

Opacidad

Animación

Maquetación absoluta