Beruflich Dokumente
Kultur Dokumente
Presentacin
Mucho hemos escuchado ltimamente con respecto a la nueva versin del ms que conocido HTML, incluso si no eres programador o diseador web seguramente has ledo por algn lado algo relativo a l. Lo cierto es que HTML5 es de alguna manera una especie de evolucin 'obligada' de lo que hasta hoy conocemos como HTML 4 (para ser ms especfico 4.0.1), incluyendo algunas mejoras propias y otras a travs de API's de Javascript o CSS3. Pues bien, en el presente Video Curso Aprende HTML5 y CSS haciendo pginas web abordar un poco ms a fondo el tema tratando de explicarlo de manera sencilla. Al hablar de HTML5 estamos hablando realmente de una familia de tecnologas que en combinacin nos proporcionan una nueva serie de posibilidades al momento de construir aplicaciones y sitios web. Concretamente esta familia est conformada del ya conocido HTML, Javascript y CSS3, los cuales anteriormente ya eran utilizados al construir nuestros sitios, sin embargo, con HTML5 es un tanto distinto ya que son soportados de forma nativa, es decir, al definir un script ya no es necesario establecer su tipo ya que se sobreentender que utilizaremos Javascript, lo mismo sucede con los estilos ya que se tomarn como CSS3 por defecto. De igual manera, al tratarse de un lenguaje 'evolucionado', no ser necesario indicarle al navegador qu versin de HTML est implementado el documento, basta con indicar que es HTML y punto.
Pag: 03
Plan Curricular
Captulo I
Introduccin al HTML5
Introduccin al HTML5, es muy importante saber cual es el objetivo del curso, que necesitamos saber y que aplicaciones usaremos, adems veremos como crear una perfecta estructura de carpetas antes de comenzar a construir una web. Necesitamos instalar diferentes navegadores como Crhom, Firefox, Opera, Safari e Internet Explorer.
Puntos a tratar
Objetivos del curso Instalacin de visores de navegacin y herramientas extras Creando estructura de carpetas para una web
Duracin
13:28 05:18 05:24
Pag: 04
Captulo II
Puntos a tratar
Duracin
03:03 02:23 02:40 07:07 02:35 05:49
Crear un nuevo sitio web Editar un sitio web Borrar un sitio web Reconocimiento de la plataforma de trabajo Abrir, grabar y cerrar archivos Configurar visores para previsualizacion
Pag: 05
Captulo III
Puntos a tratar
Duracin
03:02 02:01 01:50 02:26 02:51 06:14 03:35
Abrir un documento HMTL5 Uso de la etiqueta DIV Uso de la etiqueta HEADER Uso de la etiqueta NAV Uso de las etiquetas SECTION, ARTICLE y ASIDE Uso de la etiqueta FOOTER Crear compatibilidad con navegadores antiguos
Pag: 06
Captulo IV
Puntos a tratar
Duracin
02:57 02:37 02:18 02:52 07:39 04:42 02:36 01:58
Abrir un nuevo documento CSS3 Vincular hojas de estilo CSS3 con HMTL5 Colocar estilos predeterminados para trabajar con HMTL5 Separar los estilos generales y de maquetacin Aplicar estilos a etiquetas HMTL5 Aplicar estilos a etiquetas a travs de su ID Aplicar estilos a etiquetas a travs de su CLASE Diferencias entre ID y CLASE
Captulo V
En este captulo empezamos creando una pequea pagina web a nivel profesional de cuatro cuerpos, cabecera, men, cuerpo y pie de pagina, vamos a ver como se hace una maquetacin partiendo de cero. Usaremos tecnicas muy basica pero muy usadas para crear una web real.
Pag: 07
Captulo V
Puntos a tratar
Duracin
02:05 03:28 04:31 07:26 03:49 05:06 04:08 10:01 03:28 02:21 02:26 02:17 09:09 13:13 07:28 02:03 09:49 05:36
Preparando estructura de carpetas para el sitio Preparar sitio y pasos preliminares Preparar diseo o boceto web Optimizar y exportar imgenes a usar Maquetando estructura principal y los cuerpos de la web Aplicando diseo a nuestra maquetacin Usar imgenes de diseo en CSS3 Aplicar estilos que determinen ancho, alto, margen y padding Aplicar colores Hexadecimales, RBG, RGBA a elementos Insertar imgenes como contenidos de una web Insersin cabecera <H1>, <H2>, <H3>, <H4>, <H5>, <H6> Insersin parrafo <p> Colocar elementos uno sobre otro Aplicar estilos de textos, fuentes, color, tamao, margen. Aplicar estilos a los enlaces Creacin barras de navegacin con listas desordenadas <ul><li> Aplicando estilos al men Trabajando el contenido de los pies de pagina
Captulo VI
Pag: 08
Captulo VI
Puntos a tratar
Duracin
04:02 05:44 05:01 06:33 04:17 12:59 04:49 05:07 01:49 06:33 02:25 02:06 09:00 06:39 10:49 05:03 02:16 04:37
Creacin de sitio, html, css, vincular html con css Optimizar y exportar imgenes a usar Maquetar la estructura principal del web Aplicar fondo de web con degradados en CSS3 Crear compatibilidad de degradados para Internet Explorer 9, 8 y 7 Aplicando estilos a la cabecera Determinar ancho, alto, relleno degradado y bordes redondeados al men Determinar ancho y alto de redes sociales Crear barra de navegacin con listas desordenadas <ul><li> Aplicando estilos a la barra de navegacin usando degradados y bordes arqueados Estilo del banner con color de fondo,bordes redondeados y padding Insersin de Imagenes como contenidos Colocar elementos con posicion absaluta y relativa Aplicar sombra y otros estilos a los textos Trabajar articles como elementos flotantes, aplicando estilos de diseo Insercin de cabeceras <h1>, aplicando estilos de encabezados Insercin de parrafos <p> Diseando pies de paginas
Transformaciones y Transiciones
Captulo VII
Pag: 09
Captulo VII
Puntos a tratar
Transformaciones y Transiciones
En este captulo vamos a aprender como transformar elementos en cuanto a su tamao, posicin, inclinacin y rotacin aprederemos a crear barras de navegacin con transiciones de movimiento, transparencia, creando un sistema de navegacin moderno y funcional.
Duracin
01:43 01:51 02:25 05:55 05:08 02:45 06:46 05:13 15:28 04:39 04:21 04:35 01:40 15:46 03:41 07:41
Creacin de nuevo sitio Pasos preliminares antes de comenzar Estructura principal de la pagina web Aplicar fondo degradado con mas de 2 colores y medidas Aplicando estilos de maquetacion para la web Creando la barra de navegacin con mas de 2 elementos Aplicando estilos basicos a la barra de navegacion Aplicando transiciones y trasnformaciones a cada boton Aplicando transiciones a los elementos internos del boton Trabajando textos en el pie de pagina Colocando icono redes sociales en el pie de pagina Maquetando paginas internas Creando barra de navegacin interna Diseando barra de navegacin interna Aplicando transiciones y transformaciones a botones internos Diseando contenidos de la web imagenes, titulos y textos
Captulo VIII
Pag: 10
Captulo VIII
Puntos a tratar
Duracin
02:26 03:05 07:03 05:21 11:25 01:00 02:47 04:37 04:31 07:54 05:52 04:48 06:29 03:05
Creacin de nuevo sitio Pasos preliminares antes de comenzar Maquetacin y diseo de web Colocar elementos con posicin absoluta y relativa Crear animacin de elementos Creacin de barra de navegacion Diseo de barra de navegacin Tipografias externas google fonts Transicin y transformacin de barra de navegacion Colocar pies de pagina y aplicar transiciones a las redes sociales Maquetacin paginas interanas Diseando barra de navegacion interna Diseando contenidos de la pagina Creando enlaces y las paginas internas
Captulo IX
Los formatos SVG se han convertido en una herramienta necesaria a la hora de construir una web, podemos crear paginas que realmente pesen poco trabajando con vectores. En este captulo aprenderemos como exportar SVG desde Adobe Illustrator e importarlo desde el Dreamweaver usando HTML5.
Pag: 11
Captulo IX
Puntos a tratar
Duracin
03:56 01:30 13:02 04:53 10:02 03:14 04:44 01:34 07:07 03:24 01:46 03:45 01:58
Pasos preliminares antes de empezar Adobe Illustrator como herramienta de dibujo vectorial Optimizar y exportar formato SVG desde Illustrator Maquetacin principal de la web Posicionando elementos con posicin absoluta y relativa Importar formatos SVG o vectores a nuestra web Aplicando animaciones a formatos SVG Creando la barra de navegacion con graficos SVG Diseando la barra de navegacin con transiciones Maquetando el cuerpo de la pgina Colocando elementos de diseo en formato SVG Colocando contenidos del cuerpo Creacin del pie de pagina
Captulo X
Pag: 12
Captulo X
Puntos a tratar
Duracin
5:53 4:55 7:54 8:40 8:58 2:09 4:16 4:52 4:28 5:39 5:20 6:16 3:39 3:01 1:48
Pasos preliminares antes de empezar Diseando la estructura de la web Diseando la estructura de la web Colocar elementos con posicin relativa y absoluta Crear y disear barra de navegacin Definir una tipografia personalizada Diseando logo y titulo Diseando piepagina y sociales Preparando sonidos para nuestra pagina web Insercin de sonidos compatibles con todos los navegadores Introduccin y descarga del jQuery Insercin de fondo musical desde el jQuery Controlar elementos del HTML desde el jQuery Controlar sonidos desde el jQuery Controlar rotacion de discos con jQuery
Captulo XI
Pag: 13
Captulo XI
Puntos a tratar
Duracin
02:46 03:50 02:14 05:39 04:58 05:21 04:54 05:19 02:56 06:34 12:41 07:41
Pasos preliminares antes de empezar Optimizacin y exportacin de imgenes Maquetar estructura principal de la web Disear estructua web Preparar zona del video Insercion de videos Disear logo con tipografias propias Crear y disear barra de navegacin Crear y disear controles de sonido Colocar sonidos desde el jquery Creando, diseo paginas internas Creando, diseando pie de pagina
Captulo XII
Pag: 14
Captulo XII
Puntos a tratar
Duracin
03:13 02:43 01:33 02:34 05:39 07:53 05:19 10:32 05:55 07:35 03:35 01:36 02:22 06:56 09:22 12:38
Instalando Wampserver Puesta en marcha del Wampserver Pasos preliminares antes de empezar Creacin de sitios dinamicos en dreamweaver Crear pagina de prueba PHP y ejecutar en los navegadores Crear y disear maquetacin principal de la web Aplicar mens desplegables usando dreamweaver Editando css del menu desplegable Disear cuerpo y texto superior de la web Crear y disear pie de pagina de la web Separar segmentos de codigo en modulos Incluir modulos PHP en una sola pagina Preparar plantilla interna PHP Crear Pginas internas PHP Diseando pginas internas I Diseando pginas internas II
Pag: 15
Captulo XIII
Puntos a tratar
Duracin
02:06 01:35 02:16 01:19 02:45 02:00 01:45 01:29 01:42 01:52 02:27 01:12 01:16 05:28 12:13 05:16
Pasos preliminares antes de empezar Abrir las paginas donde se insertarn el formulario Insercion de un formulario Agrupar campos con Fieldset Insercin y validacin de campos textos Insercin y validacin de campos numericos Insercin y validacin de campos fecha Insercin y validacin de campos email Insercin y validacin de campos range Insercin y validacin de campos boton de opcion Insercin y validacin de campos boton casilla de verificacion Insercin y validacin de campos lista de mens Insercin y validacin de campos area de texto Preparar elementos para disear formularios Aplicar diseo CSS3 a cada elemento del formulario Crear logica PHP para enviar datos del formulario al correo electrnico
Pag: 16
Captulo IXV
Puntos a tratar
Duracin
02:05 04:59 03:32 02:07 02:32 02:08
Preparar archivos a subir al servidor Conexin a FPT via Dreamweaver CSS6 Conexin a FTP via Filezila Conexin a FTP via Windows Crear actualizaciones en la web Puesta en marcha de la pagina web