-->

viernes, 1 de noviembre de 2019

Angular vs React vs Vue

Por Fernando Herrera, Analista programador e instructor en línea(UDEMY)

Hice este artículo porque es una pregunta que me hacen a diario, ¿Cuál es mejor?, ¿Cuál debería de aprender?, etc…estas son ideas que yo tengo al respecto.

Tengan presente que mi opinión es que no hay ninguno mejor que otro, simplemente tienen diferentes características y si hoy, siguen vivos, en un mundo donde todos los días aparecen nuevos frameworks de JavaScript y estos 3 siguen sobresaliendo, quiere decir que sea como sean, son muy buenos.

Angular (Angular la última versión), en lo particular no me gusta la curva de aprendizaje, es bastante alta y si no se tiene la introducción ideal puede asustar mucho especialmente con los decoradores y TypeScript…
Pero me gusta mucho lo veloz que es para hacer una aplicación cuando ya lo conoces, los componentes, la reutilización de los mismos, los servicios, la inyección de dependencias, los pipes, la personalización y la integración con RXJS. También las rutas, las validaciones, formularios y muchas otras cosas.
Ahora mucho del éxito de Angular 2+, es porque su predecesor AngularJS fue muy popular, hoy en día se siguen haciendo aplicaciones en esa versión de Angular.. muchas empresas se quedaron con AngularJS porque tienen muchas aplicaciones desarrolladas en ese Framework. La controversia que sucedido cuando salió Angular 2+ contra AngularJS hizo que muchos otros Frameworks como Backbone, React y Vue tomaran más fuerza porque a la gente no le gusto la idea de tener que aprender un nuevo Framework ya que Angular 2 había cambiado tanto, y se tenía mucho miedo que Angular 3 (que nunca salió), fuera a pasar lo mismo. (que no fue así)
Ahora, Angular 2+ efectivamente es mejor que AngularJS, es más rápido y eficiente, aunque a veces el peso de las aplicaciones en producción es superior al de Angular, mucha gente se le olvida que en el bundle generado por Angular va todo el código de las librerías usadas, lo que lo hace muy útil para no preocuparse por el cache del navegador web cuando hacíamos cambios pequeños (entre otras cosas)
Ahora con las actualizaciones de Angular, también muchas personas se asustan porque tienen presente ese salto que fue de pasar de AngularJS a Angular 2+, normalmente es bueno tener actualizaciones periódicas, ningún framework es perfecto y necesita ser mejorado constantemente, lo que hace que todos nos beneficiemos de eso porque las aplicaciones serán más seguras, rápidas y eventualmente nos obligan a tener mejores prácticas de desarrollo… nadie te obliga tampoco a actualizarte, mira el caso de aplicaciones de AngularJS, se quedo en la versión 1.6 y conozco lugares donde esas aplicaciones ya llevan años corriendo sin problemas.
Ahora, TypeScript?, muchas personas cuando comienzan en el framework también se asustan por esto, especialmente aquellos que están acostumbrados a trabajar con Vanilla JavaScript (JavaScript puro), como se programo mucho AngularJS… porque ahora hay cosas un poco diferentes como interfaces, importación de módulos, tipado de datos y mucho más… realmente no hay que tener miedo a eso… de hecho en mi opinión, creo que la web se ira enfocando en usar más y más TypeScript sobre JavaScript plano con los años, ya que los beneficios de TypeScript y su desarrollo nos ayudan a reducir la cantidad de errores que cometemos al escribir código y utilizar paquetes y librerías de terceros. ( si deseas saber más sobre TypeScript puedes ver este artículo)
Recuerden que estos son mis puntos de vista, muchos podrán tener otras cosas a favor, más puntos en contra, pero esta bien, no es una discusión.


