html5-css3

25
5/12/2018 html5-css3-slidepdf.com http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 1/25 MASTER EN HTML 5, CSS3, JQuery, Social Media y SEO Consultor Especialista Prepárate para ser un especialista en tecnolo- gías webs de última generación orientados a Aplicaciones Web, Desktop y dispositivos Móviles orientado a Web 2.0

Upload: franco-paredes

Post on 14-Jul-2015

1.208 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 1/25

MASTER EN HTML 5, CSS3,

JQuery, Social Media y SEO

Consultor Especialista

Prepárate para ser un especialista en tecnolo-

gías webs de última generación orientados a

Aplicaciones Web, Desktop y dispositivosMóviles orientado a Web 2.0

Page 2: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 2/25

PRESENTACION DEL CURSO

MASTER EN HTML 5, CSS3,

JQuery, Social Media y SEO

Consultor Especialista

Prepárate para ser un especialista en tecnolo-

gías webs de última generación orientados a

Aplicaciones Web, Desktop y dispositivos

Móviles orientado a Web 2.0

Page 3: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 3/25

   M  a  s   t  e  r  e  n   H   T   M   L   5 ,

   C   S   S   3 ,

   J   Q

  u  e  r  y ,

   S  o  c   i  a   l    M  e   d   i  a  y   S

   E   O    C

  o  n  s  u   l   t  o  r   E  s  p  e  c   i  a

   l   i  s   t  a

www.mgp-peru.com Area Diseño y Desarrollo de Aplicaciones Web y Moviles

1

El HTML5 (HyperText Markup Language, versión 5) es la quinta revisión del

lenguaje de programación “básico” de la World Wide Web, el HTML.

Esta nueva versión pretende remplazar al actual (X)HTML, corrigiendo proble-

mas con los que los desarrolladores y diseñadores de web se encuentran día a

día, así como rediseñar el código actualizándolo a nuevas necesidades que

demanda la web de hoy en día.

Debido a que estos cambios que afectaran la forma de diseñar y desarrollar 

páginas webs en un futuro inmediato, desde MGP Nuevas Artes, nos hemos

planteado en crear el Master en HTML 5, CSS3, JQuery, Social Media y SEO

Consultor Especialista, todo esto trabajado en plataforma Dreamweaver 

CS5.5.

El HTML5 se convertirá el estándar en el campo de la creación de webs a partir 

del 2012 ya muchas empresas están desarrollando sus páginas en esta versión

lenguaje. Los navegadores más usados como IE, Firefox, Opera, Chrome,

Safari están implementando tecnologías en su visor para que soporten las

nuevas sentencias tanto del HTML5 y CSS3. A diferencia de otras versiones de

HTML, los cambios en HTML5 comienzan añadiendo semántica y accesibilidad

implícitas, especificando cada detalle y borrando cualquier ambigüedad.

En el Curso HTML 5 en Dreamweaver CS5, explicaremos cómo desarrollar 

sitios multi-navegador web compatible con el uso de las capacidades mejoradas

del HTML 5. Todos los detalles del curso HTML 5 en Dreamweaver CS5, inclu-

yendo plantillas, pistas adicionales de código y una vista previa de múltiplespantallas para el desarrollo de dispositivos móviles (celulares). Tutoriales sobre

la incorporación de audio nativo y reproductores de vídeo sin plug-ins (no más

Flash para videos), ahora también se podrá incorporar cualquier tipo de fuente

no-estándar en nuestra web usando @font-face, y la creación de formularios

con hilanderos, deslizadores y los calendarios.

Porque el JQuery para los que no lo saben, JQuery es una librería javascript

que nos permite de una manera rápida y sencilla acceder y manipular el HTML

DOM (Modelo de Objetos del Documento). Pero porque deberíamos de empe-

zar a usar JQuery? pues aquí van algunas razones: Podemos crear efectos y

animaciones de elementos al nivel de flash en nuestras webs pero 100% funcio-nal para las arañas de búsqueda.

Social Media Manager , en nuestra actualidad las redes sociales (Facebook,

Twitter, Youtube, Blogs) son herramientas fundamentales para posicionar 

marcas de empresas, hacer marketing online y por ende generar trafico a nues-

tra página web. Aprende a administrar las redes sociales de pequeñas, media-

nas y grandes empresas, te enseñamos como obtener tu primer cliente.

Introducción al Curso

