SlideShare uma empresa Scribd logo
1 de 15
Baixar para ler offline
Curso de Desarrollo Web

                                ¡Bienvenidos!
                                 Noviembre, 2012
domingo, 9 de diciembre de 12
Acerca de mí



                                Juan Manuel Padilla Carmona
                                Ingeniero en sistemas Computacionales
                                UNIVAC
                                Maestro en Redes de Computadoras y
                                Tecnologías Web
                                UNINTER
                                Líder de Proyectos
                                ROC




            @mannuelpadillac    Manuel Padilla           /manuelpadillac

domingo, 9 de diciembre de 12
Curso de Desarrollo Web




domingo, 9 de diciembre de 12
Curso de Desarrollo Web




                                How To Meet Ladies


domingo, 9 de diciembre de 12
<h1>Agenda</h1>




       <ol class=”agendaHTML”>
           <li>Introducción</li>
           <li>El presente es HTML5</li>
           <li>Navegadores y Herramientas</li>
           <li>Elementos y Atributos</li>
           <li>Formularios</li>
           <li>Multimedia</li>
       </ol>




domingo, 9 de diciembre de 12
<h1>Introducción</h1>




       <h2>¿Qué             es HTML</h2>

       <p>HTML, siglas de HyperText Markup Language («lenguaje de
       marcado de hipertexto»), hace referencia al lenguaje de marcado
       predominante para la elaboración de páginas web que se utiliza para
       describir y traducir la estructura y la información en forma de texto...
       HTML se escribe en forma de «etiquetas», rodeadas por corchetes
       angulares (<,>)... puede incluir un script (por ejemplo JavaScript), el cual
       puede afectar el comportamiento de navegadores web y otros
       procesadores de HTML.</p>

                                 <span class=”fuenteDefinicion”> Wikipedia </span>


domingo, 9 de diciembre de 12
<h1>Introducción</h1>




       <h2>¿Qué             me ofrece HTML5?</h2>

       <ul class=”HTML5Oferta”>
           <li>Una mejor plataforma de desarrollo web.</li>
           <li>Más demarcado descriptivo.</li>
           <li>Multimedia con menos Plug-ins.</li>
           <li>Mejores Aplicaciones.</li>
           <li>Mejores interfaces.</li>
           <li>Mejores formularios.</li>
           <li>Almacenamiento del lado del cliente.</li>
           <li>Accesibilidad Mejorada</li>
           <li>Y muchas otras cosas buenas más</li>
       </ul>

domingo, 9 de diciembre de 12
<h1>Introducción</h1>


       <h2>La Tecnología</h2>




domingo, 9 de diciembre de 12
<h1>El   presente es HTML5</h1>



       <h2>HTML5</h2>

       <p>Las grandes empresas, las mejores páginas y aplicaciones web hoy
       en día son desarrolladas en HTML5; algunos ejemplos de ello son</p>

       <ul class=”ejemplosHTML5”>
           <li>www.brandongenerator.com/</li>
           <li>www.astrid.com/</li>
           <li>www.twitter.com/</li>
           <li>www.decoracionpdi.com/</li>
           <li>www.woodlandsrealtypros.com/</li>
       </ul>


domingo, 9 de diciembre de 12
<h1>Navegadores y
                                          Herramientas</h1>


       <h2>Navegadores</h2>




          Maxthon               Chrome              Opera




              Safari            Firefox        Internet Esplorer
domingo, 9 de diciembre de 12
<h1>Navegadores y
                                                 Herramientas</h1>


       <h2>Herramientas</h2>

       <ul class=”herramientasDesarrollo”>
           <li>Editor de Código</li>
           <li>Editor de Imágenes</li>
           <li>Navegadores Web</li>
           <li>Extensiones de Navegadores</li>
       </ul>




domingo, 9 de diciembre de 12
<h1>Elementos   y Atributos</h1>



       <h2>Etiquetas            Descontinuadas</h2>
       <ul class=”etiquetasDescontinudas”>
           <li>basefont</li>
           <li>big</li>
           <li>center</li>
           <li>font</li>
           <li>s</li>
           <li>strike</li>
           <li>u</li>
           <li>y muchas otras más</li>
       </ul>



