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
MICRODATOS
TRABAJO FUERA DE LINEA
App Caché
CONTENIDO EDITABLE
-
Activar el Contenido editable
MULTIMEDIA
VIDEO
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
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