Page 4: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 4/25

   M  a  s   t  e  r  e  n   H   T   M   L   5 ,

   C   S   S   3 ,

   J   Q

  u  e  r  y ,

   S  o  c   i  a   l    M  e   d   i  a  y   S

   E   O    C

  o  n  s  u   l   t  o  r   E  s  p  e  c   i  a

   l   i  s   t  a

www.mgp-peru.com Area Diseño y Desarrollo de Aplicaciones Web y Moviles

2

Aplicaciones Moviles, el curso tendrá un apartado que cubre especialmente la

creación de aplicaciones que se adaptaran en el IPHONE, ANDROID y IPAD

como por ejemplo la creación de animaciones para producir contenidos interacti-

vos de gran alcance, incluyendo una galería de fotos y un reproductor de vídeo.Técnicas de CSS3 para cambiar formato de tipo le letras, creación de menús y

botones.

SEO Consultor Especialista, en la actualidad no solo es crear una página web,

ahora es importante que dichas webs salgan en los primeros lugares de las

búsquedas de los principales buscadores como por ejemplo Google, Yahoo,

Bing, existen mucha técnicas y herramientas para hacer este trabajo y aquí te

preparamos para ser todo un experto.

Objetivo

El objetivo principal es preparar un profesional completo en la creación, optimi-

zación y promoción de aplicaciones webs en todos los medios existentes, lláme-

se navegadores webs, dispositivos móviles, buscadores y redes sociales,

utilizando para esto las últimas tecnologías como el HTML5, CSS3, Jquery y el

Dreamweaver CS5.5.

Requisitos

Es fundamental que el participante sepa manejar a la perfección los siguientes

puntos:

 Manejo absoluto del Windows

Manejo absoluto de los navegadores de internet IE, Firefox, Chrome, Safari.

Conocimiento y manejo a la perfección del teclado en todas sus dimensiones.

Manejo de archivos en Windows (crear, copiar, renombrar, borrar, crear carpe-

tas).

Instructor 

Abel Espinoza Herrera

Experto en creación, diseño y desarrollo de páginas web basadas en estándares

Master Animación 2D multimediaSEO Consultor Especialista

Social Media Manager 

Desarrollador de aplicaciones web y juegos 2D

Desarrollo del Plan Curricular 

Todos los puntos mencionados en el presente plan curricular son los que deben

aprender el alumno para poder ser un Master en Diseño, Maquetación, Social

Media y SEO Consultor Especialista. El desarrollo de cada tema no necesaria-

mente tiene que seguir el orden como se muestra sino de acuerdo al plantea-

miento del INSTRUCTOR.

Introducción al Curso

Page 5: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 5/25

   M  a  s   t  e  r  e  n   H   T   M   L   5 ,

   C   S   S   3 ,

   J   Q

  u  e  r  y ,

   S  o  c   i  a   l    M  e   d   i  a  y   S

   E   O    C

  o  n  s  u   l   t  o  r   E  s  p  e  c   i  a

   l   i  s   t  a

www.mgp-peru.com Area Diseño y Desarrollo de Aplicaciones Web y Moviles

3

Los temas incluyen:

Diseños y nuevas tendencias en la web moderna

Creación de bocetos modernos, cuerpos simples y multicuerposDreamweaver CS5.5 y HTML5En desarrollo para dispositivos móviles y las tabletsMejor comprensión etiquetas estructuralesCrear un diseño de página de baseMaquetando directamente con HMTL5La aplicación de efectos CSS3 tipoLa creación de estilosHTML5 Hacer compatible con navegadores antiguosTrabajar con la opacidadConstrucción de las transiciones con CSS

Activación de las transiciones con gestosAnimación con fotogramas claveUso de fuentes personalizadasOrientación de los dispositivos y orientacionesViendo las imágenesEl juego y el control de audioReproducción de vídeoLa generación de contenido dinámicoUso de geolocalizaciónEfectos especiales y animación JQUERYManejo de redes sociales (Facebook, Twitter, Youtube, Blog)

Manejo de campañas en redes socialesOptimización de páginas web para los buscadoresSubmisión de páginas a los principales buscadores y directoriosPromoción y marketing online

Introducción al Curso

Page 6: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 6/25

Plan de EstudiosCreación de Diseño para Web

Fireworks CS5.5

Page 7: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 7/25

Fundamentos de Fireworks CS5.5

Conociendo la plataforma del FireworksAbriendo nuestro lienzo para crear un boceto webUso de las guías y reglasAjustando tamaños adecuados de acuerdos a los estándaresEstableciendo medidas de cabecera, menú, cuerpo, pie-pagina