domingo, 9 de diciembre de 12
<h1>Elementos    y Atributos</h1>



       <h2>Todo             comienza con un DOCTYPE</h2>
       Antes de HTML5

       <!DOCTYPE html PUBLIC “-//W3C//DTD 1.0 Transitional//EN” “http://
       www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>


       En HTML5

                                <!DOCTYPE html>

domingo, 9 de diciembre de 12
<h1>Elementos   y Atributos</h1>


       <h2>Nuevas               etiquetas estructurales</h2>
       <header>
       Define una cabecera en una página o sección.

       <footer>
       Define un pie de pagina o sección..

       <nav>
       Define una región de navegación en una pagina o sección.

       <section>
       Define una región lógica para agrupar contenido.

       <article>
       Define un articulo o una pieza completa de contenido.

domingo, 9 de diciembre de 12
Let´s play a game
domingo, 9 de diciembre de 12

Mais conteúdo relacionado

Destaque

HTML5, CSS3, Responsive Design
HTML5, CSS3, Responsive DesignHTML5, CSS3, Responsive Design
HTML5, CSS3, Responsive DesignManuel Padilla
 
Historia de la Computadora
Historia de la ComputadoraHistoria de la Computadora
Historia de la ComputadoraManuel Padilla
 
Responsive Design, Introducción
Responsive Design, IntroducciónResponsive Design, Introducción
Responsive Design, IntroducciónManuel Padilla
 
E-commerce - Elementos básicos de una tienda en línea
E-commerce - Elementos básicos de una tienda en líneaE-commerce - Elementos básicos de una tienda en línea
E-commerce - Elementos básicos de una tienda en líneaManuel Padilla
 

Destaque (6)

HTML5, CSS3, Responsive Design
HTML5, CSS3, Responsive DesignHTML5, CSS3, Responsive Design
HTML5, CSS3, Responsive Design
 
Historia de la Computadora
Historia de la ComputadoraHistoria de la Computadora
Historia de la Computadora
 
Software hardware
Software hardwareSoftware hardware
Software hardware
 
CSS, Introducción
CSS, IntroducciónCSS, Introducción
CSS, Introducción
 
Responsive Design, Introducción
Responsive Design, IntroducciónResponsive Design, Introducción
Responsive Design, Introducción
 
E-commerce - Elementos básicos de una tienda en línea
E-commerce - Elementos básicos de una tienda en líneaE-commerce - Elementos básicos de una tienda en línea
E-commerce - Elementos básicos de una tienda en línea
 

Semelhante a HTML5, Introducción

Taller de drupal7
Taller de drupal7Taller de drupal7
Taller de drupal7Rojomorgan
 
Open Source en los municipios
Open Source en los municipiosOpen Source en los municipios
Open Source en los municipiosDaniel Vak
 
Drupal in a day - SeeD
Drupal in a day - SeeDDrupal in a day - SeeD
Drupal in a day - SeeDseedcolombia
 
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)wandelsonwww
 
Curso Drupal 7 SiteBuilding parte 2
Curso Drupal 7 SiteBuilding parte 2Curso Drupal 7 SiteBuilding parte 2
Curso Drupal 7 SiteBuilding parte 2Alessandro Mascherpa
 
Introducción a Etiquetas HTML 5
Introducción a Etiquetas HTML 5Introducción a Etiquetas HTML 5
Introducción a Etiquetas HTML 5Joaquin Lara Sierra
 
Introducción a HTML5 para todos los públicos (UTAD, june 2013)
Introducción a HTML5 para todos los públicos (UTAD, june 2013)Introducción a HTML5 para todos los públicos (UTAD, june 2013)
Introducción a HTML5 para todos los públicos (UTAD, june 2013)Efraim Martinez
 
Trabajo no. 3 herramientas telematicas
Trabajo no. 3 herramientas telematicasTrabajo no. 3 herramientas telematicas
Trabajo no. 3 herramientas telematicas100867
 
Introduccion a j query
Introduccion a j queryIntroduccion a j query
Introduccion a j queryPablo Viteri
 
Desarrollo Web: HTML + Bootstrap
Desarrollo Web: HTML + BootstrapDesarrollo Web: HTML + Bootstrap
Desarrollo Web: HTML + BootstrapWorkshop Digital
 