Ahora REACT, en lo personal, y como muchos me conocerán, yo no soy un gran fan de React, tengo varios amigos que están metidos en esta librería y les encanta, en lo particular cada día lo estudio más y ellos me enseñan cosas con las cuales quiero trabajar en unos cursos después… y en mi experiencia puedo decir que es una librería grandiosa y que si tu ya lo conoces sigue especializándote porque hay mucho que aprender ahí como en Angular.
¿No se si notaron que use la palabra librería?, esto es porque React al menos en este momento no es un framework completo para crear aplicaciones como Angular, es solo la capa visual, pero puede hacer todo lo que hace Angular con el apoyo de la comunidad y otros paquetes.
Ahora es usado por muchas grandes compañías como Facebook (quien fue quien creo React), aunque en lo particular no me gusta mucho tener que mezclar mucho JavaScript con el HTML, en lo personal pienso que siempre deben de estar separados y como React tiene esta relación muy fuerte con este patrón, realmente tienes que aprender una sintaxis especial de JavaScript (nada que no sea imposible o nada complicado como fue aprender TypeScript)
Por ejemplo en lugar de usar la palabra class, para definir una clase de CSS, debes de usar className, se por qué lo hace pero no me gusta… aprender un framework o librería no es fácil, pero hay cosas que ya están dadas como el CSS o JavaScript, y cuando lo automatizaron apareció el SASS y el TypeScript, pero se sabe de entrada que hay que aprender algo nuevo, pero si me incomoda un poco aprender atributos HTML nuevos especiales para React, ademas recordemos que también el HTML y CSS van mejorando día con día y las nuevas características puede ser que tengan que ser adaptadas para poderlas usar en aplicaciones de React.
Claro esta es mi opinion y se que muchas personas aman React y los entiendo, es una excelente librería con una excelente historia.
Ahora como comparamos React contra Angular, bueno para la gente que no le gusta TypeScript, ya con eso deberían de estar convencidos de usar React, aunque a mi parecer usar TypeScript es algo que me hace amar programar en Angular… ahora pero muchas personas que empiezan en React sabiendo JavaScript básico, siempre tienen que aprender ECMAScript 6 porque usa mucho de los nuevos estándares de JavaScript, y por supuesto nuevas características del ES7 o JavaScript 2017 ya están en camino, así que es mentira que no deben de aprender algo si se van a React.
Otra diferencia es que no hay un proceso de conversión real en React, prácticamente todo lo que haces y como funciona tu aplicación es el resultado que tendrás cuando lo despliegues en producción, y esto es algo que a muchas personas les gusta sobre Angular… las personas que han creado aplicaciones en Angular, sabrán que cuando se hace el build de producción, a veces falla, puede fallar alguna optimización, se puede un paquete y hay que realizar algo adicional para que funcione en producción, cosa que en React es raro que suceda (pero puede suceder) pero no es tan frecuente como en Angular…
Ahora React no es tan completo como Angular en algunas áreas, como por ejemplo el Router, tienes que importarlo de un paquete comunitario, también validaciones de formularios no viene en React propio, pero en Angular si los tienes y como es parte del mismo equipo de desarrollo del framework, tendrás actualizaciones periódicas sobre esos elementos… Ahora unos amigos míos que trabajan con React, dicen que siempre tener la comunidad de desarrolladores es mejor porque no es un monopolio y hay mucha gente muy hábil que comparte sus ideas y aporta mucho a esos paquetes…
Ahora hablando de otros temas que interesan en el ambiente laboral y real, es que muchas empresas en su momento buscaban personal que supiera AngularJS, pero como paso lo que paso con la versión 2+, React tomo mucha fuerza y en estas alturas, creo que hay 50% que te digan “¿Sabe React?” o “¿Sabe Angular?”, entonces definitivamente vale la pena pensar en estudiar y conocer ambas y cuando ya seas contratado en ese trabajo, especializarte en el framework que usarás.
Ahora Angular esta pensado en crear aplicaciones de una sola página, que usualmente eso es lo que queremos, pero tener que hacer una pequeña página web para anexarla a un sitio web… pues… ahí si se complica un poco la cosa porque aunque es posible hacer una pequeña app para una pequeña sección de mi página web, sería algo pesada y esto React lo hace mucho mejor o mejor dicho, si es posible hacerlo sin tener que arrugar la cara cuando alguien te pida eso siendo alguien que domina Angular.