Dibujo básico para maquetarCreando la primera maquetación de cuerpo simpleTraslado de elementos al DreamweaverMaquetación de dos o más cuerposMaquetación de columnasTrabajando con espacios entre cuerpos o espacios.Ejemplos prácticos

 

Dibujo con Fireworks CS5.5

Técnicas de dibujo.

Combinar Objetos (Unir, Recortar, Intersectar)Creación de Isotipos, LogotiposTrabajar con TipografíasDibujo a mano libre con la plumaCreación de una marca y/o logotipoMaquetando diseños modernos no clasicosEjemplos prácticos

Diseño Barras de navegación y Menús Desplegables

Barras de navegación clásicas.

Barras de navegación minimalistas.Barras de navegación moderna y artísticaAplicación de degradados, colores de relleno y bordes personalizadosDiseño de menús desplegablesFormas de menús desplegablesExportación de imágenes con estados rolloversEjemplos prácticos

 Diseño Contenidos, títulos, marcos y adornos

Formas correctas de creación de contenidos

Diagramando columnas, cajas

   M  a  s   t  e  r  e  n   H   T   M   L   5 ,

   C   S   S   3 ,

   J   Q

  u  e  r  y ,

   S  o  c   i  a   l    M  e   d   i  a  y   S

   E   O    C

  o  n  s  u   l   t  o  r   E  s  p  e  c   i  a

   l   i  s   t  a

www.mgp-peru.com Area Diseño y Desarrollo de Aplicaciones Web y Moviles

5

Maquetación con Adobe Fireworks CS5.5

Page 8: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 8/25

   M  a  s   t  e  r  e  n   H   T   M   L   5 ,

   C   S   S   3 ,

   J   Q

  u  e  r  y ,

   S  o  c   i  a   l    M  e   d   i  a  y   S

   E   O    C

  o  n  s  u   l   t  o  r   E  s  p  e  c   i  a

   l   i  s   t  a

www.mgp-peru.com Area Diseño y Desarrollo de Aplicaciones Web y Moviles

6

Maquetación con Adobe Fireworks CS5.5

Visores de videosDiseñando galería de imágenesEjemplos prácticos

Manejo de Imágenes y creación de banners

Edición de imágenes (cortar, copiar, borrar)Calidad de imágenes (color, niveles)Efectos de imagen con máscara de capasCreación de fondos de webEjemplos prácticos

Diseñar formularios

Diseñar elementos de formulariosDiseñar Cajas de textosDiseñar Botones enviar y borrarExportación de imágenesEjemplos prácticos

Page 9: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 9/25

Plan de EstudiosHojas de Estilo en Cascada

CSS3

Page 10: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 10/25

   M  a  s   t  e  r  e  n   H   T   M   L   5 ,

   C   S   S   3 ,

   J   Q

  u  e  r  y ,

   S  o  c   i  a   l    M  e   d   i  a  y   S

   E   O    C

  o  n  s  u   l   t  o  r   E  s  p  e  c   i  a

   l   i  s   t  a

www.mgp-peru.com Area Diseño y Desarrollo de Aplicaciones Web y Moviles

7

Hoja de Estilos en Cascada 3 (CSS3)

Fundamentos de CSS3

La base selectores CSS

Añadir estilos a una etiqueta HTMLAñadir estilos a una página webCreación de una hoja de estilos externaVinculación a una hoja de estiloImportación de una hoja de estilosDenición de etiquetas HTMLDenición de clases reutilizablesDenición de identicadores únicosDenición de estilos universalesAgrupando elementos que denen el mismo estiloAgregar comentarios a CSS

Estilo selectivo

El árbol de familia de elementosDenición de estilos en función del contextoEstilo descendientesEstilo sólo a los hijosEstilo de los hermanosTrabajar con pseudo-clasesEstilo de los enlacesEstilo de interacción

  CSS3: Estilo especíco pseudo-clases con los hijos  CSS3: No estilos a un elemento

Trabajar con los pseudo-elementosTrabajar con las primeras letras y líneasOpciones de conguración antes y después de un elementoDenición de estilos basados en atributos de las etiquetas

  CSS3: Consulta en diferentes MediosLos consulta de medios de comunicaciónUsando la reglas para diferentes mediosLa herencia de las propiedades de sus padresGestión de valores de las propiedades existentes o heredados

Hacer una declaración! ImportanteLa determinación de la Orden de la cascada

Propiedades de fuente