Html5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoyHtml5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoyParadigma Digital
 

Semelhante a HTML5, Introducción (20)

Taller de drupal7
Taller de drupal7Taller de drupal7
Taller de drupal7
 
Taller de drupal7
Taller de drupal7Taller de drupal7
Taller de drupal7
 
Open Source en los municipios
Open Source en los municipiosOpen Source en los municipios
Open Source en los municipios
 
Aplicacionesweb1
Aplicacionesweb1Aplicacionesweb1
Aplicacionesweb1
 
Drupal in a day - SeeD
Drupal in a day - SeeDDrupal in a day - SeeD
Drupal in a day - SeeD
 
Taller de Drupal 1
Taller de Drupal 1Taller de Drupal 1
Taller de Drupal 1
 
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
440 material impreso uc059-3 desarrollo de pagina web y recursos multimedia (1)
 
Curso Drupal 7 SiteBuilding parte 2
Curso Drupal 7 SiteBuilding parte 2Curso Drupal 7 SiteBuilding parte 2
Curso Drupal 7 SiteBuilding parte 2
 
Introducción a Etiquetas HTML 5
Introducción a Etiquetas HTML 5Introducción a Etiquetas HTML 5
Introducción a Etiquetas HTML 5
 
Drupal Sitebuilding 101
Drupal Sitebuilding 101Drupal Sitebuilding 101
Drupal Sitebuilding 101
 
Maquetación web con html5
Maquetación web con html5Maquetación web con html5
Maquetación web con html5
 
Introducción a HTML5 para todos los públicos (UTAD, june 2013)
Introducción a HTML5 para todos los públicos (UTAD, june 2013)Introducción a HTML5 para todos los públicos (UTAD, june 2013)
Introducción a HTML5 para todos los públicos (UTAD, june 2013)
 
Html5
Html5Html5
Html5
 
Trabajo no. 3 herramientas telematicas
Trabajo no. 3 herramientas telematicasTrabajo no. 3 herramientas telematicas
Trabajo no. 3 herramientas telematicas
 
Paredes r
Paredes rParedes r
Paredes r
 
avanttic - webinar: WebCenter Content (07-06-2017)
avanttic - webinar: WebCenter Content (07-06-2017)avanttic - webinar: WebCenter Content (07-06-2017)
avanttic - webinar: WebCenter Content (07-06-2017)
 
Introduccion a j query
Introduccion a j queryIntroduccion a j query
Introduccion a j query
 
Desarrollo Web: HTML + Bootstrap
Desarrollo Web: HTML + BootstrapDesarrollo Web: HTML + Bootstrap
Desarrollo Web: HTML + Bootstrap
 
Html5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoyHtml5 y css3: Introducción y aplicación desde hoy
Html5 y css3: Introducción y aplicación desde hoy
 
DRUPAL - caracteristicas
DRUPAL - caracteristicasDRUPAL - caracteristicas
DRUPAL - caracteristicas
 

Último

Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21mariacbr99
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estossgonzalezp1
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfAnnimoUno1
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxMiguelAtencio10
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveFagnerLisboa3
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfvladimiroflores1
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...JohnRamos830530
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanamcerpam
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxAlan779941
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITMaricarmen Sánchez Ruiz
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.FlorenciaCattelani
 

Último (11)

Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
Modulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdfModulo-Mini Cargador.................pdf
Modulo-Mini Cargador.................pdf
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
EPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial UninoveEPA-pdf resultado da prova presencial Uninove
EPA-pdf resultado da prova presencial Uninove
 
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdfRefrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
Refrigerador_Inverter_Samsung_Curso_y_Manual_de_Servicio_Español.pdf
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 