Ahora hablemos un poco de Vue.js, en lo particular me gusta mucho más que React y siento que es como AngularJS (el cual también me gusto mucho), de hecho siento que es el hijo de React y Angular, es como que tomaron las mejores ideas de ambos para crear Vue.
Ahora Vue no es perfecto tampoco, hay muchas cosas que no me gustan tampoco, puedes programar en ES5, o bien en ES6 si prefieres, inclusive puedes usar TypeScript (aunque es un poco más difícil, pero puedes). Ahora me gusta la separación que tienes entre JavaScript y el código HTML, es un código entendible casi sin mucho conocimiento del framework (a diferencia de Angular y React), también para realizar aplicaciones de una sola página, tienes el equipo de desarrollo del framework que hizo el router, así recibes actualizaciones periódicas, aunque el problema es que de igual forma debes de importar muchas cosas de la comunidad, como validaciones de formularios y otras cosas…
En donde vivo, pocas empresas usan Vue.js, de hecho pocos lo conocen y esto es un factor que debes de considerar antes de aprender este framework, ¿Encontraré trabajo si lo aprendo? En mi caso también estoy estudiando Vue, porque de los 3 frameworks es el que menos conozco pero el que más familiar siento al buen amigo que fue AngularJS… por eso no me siento tan perdido que cuando comencé a estudiar React, que me enojaba con los atributos html nuevos que son similares a los existentes…
Algo que puede no gustarte, puede ser muchísimo código en los componentes cuando son aplicaciones grandes, no hay inyección de dependencias, aunque siempre puedes hacer módulos y muchas otras cosas, pero a veces siento que Angular hace mucho mejor estas cosas… como les dije, puedo estar equivocado no soy un experto en Vue, aunque si me estoy preparando para serlo…
Ahora si me tocara elegir entre Vue y React, yo seleccionaría Vue, porque de verdad me molesta mucho mezclar JavaScript con HTML, porque para mi es un problema no poder trabajar con archivos HTML independientes y usar CSS y HTML regular, o bien muchas librerías que uso en mi día a día me dan problemas y tengo que buscar adaptaciones para React, pero bueno, puede ser por mi falta de experiencia en React…  y también me gusta que los desarrolladores de Vue dan más paquetes que los que incluye React por defecto (como el Router)
Ahora la documentación de Vue es EXCELENTE, definitivamente es muy buena, es para mi la mejor de todas, es fácil de empezar con eso y tiene una gran comunidad amigable, muchas de las preguntas que he hecho, he sentido calidez en las respuestas y a veces me pasa que cuando he posteado preguntas sobre React y Vue, me tratan como si fuera un estúpido que no tiene idea lo mal que esta ese código que quiero implementar…
Ahora Angular es potenciado por Google y React con Facebook, Vue no tiene un gigante atrás que lo respalde, tiene un grupo de personas que yo considero genios que viven por mejorar su framework, es algo como los origines de Angular, pero ellos siguen en la face de equipo… claro es posible que si su framework sigue creciendo, terminen siendo adquiridos por una gran compañía… puedes ver el equipo de Vue.js aquí
Ahora, recuerden que Vue es un framework más nuevo que Angular o React, por lo que conseguir trabajos donde uses Vue.js es mucho menor a React y Angular, pero definitivamente hay compañías que le interesa seguir mejorando constantemente su área de desarrollo, (bueno no muchas en Latinoamérica honestamente), la mayoría solo se preocupa por su infraestructura y hacer mejor software con lo que ya tienen… pero pocas invierten en estudios de nuevos frameworks… pero como digo, puedo estar equivocado, es mi opinion persona y no estoy haciendo saliendo a las calles a realizar encuestas tampoco, es mi percepción de como se encuentra todo esto en la realidad donde vivo…
Si hablamos de las curvas de aprendizaje y no de la parte laboral que queda claro que Vue es el último, Vue es el más fácil de aprender, React el segundo y el último sería Angular con su curva tan complicada al inicio.
Hay muchas personas que hablan maravillas de React y el uso de su JSX, como hay personas que hablan maravillas del poder de Angular lo robusto que, es como hay gente que defiende a capa y espada lo simple, poderoso y fácil de aprender de Vue… la verdad que a mi parecer, debes de estudiar o enfocarte en lo que demande el trabajo… todos son excelentes, todos merecen ser estudiados y aprendidos.
Pros y contras de cada uno
Pros de Angular: Puede ser escalado a grandes equipos de trabajo, tener una persona nueva que casi no sepa Angular en el equipo no es caótico y su trabajo puede ser aislado, templates y código separado y como la mayor parte del código es proporcionado por el equipo de Angular, hay mucho menor riesgo de que al importar un Router nuevo, la aplicación explote y el uso de TypeScript para mi es un pro también.
Cons de Angular: TypeScript puede ser a veces demasiado quisquilloso a comparación de JS o JSX usado en React, el paso de AngularJS a Angular 2 asusto a mucha gente, como depende de varios paquetes como RXJS a veces surgen cambios que es necesario corregir manualmente especialmente cuando hay cambios de versiones mayores.
Pros de React: Se basa en componentes, y el hecho que AngularJS pasara a esto con su Angular 2+, dice que están en lo correcto, facebook realmente usa su librería, React es mucho más fácil de usar en varios dispositivos, aunque Angular esa Cordova, no es tan versátil como React.
Cons de React: La licencia de React es de Facebook, y últimamente Facebook no es el genio que era antes con las demandas y los riesgos de fugas de información, JSX aunque muchos lo consideran grandioso, hace un poco difícil la separación de las responsabilidades entre desarrollador y diseñador gráfico, y una queja que me han dicho mucho es que el npm en React es una pesadilla.
Pros de Vue: Template y código separado, tiene componentes como React y Angular, lo que sigue afirmando que React lo pensó muy bien, no tiene el problema de las restricciones de TypeScript, no hay problemas con licencias ya que es un grupo de personas y una gran comunidad de ayudantes, muy fácil de aprender y poderoso.
Cons de Vue: Es muy joven todavía, no hay mucha oferta laboral para él, como no tiene una gran compañía que lo respalde, se basa en la buena voluntad de las personas para seguir expandiéndolo, aunque en el peor de los casos, parece que el proyecto va por muy buen camino.
Recuerden que esto es mi simple opinion para contestar la miles de preguntas que tengo sobre este tema, no pretendo tirarle flores a ninguno y no soy experto en los 3, por lo que me es imposible hacer algo 100% apegado a la realidad, es lo que he podido apreciar en mi trabajo con estos 3 increíbles y poderoso frameworks y librerías para poder crear aplicaciones.
Mi objetivo real es darles a ustedes una opinion desde mi perspectiva que espero que los motive a ustedes a seguir aprendiendo más al respecto.