Entender la tipografía en la webEspecicar el conjunto de caracteresLas familias genéricas de fuentesSímbolosHTML entidades de caracteresConguración de una fuente-Stack 

Encontrar fuentesSeguros para la Web de fuentes

Page 11: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 11/25

   M  a  s   t  e  r  e  n   H   T   M   L   5 ,

   C   S   S   3 ,

   J   Q

  u  e  r  y ,

   S  o  c   i  a   l    M  e   d   i  a  y   S

   E   O    C

  o  n  s  u   l   t  o  r   E  s  p  e  c   i  a

   l   i  s   t  a

www.mgp-peru.com Area Diseño y Desarrollo de Aplicaciones Web y Moviles

8

Hoja de Estilos en Cascada 3 (CSS3)

WebFonts descargableAjuste del tamaño de la fuente

  CSS3: ajustar el tamaño de fuenteHacer texto en cursivaEstablecer Bold, Bolder, Boldest.

La creación de Small CapsEstablecimiento de valores para múltiples fuentes

Propiedades del texto

Ajustar el espaciado del textoAjuste del espacio entre letras (tracking)Ajuste el espacio entre las palabrasAjuste el espacio interlineado de texto

  CSS3: Agregar sombras a los textosAlinear texto horizontalmenteAlinear texto verticalmenteSangría de los párrafosEl control de los espacios en blancoTexto de decoración

Color y Propiedades de fondos

Cambiando de los valores de colorPalabras clave de coloresValores RGB hexadecimalesValores RGB decimalesValores en porcentaje

  CSS3: valores HSL  CSS3: Valores de Color con alfa

CSS3: Colores de fondos DegradadosDegradados en Internet ExplorerDegradados en MozillaDegradados en WebkitElección de la paleta de coloresColores básicos del círculoHerramientas en línea del esquema de color

Conguración del color del textoEstablecimiento de un color de fondoEstablecer una imagen de fondo

Lista y Propiedades de la tabla

Establecer el estilo de viñetaCreación de una viñeta personalizadaAjuste de posiciones de las viñetasConguración de múltiples estilos de listasAjuste del diseño de la tabla

Ajuste del espacio entre las celdas

Page 12: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 12/25

   M  a  s   t  e  r  e  n   H   T   M   L   5 ,

   C   S   S   3 ,

   J   Q

  u  e  r  y ,

   S  o  c   i  a   l    M  e   d   i  a  y   S

   E   O    C

  o  n  s  u   l   t  o  r   E  s  p  e  c   i  a

   l   i  s   t  a

www.mgp-peru.com Area Diseño y Desarrollo de Aplicaciones Web y Moviles

9

Hoja de Estilos en Cascada 3 (CSS3)El colapso de las bordes entre las celdasTratar con celdas de tabla vacíasAjuste de la posición de leyenda de las tablas

Interfaz de usuario y generar propiedades de contenido

Cambiar la apariencia del puntero del ratónAdición de contenido mediante CSSLa enseñanza del navegador con el contadorEspecicando el estilo de cita

Propiedades de las cajas

Comprensión de un elemento cajaPartes de la cajaViendo un elementoAjuste el ancho y alto de un elementoControl de contenidos de desbordamientoElementos otantes en la ventanaEliminación de un elemento otanteCómo ajustar los márgenes de un elementoEsquema de conguración de un elementoConguración borde de un elemento

  CSS3: Trabajar con Bordes Redondeados  CSS3: Conguración de una imagen en los bordes

Establecer relleno de un elemento

Cambiando Propiedades Visuales

Descripción de una ventana y un documentoAjuste del tipo de posicionamientoPosición estáticaPosición relativaPosición absolutoPosición joAjuste de posición de un elementoApilamiento de objetos en 3DConguración de la visibilidad de un elemento

Recorte de área visible de un elementoCSS3: Congurando la opacidad de un elementoCSS3: Congurando la sombra de un elemento

Propiedades de transformación y transición

CSS3: La transformación de un elementoTransformaciones en 2DTransformaciones 3DCSS3: Cómo añadir transiciones entre estado de elementoQué se puede hacer con la transición

Page 13: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 13/25

   M  a  s   t  e  r  e  n   H   T   M   L   5 ,

   C   S   S   3 ,

   J   Q

  u  e  r  y ,

   S  o  c   i  a   l    M  e   d   i  a  y   S

   E   O    C

  o  n  s  u   l   t  o  r   E  s  p  e  c   i  a

   l   i  s   t  a