HTML5, Introducción

  • 1. Curso de Desarrollo Web ¡Bienvenidos! Noviembre, 2012 domingo, 9 de diciembre de 12
  • 2. Acerca de mí Juan Manuel Padilla Carmona Ingeniero en sistemas Computacionales UNIVAC Maestro en Redes de Computadoras y Tecnologías Web UNINTER Líder de Proyectos ROC @mannuelpadillac Manuel Padilla /manuelpadillac domingo, 9 de diciembre de 12
  • 3. Curso de Desarrollo Web domingo, 9 de diciembre de 12
  • 4. Curso de Desarrollo Web How To Meet Ladies domingo, 9 de diciembre de 12
  • 5. <h1>Agenda</h1> <ol class=”agendaHTML”> <li>Introducción</li> <li>El presente es HTML5</li> <li>Navegadores y Herramientas</li> <li>Elementos y Atributos</li> <li>Formularios</li> <li>Multimedia</li> </ol> domingo, 9 de diciembre de 12
  • 6. <h1>Introducción</h1> <h2>¿Qué es HTML</h2> <p>HTML, siglas de HyperText Markup Language («lenguaje de marcado de hipertexto»), hace referencia al lenguaje de marcado predominante para la elaboración de páginas web que se utiliza para describir y traducir la estructura y la información en forma de texto... HTML se escribe en forma de «etiquetas», rodeadas por corchetes angulares (<,>)... puede incluir un script (por ejemplo JavaScript), el cual puede afectar el comportamiento de navegadores web y otros procesadores de HTML.</p> <span class=”fuenteDefinicion”> Wikipedia </span> domingo, 9 de diciembre de 12
  • 7. <h1>Introducción</h1> <h2>¿Qué me ofrece HTML5?</h2> <ul class=”HTML5Oferta”> <li>Una mejor plataforma de desarrollo web.</li> <li>Más demarcado descriptivo.</li> <li>Multimedia con menos Plug-ins.</li> <li>Mejores Aplicaciones.</li> <li>Mejores interfaces.</li> <li>Mejores formularios.</li> <li>Almacenamiento del lado del cliente.</li> <li>Accesibilidad Mejorada</li> <li>Y muchas otras cosas buenas más</li> </ul> domingo, 9 de diciembre de 12
  • 8. <h1>Introducción</h1> <h2>La Tecnología</h2> domingo, 9 de diciembre de 12
  • 9. <h1>El presente es HTML5</h1> <h2>HTML5</h2> <p>Las grandes empresas, las mejores páginas y aplicaciones web hoy en día son desarrolladas en HTML5; algunos ejemplos de ello son</p> <ul class=”ejemplosHTML5”> <li>www.brandongenerator.com/</li> <li>www.astrid.com/</li> <li>www.twitter.com/</li> <li>www.decoracionpdi.com/</li> <li>www.woodlandsrealtypros.com/</li> </ul> domingo, 9 de diciembre de 12
  • 10. <h1>Navegadores y Herramientas</h1> <h2>Navegadores</h2> Maxthon Chrome Opera Safari Firefox Internet Esplorer domingo, 9 de diciembre de 12
  • 11. <h1>Navegadores y Herramientas</h1> <h2>Herramientas</h2> <ul class=”herramientasDesarrollo”> <li>Editor de Código</li> <li>Editor de Imágenes</li> <li>Navegadores Web</li> <li>Extensiones de Navegadores</li> </ul> domingo, 9 de diciembre de 12
  • 12. <h1>Elementos y Atributos</h1> <h2>Etiquetas Descontinuadas</h2> <ul class=”etiquetasDescontinudas”> <li>basefont</li> <li>big</li> <li>center</li> <li>font</li> <li>s</li> <li>strike</li> <li>u</li> <li>y muchas otras más</li> </ul> domingo, 9 de diciembre de 12
  • 13. <h1>Elementos y Atributos</h1> <h2>Todo comienza con un DOCTYPE</h2> Antes de HTML5 <!DOCTYPE html PUBLIC “-//W3C//DTD 1.0 Transitional//EN” “http:// www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> En HTML5 <!DOCTYPE html> domingo, 9 de diciembre de 12
  • 14. <h1>Elementos y Atributos</h1> <h2>Nuevas etiquetas estructurales</h2> <header> Define una cabecera en una página o sección. <footer> Define un pie de pagina o sección.. <nav> Define una región de navegación en una pagina o sección. <section> Define una región lógica para agrupar contenido. <article> Define un articulo o una pieza completa de contenido. domingo, 9 de diciembre de 12
  • 15. Let´s play a game domingo, 9 de diciembre de 12