SlideShare une entreprise Scribd logo
1  sur  21
Télécharger pour lire hors ligne
Curso de Desarrollo Web




martes, 11 de diciembre de 12
Curso de Desarrollo Web




martes, 11 de diciembre de 12
<h1>Agenda</h1>




       <ol class=”agendaCSS”>
           <li>Introducción</li>
           <li>Nativo y Web</li>
           <li>Ventajas y Desventajas</li>
           <li>Frameworks</li>
           <li>Etiquetas</li>
           <li>Optimización iOS</li>
           <li>jQuery Mobile</li>
       </ol>




martes, 11 de diciembre de 12
<h1>Introducción</h1>




    <h2>La Web                  Móvil</h2>

    <h3>¿En verdad existe?</h3>

    <p>La web y su contenido esta presente en cualquier dispositivo con
    acceso a internet y un navegador de buen nivel. No existe una web
    especifica para tablets o para móviles, el usuario solo quiere acceder al
    contenido de la web.</p>




martes, 11 de diciembre de 12
<h1>Introducción</h1>




    <h2>Entonces, ¿Qué          es la Web Móvil</h2>

    <p>Es un conjunto de prácticas, librerías para desarrollo, cosas que hay que
    hacer para generar un recurso de valor para los usuarios más activos.</p>




martes, 11 de diciembre de 12
<h1>Introducción</h1>




    <h2>¿Por            qué desarrollar para Móvil?</h2>

    <ul>
       <li>El móvil ahora representa un dispositivo de primordial importancia
       para los usuarios.</li>
       <li>Se puede tener un mejor enfoque del usuario.</li>
       <li>Cada día los usuarios utilizan con mayor frecuencia los teléfonos
       móviles para consumir contenido, obtener servicios.</li>
       <li>Los usuarios prefieren la comodidad de un móvil ante el uso de un
       equipo de escritorio o portátil.</li>
    </ul>




martes, 11 de diciembre de 12
<h1>Nativo   y Web</h1>


    <h2>¿Que              es una aplicación Nativa?</h2>

    <p>Una aplicación nativa es aquella que puede ser instalada en el
    dispositivo y es desarrollada utilizando un lenguaje de programación
    compatible o establecido por la plataforma en la que se desea instalar.</p>




martes, 11 de diciembre de 12
<h1>Nativo   y Web</h1>

    <h2>¿Que              es una aplicación Web?</h2>

    <p>Las aplicaciones web son sencillas de programar, se desarrollan bajo
    HTML, CSS y JavaScript principalmente. Pueden ser ejecutadas desde
    cualquier dispositivo que cuente con conexión a internet y un navegador
    web de buen nivel.</p>




martes, 11 de diciembre de 12
<h1>Nativo     y Web</h1>



    <h2>¿Nativo                 o Web?</h2>

    <p>Un gran dilema que no tiene una respuesta acertada, cada una tiene sus
    ventajas y desventajas, lo importante es tener claro para que será utilizada
    la aplicación y cuales son los objetivos que deberá cumplir.</p>




martes, 11 de diciembre de 12
<h1>Nativo   y Web</h1>




martes, 11 de diciembre de 12
<h1>Nativo   y Web</h1>



    <h2>Aplicaciones            Híbridas</h2>

    <p>Son aquellas aplicaciones que son desarrolladas como web app´s y
    posteriormente empaquetadas o compiladas para poder convertirse en
    aplicaciones nativas que el usuario podrá instalar en sus dispositivos.</p>




martes, 11 de diciembre de 12
<h1>Ventajas   y Desventajas</h1>



    <h2>Ventajas                de las Web App´s</h2>

    <ul>
       <li>Pueden ser multiplataforma.</li>
       <li>Desarrollo menos costoso.</li>
       <li>Curva de aprendizaje menor.</li>
       <li>Fácil de desarrollar y sin limitantes.</li>
       <li>Mucha información y ayuda disponible.</li>
       <li>Variadas API´s.</li>
       <li>y muchas más.</li>
    </ul>




martes, 11 de diciembre de 12
<h1>Ventajas   y Desventajas</h1>



    <h2>Desventajas             de las Web App´s</h2>

    <ul>
       <li>Pueden ser multiplataforma.</li>
       <li>Curva de aprendizaje menor.</li>
       <li>Rendimiento.</li>
       <li>Fiabilidad.</li>
       <li>Accesibilidad.</li>
       <li>y muchas más.</li>
    </ul>




martes, 11 de diciembre de 12
<h1>Frameworks</h1>




    <h2>Frameworks</h2>

    <p>Existen diversos y variados frameworks que nos facilitan el desarrollo
    de aplicaciones web, entre ellos podemos encontrar.</p>