www.mgp-peru.com Area Diseño y Desarrollo de Aplicaciones Web y Moviles

10

Fijación CSS

Ajuste de CSS para Internet ExplorerIE condicional CSSLa jación de los de Internet Explorer en el modelo de cajaRestablecimiento de CSSReajuste simple de un CSSReajuste CSS YUI2Restablecer CSS según Eric Meyer

Técnicas esenciales de CSS

La creación de varias columnas con diseños de otantesEnlaces estilo Versus navegaciónUsando CSS SpritesCreación menú desplegable con CSS

Gestión de las Hojas de Estilo

Creación de hojas de estilo legibleIncluir una introducción y TOCDenir los colores, fuentes y otras constantesUso de la sección encabezadosElegir un esquema de organizaciónUsar la especicidad de jerarquíaLas bibliotecas CSS y FrameworksEl método agregadoEl método dinámicoSolución de problemas Código CSSDepuración de CSS en Firebug y Web InspectorFirebug para FirefoxInspector web en Safari y ChromeValidar su código CSS

Hoja de Estilos en Cascada 3 (CSS3)

Page 14: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 14/25

Plan de EstudiosMaquetación Web Estandar

HMTL 5

Page 15: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 15/25

   M  a  s   t  e  r  e  n   H   T   M   L   5 ,

   C   S   S   3 ,

   J   Q

  u  e  r  y ,

   S  o  c   i  a   l    M  e   d   i  a  y   S

   E   O    C

  o  n  s  u   l   t  o  r   E  s  p  e  c   i  a

   l   i  s   t  a

www.mgp-peru.com Area Diseño y Desarrollo de Aplicaciones Web y Moviles

12

Introducción

Htmly Css3: Historia, Presente Y Futuro De Las Paginas Web

Instalación De Navegadores Y HerramientasInstalación de Mozilla FirefoxInstalación de Google ChromeInstalación de OperaInstalación de Apple SafariInstalación de Gedit y Notepad

Estructura Y Semántica De Una Web En Html5

Estructura

DoctypeHeader y FooterNavArticle, Section y Aside

SemánticaWord Break TimeRubyMicrodatos

Trabajo Fuera De LíneaApp caché ManiestoActivar el contenido editable

Multimedia

VídeoMúltiples fuentesAudioMúltiples formatos

Parámetros adicionales

Grácos En Html5

CanvasContenedor y JavaScript asociadoCreación de trazadosCreación de círculosDegradados

SvgGrácos vectoriales con SVG

Algunas instrucciones de SVG

Maquetación Estandar en HTML5

Page 16: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 16/25

   M  a  s   t  e  r  e  n   H   T   M   L   5 ,

   C   S   S   3 ,

   J   Q

  u  e  r  y ,

   S  o  c   i  a   l    M  e   d   i  a  y   S

   E   O    C

  o  n  s  u   l   t  o  r   E  s  p  e  c   i  a

   l   i  s   t  a

www.mgp-peru.com Area Diseño y Desarrollo de Aplicaciones Web y Moviles

13

Insertar código externo

Nuevos Tipos De Formularios

Campos requeridosCampos inválidosDateSlidersColorValor numérico

HMTL5 Y CSS3

BordesBorder RadiusCompatibilidad con FirefoxMúltiples radios en las esquinasShadow

FondosTamañoOrigenFondos Múltiples

Efectos De TextoSombraWord-wrapping

Fuentes

Conguración de fuentes personalizadasTransformaciones

Transformación de posiciónTransformación de rotaciónTransformación de escalaTransformación de distorsión

TransicionesPrimera transiciónVarios elementos simultáneos

AnimacionesPrimera animación

Múltiples fotogramas claveAnimación de posición

Columnas MúltiplesCreación de múltiples columnasSeparación entre columnasLínea separadoraInserción de imágenes

ColorColores predeterminadosTransparencia

Caso Práctico Del Curso: Diseñar Una Web Personal

Maquetación Estandar en HTML5

Page 17: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 17/25

   M  a  s   t  e  r  e  n   H   T   M   L   5 ,

   C   S   S   3 ,

   J   Q

  u  e  r  y ,

   S  o  c   i  a   l    M  e   d   i  a  y   S

   E   O    C

  o  n  s  u   l   t  o  r   E  s  p  e  c   i  a

   l   i  s   t  a

www.mgp-peru.com Area Diseño y Desarrollo de Aplicaciones Web y Moviles

14

IntroducciónObjetivo de una web personalPrejos de compatibilidad con navegadores