martes, 20 de agosto de 2019

¿Sabes cuál es la diferencia entre habilidades duras y blandas?


Al inicio de tu carrera es muy probable que seas contratado principalmente para tus habilidades duras. Pero, para ascender, necesitarás habilidades blandas.


Si un candidato desea tener mejores oportunidades de conseguir un empleo debe saber diferenciar las habilidades blandas de las duras. Esto le permitirá, durante el proceso de selección, determinar cuál de todas se adapta mejor a las necesidades de la empresa a la que postula.
Durante los procesos de selección, los reclutadores buscan candidatos que cuenten con dos tipos de habilidades: las técnicas o duras y las sociales o blandas.
Las habilidades blandas son aquellas asociadas con la personalidad y la naturaleza de la persona, por ejemplo: relaciones interpersonales; capacidad de liderazgo; actitud positiva, entre otras.
En ese sentido, estudios aseguran que los empleadores están considerando estos factores en su proceso de selección.
No obstante, es importante señalar que al inicio de la carrera del profesional, este será contratado por sus habilidades duras, es decir, conocimientos que son relevantes para la posición que ocupa.
Cuando los jóvenes están recién egresados de la universidad, o incluso tienen pocos años de experiencia, factores como el dominio del sector y el conocimiento que se ha adquirido durante las prácticas son realmente importantes.

Diferencia entre ellas