martes, 11 de diciembre de 12
<h1>Etiquetas</h1>




    <h2>Schemas</h2>

    <h3>Mail Links</h3>
      <a href="mailto:frank@wwdcdemo.example.com">John Frank</a>

    <h3>Phone Links</h3>
      <a href="tel:1-408-555-5555">1-408-555-5555</a>

    <h3>Text Links</h3>
      <a href="sms:1-408-555-1212">New SMS Message</a>




martes, 11 de diciembre de 12
<h1>Etiquetas</h1>




    <h2>Home                Screen Icon</h2>

         <link rel="apple-touch-icon"href="icon.png" />




martes, 11 de diciembre de 12
<h1>Etiquetas</h1>


    <h2>Full          Screen</h2>

         <meta name="apple-mobile-web-app-capable" content="yes"/>




martes, 11 de diciembre de 12
<h1>Etiquetas</h1>


    <h2>Splash              Screen (iOS)</h2>

         <link rel="apple-touch- startup-image" href="startup.png" />




martes, 11 de diciembre de 12
<h1>Etiquetas</h1>


    <h2>Status              Bar (iOS)</h2>

         <meta name="apple-mobile-web-app-status-bar-style"content="black" />




martes, 11 de diciembre de 12
<h1>Etiquetas</h1>




    <h2>Inputs</h2>

    <h3>Búsquedas</h3>
      <input type=”search” />

    <h3>Teléfonos</h3>
      <input type=”tel” />

    <h3>Correo Electrónico</h3>
      <input type=”email” />




martes, 11 de diciembre de 12
Let´s play a game
martes, 11 de diciembre de 12

Contenu connexe

En vedette

HTML5, CSS3, Responsive Design
HTML5, CSS3, Responsive DesignHTML5, CSS3, Responsive Design
HTML5, CSS3, Responsive Design
Manuel Padilla
 

En vedette (9)

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
 
CSS, Introducción
CSS, IntroducciónCSS, Introducción
CSS, Introducción
 
Estudio E Commerce-IAB-2016
Estudio E Commerce-IAB-2016Estudio E Commerce-IAB-2016
Estudio E Commerce-IAB-2016
 
Responsive Design, Introducción
Responsive Design, IntroducciónResponsive Design, Introducción
Responsive Design, Introducción
 
I Estudio anual sobre eCommerce en España de IAB Spain con Elogia
I Estudio anual sobre eCommerce en España de IAB Spain con ElogiaI Estudio anual sobre eCommerce en España de IAB Spain con Elogia
I Estudio anual sobre eCommerce en España de IAB Spain con Elogia
 
eCommerce REPORT Edicion 2016 powered by VTEX
eCommerce REPORT Edicion 2016 powered by VTEXeCommerce REPORT Edicion 2016 powered by VTEX
eCommerce REPORT Edicion 2016 powered by VTEX
 
Tendencias eCommerce2015 según 90 profesionales del eCommerce
Tendencias eCommerce2015 según 90 profesionales del eCommerceTendencias eCommerce2015 según 90 profesionales del eCommerce
Tendencias eCommerce2015 según 90 profesionales del eCommerce
 
Estudio Anual de eCommerce 2016
Estudio Anual de eCommerce 2016Estudio Anual de eCommerce 2016
Estudio Anual de eCommerce 2016
 

Similaire à Web Móvil, Introducción

Trabajo 3 de herramientas telematicas pasto
Trabajo 3 de herramientas telematicas pastoTrabajo 3 de herramientas telematicas pasto
Trabajo 3 de herramientas telematicas pasto
elvia123
 
Trabajo 3 de herramientas telematicas pasto
Trabajo 3 de herramientas telematicas pastoTrabajo 3 de herramientas telematicas pasto
Trabajo 3 de herramientas telematicas pasto
elvia123
 
Herramientas telematicas
Herramientas telematicas Herramientas telematicas
Herramientas telematicas
008009
 
Trabajo 3 de herramientas telematicas
Trabajo 3 de herramientas telematicasTrabajo 3 de herramientas telematicas
Trabajo 3 de herramientas telematicas
Unad
 
Trabajo 3 de herramientas telematicas
Trabajo 3 de herramientas telematicasTrabajo 3 de herramientas telematicas
Trabajo 3 de herramientas telematicas
Unad
 

Similaire à Web Móvil, Introducción (20)