PlanteamientoConguración del espacio de trabajoCreación de la estructura de archivos

EstructuraEsqueleto estructuralTruco Auto-refreshTítulo y metaetiquetasEtiquetas estructuralesEsbozo de contenido en el HeaderContenido inicial del Body y el FooterCambio de UTF a ISOAyudas para la estructuración con DIV

Añadido de contenido a la página índexSemántica

Marcado de tiempo con TimePreparación para microdatos: fotografíaAñadido de microdatosAñadido de microformatos: Tarjeta de visita virtual

MultimediaPreparación de archivos para su inclusiónInclusión de vídeoInclusión de audioPreload de audio y de vídeo

Contenido OineGuardado permanente de información en el servidorGuardado de información de sesión

Grácos Y EfectosIcono de navegación: canvasJavaScript asociadoTrucos de automatizaciónIcono de contactoIcono de inicioIcono de noticiasAñadir un logo con SVG

MaquetaciónCreación de una hoja de estilo externaUsar fuentes personalizadasMaquetación principalMaquetando Header y FooterMaquetando el bloque principal

Creando Un Estilo VisualEstilizando el HeaderEstilizando el Footer y el contenidoTítulo de la web 02:53Creación de un menú de navegaciónEstilización de canvasMaquetando artículos y aumento de compatibilidad con Firefox y

Maquetación Estandar en HTML5

Page 18: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 18/25

   M  a  s   t  e  r  e  n   H   T   M   L   5 ,

   C   S   S   3 ,

   J   Q

  u  e  r  y ,

   S  o  c   i  a   l    M  e   d   i  a  y   S

   E   O    C

  o  n  s  u   l   t  o  r   E  s  p  e  c   i  a

   l   i  s   t  a

www.mgp-peru.com Area Diseño y Desarrollo de Aplicaciones Web y Moviles

15

OperaMaquetando fechasMaquetando el contenido tangencialMaquetación del DIV "sobre mí"Logotipos para los artículos

Transiciones, Animaciones Y EfectosTransiciones de opacidad y sombra de cajaTransición de escalaTransición de colorAnimaciónMúltiples fondos y transparenciasSombra en el textoCreación de un maniesto

Diseño De Formularios Con Html5 Y Css3

Duplicación de index.htmlFormulario de contactoNombre e e-mailÁrea de texto y propiedades HTML5Estilizado con elementos HTML5Estilizado del formularioTransparenciasCreación del archivo PHPConguración de las variablesEnviar el mail con PHP

Caso Práctico : Crear Web Empresarial con AnimacionesEstructura

Creación del índex y estructuraFormulario de entradaEstructura de la sección principal y el FooterContenido de la sección principal y el Footer

Estilo De La CabeceraEstilo para el bloque principalFuentes personalizadas

Inserción del logotipo vectorialMaquetación del logotipoMaquetación del formularioAnimación del logotipoRenado de la animaciónAnimación del enlace al registroTransiciones en los formularios

Creación De Un Banner Animado Sólo Con Css3Animación de cierre del bannerCreación de un fondo animadoTextos animadosRetoques en los tamaños de los objetos

Maquetación Estandar en HTML5

Page 19: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 19/25

   M  a  s   t  e  r  e  n   H   T   M   L   5 ,

   C   S   S   3 ,

   J   Q

  u  e  r  y ,

   S  o  c   i  a   l    M  e   d   i  a  y   S

   E   O    C

  o  n  s  u   l   t  o  r   E  s  p  e  c   i  a

   l   i  s   t  a

www.mgp-peru.com Area Diseño y Desarrollo de Aplicaciones Web y Moviles

16

Estilizado De Las TablasEstilizado de tablasEfectos adicionales en la tablaEstilizado del FooterTransiciones en las etiquetasPruebas en columnas

Caso Práctico Del Curso: Integración De Aplicaciones Web 2.0

Deniendo Material de partidaFusión de las dos ramas del proyecto

Integración Del IndexExternalización del CSSSelección de los archivos de igual funciónAdaptación del formulario de usuarioIntegración del enlace a nuevo usuarioInserción del código PHP en la maquetación HTMLIntegración de la tabla de resultadosActualización del fondo del banner

Integración De La Página PrincipalObjetivoFusión del archivo html con el archivo phpCreación de elementos de sesión: saludo por usuarioCreación de elementos de sesión: cierre de sesiónInserción del código PHP en la maquetación HTML