Para poder entender la diferencia entre ambos tipos de competencias es necesario tener en cuenta la siguiente comparación.

¿Cuáles son las habilidades duras o técnicas?

  • El dominio de una lengua extranjera que ayuda a mejorar las oportunidades de ser contratado. La persona que domina el inglés tendrá más oportunidades de viajar para cerrar negocios.
  • Un título que le permita al profesional demostrar sus habilidades para una tarea específica. Esto se ve con frecuencia en empresas que brindan servicios de Outsourcing.
  • El certificado que indica el manejo de cierto tipo de maquinaria de operaciones. Los casos más comunes serían en empresas dedicadas al sector minero, petrolero, pesquero, entre otros.
  • Uso de programas de computadoras que le permitan un mejor desempeño en el trabajo. Es indispensable que, en estos tiempos, todo profesional domine herramientas Office y de diseño.

¿Cuáles son las habilidades blandas?

  • Trabajo en equipo, es necesario que los colaboradores entiendan que sus aportes deberán sumar para conseguir un objetivo.
  • Liderazgo, todo grupo requiere contar con una persona que los sepa guiar, pero el líder no impone ideas, sino que las propone y las debate en beneficio de los resultados.
  • Comunicación, las personas que trabajan en una empresa deben saber explicar sus ideas a cualquier nivel.
  • Persuasión, esta es una habilidad muy útil al momento de hacer negociaciones.
  • Motivación, los colaboradores deben entender que las cosas no siempre saldrán bien, pero es importante saber levantarse y levantar a los compañeros de las adversidades.

Al momento de postular

Mientras que ciertas habilidades duras son necesarias para cualquier posición, los empleadores están buscando cada vez más -entre los solicitantes de trabajo- habilidades blandas.
Esto se debe a que es más sencillo entrenar a un nuevo empleado en una destreza en particular(utilizar un determinado programa de ordenador) y más difícil prepararlos para competencias transversales (como la paciencia).
Durante la entrevista de trabajo el candidato debe estar seguro de destacar tanto sus habilidades duras y como blandas.
De esta manera, incluso, si no tienes una habilidad dura requerida por la empresa, podrás aportar con una habilidad blanda en particular que sabes, sería valiosa en la posición.
Si el empleo implica trabajar en una serie de proyectos grupales, es importante que el candidato se asegure en hacer hincapié en la experiencia como jugador de equipo y la capacidad para comunicarse con todos los miembros del grupo de trabajo.
Tomado de APTITUS.COM

viernes, 31 de mayo de 2019

65.- Touch (JQuery Mobile)

Los eventos táctiles se activan cuando el usuario toca la pantalla (página).

Los eventos táctiles también funcionan en computadoras de escritorio: ¡ toca y desliza con el mouse!.


jQuery Mobile Tap


El evento tap se dispara cuando el usuario toca un elemento.

El siguiente ejemplo dice: Cuando un evento de tap se dispara en un elemento <p>ocultar el elemento <p> actual:


$("p").on("tap",function(){
  $(this).hide();
});


jQuery Mobile Taphold


El evento taphold se activa cuando el usuario toca un elemento y lo mantiene presionado durante un segundo:



Ejemplo:



<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>


<script>
$(document).on("pagecreate","#pageone",function(){
   $("p").on("taphold",function(){
   $(this).hide();
  });
});
</script>

</head>

<body>
 <div data-role="page" id="pageone">
  <div data-role="header">
   <h1>El tap Event</h1>
  </div>

  <div data-role="main" class="ui-content">
   <p>Si me tocas y mantienes presionado por un segundo, Desaparezco.</p>
   <p>Tocame y presioname por un segundo!</p>
   <p>a mi tambien!</p>
  </div>

  <div data-role="footer">
   <h1>Pie de pagina</h1>
  </div>
 </div>



</body>
</html>

Resultado:

Al presionar por un segundo el primer párrafo


jQuery Mobile Swipe

El evento de deslizamiento se activa cuando el usuario mueve un elemento horizontalmente más de 30px:

$("p").on("swipe",function(){
  $("span").text("Swipe detected!");
});

Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script>

