Parece que su navegador tiene desactivado JavaScript.

Usted debe tener habilitado JavaScript en su navegador para utilizar la funcionalidad de este sitio web. Haga clic aquí para obtener instrucciones sobre cómo habilitar JavaScript en su navegador.

VIDEO CURSO HTML5 Y CSS3 TUTORIALES INTERACTIVOS FACIL ESPAÑOL

Aprende a programar diseñar maquetar sitios web profesionales con HTML5 Y CSS3 parctico facil y rapido, tutoriales 100% en español

 

Contenido del Video Curso de HTML5 Y CSS3
 
INSTALACION 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
 SEMANTICA
  • Word Break
  • Time
  • Ruby
 MICRODATOS
  • Microdatos
 
TRABAJO FUERA DE LINEA
 App Caché
  • Manifiesto
 CONTENIDO EDITABLE
  • Activar el Contenido editable
 
MULTIMEDIA
 VIDEO
  • Vídeo
  • Múltiples fuentes
 AUDIO
  • Audio
  • Múltiples formatos
  • Parámetros adicionales
 
GRAFICOS 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 distorció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
 INTRODUCCION
  • 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ÁTICA
  • Marcado de tiempo con Time
  • Preparación de archivos para su inclusión
  • Inclusión de vídeo
  • Inclusión de audio
  • Preload de audio y vídeo
 CONTENIDO OFFLINE
  • Guardado permanente de informacion 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 email 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 SOLO 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 las tablas
  • Efectos adicionales en la tabla
  • Estilizado del footer
  • Transiciones en las etiquetas
  • Pruebas en columnas
 
EJERCICIO DEL CURSO: INTEGRACION 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 Form 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 de las secciones
  • Estilo del body y de la sección
  • Estilo del texto, la imágen y el vídeo
  • Montaje del contenido encima de los botones
  • Opacidad
  • Animación
  • Maquetación absoluta