Cambio de formato de la tabla principalInclusión de enlaces para actualizar y eliminar registrosTransformación de la tabla de favoritos propuestosAyuda visual para diferenciar las etiquetasUsando el formulario de tipo range

Ejercicios Varios HTML5 Y CSS3

Aplicar Acordeón A Una Web Con Html5Estructura básica en htmlInserción de contenido mixto

Estilo del body y el contenedorEstilizado de elementos de textoEstilizado de elementos visualesAñadido de títulos a los artículosCreación del acordeón animado

Creación De Una Galería Con Lightbox Puro Hmtl5Creación de la estructura y las seccionesContenido en las seccionesEstilo del body y de la secciónEstilo del texto, la imagen y el vídeo

Montaje del contenido encima de los botonesOpacidadAnimación

Maquetación Estandar en HTML5

Page 20: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 20/25

Plan de EstudiosSocial Media Manager

SEO Consulto Especialista

Page 21: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 21/25

   M  a  s   t  e  r  e  n   H   T   M   L   5 ,

   C   S   S   3 ,

   J   Q

  u  e  r  y ,

   S  o  c   i  a   l    M  e   d   i  a  y   S

   E   O    C

  o  n  s  u   l   t  o  r   E  s  p  e  c   i  a

   l   i  s   t  a

www.mgp-peru.com Area Diseño y Desarrollo de Aplicaciones Web y Moviles

18

Introducción

PresentaciónConceptos Básicos

Investigación y estrategia: Palabras Claves

Análisis competitivo de las palabras clavesLista palabras claves por frasesLista palabras claves por URLLista de palabras claves por fraseLista de CompetidoresRelación palabras claves y páginas webEjemplo obtención palabras claves

Evaluación completa de páginas SEO

Estructura semánticaUso del plugin Web Developer ToolsContenidos de nuestras páginas webTécnica para escribir contenidosCódigo HTMLCódigo de tablasUso indebido de tablas anidadas: TeoríaUso indebido de tablas anidadas: Práctica

Tiempo de bajada una página webUso del atributo NofollowAntigüedad del dominioGoogle Page Rank Tráco en AlexaDirectorio DMOZDensidad de palabras clavesValidación del código HTMLValidación del código CSSValidación webMeta Robots NOINDEX, NOFOLLOWNombre de los archivos HTMLEvaluación de combinación de palabras clave

Optimización de nuestras páginas SEO

IntroducciónTituloMetatagsMeta descriptionMeta keywordsAtributo AltContenidos de nuestras páginas SEOPáginas indexadas

Publicación, Posicionamiento, Promoción, Marketing Online y Web 2.0

Page 22: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 22/25

   M  a  s   t  e  r  e  n   H   T   M   L   5 ,

   C   S   S   3 ,

   J   Q

  u  e  r  y ,

   S  o  c   i  a   l    M  e   d   i  a  y   S

   E   O    C

  o  n  s  u   l   t  o  r   E  s  p  e  c   i  a

   l   i  s   t  a

www.mgp-peru.com Area Diseño y Desarrollo de Aplicaciones Web y Moviles

19

Popularidad de Enlaces 1Popularidad de Enlaces 2Popularidad de Enlaces 3Enlaces internosEnlaces internos y externos: varias lenguas

Mapa del sitio web

Promocionando nuestra web

IntroducciónSumisión GoogleSumisión otros buscadoresSumisión a directorios: Yahoo y DMOZSumisión a otros directoriosPrograma de aliadosModelo HTML para intercambiar enlacesIntercambio de enlacesTécnicas para el intercambio de enlacesCreación de blogPromoción en un blogPromoción en un foroFirma en los forosPublicación de artículosTécnicas para escribir artículosComunicados de prensa

Informes de seguimientos y mejoras

IntroducciónCreación cuenta GoogleDensidad de Palabras ClavesArchivo robots.txtCreación Google SitemapCreación Google analíticasReglas de oro seguimiento SEODirectrices para webmasterExtensiones SEO para FirefoxGoogle Trends

Google Sitemap

IntroducciónAñadir el sitemapEl interfaz de Google sitemapDiagnóstico del sitemapEstadísticas Google sitemapEnlaces detectados por Google SitemapInformación acerca de mi sitemapHerramientas para webmaster

Publicación, Posicionamiento, Promoción, Marketing Online y Web 2.0

Page 23: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 23/25

   M  a  s   t  e  r  e  n   H   T   M   L   5 ,

   C   S   S   3 ,

   J   Q

  u  e  r  y ,

   S  o  c   i  a   l    M  e   d   i  a  y   S

   E   O    C

  o  n  s  u   l   t  o  r   E  s  p  e  c   i  a

   l   i  s   t  a