$(document).on("pagecreate","#pageone",function(){
   $("p").on("swipe",function(){
   $("span").text("Swipe detected!. Arrastraste horizontalmente");
  });
});

</script>

</head>
<body>


 <div data-role="page" id="pageone">
  <div data-role="header">
   <h1>El Swipe Event</h1>
  </div>

  <div data-role="main" class="ui-content">
   <p>Arrastra este texto horizontalmente o arrastra en la caja.</p>
   <p style="border:1px solid black;height:200px;width:200px;"></p>
   <p><span style="color:red"></span></p>
  </div>

  <div data-role="footer">
   <h1>Pie de pagina</h1>
  </div>
 </div>


</body>
</html>

Resultado:

Al intentar arrastrar en el cuadro:



jQuery Mobile Swipeleft

El evento swipeleft se activa cuando el usuario desliza sobre un elemento en la dirección izquierda más de 30px:

Ejemplo

$("p").on("swipeleft",function(){
  alert("You swiped left!");
});

Swiperight móvil jQuery

El evento Swiperight se activa cuando el usuario arrastra un elemento a la derecha en más de 30px:

Ejemplo

$("p").on("swiperight",function(){
  alert("You swiped right!");
});

Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script>

$(document).on("pagecreate","#pageone",function(){

 $("p").on(
   "swipeleft",function(){
   alert("Arrastraste a la izquierda!");
  });

 $("p").on(
   "swiperight",function(){
   alert("Arrastraste a la derecha!");
  });

});

</script>

</head>
<body>


 <div data-role="page" id="pageone">
  <div data-role="header">
   <h1>El Evento Swipe izq y derecho</h1>
  </div>

  <div data-role="main" class="ui-content">
   <p>Arrastra este texto horizontalmente o arrastra en la caja.</p>
   <p style="border:1px solid black;height:200px;width:200px;"></p>
   <p><span style="color:red"></span></p>
  </div>

  <div data-role="footer">
   <h1>Pie de pagina</h1>
  </div>
 </div>


</body>
</html>

Resultado:






64.- Eventos (JQuery Mobile)

Eventos = Son todas las diferentes acciones de los visitantes a las que puede responder una página web.


Puedes usar cualquier evento estándar de jQuery en jQuery Mobile.
Además, jQuery Mobile también ofrece varios eventos que están hechos a medida para la navegación móvil:
  • Eventos táctiles: se activan cuando un usuario toca la pantalla (toca y desliza)
  • Eventos de desplazamiento: se activa cuando un usuario se desplaza hacia arriba y hacia abajo
  • Eventos de orientación: se activan cuando el dispositivo gira vertical u horizontalmente
  • Eventos de página: se activan cuando una página se muestra, oculta, crea, carga y / o descarga

Inicializando eventos móviles de jQuery


En jQuery, aprendió a usar el evento de documento ready para evitar que se ejecute cualquier código de jQuery antes de que el documento termine de cargarse.


Evento de jQuery document ready

<script>
$(document).ready(function(){

   // jQuery methods go here...
});
</script>

Sin embargo, en jQuery Mobile, usamos el evento pagecreate, que ocurre cuando la página se ha creado en el DOM, pero antes de que se complete la carga.


jQuery Mobile pagecreate event

<script>
$(document).on("pagecreate","#pageone",function(){

   // jQuery events go here...

});
</script>

Nota: el método jQuery on () se utiliza para adjuntar controladores de eventos.

Ejemplo:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script>
 $(document).on("pagecreate","#pageone",function(){
   $("p").on("tap",function(){
   $(this).hide();
  });
 });
</script>

</head>
<body>


 <div data-role="page" id="pageone">
  <div data-role="header">
   <h1>El tap Event</h1>
  </div>

  <div data-role="main" class="ui-content">
   <p>Si me tocas, Desaparezco!!.</p>
   <p>Tocame tambien!</p>
   <p>Tocame!</p>
  </div>

  <div data-role="footer">
   <h1>Pie de pagina</h1>
  </div>
 </div>


</body>
</html>

Resultado:

 Al tocar la primera linea