Frameworks y herramientas de desarrollo ágil para emprendedores y startups
Frameworks y herramientas de desarrollo ágil para emprendedores y startupsFrameworks y herramientas de desarrollo ágil para emprendedores y startups
Frameworks y herramientas de desarrollo ágil para emprendedores y startups
 
#2-Revelar Algunos Tesoros de Web 2,0-(Esp)-Feb07.ppt
#2-Revelar Algunos Tesoros de Web 2,0-(Esp)-Feb07.ppt#2-Revelar Algunos Tesoros de Web 2,0-(Esp)-Feb07.ppt
#2-Revelar Algunos Tesoros de Web 2,0-(Esp)-Feb07.ppt
 
Introduccion a j query
Introduccion a j queryIntroduccion a j query
Introduccion a j query
 
Aplicacionesweb1
Aplicacionesweb1Aplicacionesweb1
Aplicacionesweb1
 
Trabajo 3 de herramientas telematicas pasto
Trabajo 3 de herramientas telematicas pastoTrabajo 3 de herramientas telematicas pasto
Trabajo 3 de herramientas telematicas pasto
 
Trabajo 3 de herramientas telematicas pasto
Trabajo 3 de herramientas telematicas pastoTrabajo 3 de herramientas telematicas pasto
Trabajo 3 de herramientas telematicas pasto
 
Herramientas telematicas
Herramientas telematicas Herramientas telematicas
Herramientas telematicas
 
Trabajo 3 de herramientas telematicas
Trabajo 3 de herramientas telematicasTrabajo 3 de herramientas telematicas
Trabajo 3 de herramientas telematicas
 
Open Source en los municipios
Open Source en los municipiosOpen Source en los municipios
Open Source en los municipios
 
Trabajo 3 de herramientas telematicas
Trabajo 3 de herramientas telematicasTrabajo 3 de herramientas telematicas
Trabajo 3 de herramientas telematicas
 
Trabajo 3 de herramientas telematicas
Trabajo 3 de herramientas telematicasTrabajo 3 de herramientas telematicas
Trabajo 3 de herramientas telematicas
 
Resume de drive y slideshare
Resume de drive y slideshareResume de drive y slideshare
Resume de drive y slideshare
 
Desarrollo móvil híbrido bien entendido
Desarrollo móvil híbrido bien entendidoDesarrollo móvil híbrido bien entendido
Desarrollo móvil híbrido bien entendido
 
An introduction to Mobile Development (Spanish)
An introduction to Mobile Development (Spanish)An introduction to Mobile Development (Spanish)
An introduction to Mobile Development (Spanish)
 
Trabajo no. 3 herramientas telematicas
Trabajo no. 3 herramientas telematicasTrabajo no. 3 herramientas telematicas
Trabajo no. 3 herramientas telematicas
 
Web 2 11 1
Web 2  11 1Web 2  11 1
Web 2 11 1
 
Danilo Black Web
Danilo Black WebDanilo Black Web
Danilo Black Web
 
Tarea iv de informatica.
Tarea iv de informatica.Tarea iv de informatica.
Tarea iv de informatica.
 
Presentación sin título
Presentación sin títuloPresentación sin título
Presentación sin título
 
Presentación TICS
Presentación TICSPresentación TICS
Presentación TICS
 