www.mgp-peru.com Area Diseño y Desarrollo de Aplicaciones Web y Moviles

20

Google Analíticas

IntroducciónCreando una cuenta de analíticasPanel de analíticasUsuariosTrácoPáginas de destino y abandono

Trucos

Extensiones SEO QuakeFlash y la araña de búsqueda 1Flash y la araña de búsqueda 2Redirección 301 y página no encontrada 404

Redes sociales

IntroducciónCreación de cuenta en twitterCreación de BlogPersonalizar y crear entradas al blogCreación de Canal YoutubeCrear videos institucionales con sistema animoto

Google AdwordsIntroducciónCreación de cuenta en google adwordsPreparando el Landing Page para el google adwordsCreando nuestra primera campaña en google adwordsEvaluación de la campaña

Marketing On-Line One to One

Introducción

Inscripción a sistemas de envíos de boletines informativosCreación de lista de suscriptoresSubir listas de suscriptoresCrear un boletín informativo en Dreamweaver CS5.5 y CSS3Enviar boletines informativosReporte de nuestra campaña informativa

Publicación, Posicionamiento, Promoción, Marketing Online y Web 2.0

Page 24: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 24/25

   M  a  s   t  e  r  e  n   H   T   M   L   5 ,

   C   S   S   3 ,

   J   Q

  u  e  r  y ,

   S  o  c   i  a   l    M  e   d   i  a  y   S

   E   O    C

  o  n  s  u   l   t  o  r   E  s  p  e  c   i  a

   l   i  s   t  a

www.mgp-peru.com Area Diseño y Desarrollo de Aplicaciones Web y Moviles

21

Social Media Manager

Cómo obtener clientes en eventos localesCómo encontrar a tus primeros clientesCómo Vender Servicios a Empresas LocalesCómo Buscar Negocios LocalesCómo hacer branding personalCómo consultar ayuda sobre el tema de las redes socialesCómo hacer encuestas con las empresasCómo gestionar Facebook y YouTube semanalmenteCómo hacer planicación de vídeo marketingCómo Monitorizar la Reputación de la EmpresaCómo reservar nombres de usuarios para la empresaCómo crear presupuestos para dar servicio de social media

Facebook para Negocios

Introducción a las páginas de Facebook Cómo crear una página en Facebook Cómo personalizar la página de Facebook Cómo promocionar tu página de Facebook Cómo analizar las estadísticas de la página de Facebook Cómo analizar las estadísticas de la página de Facebook – parte IICómo generar tráco con el botón de me gustaCómo posicionar tu contenido en la página de inicio de Facebook 

Cómo expandir tu network comercial en Facebook Cómo promocionar tus eventos en Facebook 

YouTube para Negocios

Cómo utilizar YouTube para promocionar y mejorar la presencia de tuempresa en Internet.Cómo subir y optimizar los vídeos en YouTube de forma correcta y ecaz.Cómo combinar la aplicación de vídeo marketing con Social Media Marke-ting, a través de estrategias ecaces que implican compartir tus vídeos através de diversos canales como: Facebook, Twitter y en tu blog.

Cómo realizar la búsqueda de las palabras clave correctas para tu sector demercado de manera que las puedas utilizar de forma ecaz en relación contu vídeo.Técnicas avanzadas para aumentar el tráco de tus vídeos utilizando diferen-tes funcionalidades de YouTube.Ejemplos empresariales de éxito sobre cómo potenciar el uso de YouTube endiferentes sectores cómo turismo, pymes y para branding personal.Cómo analizar los resultados obtenidos con YouTube marketing e interpretarlas estadisticas que proporciona YouTube.Cómo sacar partido del editor de vídeo que proporciona YouTube.

Publicación, Posicionamiento, Promoción, Marketing Online y Web 2.0

Page 25: html5-css3

5/12/2018 html5-css3 - slidepdf.com

http://slidepdf.com/reader/full/html5-css3-55a4d4fa0db30 25/25

MGP Nuevas ArtesCentro Especializado en Diseño y Desarrollo Web

Av. Conquistadores 146 San IsidroLima - Perú

 Teléfonos: (511) 652.2242 / (511) 99.4126838 www.mgp-peru.com

[email protected]

Curricula Propuesta por

 www.cursos-paginas-web.comLima - Perú

 Teléfonos: (511) 99.3654170 / (511) 99.4011937