Web Móvil, Introducción

  • 1. Curso de Desarrollo Web martes, 11 de diciembre de 12
  • 2. Curso de Desarrollo Web martes, 11 de diciembre de 12
  • 3. <h1>Agenda</h1> <ol class=”agendaCSS”> <li>Introducción</li> <li>Nativo y Web</li> <li>Ventajas y Desventajas</li> <li>Frameworks</li> <li>Etiquetas</li> <li>Optimización iOS</li> <li>jQuery Mobile</li> </ol> martes, 11 de diciembre de 12
  • 4. <h1>Introducción</h1> <h2>La Web Móvil</h2> <h3>¿En verdad existe?</h3> <p>La web y su contenido esta presente en cualquier dispositivo con acceso a internet y un navegador de buen nivel. No existe una web especifica para tablets o para móviles, el usuario solo quiere acceder al contenido de la web.</p> martes, 11 de diciembre de 12
  • 5. <h1>Introducción</h1> <h2>Entonces, ¿Qué es la Web Móvil</h2> <p>Es un conjunto de prácticas, librerías para desarrollo, cosas que hay que hacer para generar un recurso de valor para los usuarios más activos.</p> martes, 11 de diciembre de 12
  • 6. <h1>Introducción</h1> <h2>¿Por qué desarrollar para Móvil?</h2> <ul> <li>El móvil ahora representa un dispositivo de primordial importancia para los usuarios.</li> <li>Se puede tener un mejor enfoque del usuario.</li> <li>Cada día los usuarios utilizan con mayor frecuencia los teléfonos móviles para consumir contenido, obtener servicios.</li> <li>Los usuarios prefieren la comodidad de un móvil ante el uso de un equipo de escritorio o portátil.</li> </ul> martes, 11 de diciembre de 12
  • 7. <h1>Nativo y Web</h1> <h2>¿Que es una aplicación Nativa?</h2> <p>Una aplicación nativa es aquella que puede ser instalada en el dispositivo y es desarrollada utilizando un lenguaje de programación compatible o establecido por la plataforma en la que se desea instalar.</p> martes, 11 de diciembre de 12
  • 8. <h1>Nativo y Web</h1> <h2>¿Que es una aplicación Web?</h2> <p>Las aplicaciones web son sencillas de programar, se desarrollan bajo HTML, CSS y JavaScript principalmente. Pueden ser ejecutadas desde cualquier dispositivo que cuente con conexión a internet y un navegador web de buen nivel.</p> martes, 11 de diciembre de 12
  • 9. <h1>Nativo y Web</h1> <h2>¿Nativo o Web?</h2> <p>Un gran dilema que no tiene una respuesta acertada, cada una tiene sus ventajas y desventajas, lo importante es tener claro para que será utilizada la aplicación y cuales son los objetivos que deberá cumplir.</p> martes, 11 de diciembre de 12
  • 10. <h1>Nativo y Web</h1> martes, 11 de diciembre de 12
  • 11. <h1>Nativo y Web</h1> <h2>Aplicaciones Híbridas</h2> <p>Son aquellas aplicaciones que son desarrolladas como web app´s y posteriormente empaquetadas o compiladas para poder convertirse en aplicaciones nativas que el usuario podrá instalar en sus dispositivos.</p> martes, 11 de diciembre de 12
  • 12. <h1>Ventajas y Desventajas</h1> <h2>Ventajas de las Web App´s</h2> <ul> <li>Pueden ser multiplataforma.</li> <li>Desarrollo menos costoso.</li> <li>Curva de aprendizaje menor.</li> <li>Fácil de desarrollar y sin limitantes.</li> <li>Mucha información y ayuda disponible.</li> <li>Variadas API´s.</li> <li>y muchas más.</li> </ul> martes, 11 de diciembre de 12
  • 13. <h1>Ventajas y Desventajas</h1> <h2>Desventajas de las Web App´s</h2> <ul> <li>Pueden ser multiplataforma.</li> <li>Curva de aprendizaje menor.</li> <li>Rendimiento.</li> <li>Fiabilidad.</li> <li>Accesibilidad.</li> <li>y muchas más.</li> </ul> martes, 11 de diciembre de 12
  • 14. <h1>Frameworks</h1> <h2>Frameworks</h2> <p>Existen diversos y variados frameworks que nos facilitan el desarrollo de aplicaciones web, entre ellos podemos encontrar.</p> martes, 11 de diciembre de 12
  • 15. <h1>Etiquetas</h1> <h2>Schemas</h2> <h3>Mail Links</h3> <a href="mailto:frank@wwdcdemo.example.com">John Frank</a> <h3>Phone Links</h3> <a href="tel:1-408-555-5555">1-408-555-5555</a> <h3>Text Links</h3> <a href="sms:1-408-555-1212">New SMS Message</a> martes, 11 de diciembre de 12
  • 16. <h1>Etiquetas</h1> <h2>Home Screen Icon</h2> <link rel="apple-touch-icon"href="icon.png" /> martes, 11 de diciembre de 12
  • 17. <h1>Etiquetas</h1> <h2>Full Screen</h2> <meta name="apple-mobile-web-app-capable" content="yes"/> martes, 11 de diciembre de 12
  • 18. <h1>Etiquetas</h1> <h2>Splash Screen (iOS)</h2> <link rel="apple-touch- startup-image" href="startup.png" /> martes, 11 de diciembre de 12
  • 19. <h1>Etiquetas</h1> <h2>Status Bar (iOS)</h2> <meta name="apple-mobile-web-app-status-bar-style"content="black" /> martes, 11 de diciembre de 12
  • 20. <h1>Etiquetas</h1> <h2>Inputs</h2> <h3>Búsquedas</h3> <input type=”search” /> <h3>Teléfonos</h3> <input type=”tel” /> <h3>Correo Electrónico</h3> <input type=”email” /> martes, 11 de diciembre de 12
  • 21. Let´s play a game martes, 11 de diciembre de 12