HTML. Unidad 3. Hipervínculos.

¿Qué es un hipervínculo?

Los hipervínculos son una de las innovaciones más interesantes que ofrece la Web. Han formado parte de esta desde el principio, pero hacen que la web sea web: Los hipervínculos nos permiten vincular documentos a otros documentos o recursos, vincular a partes específicas de documentos o hacer que las aplicaciones estén disponibles en una dirección web. Prácticamente cualquier contenido web se puede convertir en un enlace que, al pulsarlo (activarlo), dirija el navegador a la dirección web a la que apunta el enlace (URL).

Una URL puede apuntar a archivos HTML, archivos de texto, imágenes, documentos de texto, archivos de audio o vídeo, y cualquier otra cosa que se pueda mostrar en la web. Si el navegador no sabe qué hacer con un archivo, te preguntará si lo quieres abrir (en cuyo caso la tarea de abrirlo y leerlo se transferirá a la aplicación nativa instalada en el dispositivo) o si lo quieres descargar (en cuyo caso podrás ocuparte de él más tarde).

Por ejemplo, si observamos cualquier página web en la que se publiquen noticias (la página web de la BBC, por ejemplo), observaremos que contiene una gran cantidad de enlaces que apuntan a multitud de noticias en diferentes apartados (funcionalidad de navegación), secciones de acceso/registro (herramientas de usuario) y otras.

El elemento <a>

The elemento <a> (o elemento ancla) junto con el atributo href , crea a hipervínculo a páginas web, ficheros, correos electrónicos, enlaces dentro de la misma página, o cualquier cosa a la que una URL pueda apuntar. El contenido dentro del elemento <a> debería proporcionar una descripción clara de dónde nos dirigiremos al hacer click.

Los enlaces también proporcionan información implícitamente sobre la actividad de navegación, ya que el estilo de los enlaces cambia según vamos haciendo click en ellos:

  • Un enlace no visitado aparece subrayado y con texto azul.
  • Un enlace visitado aparece subrayado y en color morado.
  • Un enlace activo aparece subrayado y en rojo.

Un enlace básico se crea incluyendo el texto (o cualquier otro contenido), que queramos convertir en un enlace usando un elemento ancla <a>, dándole un atributo href (también conocido como «Hypertext Reference», «target» u objetivo) que contendrá la dirección web hacia dónde queremos que apunte el enlace:

<p>Crea un enlace a
<a href="https://www.mozilla.org/es-ES/">la página de inicio de Mozilla</a>.
</p>

The code above gives as the following result: I’m creating a link to the Mozilla homepage.

Añadiendo información con el atributo «title»

Otro atributo que posiblemente quieras agregar a tus enlaces es title. El título contiene información adicional sobre el enlace, como qué tipo de información contiene la página o cosas que debes tener en cuenta en la página web. Por ejemplo:

<p>Crea un enlace a
  <a href="https://www.mozilla.org/es-ES/"
    title="El mejor lugar para encontrar más información acerca de la misión de Mozilla
           y cómo contribuir">la página de inicio de Mozilla</a>.
</p>

Este código producirá el siguiente resultado (el título se mostrará al pasar el ratón sobre el texto del enlace):

Crea un enlace a la página de inicio de Mozilla.

Debemos tener en cuenta que el título de un enlace solo será visible al pasar el ratón por encima, lo cual significa que los usuarios que naveguen usando los controles de sus teclados, o pantallas táctiles, tendrán dificultades para acceder a la información proporcionada por el título. Si la información del título es verdaderamente importante para el uso de la página, deberemos presentar el título de manera que sea accesible a todos los usuarios, por ejemplo incluyéndola como parte del texto del enlace.

Ejercicio propuesto: Enlaces con información

Crea una página web como la que se muestra a continuación o una similar, mostrando información en español y en inglés. Utiliza encabezados del tipo <h1> y <h2>, y varios párrafos y enlaces a diversas páginas, como las que se indican.

Nota: Deberás utilizar el atributo title para mostrar información sobre cada enlace al pasar el ratón por encima.
Alicante

Español

Entre las principales características de la ciudad se encuentran el Castillo de Santa Bárbara, ubicado muy por encima de la ciudad, y el Puerto de Alicante. Este último fue objeto de una amarga controversia en 2006-2007 cuando los residentes lucharon, con éxito, para evitar que se convirtiera en un polígono industrial.

El castillo de Santa Bárbara está situado en el Monte Benacantil, con vistas a la ciudad. La torre (La Torreta) en la parte superior, es la parte más antigua del castillo, mientras que parte de la zona más baja y las murallas se construyeron a finales del siglo XVIII.

English

Amongst the most notable features of the city are the Castle of Santa Bárbara, which sits high above the city, and the port of Alicante. The latter was the subject of bitter controversy in 2006–2007 as residents battled, successfully, to keep it from being changed into an industrial estate.

The Santa Bárbara castle is situated on Mount Benacantil, overlooking the city. The tower (La Torreta) at the top, is the oldest part of the castle, while part of the lowest zone and the walls were constructed later in the 18th century.

URLs y rutas

Para comprender completamente a dónde apuntan los enlaces, necesitas conocer las URLs y las rutas. En esta sección proporcionaremos la información que necesitas sobre el tema.

Una URL (de las iniciales en inglés «Uniform Resource Locator») es simplemente una secuencia de caracteres de texto que definen donde está situado algo en la web. Por ejemplo, la página de Mozilla está ubicada en https://www.mozilla.org/es-ES/.

Las URLs utilizan rutas para encontrar los archivos. Las rutas especifican dónde se encuentra el archivo que buscas dentro del sistema de archivos. Veamos un ejemplo de una estructura de directorios (ve el directorio creating-hyperlinks).

Al directorio raíz de esta estructura de directorios lo hemos llamado creating-hyperlinks. Al trabajar en modo local en una web, habrá un directorio que contendrá toda la información. En nuestro ejemplo, dentro de la raíz, encontramos el archivo index.html y el archivo contacts.html. En una web real, index.html es el punto de entrada a la web, lo que se conoce como página de inicio.

Observamos también dos directorios dentro de nuestro directorio raíz que son: pdfs y projects. Cada uno de ellos tiene archivos en su interior — un archivo PDF (project-brief.pdf) y un archivo index.html, respectivamente. Observa que es posible tener sin problemas dos archivos index.htmlen un proyecto siempre y cuando se encuentren alojados en ubicaciones diferentes de nuestra estructura de archivos — muchos sitios web lo hacen. El segundo index.html será la página de inicio para la información relativa a los proyectos.

Mismo directorio

Si queremos incluir un hipervínculo dentro del archivo index.html (el index.html del nivel más alto) que apunte al archivo contacts.html, simplemente especificaremos el nombre del archivo al que hacemos referencia, porque se encuentra en el mismo directorio en el que se encuentra el archivo index.html desde donde lo queremos llamar. Por lo tanto, usamos la URL contacts.html — veamos el código:

<p>¿Quieres contactar con un miembro específico del personal?
Encuentra los detalles en nuestra <a href="contacts.html">página de contactos</a>.</p>

Bajando por la estructura de subdirectorios

Si queremos incluir un hipervínculo dentro del archivo index.html (el index.html de nivel más alto) que apunta a projects/index.html, debemos bajar hasta el directorio projects antes de indicar al archivo al que queremos enlazar. Para ello especificamos el nombre del directorio y le añadimos una barra inclinada hacia adelante, y a continuación el nombre del archivo. Por lo tanto, utilizaremos la URL projects/index.html:

<p>Visita mi <a href="projects/index.html">página de inicio del proyecto</a>.</p>

Subiendo por nuestro sistema de archivos

Si ahora queremos incluir un hipervínculo dentro del archivo projects/index.html que apunte a pdfs/project-brief.pdf, hay que subir un nivel en nuestro sistema de directorios, para luego bajar al directorio pdf. Para «Subir un nivel» utilizamos los dos puntos — (..) — por lo que usamos la URL ../pdfs/project-brief.pdf:

<p>Un enlace a mi<a href="../pdfs/project-brief.pdf"> resumen del proyecto</a>.</p>

Podemos combinar más de una instancia de estas características y generar URLs más complejas, si es necesario, por ejemplo: ../../../ruta/compleja/a/mi/archivo.html.

Ejercicio propuesto: Menú de navegación

Crea un fichero «index.html» que enlace varias ficheros web con un menú de navegación. Este índice puede enlazar todas las páginas que hayas creado antes. Echa un vistazo al ejemplo y tendrás una idea de cómo deberá quedar tu código fuente. Además, deberás utilizar el atributo title para insertar la descripción de la página web enlazada:

<h1>Ejercicios de HTML</h1>

<h2>Encabezados y párrafos</h2>

<p><a href="encabezados_y_parrafos_1.html">Ejemplo de encabezados y párrafos 1</p>
<p><a href="encabezados_y_parrafos_2.html">Ejemplo de encabezados y párrafos 2</p>
...

<h2>Formato de texto</h2>

<p><a href="formato_texto_1.html">Ejemplo de formato de texto 1</p>
<p><a href="formato_texto_2.html">Ejemplo de formato de texto 2</p>
...

Fragmentos de documento

Es posible apuntar hacia una parte concreta de un documento HTML en vez de a todo un documento. Para ello hay que asignar previamente un atributo id al elemento hacia el que apuntamos. Esto se debe hacer en el encabezado y quedará así:

<h2 id="direccion_de_envio">Dirección de envío</h2>

Posteriormente para hacer referencia a este id concreto, lo añadiremos al final de la URL precedido por una almohadilla — veamos el ejemplo:

<p>¿Quieres mandarnos una carta? Aquí tienes nuestra <a href="contacts.html#direccion_de_envio">Dirección de envío</a>.</p>

También podemos usar esta referencia a un fragmento de documento para apuntar hacia otra parte del mismo documento:

<p>La <a href="#direccion_de_envio">Dirección de envío de la empresa</a> se encuentra al final de esta página.</p>

Ejercicio propuesto: Índice

Crea una página similar a esta: https://es.wikipedia.org/wiki/Alicante (puedes escoger cualquier otra página similar, que tenga un índice con enlaces). Debes comenzar escribiendo el índice, colocando a continuación las diferentes secciones, cada una de ellas con el correspondiente encabezado y los diferentes párrafos. Inserta además otros enlaces a otras páginas de la wikipedia, tal como se hace en la página original, sin olvidar rellenar los atributos «title». Cuando acabes prueba el resultado en el navegador. Tu código debería parecerse al siguiente:

<h1>Alicante</h1>

<p><a href="#geografia">Geografía física</a></p>
<p><a href="#demografia">Demografía</a></p>
...

<h2 id="geografia">Geografía física</h2>

La ciudad se halla a orillas del <a href="https://es.wikipedia.org/wiki/Mar_Mediterráneo">Mediterráneo</a>, en una planicie sorteada por una serie de colinas y elevaciones. El monte <a href="https://es.wikipedia.org/wiki/Benacantil">Benacantil</a>, con 169 m de altura, sobre el que se asienta el <a href="https://es.wikipedia.org/wiki/Castillo_de_Santa_Bárbara_(Alicante)">castillo de Santa Bárbara</a>, domina la fachada urbana y constituye la imagen más característica de la urbe..
...

<h2 id="demografia">Demografía</h2>

En la actualidad, según los datos del INE del 1 de enero de 2019 la ciudad cuenta con 334.887 habitantes, siendo la segunda ciudad valenciana y la 11ª de España en población. Según los datos del Ayuntamiento de Alicante a 1 de enero de 2017​ la población de la ciudad era de 336.478 habitantes, de los cuales vivían en el núcleo urbano 329.635 y 6.843 en las partidas rurales, siendo los barrios más populosos <a href="https://es.wikipedia.org/wiki/Playa_de_San_Juan_(Alicante)">Playa de San Juan</a>, con 22.424 habitantes y <a href="https://es.wikipedia.org/wiki/Polígono_San_Blas">Polígono de San Blas</a> con 22.292 habitantes.
...

Convertir bloques de contenido en enlaces

Como hemos mencionado anteriormente, puedes convertir cualquier contenido en un enlace, incluso elementos de bloque y elementos en línea. Si quieres convertir una imagen en un enlace, simplemente usa el elemento <a> encerrando el elemento <img> entre <a> y </a>.

<a href="https://www.mozilla.org/es-ES/">
  <img src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Mozilla_dinosaur_head_logo.png" alt="Logotipo anterior de Mozilla que dirige a la página inicial de Mozilla">
</a>

Encontrarás más información y ejercicios sobre el manejo de imágenes en próximos artículos en esta web.

Ejercicio propuesto: Imagen con hipervínculo

Utilizando la imagen https://iessanvicente.com/ies_san_vicente.jpg, crea un enlace a la web https://iessanvicente.com para que al hacer clic sobre la imagen, el navegador nos dirija a la web del IES San Vicente.

Nota: Debes utilizar la url completa de la imagen como valor del atributo src del elemento <img>.

HTML. Unidad 2. Formato de texto.

Introducción

Énfasis e importancia

En el lenguaje humano, a menudo enfatizamos ciertas palabras para alterar el significado de una frase, y a menudo queremos destacar ciertas palabras como importantes o diferentes en algún sentido. HTML nos dota de diversos elementos semánticos que nos permiten destacar contenido textual con tales efectos, y en esta unidad veremos algunos de los más comunes, como por ejemplo:

<b>Texto en negrita</b>
<strong>Texto importante</strong>
<i>Texto en cursiva</i>
<em>Texto enfatizado</em>
<u>Texto subrayado</u>
<mark>Texto marcado (o resaltado)</mark>

Otros elementos menos habituales

<small>Texto más pequeño</small>
<del>Texto eliminado</del>
<ins>Texto insertado</ins>
<sub>Subíndice</sub>
<sup>Superíndice</sup>

El elemento <strong>

Para enfatizar palabras importantes al hablar solemos acentuarlas, y al escribir lo hacemos en estilo negrita. Por ejemplo:

Este líquido es altamente tóxico.

Cuento contigo. ¡No llegues tarde!

En HTML usamos el elemento <strong> para marcar tales expresiones. El documento resulta entonces más útil, y de nuevo los lectores reconocen estos elementos y el tono de voz cambia a uno más fuerte. El estilo negrita es el que aplican los navegadores por defecto, pero no debes usar esta etiqueta solamente para aplicar este estilo. Para hacer eso usa el elemento <span> y CSS, o un elemento <b> (explicado más adelante).

Ejercicio propuesto: Texto importante

Crea una página web con el siguiente texto (u otro similar), utilizando encabezados y párrafos, y añade además una importancia adicional a varias palabras dentro de cada párrafo.

Nota: El texto del ejemplo ha sido extraído de https://www.msf.es/quienes-somos/como-trabajamos y https://www.msf.es/quienes-somos/como-financiamos.
Médicos sin fronteras

Quiénes somos

Somos una organización de acción médico-humanitaria: asistimos a personas amenazadas por conflictos armados, violencia, epidemias o enfermedades olvidadas, desastres naturales y exclusión de la atención médica. La acción humanitaria es un gesto solidario de sociedad civil a sociedad civil, de persona a persona, cuya finalidad es preservar la vida y aliviar el sufrimiento de otros seres humanos: esta es nuestra razón de ser.

Debemos nuestra independencia financiera a los más de seis millones de personas y entidades privadas que son socias o colaboradoras de MSF en todo el mundo. Gracias a ellas, nosotros decidimos a quién atendemos y cómo, y nuestro único interés es el de las poblaciones a las que asistimos. Con el fin de mejorar su situación, también podemos prestar testimonio para denunciar las situaciones que presenciamos. Pero no aspiramos a transformar una sociedad, sino a permitirle superar un periodo crítico: nuestro objetivo son las personas, no los Estados. Por este motivo, nuestras intervenciones son limitadas en el tiempo.

Cómo nos financiamos

La mayor parte de nuestros fondos son privados: en 2019, procedían de las 6,5 millones de personas y entidades privadas que son socias o colaboradoras de MSF en todo el mundo, de las cuales casi 569.900 en España. En 2019, el 96,2% de nuestros ingresos mundiales eran de origen privado y el resto correspondía a organismos públicos, como las agencias de ayuda humanitaria de algunos Gobiernos.

No tenemos ánimo de lucro: no generamos beneficios para nosotros mismos, y destinamos los fondos recibidos a nuestra misión social –acción médica y testimonio– y a las tareas de administración y captación de recursos necesarias para cumplirla.

El elemento <em>

Cuando queremos dar énfasis al lenguaje hablado, acentuamos ciertas palabras y así alteramos sutilmente el significado de lo que decimos. De manera similar, en el lenguaje escrito ponemos palabras en cursiva para destacarlas. Por ejemplo, las dos siguientes frases tienen diferente significado:

Me alegro de que no llegues tarde.

Me alegro de que no llegues tarde.

La primera frase suena aliviada porque la persona no llega tarde. Por el contrario, la segunda suena sarcástica y un tanto pasivo-agresiva, expresa molestia porque la persona ha llegado algo tarde.

En HTML usamos el elemento <em> («emphasis») para marcar estos casos:

<p>Me <em>alegro</em> de que no llegues <em>tarde</em>.</p>

El documento logra entonces transmitir una lectura más interesante y además así lo reconocen los lectores, que lo expresan con un tono diferente de voz. El navegador, de manera predeterminada, aplica el estilo de letra cursiva, pero no debes utilizar esta etiqueta solamente para establecer este estilo de letra cursiva. Para usar ese estilo, debes utilizar la etiqueta del elemento <span> y algo de CSS u otra etiqueta como el elemento <i> (explicado a continuación).

Ejercicio propuesto: Texto enfatizado

Crea una página web con el texto del ejemplo (u otro similar) utilizando encabezados y párrafos. A continuación aplica la etiqueta <em> a las expresiones que creas más relevantes.

Nota: el texto ha sido extraído de: https://as.com/meristation/2019/08/11/betech/1565556732_792381.html
Cómo escribir mensajes de WhatsApp en negrita, cursiva o subrayados

La app te permite cambiar el aspecto de las palabras que escribes de dos maneras. Aprende a subrayar y poner en negrita.

Desde que nos despertamos hasta que nos acostamos, la usamos a diario, constantemente, y ya es difícil imaginar el mundo sin ella. WhatsApp es de esas apps que han traspasado la barrera de meras aplicaciones y junto a otros elementos de la cultura electrónica como los emojis, se ha hecho un hueco en la sociedad, en el día a día. Y como toda app multitarea, WhatsApp oculta decenas de funciones desconocidas, pequeños trucos que nos hacen la experiencia más fácil y/o variada a la hora de usarla.

En Word, Pages y otros procesadores de texto estamos acostumbrados a cambiar el formato del texto con un sólo botón. De esta manera podemos colocar una cita en cursiva, subrayar encabezados o resaltar en negrita un nombre en particular. Y esto mismo puedes hacer en WhatsApp, ya que hace unos años que la app de mensajería admite un cambio de formato de texto entre sus funciones.

Los elementos <i>, <b> y <u>

Los elementos que hemos comentado hasta ahora tienen asociada una semántica clara. La situación con <b> (negrita o «bold»), <i> (cursiva o «italic») y <u> (subrayado o «underline») es algo más complicada. Surgieron para que las personas pudieran escribir textos en negrita, cursiva o subrayado en un tiempo en el que pocos navegadores o ninguno admitían CSS. Elementos como estos, que solo afectan a la presentación y no a la semántica, se conocen como elementos de presentación y no se utilizan habitualmente porque la semántica es muy importante para la accesibilidad y el SEO, entre otros aspectos. Sin embargo, HTML5 redefinió los elementos <b><i> y <u> con roles semánticos nuevos un tanto confusos (puedes encontrar más información en este hilo de StackExchange, y en HTML Living Standard).

Para clarificar un poco en qué momento podríamos usar estos elementos, nos podemos remitir a la siguiente regla de oro: el uso de <b><i> o <u> resulta adecuado cuando transmiten el significado que suele transmitir el uso tradicional de las negritas, itálicas o el subrayado, si no hay ningún otro elemento que resulte más adecuado. Sin embargo, siempre resulta crítico mantener una actitud orientada a la accesibilidad. El concepto de cursiva no es demasiado útil para las personas que usan lectores de pantalla o para las personas que utilizan un sistema de escritura distinto del alfabeto latino.

Por último, es conveniente añadir una observación muy importante acerca del subrayado (<u>): La mayoría de los lectores de una página web suelen asociar estrechamente el subrayado con los hipervínculos. Por ello en la web es mejor reservar el subrayado para los enlaces. Utiliza el elemento cuando resulte apropiado semánticamente, pero considera usar CSS para cambiar el subrayado predeterminado por algo más adecuado .

En resumen, y concretando más:

  • <i> se usa para transmitir el significado que tradicionalmente transmite la itálica: extranjerismos, clasificaciones taxonómicas, conceptos técnicos, un pensamiento…
  • <b> se usa para transmitir el significado que tradicionalmente transmite la negrita: palabras clave, nombres de productos, frases principales…
  • <u> se usa para transmitir el significado que tradicionalmente conlleva el subrayado: nombres propios, errores ortográficos…

Ejercicio propuesto: Ejemplos de uso

Crea una página web para obtener el siguiente resultado:

Nombres científicos

El colibrí garganta de rubí (Archilochus colubris) es el colibrí más común en el este de América del Norte.

Extranjerismos

El menú era un mar de palabras exóticas como vatrushka, nasi goreng y soupe à l’oignon.

Un error ortográfico reconocido

Algún día aprenderé a deletrear mejor la palabra frigofírico.

Palabras clave destacadas en una serie de instrucciones
  1. Corta dos piezas de la hogaza de pan.
  2. Inserta una rodaja de tomate y una hoja de lechuga entre las rebanadas de pan.

Ejercicio propuesto: Negrita y cursiva

Crea una página web con el siguiente texto (u otro similar), utilizando un encabezado y párrafos, y aplica letra negrita y cursiva a las palabras correspondientes dentro de cada párrafo.

Nota: El texto del ejemplo ha sido extraído de https://www.escribirycorregir.com/la-letra-cursiva/.
Diez casos en los que demos emplear la letra cursiva

Títulos de obras literarias, periódicos, revistas, etcétera: Cien años de soledad, El País, Qué leer.

Títulos de obras de arte y composiciones musicales: Las señoritas de Avignon, Sinfonía nº. 5 de Beethoven.

Títulos de películas: El apartamento, La tentación vive arriba, Ben-Hur…

Palabras o expresiones que provengan de otro idioma: affaire, coaching, hardware.

Palabras empleadas con uso metalingüístico, como meras referencias, prescindiendo de su significado. Es lo que sucede cuando citamos una palabra: La palabra empoderamiento se ha puesto de moda en los últimos años.

Para resaltar partes del texto. Los motivos pueden ser varios, y no los vamos a enumerar en esta ocasión: Era una cuestión de amor propio, ¿me entiendes?

Advertencias o indicaciones en los textos: Sigue leyendo, Continúa en la página 75.

Locuciones del latín y de otras lenguas que no tienen adaptación al castellano: ad infinitum, alter ego, full time, delirium tremens.

Los apodos y sobrenombres que van intercalados entre el nombre y el apellido: Ernesto Che Guevara, Roberto Mano de Piedra Durán (boxeador panameño).

En las obras teatrales, para resaltar acciones o aportar algún dato que no pertenece al parlamento del personaje sino a la pluma del autor:
TÍO.- (Aparte a CASTELAR.) Pues tenía él razón. Beringola no ve tres en un burro
CASTELAR.- (Aparte al Tío). Beringola es un idiota.
(Por el primero derecha salen DANIEL Y FELIPE.)

Los elementos <del> e <ins>

El elemento <del> se utiliza para definir un texto que se ha eliminado de un documento. Los motores de búsqueda a veces usan esta etiqueta para mostrar los cambios dentro de un sitio web, cuando se ha eliminado parte del texto después de que el desarrollador haya subido una nueva versión.

Por otro lado, el elemento <ins> se utiliza para definir un texto que se ha insertado en un documento. Los motores de búsqueda a veces usan esta etiqueta para mostrar los cambios dentro de una página web, cuando se reemplaza algún texto después de que el desarrollador haya subido una nueva versión.

Depende del navegador cómo mostrar el texto dentro de estos elementos, pero la mayoría de ellos marcarán una línea sobre el texto eliminado y subrayarán el texto insertado de forma predeterminada.

Ejercicio propuesto: Texto reemplazado

Crea una página para mostrar varios párrafos donde anteriormente se dijeron algunas palabras u oraciones, pero ahora los autores han cambiado de opinión y quieren contarles a sus lectores una nueva versión de lo que piensan. Usando las etiquetas <ins> y <del>, muestra los textos anteriores y los nuevos de forma que quede claro que el nuevo texto está reemplazando al primero. El resultado obtenido debería ser similar al siguiente, añadiendo algunos otros ejemplos:

La Tierra es plana redonda.

El 31 de diciembre del 2020 se acabará el mundo no pasará nada.

...

El elemento <mark>

El elemento <mark> representa un texto marcado o resaltado como referencia o anotación, debido a su relevancia o importancia en un contexto particular.

Ejercicio propuesto: Datos relevantes

Crea una página web con el siguiente texto usando encabezados y párrafos, y a continuación resalta varias palabras o cifras dentro de los párrafos:

Nota: el texto utilizado se ha extraído de https://bloygo.yoigo.com/entretenimiento/los-records-guinness-mas-gamers-del-2020_74516616.html.
Récords de Super Mario

Mario Bros, el fontanero italiano, es el personaje de videojuegos más famoso del mundo. La primera vez que Mario apareció fue en 1981 en el juego virtual Donkey Kong, llamándose Jumpman (saltador, en español).

Dentro del universo de Mario Bros, el videojuego Super Mario Bros para NES de 1985 es el más vendido con más de 40,24 millones de copias vendidas a principios del 2019.

En la categoría de speed-runners, los más rápidos en completar un videojuego, en octubre del 2018, el usuario “somewes” consiguió el menor tiempo en completar Super Mario Bros, fijando el récord en 4 minutos y 55 segundos.

Récords de Fornite

Seas o no seas un gamer, has oído hablar de este famoso videojuego. Fornite es un videojuego de lucha, supervivencias y batallas desarrollado por Epic Games y lanzado en 2017.

Tal ha sido el éxito de Fornite que, el 20 de marzo del 2019, se convirtió en el primer battle royale con 250 millones de jugadores registrados. Además, Fornite también superó el récord de juego con más jugadores simultáneos llegando a alcanzar los 10,8 millones de jugadores.

...

Ejercicio propuesto: Resultado de una búsqueda

Crea una página web similar a la del ejemplo, y resalta todas las apariciones de una palabra en concreto a lo largo de todo el texto. En este caso resaltaremos todas las apariciones de «Minecraft» que encontremos:

Nota: el texto del ejemplo se ha extraído de https://hipertextual.com/2015/01/minecraft-records-guinness-2015.
Resultados de búsqueda de la palabra "Minecraft":

Minecraft consigue 12 récords mundiales.

En el Guinness Book of World Records 2015: Gamer's Edition, Minecraft consiguió 12 récords mundiales. El impacto que tiene este juego parece no tener límites.

Lo que ha logrado Minecraft hasta el momento es de esa clase de fenómenos que convierten su entorno en un antes y un después. Su forma peculiar de jugar ha hecho que propios y extraños del mundo gamer dediquen su tiempo a construir sus propios mundos.

El primer país modelado a escala real en un videojuego establece un nuevo récord para Minecraft. Danish Geodata Agency publicó la recreación a escala 1:1 de Dinamarca. Se consiguió representar todos los edificios del país utilizando cuatro mil millones de bloques.

...

Los elementos <sub> y <sup>

En ocasiones, necesitarás utilizar superíndice y subíndice al marcar elementos como fechas, fórmulas químicas y ecuaciones matemáticas para que tengan el significado correcto. Los elementos <sup> y <sub> se ocupan de ello. Por ejemplo:

Ejercicio propuesto: Subíndices

Crea una página web con el siguiente texto, añadiendo algún ejemplo más que conozcas o encuentres por Internet:

Una de mis moléculas favoritas es C8H10N4O2, también conocida como "cafeína".

Las posiciones de las coordinadas horizontales a lo largo del eje X se representan como x1 ... xn.

...

Ejercicio propuesto: Nomenclatura y formulación

Crea una página web para mostrar la formulación química de algunos compuestos comunes, aplicando formato de superíndices a los números (debes imprimir cada compuesto en un párrafo diferente, utilizando el elemento <p>). El resultado debería ser similar al siguiente, donde los puntos suspensivos indican que debes añadir algunos otros ejemplos que conozcas o encuentres por Internet:

Oxígeno: O2
Agua: H2O
Dióxido de carbono: CO2
Vinagre: C2H4O2
Bicarbonato de sodio: NaHCO3
Azúcar: C12H22O11
Alcohol: C2H5OH
...

Ejercicio propuesto: Superíndices

Crea una página web para mostrar el siguiente texto, añadiendo algunos otros ejemplos:

El teorema de Pitágoras se expresa con la siguiente ecuación: a2 + b2 = c2

Una de las ecuaciones más conocidas en física es: E = mc2

El número ordinal "quinto" se abrevia en inglés de esta forma: 5th

...

Ejercicio propuesto: Potencias

Imprime los cuadrados de los números del 1 al 25. Cada número deberá colocarse en una línea independiente (utilizando el elemento <br />). Justo después de cada número se colocará el número 2 con formato de superíndice, y a continuación el signo igual, y el resultado. Se debería mostrar algo del siguiente estilo:

12 = 1
22 = 4
...
252 = 625

El elemento <span>

Si necesitamos marcar un texto pero consideramos que ninguna de las etiquetas existentes es una buena opción, podemos utilizar el elemento <span>. Así, podemos aislar un fragmento de texto sin introducir a priori cambios en la apariencia del texto marcado. La ventaja de esta etiqueta se aprecia al usarla junto con algunos atributos tales como class o style, combinados con algún código CSS. Trabajaremos en esto más adelante, pero de momento echemos un vistazo a este código de ejemplo, donde usamos un elemento <span> para colorear solo una parte del texto dentro de un párrafo:

<p>Mi madre tiene los ojos <span style="color:blue">azules</span>.</p>

Ejercicio propuesto: Color del texto

Utilizando los elementos <p> y <span>, crea una página web para mostrar el color de ojos de gente que conozcas, como por ejemplo: azules (blue), marrones (brown), verdes (green) o grises (gray).

HTML. Unidad 1. Estructura básica de un fichero HTML.

Introducción

HTML («Hypertext Markup Language«) no es exactamente un lenguaje de programación. Es un lenguaje de marcado que le dice a los navegadores web cómo estructurar las páginas web que estás visitando. Puede ser tan complejo o tan simple como desee el desarrollador web. Este lenguaje está formado por varios elementos que definen diversos tipos de contenido. Un fichero HTML se puede editar con un simple editor de texto, pero hay algunos editores que usan colores y consejos para ayudar al desarrollador. Uno de los mejores editores es el Visual Studio Code. Se puede descargar desde aquí.

Elementos

HTML consiste en una serie de elementos, que puedes utilizar para encerrar, delimitar o marcar diferentes partes del contenido para hacer que aparezcan de una cierta manera, o actúen de determinada forma. Las etiquetas que delimitan un fragmento de contenido pueden hacer que dicho contenido enlace con otra página, ponga una palabra en cursiva, etcétera.

Cada elemento tiene dos partes, una al comienzo y otra al final, y el contenido se coloca en medio:

<etiqueta>Contenido...</etiqueta>

El elemento HTML quedará definido por todo ese bloque, desde la etiqueta de apertura, hasta la etiqueta de cierre. Por ejemplo:

<h1>Mi primer encabezado</h1>
<p>Mi primer párrafo</p>

Las etiquetas HTML no distinguen entre mayúsculas y minúsculas. Así que se pueden escribir tanto en mayúsculas como en minúsculas. Por ejemplo, una etiqueta <title> se puede escribir como <title><TITLE><Title><TiTle>, etc., y funcionará correctamente. Sin embargo, se recomienda escribir todas las etiquetas en minúsculas para mantener la coherencia y legibilidad, entre otros motivos.

Elementos vacíos

No todos los elementos siguen el patrón de etiqueta de apertura, contenido y etiqueta de cierre. Algunos elementos consisten solo en una etiqueta única, que se utiliza generalmente para insertar/incrustar algo en el documento en el lugar donde se quiera incluir. Por ejemplo, podemos utilizar el elemento  <br> para insertar un salto de línea, y el elemento <img> para insertar una imagen en la página de la siguiente forma:

<p>Mi perro es un gruñón.<br />Tiene muy malas pulgas.</p>

Atributos

Los elementos también pueden tener atributos. Los atributos contienen información extra sobre el elemento. Por ejemplo, con siguiente código podemos utilizar el atributo class para asignar al elemento un identificador que se puede utilizar para dotarlo de información de estilo:

<p class="estilo">Mi perro es un gruñón</p>

Para ver otro ejemplo, podemos utilizar el siguiente código para saltar a la página https://www.wikipedia.org (la etiqueta <a> define un hipervínculo, y el atributo href especifica la url donde queremos saltar):

<a href="https://www.wikipedia.org">Wikipedia</a>

Es muy importante que tengamos en cuenta que un atributo deberá tener:

  • Un espacio entre este y el nombre del elemento. Para un elemento con más de un atributo, los atributos también deben estar separados por espacios.
  • El nombre del atributo, seguido por un signo igual.
  • Un valor del atributo, rodeado de comillas de apertura y cierre.

Omitir comillas en valores de atributos

Cuando observas diferentes páginas web, puedes encontrarte con todo tipo de estilos de etiquetado extraños, que incluyen valores de atributos sin comillas. Esto se permite en ciertas circunstancias, pero provocará un error en otras. Por ejemplo, si volvemos a revisar el ejemplo del enlace, sería posible escribir una versión básica con solo el atributo href, así:

<a href=https://www.wikipedia.org/>Wikipedia</a>

Sin embargo, el código no sería correcto si añadimos el atributo title también sin comillas:

<a href=https://www.wikipedia.org/ title=La página de inicio de Wikipedia>Wikipedia</a>

En este punto el navegador interpretará mal el código y pensará que el elemento <a> tiene atributos incorrectos y esto causará errores o comportamientos inesperados. Por ello es muy importante incluir siempre las comillas en los atributos. Evitarás muchos problemas y además obtendrás un código más legible.

Comillas simples o dobles

En esta unidad todos los valores de los atributos se han incluido en comillas dobles. Sin embargo, se pueden ver comillas simples en algún código HTML. Es una cuestión de estilo. Puedes elegir libremente cuál prefieres. Ambas líneas de código son equivalentes:

<a href="http://www.ejemplo.com">Un enlace a mi ejemplo.</a>

<a href='http://www.ejemplo.com'>Un enlace a mi ejemplo.</a>

Asegúrate de no mezclar ambos tipos de comillas. El siguiente ejemplo muestra un código incorrecto:

<a href="http://www.ejemplo.com'>Un enlace a mi ejemplo.</a>

Si utilizas un tipo de comillas en tu documento HTML, puedes incluir el otro tipo de comillas para tus valores de atributo sin que esto te cause problemas:

<a href="http://www.ejemplo.com" title="¿A que es 'divertido'">Un enlace a mi ejemplo.</a>

Sin embargo, si deseas anidar unas comillas dentro de otras del mismo tipo (ya sea simples o dobles), tendrás que utilizar entidades HTML para las comillas. Por ejemplo, el siguiente código no va a funcionar:

<a href='http://www.ejemplo.com' title='¿A que es 'divertido'?'>Un enlace a mi ejemplo.</a>

Así que tendrás que hacer esto:

<a href='http://www.ejemplo.com' title='¿A que es &apos;divertido&apos;?'>Un enlace a mi ejemplo.</a>

Internet y páginas web

Para que un usuario pueda obtener y leer el contenido de una página web, se deben seguir algunos pasos básicos:

  • Para crear páginas web, el desarrollador tiene que crear archivos escritos en HTML (con cualquier editor de texto) y colocarlos en un servidor web (por ejemplo, usando un cliente ftp).
  • El código HTML de una página web le dice al navegador lo que necesita saber para mostrar la página. Si el programador completa el desarrollo de la página web correctamente, las páginas incluso se mostrarán bien en dispositivos móviles y de escritorio.
  • Una vez que los archivos se colocan en un servidor web, cualquier navegador puede recuperar las páginas web a través de Internet.
  • Finalmente, los usuarios utilizarán un ordenador o cualquier otro dispositivo conectado a Internet para visualizar la página web mediante un navegador.

El servidor web

Un servidor web es simplemente un ordenador conectado a Internet esperando peticiones de navegadores:

  • Los programadores almacenan HTML, archivos, imágenes, sonidos y otros tipos de archivos.
  • Los navegadores solicitan páginas HTML u otros recursos, como imágenes.
  • Si el servidor puede localizar los recursos, los envía a los navegadores.

El navegador web

Un navegador simplemente es una aplicación que se encarga de mostrar páginas web. El código HTML realizará el siguiente recorrido:

  • El código HTML parte del servidor, quien se encarga de enviar páginas web completas a los navegadores.
  • Los navegadores recuperan las páginas.
  • Los navegadores muestran las páginas HTML a los usuarios finales.

Elementos <!doctype> y <html>

En sus inicios, cuando el HTML llevaba poco tiempo (alrededor de 1991-1992), los doctypes servían como enlaces al conjunto de reglas que la página HTML debía seguir para que fuera considerado buen HTML. Un elemento doctype de aquella época podía parecerse a esto:

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

En la actualidad se ignora y se considera un legado histórico que hay que incluir para que todo funcione correctamente. <!DOCTYPE html> es la secuencia de caracteres más corta que se acepta como elemento doctype válido, que indica estamos utilizando la última versión de HTML (HTML5).

En segundo lugar debemos utilizar obligatoriamente el elemento <html> (elemento raíz), que incluirá todo el contenido de la página.

En resumen, todos los documentos HTML deben comenzar con una declaración de tipo de documento seguida del código de la página web en sí entre las etiquetas <html> and </html>:

<!doctype html>
<html lang="es">
...
</html>

El elemento <head>

Este elemento actúa como contenedor para todos los parámetros que se quieran incluir en el documento HTML que no serán visibles a los visitantes de la página. Incluye cosas como palabras clave y la descripción de la página que se quieran mostrar en los resultados de búsqueda, así como la hoja de estilo para formatear nuestro contenido, declaraciones de codificación de caracteres y más. Por ejemplo:

<!doctype html>
<html lang="es">
  <head>
    <!-- Etiquetas obligatorias -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

    <!-- Hoja de estilos (CSS) de Bootstrap -->
    <link rel="stylesheet" href="bootstrap.min.css" />
    ...
  </head>  
  ...
</html>

El elemento <meta>

Metadata

Es importante que las páginas web contengan una lista de elementos de metadatos para proporcionar a los motores de búsqueda (por ejemplo, Google, DuckDuckGo, Bing, etc.) información semántica como el autor, palabras clave, descripción, etc. Dado que este tipo de información no se muestra al usuario directamente por el navegador, los elementos de metadatos deben colocarse dentro del elemento <head>:

<head>
  <meta name="description" content="My página web" />
  <meta name="keywords" content="HTML, CSS, JavaScript" />
  <meta name="author" content="Fernando" />
</head>

Charset

Uno de los elementos <meta> más importantes es el que define la especificación del charset. Es muy habitual especificar que el documento HTML usará la codificación UTF-8, que incluye la gran mayoría de caracteres de todos los idiomas humanos escritos. De esta forma, el navegador mostrará correctamente cualquier contenido textual que pongamos en el documento, tales como caracteres á, é, ü, ñ, etc.:

<meta charset="utf-8" />

Viewport

HTML5 introdujo un método para permitir a los desarrolladores controlar ciertos parámetros del área visible de la página web (viewport), a través de la etiqueta <meta> . El viewport puede variar dependiendo del dispositivo, y puesto que hay diferencias entre un móvil y una pantalla de ordenador, es conveniente establecer el comportamiento adecuado para que nuestra página web se muestre correctamente en cualquier dispositivo. Podemos utilizar por ejemplo la siguiente línea de código en todas nuestras páginas web:

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

El elemento <title>

Este elemento establece el título de la página web, que es el título que aparece en la pestaña del navegador en la que se carga dicha página. El título también se utiliza para describir la página cuando se marca como favorita. Se puede definir de la siguiente forma:

<title>Mi primera página web</title>

El elemento <link>

El elemento <link> especifica que el documento actual se encuentra enlazado con un recurso externo. El uso más habitual de este elemento es el de aplicar hojas de estilos al documento.

Mediante el atributo <rel> especificaremos el tipo de relación del documento enlazado con el actual. El atributo debe ser una lista de tipos de enlaces separados por espacio. El uso más común para este atributo es especificar el enlace a una hoja de estilos externa: el atributo rel se establece con valor stylesheet, y el atributo href se establece con la URL de la hoja de estilos externa para dar formato a la página:

<link rel="stylesheet" href="estilos.css" />

El elemento <script>

El elemento <script> se utiliza para incluir código ejecutable o datos. Se usa principalmente para incluir o enlazar código JavaScript, aunque también se puede usar para incluir otros lenguajes de programación tales como  WebGL o incluso también datos en formato JSON. Utilizando el atributo <src> podemos especificar la url de un fichero externo (esto se puede usar como alternativa a incluir el código JavaScript directamente en nuestro documento). Por ejemplo, en el caso de querer utilizar código JavaScript en nuestra página web, procederíamos de la siguiente forma:

<!-- Fichero externo con código JavaScript -->
<script src="javascript.js"></script>
...
<!-- Definimos código JavaScript dentro del fichero HTML -->
<script>
function miFuncion() {
  document.getElementById("demo").innerHTML = "¡Hola JavaScript!";
}
</script>

El elemento <body>

El elemento <body> contiene todo el contenido que quieres mostrar a los usuarios cuando visitan tu página, ya sea texto, imágenes, vídeos, juegos, pistas de audio reproducibles o cualquier otra cosa. Se abre justo después de cerrar el elemento <head> y se debe cerrar justo antes de cerrar el elemento <html>. Por ejemplo, con el siguiente código, el navegador sólo mostrará en pantalla el texto «¡Hola mundo!»:

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <meta name="description" content="Mi primera página web" />
  <meta name="keywords" content="HTML, CSS, JavaScript" />
  <meta name="author" content="Fernando" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <title>Página de ejemplo</title>
</head>
<body>
  ¡Hola mundo!
</body>
</html>

Debemos matizar que dentro de una página web no podemos poner directamente los caracteres “<” y “>” porque el navegador los confundiría con los caracteres que se utilizan para la creación de etiquetas.

Para cierto tipo de caracteres, es necesario utilizar otra sintaxis que suele constar de un ampersand seguido de su nombre identificativo y un punto y coma. Por ejemplo:

&amp;&
&lt;<
&quot;
&gt;>
&copy;©
&divide;÷
&euro;

Ejercicio propuesto: Hola mundo

Crea una página web para mostrar el texto «¡Hola mundo, mi nombre es … !» dentro del elemento <body>. Además, deberás utilizar el elemento <head> para mostrar el texto «Saludos» como título en la pestaña del navegador. Para finalizar, añade y completa la página web con el resto de elementos <meta> (charset, viewport, author, description y keywords), y comprueba el resultado en el navegador.

Párrafos y secciones

Para que el contenido textual de una página web resulte más legible, es muy importante utilizar párrafos y secciones.

El texto de cada párrafo se debe colocar entre las etiquetas <p> y </p>, y para indicar el comienzo de cada sección de nuestro contenido, disponemos de encabezados de varios niveles: <h1>, <h2>, <h3>, <h4>, <h5> y <h6> (del más grande al más pequeño). Podemos utilizar estos elementos de la siguiente forma:

...
<h1>Encabezado de primer nivel</h1>
<p>Mi primer párrafo</p>
<p>Mi segundo párrafo</p>
<p>Mi tercer párrafo</p>

<h2>Encabezado de segundo nivel</h2>
<p>Mi cuarto párrafo</p>
<p>Mi quinto párrafo</p>
...

Ejercicio propuesto: Párrafos

Crea una página web para mostrar diferentes párrafos utilizando las etiquetas <p> y </p>, todos ellos con diferentes líneas de cualquier texto. A continuación, añade el resto de elementos <meta> (charset, viewport, author, description, keywords y title), y comprueba el resultado utilizando tu navegador.

Ejercicio propuesto: Encabezados y párrafos

Crea una página web para mostrar varios encabezados de diferentes niveles, utilizando las etiquetas <h1> a <h6>. Añade además varios párrafos (encerrados entre las etiquetas <p> y </p> ) con cualquier texto, colocando un párrafo diferente después de cada encabezado. Para concluir, añade el resto de elementos <meta> (charset, viewport, author, description, keywords and title), y comprueba el resultado en tu navegador.

Ejercicio propuesto: Párrafos dentro de la misma sección

Utilizando las etiquetas correspondientes (<h1> y <p>), añade el código HTML necesario para crear una página web que muestre el siguiente texto con el formato correcto:

Alicante

Alicante (en valenciano y cooficialmente Alacant) es una ciudad y un municipio de España, capital de la provincia homónima, en la Comunidad Valenciana. Ciudad portuaria, está situada en la costa mediterránea. Con 337.482 habitantes (INE, 2020), es el segundo municipio más poblado de la comunidad autónoma y el undécimo del país.

Forma una conurbación de 468.782 habitantes con muchas de las localidades de la comarca del Campo de Alicante: San Vicente del Raspeig, San Juan de Alicante, Muchamiel y Campello. Estadísticamente se asocia también con el área metropolitana de Alicante-Elche, que cuenta con 757 085 habitantes. 

Ciudad eminentemente turística y de servicios, es uno de los destinos turísticos más importantes de España.

Ejercicio propuesto: Encabezados de diferente nivel

Utilizando las etiquetas HTML adecuadas, crea una página web que tenga seis encabezados con el texto «Hola». Comienza con el encabezado más importante (el más grande) y ves bajando hasta el de menor relevancia (el más pequeño).

Ejercicio propuesto: Encabezados, niveles y párrafos

Utiliza las etiquetas correctas (<h1>, <h2>, <h3> y <p>) sobre el texto que aparece a continuación:

Valencia

Valencia (en valenciano y oficialmente, València) ​es un municipio y una ciudad de España, capital de la provincia homónima y de la Comunidad Valenciana. Con una población de 800.215 habitantes (2020), que sube a 1.581.057 habitantes (2020) si se incluye su espacio urbano.​ Es la tercera ciudad y área metropolitana más poblada de España, por detrás de Madrid y Barcelona.

Geografía

Localización

La ciudad de Valencia se encuentra en la costa mediterránea de la península ibérica, sobre la gran llanura aluvial de los ríos Júcar y Turia, justo en el centro del golfo de Valencia. La ciudad primitiva estaba ubicada a unos cuatro kilómetros del mar, en una isla fluvial del Turia. Los montes más cercanos a la ciudad son algunas de las últimas estribaciones del sistema Ibérico en la Comunidad Valenciana, como el Cabeçol de El Puig y la sierra Calderona, a unos 12 km y 25 km al norte de la ciudad respectivamente.

Clima

Valencia cuenta con un clima mediterráneo suave y ligeramente lluvioso durante los inviernos y caluroso y seco durante los veranos. De acuerdo con los criterios de la clasificación climática de Köppen, Valencia tiene un clima de transición entre los climas mediterráneo y semiárido cálido. La temperatura media anual es de 18.4 °C.

El elemento <br>

El elemento HTML line break <br> produce un salto de línea en el texto (retorno de carro). Es útil para escribir un poema o una dirección, donde la división de las líneas es muy relevante.

Debemos tener en cuenta que no se debe utilizar <br> para incrementar el espacio entre líneas de texto; para ello se debe utilizar la propiedad margin de CSS o el elemento <p>.

Como se puede observar en el siguiente ejemplo, se utiliza un elemento <br /> cada vez que queremos cambiar de línea. El texto que coloquemos después del elemento <br /> aparecerá al comienzo de la siguiente línea:

<p> 
  Mozilla Foundation<br />
  1981 Landings Drive<br />
  Building K<br />
  Mountain View, CA 94043-0801<br />
  USA
</p>

Ejercicio propuesto: Poemas

Crea una página web que contenga diversos poemas de diversos autores, como el que tienes a continuación. Debes utilizar <h1> y <h2> para los títulos, y párrafos y saltos de línea para el resto.

Nota: Deberías utilizar <h1> para el encabezado principal y <h2> para el resto de encabezados. Ten en cuenta también que no puedes utilizar <br /> para crear márgenes entre cada poema. Deberás usar párrafos que contengan cada poema, y saltos de línea para cada verso.
POEMAS

Gustavo Adolfo Bécquer

Del salón en el ángulo oscuro,
de su dueña tal vez olvidada,
silenciosa y cubierta de polvo,
veíase el arpa.

¡Cuánta nota dormía en sus cuerdas,
como el pájaro duerme en las ramas,
esperando la mano de nieve
que sabe arrancarlas!

¡Ay!, pensé; ¡cuántas veces el genio
así duerme en el fondo del alma,
y una voz como Lázaro espera
que le diga «Levántate y anda»!

...

Ejercicio propuesto: Direcciones

Crea una página web para mostrar diferentes direcciones, similares a la que tienes a continuación (debes usar encabezados de tipo <h1> y <h2> , párrafos y saltos de línea).

Nota: Deberías utilizar un encabezado <h1> para el título principal y <h2> para el resto de encabezados. Ten en cuenta también que no debes utilizar <br /> para crear márgenes entre cada dirección. Al igual que el ejercicio anterior, utiliza párrafos para cada dirección y saltos de línea para el resto.
DIRECCIONES

Mozilla

331 E. Evelyn Avenue
Mountain View, CA
94041
USA

...

El elemento <pre>

El elemento <pre> (o Texto HTML Preformateado) representa texto que mantiene la estructura que se utilizó en el editor. El texto en este elemento típicamente se muestra con una fuente fija o monoespaciada (no proporcional), exactamente como se mostraba en el archivo mientras se editaba. Los espacios dentro de este elemento también se muestran como se escribieran en el editor. Por ejemplo:

<pre>
 -----------------------------
< Soy un experto en mi campo. >
 -----------------------------
         \   ^__^ 
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||
</pre>

Ejercicio propuesto: ASCII art

Crea un documento para mostrar diversos dibujos utilizando caracteres, de forma similar al ejemplo.

Nota: Puedes encontrar diversos ejemplos en los siguientes enlaces: https://www.asciiart.eu/ , https://en.wikipedia.org/wiki/ASCII_art , https://asciiart.website/ , https://fsymbols.com/text-art/ , etc.
 
  ----------------------------
< Soy un experto en mi campo. > 
  ----------------------------
        \   ^__^
         \  (oo)\_______ 
            (__)\       )\/\ 
                ||----w | 
                ||     ||


         .^.    .^.
        (   \  (   \
         \   }  \   }
        ( `  { ( `  {
         \   }  \   }
         ( `  \ ( `  \
          \   }  \   }
         ( `  { ( `  {
        .-\   |-^-. /
       (  .\ /     '.
        '/  O _______\
         | .-'#### ###
       ,-./  # / \ / \___
      { ,-     \@/_\@'   '.
      { `.       .'        }
       `._   /    )._     _"
          \   `--' __"---"
           `. /  ,'  \  \
   Ahas      /  /     |  )
            |  /      ; /
             \/ '-,,-'\/


$$$_____$$$$$$$_$$$$$$$_$$$_______$$$_$$$$$$$$$$
$$$____$$$____$$$____$$$_$$$_____$$$__$$$_______
$$$____$$$_____$_____$$$_$$$_____$$$__$$$_______
$$$_____$$$_________$$$___$$$___$$$___$$$$$$$$__
$$$______$$$_______$$$_____$$$_$$$____$$$_______
$$$_______$$$_____$$$______$$$_$$$____$$$_______
$$$$$$$$$___$$$$$$$_________$$$$$_____$$$$$$$$$$

...

Cuentos para ser escuchados 2

La muy esperada continuación del exitoso libro Cuentos para ser escuchados

Acompaña a nuestros protagonistas en estos doce nuevos cuentos.

Emotivos relatos para potenciar la capacidad de superación

Cuentos infantiles educativos que tratan por un lado temas cotidianos tales como la sostenibilidad del medio en el que vivimos y los beneficios del trabajo en equipo, y por otro lado abordan temas sensibles tales como la pobreza, los complejos, la discapacidad y las enfermedades raras, para que los más pequeños crezcan acostumbrados a la diversidad y no les dé miedo lo diferente.

Conmovedoras historias que ensalzan el valor de la amistad y la familia

Nos ofrecen un punto de vista entrañable y espontáneo ante diversas situaciones inspiradas en hechos reales a las que se enfrentan nuestros protagonistas, utilizando un lenguaje adaptado a los niños que consigue emocionar a los adultos.

  • El discurso. Conoceremos a un niño con una actitud muy positiva, capaz de mejorar el estado de ánimo de quienes le rodean.
  • Con sus ojos y los míos. Un cuento dentro de otro cuento… Dos amigas inseparables con fantásticas habilidades… ¿Ficción o realidad?
  • La propuesta. Si todos viéramos el mundo con los ojos de un niño, no habrían problemas grandes ni soluciones imposibles.
  • ¿Y en vacaciones? El protagonista se pone triste cuando comienzan las vacaciones… ¿por qué?
  • Ocaso tecnológico. La evolución de las nuevas tecnologías podría llegar a conducirnos a un futuro incierto. Las nuevas generaciones deberán encontrar el equilibrio entre uso y abuso.
  • El coche solar. Un equipo de ingenieros debe aprender una lección que no está en sus libros de texto.
  • Villa sonrisas. Una pequeña con mucho desparpajo elegirá el nuevo nombre del pueblo en el que vive.
  • Secretos en reunión. Descubre por qué Julia y Andrés se han enfadado. Es importante conocer el punto de vista de quienes nos rodean.
  • ¿Has oído eso? Esta historia te pondrá los pelos de punta… ¿quieres conocer el final?
  • El uniforme. Una conmovedora historia dedicada a esos amigos incondicionales que siempre están a nuestro lado, pase lo que pase, sin pedir nunca nada a cambio.
  • Papá «pesao». Un cuento muy típico, y un papá muy pesado.
  • Los candidatos. Un fantástico reto que conducirá al protagonista a resolver diversos acertijos con ayuda de sus padres.

Otros libros del autor

Todos los beneficios son para Alianza española de familias de VHL

Comprando el libro además ponemos un granito de arena para ayudar a la asociación de enfermos de von Hippel-Lindau (alianzavhl.org). Por ello, no sólo pretendemos regalar ilusión a quien lea el libro, sino a todos aquellos enfermos y familiares que están esperando que les echemos una mano, ya que todos los beneficios de la venta del libro van destinados íntegramente a ellos.

Una app muy sencilla para guardar sitios interesantes con ubicaciones y fotografías con IONIC 5+Angular+Cordova

El objetivo: Guardar ubicaciones e imágenes

En este ejercicio vamos a demostrar que puede resultar muy sencillo desarrollar una aplicación que nos permita mantener un registro de lugares interesantes, guardando la ubicación precisa y una imagen identificativa de cada uno.

Será el mismo navegador el que nos proporcione la ubicación actual de forma automática, y nos permita elegir las imágenes a utilizar, de entre las que tengamos en nuestros equipos. Además, al ejecutarla como app en nuestros móviles, podremos utilizar también la cámara en el mismo momento, pudiendo hacer una foto que se quedará guardada en nuestra aplicación. De esa forma, tendremos imágenes asociadas con la latitud y la longitud de los sitios donde hayamos hecho las fotos, pudiendo acceder además al mapa correspondiente con un solo clic.

Con menos de 100 líneas de código

Veremos que al utilizar IONIC 4 + Angular, con menos de 100 líneas de código podemos desarrollar una aplicación multiplataforma, que funcionará perfectamente en cualquier navegador, o instalada como app en nuestros dispositivos móviles. Y todo ello, con el mismo código fuente, sin cambiar ni una sola línea.

La funcionalidad de la aplicación

La aplicación dispondrá de un cuadro de texto donde podamos especificar la descripción del nuevo lugar que queramos registrar.

Si ya hemos introducido alguna descripción, se habilitará un nuevo control para poder elegir una imagen. Si estamos ejecutando la aplicación desde nuestro ordenador de escritorio, podremos elegir cualquier imagen de las que se encuentran en nuestro equipo. Si ejecutamos la aplicación desde nuestros dispositivos móviles, podremos hacer una foto en ese mismo momento.

Una vez introducida la descripción y elegida o hecha la foto, la aplicación obtendrá automáticamente la ubicación en la que nos encontremos y creará un elemento en la lista de lugares en el que aparecerá la foto y la descripción.

Al hacer clic sobre cada elemento de la lista, si estamos utilizando el navegador de nuestro ordenador de escritorio, abrirá la página web correspondiente de Google Maps para mostrarnos la ubicación precisa. Si estamos ejecutando la aplicación desde nuestros dispositivos móviles, nos permitirá elegir qué aplicación se utilizará para visualizar la ubicación.

Además, podremos reordenar los elementos de la lista activando un control por cada elemento, que se podrá ocultar o mostrar mediante un botón ubicado en la barra superior de la aplicación.

Por último, permitiremos borrar cualquier elemento de la lista utilizando un botón oculto que se mostrará al deslizar el elemento correspondiente a la derecha.

Primeros pasos

Código base de la aplicación

Para comenzar a desarrollar nuestra aplicación deberemos partir de un código base generado automáticamente por IONIC. Bastará con ejecutar el siguiente comando para generar los ficheros necesarios:

ionic start lugares blank --type=angular --cordova --no-git --no-link

Al finalizar el proceso, se habrá creado un directorio con el nombre lugares, que constituye el directorio raíz de nuestro proyecto, donde tendremos todo el código necesario para continuar con el desarrollo de nuestra aplicación. Para realizar los siguientes pasos deberemos acceder primero a dicha carpeta:

cd lugares

Vamos a instalar la versión más estable hasta el momento:

npm install @ionic/[email protected]

Y a partir de ahora ya podemos comenzar a añadir el código específico de nuestra aplicación. Puesto que toda la funcionalidad se encuentra ubicada en una única pantalla, sólo vamos a modificar dos ficheros:

  1. src/app/home/home.page.html: Código HTML.
  2. src/app/home/home.page.ts: Código TypeScript.

Probando la aplicación en el navegador

La misma herramienta de consola de IONIC se puede utilizar como servidor web, lo que nos permitirá  probar nuestra aplicación fácilmente en el navegador. Además, cada vez que realicemos cualquier cambio en el código fuente, veremos cómo se actualiza el resultado automáticamente. Bastará con ejecutar el siguiente comando desde la carpeta raíz del proyecto donde se encuentra nuestra aplicación, dejando el terminal abierto:

ionic serve

Si todo ha ido bien, se compilará la aplicación y deberíamos visualizar en el navegador algo del siguiente estilo:

(bastará con pulsar Ctrl+C en el terminal para finalizar la ejecución del comando)

Código HTML

El encabezado

Como ya viene siendo habitual, colocaremos una barra superior que contenga el título y el botón de reordenar:

<ion-header>
  ...
  <ion-title>Places!</ion-title>
  ...
  <ion-button (click)="reorder=!reorder">
  ...    
</ion-header>

En cada pulsación del botón de reordenar, activaremos o desactivaremos dicha funcionalidad cambiando simplemente el valor del atributo correspondiente.

El formulario para la descripción y la imagen

Utilizaremos un simple cuadro de texto para introducir la descripción del lugar que queramos registrar y un elemento HTML estándar de tipo fichero para elegir la imagen:

<ion-item>
  <ion-input placeholder="Enter description" [(ngModel)]="text"></ion-input>
</ion-item>
<ion-item *ngIf="text.length">
  <input type="file" accept="image/*" (change)="add($event)" />
  <ion-icon slot="end" name="camera" (click)="add()"></ion-icon>
</ion-item>

Debemos destacar de nuevo el uso de la directiva ngModel, que nos permitirá enlazar el valor del atributo text, de forma que cualquier modificación en el código HTML cambiará automáticamente el valor del atributo en el código TypeScript y viceversa.

En segundo lugar, también destacamos el uso de la directiva ngIf, que automatiza la creación del campo de tipo fichero, de forma que dicho campo no existirá hasta que se introduzca algún texto en el campo de la descripción. Además, al inicializar de nuevo la descripción desde el código TypeScript, dicho campo desaparecerá automáticamente.

Por último, al final del cuadro de elección de imagen colocaremos un icono para acceder a la cámara de nuestros dispositivos móviles, utilizando como imagen la fotografía que realicemos en ese momento. Esta funcionalidad no estará operativa cuando utilicemos la aplicación desde el navegador.

Los elementos de la lista

Cada elemento de la lista será un enlace a la página web correspondiente de Google Maps para conocer la ubicación del lugar, de forma que podamos acceder fácilmente con un simple clic en el elemento correspondiente. Para ello bastará con especificar la url mediante el atributo href del elemento <ion-item></ion-item> (más información aquí).

Además, utilizaremos el elemento <ion-thumbnail></ion-thumbnail> para mostrar una miniatura de la imagen. Por último, añadiremos dos botones, uno para reordenar (<ion-reorder></ion-reorder>) y otro para borrar (<ion-item-option></ion-item-option>):

<ion-item [href]='item.url'>
  <ion-thumbnail slot="start"><img [src]="item.img" /></ion-thumbnail>{{item.name}}
  <ion-reorder slot="end"></ion-reorder>
</ion-item>
<ion-item-options side="start">
  <ion-item-option color="danger" (click)="delete(i)">
    <ion-icon slot="icon-only" name="trash"></ion-icon>
  </ion-item-option>
</ion-item-options>

Mostrando todos los elementos

Vamos a hacer uso del potencial de Angular para mostrar la lista completa de lugares:

<ion-reorder-group [disabled]="!reorder" (ionItemReorder)="move($event.detail)">
  <ion-item-sliding *ngFor="let item of list; let i=index">
    ...
  </ion-item-sliding>
</ion-reorder-group>

En primer lugar utilizaremos la expresión [disabled]="!reorder" para activar o desactivar la opción de reordenar los elementos. Mediante los corchetes enlazamos el valor del atributo reorder de TypeScript para poder acceder a su valor directamente. El evento (ionItemReorder) nos indicará que se ha cambiado de sitio algún elemento, y por lo tanto ejecutaremos el método move(), cuya funcionalidad veremos más adelante.

Por último, sólo necesitamos realizar un bucle utilizando la directiva ngFor, que además nos proporcionará cada elemento item del array que representa la lista, así como el índice i de cada uno de ellos.

El fichero «home.page.html» completo

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Places!</ion-title>
    <ion-buttons slot="primary">
      <ion-button (click)="reorder=!reorder">
        <ion-icon slot="icon-only" name="reorder"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>       
</ion-header>
<ion-content>
  <ion-list #myList lines="full">
    <ion-item color="light">
      <ion-input placeholder="Enter description" [(ngModel)]="text"></ion-input>
    </ion-item>
    <ion-item color="light" *ngIf="text.length">
      <input type="file" accept="image/*" (change)="add($event)" />
      <ion-icon slot="end" name="camera" (click)="add()"></ion-icon>
    </ion-item>    
    <ion-reorder-group [disabled]="!reorder" (ionItemReorder)="move($event.detail)">
      <ion-item-sliding *ngFor="let item of list; let i=index">
        <ion-item [href]='item.url'>
          <ion-thumbnail slot="start"><img [src]="item.img" /></ion-thumbnail>{{item.name}}
          <ion-reorder slot="end"></ion-reorder>
        </ion-item>
        <ion-item-options side="start">
          <ion-item-option color="danger" (click)="delete(i)">
            <ion-icon slot="icon-only" name="trash"></ion-icon>
          </ion-item-option>
        </ion-item-options>
      </ion-item-sliding>
    </ion-reorder-group>
  </ion-list>
</ion-content>

Código TypeScript

Los atributos

En este ejercicio sólo necesitamos cuatro campos para guardar todos los datos necesarios:

@ViewChild('myList') listRef: List;
reorder: boolean;
list: any;
text: string;

El propósito de cada uno de ellos es el siguiente:

  • listRef: Referencia a la lista de html para poder cerrar todos los elementos antes de borrarlos.
  • reorder: Su valor (falso o verdadero) indicará si se encuentra habilitada o no la funcionalidad de reordenar.
  • list: Array que contendrá todos los lugares.
  • text: Descripción del nuevo lugar que queremos registrar.

Los métodos

  • constructor: Recuperará la lista guardada para que se muestre al iniciar la aplicación.
  • add: Añadirá un nuevo lugar a la lista de lugares.
  • save: Guardará en localStorage el listado de lugares para que no se pierda al cerrar la aplicación o recargar el contenido del navegador.
  • delete: Borrará un elemento de la lista.
  • move: Moverá un elemento de la lista a otra posición.

Obteniendo la ubicación

Para conocer la ubicación desde la que vamos a registrar un nuevo lugar, utilizaremos la funcionalidad de geolocalización de HTML, de forma que consigamos que el código funcione perfectamente tanto en el navegador, como en la app una vez compilada (más información aquí):

navigator.geolocation.getCurrentPosition(pos => {
  let url = "https://maps.google.com/maps?&z=15&t=k&q="+pos.coords.latitude+" "+pos.coords.longitude;
  ...
});

Además, crear un enlace a Google Maps conociendo la ubicación resulta muy sencillo. En nuestro caso especificamos un zoom razonable (z=15), el tipo de mapa satélite (t=k), y la latitud y la longitud (q=…). Se puede obtener más información en la página oficial de Google, o también por ejemplo aquí.

Indicador de ejecución en proceso

Mientras se obtiene la ubicación y se procesa la imagen, resulta conveniente bloquear la aplicación mediante algún indicador para informar al usuario que todavía no se ha completado la acción. Para ello mostraremos un indicador en pantalla utilizando la funcionalidad que nos proporciona IONIC (más información aquí):

async add(event) {
  let loading = await this.loadingController.create();
  loading.present();
  ...
  loading.dismiss();
}

Obteniendo la imagen

Utilizando simple código HTML y JavaScript, podemos obtener la imagen seleccionada en formato base 64, de forma que la podemos guardar como si se tratara de cualquier otra cadena de texto (más información aquí, o aquí):

...
<input type="file" (change)="add($event)" />
...
<img [src]="item.img" />
...
async add(event) {
  let reader = new FileReader();
  reader.onload = (data:any) => {
    item.img = data.target.result;
    ...
  }
  reader.readAsDataURL(event.target.files[0]);
}

Además, añadiremos la funcionalidad necesaria para abrir la cámara cuando ejecutemos la aplicación en nuestros dispositivos móviles (más información en la documentación de IONIC y en Cordova):

...
const options:CameraOptions = {targetWidth:100,destinationType:this.camera.DestinationType.DATA_URL};
this.camera.getPicture(options).then(data => {
  this.list.unshift({name:this.text,img:"data:image/jpeg;base64,"+data,url:url});
  this.save();         
});
...

El fichero «home.page.ts» completo

import { Component, ViewChild } from '@angular/core';
import { List, LoadingController } from '@ionic/angular';
import { Camera, CameraOptions } from '@ionic-native/camera/ngx';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {
  @ViewChild('myList') listRef: List;
  reorder: boolean;
  list: any;
  text: string;

  constructor(public loadingController:LoadingController,private camera:Camera) {
    this.text = "";
    this.list = localStorage.getItem('places-list');
    if (this.list) this.list = JSON.parse(this.list);
    else this.list = [];
  }

  async add(event?) {
    let loading = await this.loadingController.create({duration:15000});
    loading.present();

    navigator.geolocation.getCurrentPosition(pos => {
      let url = "https://maps.google.com/maps?&z=15&t=k&q="+pos.coords.latitude+" "+pos.coords.longitude;

      if (event) {
        let reader = new FileReader();
        reader.onload = (data:any) => {
          this.list.unshift({name:this.text,img:data.target.result,url:url});
          this.save();
          loading.dismiss();
        }
        reader.readAsDataURL(event.target.files[0]);
      }
      else {
        loading.dismiss();
        const options:CameraOptions = {targetWidth:100,destinationType:this.camera.DestinationType.DATA_URL};
        this.camera.getPicture(options).then(data => {
          this.list.unshift({name:this.text,img:"data:image/jpeg;base64,"+data,url:url});
          this.save();         
        });
      }
    });
  }

  save() {
    localStorage.setItem('places-list', JSON.stringify(this.list));
    this.text = "";
  }

  delete(item) {
    this.listRef.closeSlidingItems();
    this.list.splice(item, 1);
    this.save();
  }

  move(indexes) {
    let item = this.list[indexes.from];
    this.list.splice(indexes.from, 1);
    this.list.splice(indexes.to, 0, item);
    this.save();
  }
}

Icono y pantalla de bienvenida

Si queremos cambiar el icono o la pantalla de bienvenida, bastará con actualizar los archivos icon.png y splash.png respectivamente, colocándolos en la carpeta resources de nuestro proyecto (sobrescribiendo los que allí estuvieran, ya que normalmente IONIC nos habrá proporcionado unos por defecto). Después sólo debemos ejecutar el comando correspondiente para que ionic genere o actualice todos los archivos necesarios:

ionic cordova resources

Compilando la aplicación

Plugins de geolocalización y cámara

Para que la aplicación tenga los permisos correctos, y podamos utilizar la funcionalidad nativa para conocer la ubicación, añadiremos el plugin correspondiente (más información aquí):

ionic cordova plugin add cordova-plugin-geolocation --save

Además, para utilizar la cámara también echaremos mano de otro plugin, esta vez utilizando la API nativa que nos proporciona IONIC, ya que sólo podemos acceder a dicha funcionalidad en nuestros dispositivos móviles (más información aquí):

ionic cordova plugin add cordova-plugin-camera --save
npm install --save @ionic-native/[email protected]

Debemos recordar que toda la funcionalidad de la aplicación se encontrará disponible tanto en el navegador como en la app, exceptuando la cámara, ya que es específica del dispositivo, y no estará operativa en el navegador.

También será necesario modificar el archivo app.module.ts para poder acceder a la API de la cámara:

...
import { Camera } from '@ionic-native/camera/ngx';
...
@NgModule({
  ...
  providers: [
    ...
    Camera,
    ...
  ],
  ...
})
export class AppModule {}

El archivo «app.module.ts» completo

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Camera } from '@ionic-native/camera/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    Camera,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Generando el archivo APK

Para instalar la aplicación en nuestros dispositivos móviles, tenemos que compilar el código fuente:

ionic cordova build android --prod

O también lo podemos ejecutar directamente  en el móvil que tengamos conectado a nuestro ordenador:

ionic cordova run android --prod

El resultado

Puedes hacer clic aquí para probar la aplicación propuesta. Se puede observar que el mismo código de la app generada también puede funcionar perfectamente en el navegador como una página web.

Una app muy sencilla para guardar sitios interesantes con ubicaciones y fotografías con IONIC 5+Angular

El objetivo: Guardar ubicaciones e imágenes

En este ejercicio vamos a demostrar que puede resultar muy sencillo desarrollar una aplicación que nos permita mantener un registro de lugares interesantes, guardando la ubicación precisa y una imagen identificativa de cada uno.

Será el mismo navegador el que nos proporcione la ubicación actual de forma automática, y nos permita elegir las imágenes a utilizar, de entre las que tengamos en nuestros equipos. Además, al ejecutarla como app en nuestros móviles, podremos utilizar también la cámara en el mismo momento, pudiendo hacer una foto que se quedará guardada en nuestra aplicación. De esa forma, tendremos imágenes asociadas con la latitud y la longitud de los sitios donde hayamos hecho las fotos, pudiendo acceder además al mapa correspondiente con un solo clic.

Con sólo 100 líneas de código

Veremos que al utilizar IONIC 5 + Angular, con sólo 100 líneas de código (sumando HTML y Typescript) podemos desarrollar una aplicación multiplataforma, que funcionará perfectamente en cualquier navegador, o instalada como app en nuestros dispositivos móviles. Y todo ello, con el mismo código fuente, sin cambiar ni una sola línea.

La funcionalidad de la aplicación

La aplicación dispondrá de un cuadro de texto donde podamos especificar la descripción del nuevo lugar que queramos registrar.

Si ya hemos introducido alguna descripción, se habilitará un nuevo control para poder elegir una imagen. Si estamos ejecutando la aplicación desde nuestro ordenador de escritorio, podremos elegir cualquier imagen de las que se encuentran en nuestro equipo. Si ejecutamos la aplicación desde nuestros dispositivos móviles, podremos hacer una foto en ese mismo momento.

Una vez introducida la descripción y elegida o hecha la foto, la aplicación obtendrá automáticamente la ubicación en la que nos encontremos y creará un elemento en la lista de lugares en el que aparecerá la foto y la descripción.

Al hacer clic sobre cada elemento de la lista, si estamos utilizando el navegador de nuestro ordenador de escritorio, abrirá la página web correspondiente de Google Maps para mostrarnos la ubicación precisa. Si estamos ejecutando la aplicación desde nuestros dispositivos móviles, nos permitirá elegir qué aplicación se utilizará para visualizar la ubicación.

Además, podremos reordenar los elementos de la lista activando un control por cada elemento, que se podrá ocultar o mostrar mediante un botón ubicado en la barra superior de la aplicación.

Por último, permitiremos borrar cualquier elemento de la lista utilizando un botón oculto que se mostrará al deslizar el elemento correspondiente a la derecha.

Primeros pasos

Código base de la aplicación

Para comenzar a desarrollar nuestra aplicación deberemos partir de un código base generado automáticamente por IONIC. Bastará con ejecutar el siguiente comando para generar los ficheros necesarios:

ionic start lugares blank --type=angular --no-git --no-link

Al finalizar el proceso, se habrá creado un directorio con el nombre lugares, que constituye el directorio raíz de nuestro proyecto, donde tendremos todo el código necesario para continuar con el desarrollo de nuestra aplicación. Para realizar los siguientes pasos deberemos acceder primero a dicha carpeta:

cd lugares

Y a partir de ahora ya podemos comenzar a añadir el código específico de nuestra aplicación. Puesto que toda la funcionalidad se encuentra ubicada en una única pantalla, sólo vamos a modificar dos ficheros:

  1. src/app/home/home.page.html: Código HTML.
  2. src/app/home/home.page.ts: Código TypeScript.

Probando la aplicación en el navegador

La misma herramienta de consola de IONIC se puede utilizar como servidor web, lo que nos permitirá  probar nuestra aplicación fácilmente en el navegador. Además, cada vez que realicemos cualquier cambio en el código fuente, veremos cómo se actualiza el resultado automáticamente. Bastará con ejecutar el siguiente comando desde la carpeta raíz del proyecto donde se encuentra nuestra aplicación, dejando el terminal abierto:

ionic serve

Si todo ha ido bien, se compilará la aplicación y deberíamos visualizar en el navegador algo del siguiente estilo:

(bastará con pulsar Ctrl+C en el terminal para finalizar la ejecución del comando)

Código HTML

El encabezado

Como ya viene siendo habitual, colocaremos una barra superior que contenga el título y el botón de reordenar:

<ion-header>
  ...
  <ion-title>Places!</ion-title>
  ...
  <ion-button (click)="reorder=!reorder">
  ...    
</ion-header>

En cada pulsación del botón de reordenar, activaremos o desactivaremos dicha funcionalidad cambiando simplemente el valor del atributo correspondiente.

El formulario para la descripción y la imagen

Utilizaremos un simple cuadro de texto para introducir la descripción del lugar que queramos registrar y un elemento HTML estándar de tipo fichero para elegir la imagen:

<ion-item>
  <ion-input placeholder="Enter description" [(ngModel)]="text"></ion-input>
</ion-item>
<ion-item *ngIf="text.length">
  <input type="file" accept="image/*" (change)="add($event)" />
  <ion-icon slot="end" name="camera" (click)="add()"></ion-icon>
</ion-item>

Debemos destacar de nuevo el uso de la directiva ngModel, que nos permitirá enlazar el valor del atributo text, de forma que cualquier modificación en el código HTML cambiará automáticamente el valor del atributo en el código TypeScript y viceversa.

En segundo lugar, también destacamos el uso de la directiva ngIf, que automatiza la creación del campo de tipo fichero, de forma que dicho campo no existirá hasta que se introduzca algún texto en el campo de la descripción. Además, al inicializar de nuevo la descripción desde el código TypeScript, dicho campo desaparecerá automáticamente.

Por último, al final del cuadro de elección de imagen colocaremos un icono para acceder a la cámara de nuestros dispositivos móviles, utilizando como imagen la fotografía que realicemos en ese momento. Esta funcionalidad no estará operativa cuando utilicemos la aplicación desde el navegador.

Los elementos de la lista

Cada elemento de la lista será un enlace a la página web correspondiente de Google Maps para conocer la ubicación del lugar, de forma que podamos acceder fácilmente con un simple clic en el elemento correspondiente. Para ello bastará con especificar la url mediante el atributo href del elemento <ion-item></ion-item> (más información aquí).

Además, utilizaremos el elemento <ion-thumbnail></ion-thumbnail> para mostrar una miniatura de la imagen. Por último, añadiremos dos botones, uno para reordenar (<ion-reorder></ion-reorder>) y otro para borrar (<ion-item-option></ion-item-option>):

<ion-item [href]='item.url'>
  <ion-thumbnail slot="start"><img [src]="item.img" /></ion-thumbnail>{{item.name}}
  <ion-reorder slot="end"></ion-reorder>
</ion-item>
<ion-item-options side="start">
  <ion-item-option color="danger" (click)="delete(i)">
    <ion-icon slot="icon-only" name="trash"></ion-icon>
  </ion-item-option>
</ion-item-options>

Mostrando todos los elementos

Vamos a hacer uso del potencial de Angular para mostrar la lista completa de lugares:

<ion-reorder-group [disabled]="!reorder" (ionItemReorder)="move($event.detail)">
  <ion-item-sliding *ngFor="let item of list; let i=index">
    ...
  </ion-item-sliding>
</ion-reorder-group>

En primer lugar utilizaremos la expresión [disabled]="!reorder" para activar o desactivar la opción de reordenar los elementos. Mediante los corchetes enlazamos el valor del atributo reorder de TypeScript para poder acceder a su valor directamente. El evento (ionItemReorder) nos indicará que se ha cambiado de sitio algún elemento, y por lo tanto ejecutaremos el método move(), cuya funcionalidad veremos más adelante.

Por último, sólo necesitamos realizar un bucle utilizando la directiva ngFor, que además nos proporcionará cada elemento item del array que representa la lista, así como el índice i de cada uno de ellos.

El fichero «home.page.html» completo

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>Places!</ion-title>
    <ion-buttons slot="primary">
      <ion-button (click)="reorder=!reorder">
        <ion-icon slot="icon-only" name="reorder"></ion-icon>
      </ion-button>
    </ion-buttons>
  </ion-toolbar>       
</ion-header>
<ion-content>
  <ion-list lines="full">
    <ion-item color="light">
      <ion-input placeholder="Enter description" [(ngModel)]="text"></ion-input>
    </ion-item>
    <ion-item color="light" *ngIf="text.length">
      <input type="file" accept="image/*" (change)="add($event)" />
      <ion-icon slot="end" name="camera" (click)="add()"></ion-icon>
    </ion-item>    
    <ion-reorder-group [disabled]="!reorder" (ionItemReorder)="move($event.detail)">
      <ion-item-sliding *ngFor="let item of list; let i=index">
        <ion-item [href]='item.url'>
          <ion-thumbnail slot="start"><img [src]="item.img" /></ion-thumbnail>{{item.name}}
          <ion-reorder slot="end"></ion-reorder>
        </ion-item>
        <ion-item-options side="start">
          <ion-item-option color="danger" (click)="delete(i)">
            <ion-icon slot="icon-only" name="trash"></ion-icon>
          </ion-item-option>
        </ion-item-options>
      </ion-item-sliding>
    </ion-reorder-group>
  </ion-list>
</ion-content>

Código TypeScript

Los atributos

En este ejercicio sólo necesitamos cuatro campos para guardar todos los datos necesarios:

reorder: boolean;
list: any;
text: string;

El propósito de cada uno de ellos es el siguiente:

  • reorder: Su valor (falso o verdadero) indicará si se encuentra habilitada o no la funcionalidad de reordenar.
  • list: Array que contendrá todos los lugares.
  • text: Descripción del nuevo lugar que queremos registrar.

Los métodos

  • constructor: Recuperará la lista guardada para que se muestre al iniciar la aplicación.
  • add: Añadirá un nuevo lugar a la lista de lugares.
  • save: Guardará en localStorage el listado de lugares para que no se pierda al cerrar la aplicación o recargar el contenido del navegador.
  • delete: Borrará un elemento de la lista.
  • move: Moverá un elemento de la lista a otra posición.

Obteniendo la ubicación

Para conocer la ubicación desde la que vamos a registrar un nuevo lugar, utilizaremos la funcionalidad de geolocalización de HTML, de forma que consigamos que el código funcione perfectamente tanto en el navegador, como en la app una vez compilada (más información aquí):

navigator.geolocation.getCurrentPosition(pos => {
  let url = "https://maps.google.com/maps?&z=15&t=k&q="+pos.coords.latitude+" "+pos.coords.longitude;
  ...
});

Además, crear un enlace a Google Maps conociendo la ubicación resulta muy sencillo. En nuestro caso especificamos un zoom razonable (z=15), el tipo de mapa satélite (t=k), y la latitud y la longitud (q=…). Se puede obtener más información en la página oficial de Google, o también por ejemplo aquí.

Indicador de ejecución en proceso

Mientras se obtiene la ubicación y se procesa la imagen, resulta conveniente bloquear la aplicación mediante algún indicador para informar al usuario que todavía no se ha completado la acción. Para ello mostraremos un indicador en pantalla utilizando la funcionalidad que nos proporciona IONIC (más información aquí):

async add(event) {
  let loading = await this.loadingController.create();
  loading.present();
  ...
  loading.dismiss();
}

Obteniendo la imagen

Utilizando simple código HTML y JavaScript, podemos obtener la imagen seleccionada en formato base 64, de forma que la podemos guardar como si se tratara de cualquier otra cadena de texto (más información aquí, o aquí):

...
<input type="file" (change)="add($event)" />
...
<img [src]="item.img" />
...
async add(event) {
  let reader = new FileReader();
  reader.onload = (data:any) => {
    item.img = data.target.result;
    ...
  }
  reader.readAsDataURL(event.target.files[0]);
}

Además, añadiremos la funcionalidad necesaria para abrir la cámara cuando ejecutemos la aplicación en nuestros dispositivos móviles (más información en la documentación de Cordova):

...
  navigator.camera.getPicture(function success(data) {
    list.unshift({ name:this.text, img:"data:image/jpeg;base64,"+data, url:url });
    save();     
  }, function error(msg) {
  }, { targetWidth:100, navigator.camera.DestinationType.DATA_URL });
...

El fichero «home.page.ts» completo

import { Component } from '@angular/core';
import { LoadingController } from '@ionic/angular';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {
  reorder: boolean;
  list: any;
  text: string;

  constructor(public loadingController:LoadingController) {
    this.reorder = false;
    this.text = "";
    this.list = localStorage.getItem('places-list');
    if (this.list!=='undefined' && this.list!==null) this.list = JSON.parse(this.list);
    else this.list = [];
  }

  async add(event?) {
    let loading = await this.loadingController.create({duration:30000});
    loading.present();

    let text = this.text, list = this.list, save = this.save;
    this.text = "";

    navigator.geolocation.getCurrentPosition(pos => {
      let url = "https://maps.google.com/maps?&z=15&t=k&q="+pos.coords.latitude+" "+pos.coords.longitude;

      if (event) {
        let reader = new FileReader();
        reader.onload = (data:any) => {
          list.unshift({ name:text, img:data.target.result, url:url });
          loading.dismiss();
          save(list);
        }
        reader.readAsDataURL(event.target.files[0]);
      }
      else {
        (<any>navigator).camera.getPicture(function success(data) { 
          list.unshift({ name:text, img:"data:image/jpeg;base64,"+data, url:url });
          loading.dismiss();
          save(list);
        }, function error(msg) {
          loading.dismiss();
        }, { targetWidth:100, destinationType:(<any>navigator).camera.DestinationType.DATA_URL });
      }
    });
  }

  save(list) {
    localStorage.setItem('places-list', JSON.stringify(list));
    location.href = "index.html";
  }

  delete(item) {
    this.list.splice(item, 1);
    this.save(this.list);
  }

  move(indexes) {
    let item = this.list[indexes.from];
    this.list.splice(indexes.from, 1);
    this.list.splice(indexes.to, 0, item);
    this.save(this.list);
    indexes.complete();
  }
}

Compilando la aplicación

El fichero config.xml (plugins de geolocalización y cámara)

Para que la aplicación tenga los permisos correctos, y podamos utilizar la funcionalidad nativa para conocer la ubicación y acceder a la cámara, añadiremos los plugins correspondientes al fichero config.xml (más información aquí y aquí):

...
    <plugin name="cordova-plugin-geolocation" />
    <plugin name="cordova-plugin-camera" />
...

Debemos recordar que si compilamos la aplicación utilizando PhoneGap Build, el archivo config.xml se deberá guardar dentro de la carpeta www.

Por último, tengamos en cuenta que toda la funcionalidad de la aplicación se encontrará disponible tanto en el navegador como en la app, exceptuando la cámara, ya que es específica del dispositivo, y no estará operativa en el navegador.

El fichero index.html

Si utilizamos PhoneGap Build deberemos modificar también el fichero src/index.html para enlazar el fichero cordova.js (no tenemos que crearlo nosotros, sólo enlazarlo, ya que dicho archivo se creará automáticamente al compilar el código con PhoneGap Build):

...
<body>
  <app-root></app-root>
  <script type="text/javascript" src="cordova.js"></script>
</body>
...

El resultado

Puedes hacer clic aquí para probar la aplicación propuesta. Se puede observar que el mismo código que hemos estado desarrollando se puede subir a cualquier servidor y el resultado se puede visualizar perfectamente en el navegador como cualquier otra página web.

Una app muy sencilla para guardar sitios interesantes con ubicaciones y fotografías con IONIC 5+JavaScript

El objetivo: Guardar ubicaciones e imágenes

En este ejercicio vamos a demostrar que puede resultar muy sencillo desarrollar una aplicación que nos permita mantener un registro de lugares interesantes, guardando la ubicación precisa y una imagen identificativa de cada uno.

Será el mismo navegador el que nos proporcione la ubicación actual de forma automática, y nos permita elegir las imágenes a utilizar, de entre las que tengamos en nuestros equipos. Además, al ejecutar la app en nuestros móviles, podremos utilizar también la cámara en el mismo momento, pudiendo hacer una foto que se quedará guardada en nuestra aplicación. De esa forma, tendremos imágenes asociadas con la latitud y la longitud de los sitios donde hayamos hecho las fotos, pudiendo acceder además al mapa correspondiente con un solo clic.

Con menos de 100 líneas de código

Veremos que al utilizar IONIC 5, con menos de 100 líneas de código JavaScript podemos desarrollar una aplicación multiplataforma, que funcionará perfectamente en cualquier navegador, o instalada como app en nuestros dispositivos móviles. Y todo ello, con el mismo código fuente, sin cambiar ni una sola línea.

La funcionalidad de la aplicación

La aplicación dispondrá de un cuadro de texto donde podamos especificar la descripción del nuevo lugar que queramos registrar.

Además de poder introducir alguna descripción, se habilitará un nuevo control para poder elegir una imagen. Si estamos ejecutando la aplicación desde nuestro ordenador de escritorio, podremos elegir cualquier imagen de las que se encuentran en nuestro equipo. Si ejecutamos la aplicación desde nuestros dispositivos móviles, podremos hacer una foto en ese mismo momento.

Una vez introducida la descripción y elegida o hecha la foto, la aplicación obtendrá automáticamente la ubicación en la que nos encontremos y creará un elemento en la lista de lugares en el que aparecerá la foto y la descripción.

Al hacer clic sobre cada elemento de la lista, si estamos utilizando el navegador de nuestro ordenador de escritorio, abrirá la página web correspondiente de Google Maps para mostrarnos la ubicación precisa. Si estamos ejecutando la aplicación desde nuestros dispositivos móviles, nos permitirá elegir qué aplicación se utilizará para visualizar la ubicación.

Además, podremos reordenar los elementos de la lista activando un control por cada elemento, que se podrá ocultar o mostrar mediante un botón ubicado en la barra superior de la aplicación.

Por último, permitiremos borrar cualquier elemento de la lista utilizando un botón oculto que se mostrará al deslizar el elemento correspondiente a la derecha.

Código HTML

El encabezado

Como ya viene siendo habitual, colocaremos una barra superior que contenga el título y el botón de reordenar:

<ion-header>
  ...
  <ion-title>Places!</ion-title>
  ...  
  <ion-button onclick="toggleReorder()">
  ...
</ion-header>

En cada pulsación del botón de reordenar, activaremos o desactivaremos dicha funcionalidad cambiando simplemente el valor del atributo correspondiente.

El formulario para la descripción y la imagen

Utilizaremos un simple cuadro de texto para introducir la descripción del lugar que queramos registrar y un elemento HTML estándar de tipo fichero para elegir la imagen:

<ion-item>
  <ion-input placeholder="Enter description"></ion-input>
</ion-item>
<ion-item id="file">
  <input type="file" accept="image/*" onchange="addItem(event)" />
  <ion-icon slot="end" name="camera" onclick="addItem()"></ion-icon>
</ion-item>  

Destacamos el uso del elemento <input type="file">, que automatiza la creación del campo de tipo fichero, y nos permitirá elegir fácilmente una imagen para asociarla al lugar que queramos dejar registrado.

Por último, al final del cuadro de elección de imagen colocaremos un icono para acceder a la cámara de nuestros dispositivos móviles, utilizando como imagen la fotografía que realicemos en ese momento. Esta funcionalidad no estará operativa cuando utilicemos la aplicación desde el navegador.

Los elementos de la lista

Cada elemento de la lista será un enlace a la página web correspondiente de Google Maps para conocer la ubicación del lugar, de forma que podamos acceder fácilmente con un simple clic en el elemento correspondiente. Para ello bastará con especificar la url mediante el atributo href del elemento <ion-item></ion-item> (más información aquí).

Además, utilizaremos el elemento <ion-thumbnail></ion-thumbnail> para mostrar una miniatura de la imagen. Por último, añadiremos dos botones, uno para reordenar (<ion-reorder></ion-reorder>) y otro para borrar (<ion-item-option></ion-item-option>):

<ion-item-sliding>
  <ion-item href="...">
    <ion-thumbnail slot="start"><img src="..." /></ion-thumbnail>
    ...
    <ion-reorder slot="end"></ion-reorder>
  </ion-item>
  <ion-item-options side="start">
    <ion-item-option color="danger" onclick="deleteItem(...)">
      <ion-icon slot="icon-only" name="trash"></ion-icon>
    </ion-item-option>
  </ion-item-options>
</ion-item-sliding>

Mostrando todos los elementos

Bastará con hacer un simple bucle para mostrar la lista completa de lugares:

getList().forEach((item, index) => {
  document.querySelector('ion-reorder-group').innerHTML += 
    `<ion-item-sliding>
        <ion-item href='` + item.url + `'>
          <ion-thumbnail><img src="` + item.img + `" /></ion-thumbnail>` + 
          item.name + `<ion-reorder></ion-reorder>
        </ion-item>
        <ion-item-options>
          <ion-item-option onclick="deleteItem(` + index + `)">
            <ion-icon name="trash"></ion-icon>
          </ion-item-option>
        </ion-item-options>
     </ion-item-sliding>`;
});

Sólo necesitamos recorrer la lista utilizando por ejemplo un bucle forEach, que además nos proporcionará cada elemento item del array, así como el índice index de cada uno de ellos.

El fichero «index.html» completo

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/dist/ionic/ionic.esm.js"></script>
  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/dist/ionic/ionic.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/css/ionic.bundle.css"/>
  <script src="cordova.js"></script>
  <script src="places.js"></script>
  <title>Places!</title>
</head>
<body onload="onLoad()">
  <ion-app>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Places!</ion-title>
        <ion-buttons slot="primary">
          <ion-button onclick="toggleReorder()">
            <ion-icon slot="icon-only" name="reorder-four"></ion-icon>
          </ion-button>
        </ion-buttons>
      </ion-toolbar>       
    </ion-header>
    <ion-content>
      <ion-list lines="full">
        <ion-item color="light">
          <ion-input placeholder="Enter description"></ion-input>
        </ion-item>
        <ion-item color="light" id="file">
          <input type="file" accept="image/*" onchange="addItem(event)" />
          <ion-icon slot="end" name="camera" onclick="addItem()"></ion-icon>
        </ion-item>    
        <ion-reorder-group disabled="false">
        </ion-reorder-group>
      </ion-list>
    </ion-content>
  </ion-app>
</body>
</html>

Código JavaScript

Accediendo a los elementos principales

En este ejercicio sólo necesitamos gestionar una lista de lugares, con lo que desarrollaremos funciones para leer, actualizar e imprimir dicha lista, utilizando para ello localStorage, como en ejercicios anteriores:

function getList() {
    let list = localStorage.getItem('places-list');
    return list ? JSON.parse(list) : [];
}

function saveList(list) {
    localStorage.setItem('places-list', JSON.stringify(list));
    printItems();
}

function printItems() {
    document.querySelector('ion-reorder-group').innerHTML = "";

    getList().forEach((item, index) => {
        document.querySelector('ion-reorder-group').innerHTML += ... ;
    });
}

Al iniciar la aplicación

Al iniciar la aplicación capturaremos el evento de IONIC que nos indicará cuándo debemos reordenar los elementos de la lista, y además, imprimiremos los lugares que tengamos guardados de una ejecución anterior:

function onLoad() {
    document.addEventListener('ionItemReorder', (event) => { moveItem(event.detail); });
    printItems();
}

Obteniendo la ubicación

Para conocer la ubicación desde la que vamos a registrar un nuevo lugar, utilizaremos la funcionalidad de geolocalización de HTML, de forma que consigamos que el código funcione perfectamente tanto en el navegador, como en la app una vez compilada (más información aquí):

navigator.geolocation.getCurrentPosition(pos => {
  let url = "https://maps.google.com/maps?&z=15&t=k&q="+pos.coords.latitude+" "+pos.coords.longitude;
  ...
});

Además, crear un enlace a Google Maps conociendo la ubicación resulta muy sencillo. En nuestro caso especificamos un zoom razonable (z=15), el tipo de mapa satélite (t=k), y la latitud y la longitud (q=…). Se puede obtener más información en la página oficial de Google, o también por ejemplo aquí.

Indicador de ejecución en proceso

Mientras se obtiene la ubicación y se procesa la imagen, resulta conveniente bloquear la aplicación mediante algún indicador para informar al usuario que todavía no se ha completado la acción. Para ello mostraremos un indicador en pantalla utilizando la funcionalidad que nos proporciona IONIC (más información aquí):

function addItem(event) {
  const loading = document.createElement('ion-loading');
  ...
  loading.present();
  ...
  loading.dismiss();
}

Obteniendo la imagen

Utilizando simple código HTML y JavaScript, podemos obtener la imagen seleccionada en formato base 64, de forma que la podemos guardar como si se tratara de cualquier otra cadena de texto (más información aquí, o aquí):

<input type="file" accept="image/*" onchange="addItem(event)" />

...

let reader = new FileReader();
reader.onload = (data) => {
    saveItem({ name:text, img:data.target.result, url:url });
    event.target.value = '';
}
reader.readAsDataURL(event.target.files[0]);

Además, añadiremos la funcionalidad necesaria para abrir la cámara cuando ejecutemos la aplicación en nuestros dispositivos móviles (más información en la documentación de Cordova):

...
navigator.camera.getPicture(function success(data) {
  saveItem({ name:text, img:"data:image/jpeg;base64,"+data, url:url });       
}, function error(msg) {
  alert(msg);
}, { targetWidth:100, destinationType:Camera.DestinationType.DATA_URL });
...

El fichero «places.js» completo

function onLoad() {
    document.addEventListener('ionItemReorder', (event) => { moveItem(event.detail); });
    printItems();
}

function getList() {
    let list = localStorage.getItem('places-list');
    return list ? JSON.parse(list) : [];
}

function saveList(list) {
    localStorage.setItem('places-list', JSON.stringify(list));
    printItems();
}

function printItems() {
    document.querySelector('ion-reorder-group').innerHTML = "";

    getList().forEach((item, index) => {
        document.querySelector('ion-reorder-group').innerHTML +=
        `<ion-item-sliding>
            <ion-item href='`+item.url+`'>
                <ion-thumbnail slot="start"><img src="`+item.img+`" />
                </ion-thumbnail>`+item.name+`<ion-reorder slot="end"></ion-reorder>
            </ion-item>
            <ion-item-options side="start">
                <ion-item-option color="danger" onclick="deleteItem(`+index+`)">
                    <ion-icon slot="icon-only" name="trash"></ion-icon>
                </ion-item-option>
            </ion-item-options>
        </ion-item-sliding>`;
    });
}

function addItem(event = false) {
    const loading = document.createElement('ion-loading');
    loading.duration = 15000;
    document.querySelector('ion-app').appendChild(loading);
    loading.present();

    navigator.geolocation.getCurrentPosition(pos => {
        let text = document.querySelector('ion-input').value;
        let url = "https://maps.google.com/maps?&z=15&t=k&q="+pos.coords.latitude+" "+pos.coords.longitude;

        if (event) {
            let reader = new FileReader();
            reader.onload = (data) => {
                saveItem({ name:text, img:data.target.result, url:url });
                event.target.value = '';
                loading.dismiss();
            }
            reader.readAsDataURL(event.target.files[0]);
        }
        else {
            loading.dismiss();
            navigator.camera.getPicture(function success(data) {
                saveItem({ name:text, img:"data:image/jpeg;base64,"+data, url:url });       
            }, function error(msg) {
                alert(msg);
            }, { targetWidth:100, destinationType:Camera.DestinationType.DATA_URL });
        }
    });
}

function saveItem(item) {
    let list = getList();
    list.unshift(item);
    saveList(list);    
}

function deleteItem(item) { 
    document.querySelector('ion-list').closeSlidingItems();
    let list = getList();
    list.splice(item, 1);
    saveList(list);
}

function moveItem(indexes) {
    let list = getList();
    let item = list[indexes.from];
    list.splice(indexes.from, 1);
    list.splice(indexes.to, 0, item);
    indexes.complete();
    saveList(list);
}

function toggleReorder() {
    let reorder = document.querySelector('ion-reorder-group').disabled;
    document.querySelector('ion-reorder-group').disabled = !reorder;
}

Icono y pantalla de bienvenida

Si queremos cambiar el icono o la pantalla de bienvenida, bastará con actualizar los archivos icon.png y splash.png respectivamente, colocándolos en el mismo archivo zip que el código fuente de nuestro proyecto.

Compilando la aplicación

Plugins de geolocalización y cámara

Para que la aplicación tenga los permisos correctos, y podamos utilizar la funcionalidad nativa para conocer la ubicación, añadiremos el plugin correspondiente (más información aquí):

<plugin name="cordova-plugin-geolocation" />

Además, para utilizar la cámara también echaremos mano de otro plugin, ya que sólo podemos acceder a dicha funcionalidad en nuestros dispositivos móviles (más información aquí):

<plugin name="cordova-plugin-camera" />

Debemos recordar que toda la funcionalidad de la aplicación se encontrará disponible tanto en el navegador como en la app, exceptuando la cámara, ya que es específica del dispositivo, y no estará operativa en el navegador.

El archivo «config.xml» completo

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns   = "http://www.w3.org/ns/widgets"
    xmlns:gap   = "http://phonegap.com/ns/1.0"
    id          = "com.fernandoruizrico.places"
    versionCode = "1"
    version     = "0.0.1" >

  <name>Places!</name>

  <description>
      A simple application to save important places.
  </description>

  <author href="https://fernandoruizrico.com" email="[email protected]">
      Fernando Ruiz Rico
  </author>

  <access origin="*" />
  <allow-navigation href="*" />
  <allow-intent href="*" />

  <plugin name="cordova-plugin-whitelist" />
  <plugin name="cordova-plugin-splashscreen" />
  <plugin name="cordova-plugin-vibration" />
  <plugin name="cordova-plugin-geolocation" />
  <plugin name="cordova-plugin-camera" />

  <icon src="icon.png" />
  <splash src="splash.png" />

  <preference name="phonegap-version" value="cli-9.0.0" />

</widget>

Generando el archivo APK

Para instalar la aplicación en nuestros dispositivos móviles, tenemos que compilar el código fuente, con lo que deberemos incluir los siguientes archivos en el fichero zip que subiremos a la página web de PhoneGap:

  • index.html
  • places.js
  • config.xml
  • icon.png
  • splash.png

El resultado

Puedes hacer clic aquí para probar la aplicación propuesta. Se puede observar que el mismo código de la app generada también puede funcionar perfectamente en el navegador como una página web.

IONIC 5+Angular+PhoneGap Build

Una vez hayas probado tu aplicación en el navegador con el comando ionic serve, puedes compilar el código para subirlo a PhoneGap Build y obtener el fichero .apk para instalarlo en tus dispositivos móviles. Bastará con seguir los pasos que se indican a continuación.

En primer lugar debemos cambiar el archivo tsconfig.json para que el campo target tenga el valor es5 (más información en stackoverflow):

...
    "target": "es5"
...

El segundo paso consistirá en ejecutar el siguiente comando desde el directorio del proyecto (puedes encontrar más información aquí):

ionic build --prod -- --base-href .

Ese comando generará una carpeta www dentro de tu proyecto con todo el código web necesario. A continuación deberemos añadir allí el fichero config.xml, incluyendo el plugin cordova-plugin-ionic-webview (puedes obtener más información en la página de github de dicho plugin):

...
<plugin name="cordova-plugin-ionic-webview" />
...

Un ejemplo del fichero config.xml (que debemos incluir en la carpeta www) podría ser el siguiente:

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns   = "http://www.w3.org/ns/widgets"
    xmlns:gap   = "http://phonegap.com/ns/1.0"
    id          = "com.fernandoruizrico.todo"
    versionCode = "1"
    version     = "0.0.1" >

    <name>ToDo!</name>

    <description>
        ToDo List.
    </description>

    <author href="https://fernandoruizrico.com" email="[email protected]">
        Fernando Ruiz Rico
    </author>

    <access origin="*" />
    <allow-navigation href="*" />
    <allow-intent href="*" />

    <plugin name="cordova-plugin-whitelist" />
    <plugin name="cordova-plugin-ionic-webview" />
    <plugin name="cordova-plugin-geolocation" />
    <plugin name="cordova-plugin-camera" />

    <preference name="phonegap-version" value="cli-9.0.0" />
</widget>

Si deseamos utilizar algún plugin (la cámara, por ejemplo) también deberemos modificar el fichero src/index.html para enlazar el fichero cordova.js (no tenemos que crearlo nosotros, sólo enlazarlo, ya que dicho archivo se creará automáticamente al compilar el código con PhoneGap Build):

...
<body>
  <app-root></app-root>
  <script type="text/javascript" src="cordova.js"></script>
</body>
...

Como último paso sólo deberemos comprimir todos los archivos dentro de la carpeta www (index.html, config.xml, …) para generar el archivo zip que subiremos a PhoneGap Build.

Lista de tareas con IONIC 5+Angular

El objetivo: IONIC + Angular

En los ejercicios que hemos desarrollado hasta ahora sólo hemos utilizado IONIC de manera independiente, sin echar mano de ningún otro framework adicional, ya que hemos interactuado con los nuevos elementos HTML utilizando código JavaScript.

Para aplicaciones sencillas, puede ser una opción completamente válida y muy recomendable, dado el bajo nivel de requerimientos. Sólo necesitamos conocimientos básicos de desarrollo web, y con una simple referencia desde el código HTML, ya tenemos a nuestro alcance todo el potencial ofrecido por IONIC 5.

Sin embargo, si pretendemos desarrollar aplicaciones más complejas, resulta muy recomendable usar la segunda posibilidad que nos ofrece IONIC 5, al permitirnos combinar unos resultados visuales muy buenos, con un estilo de programación muy estructurado, y con amplias posibilidades dentro del desarrollo web.

En este ejercicio vamos a dar un paso adelante, y observaremos el potencial del que disponemos al usar IONIC con un framework tan utilizado y conocido como Angular. Desarrollaremos la misma aplicación que en un ejercicio anterior, pero veremos que el código fuente estará mucho mejor estructurado, y nos ofrecerá muchas más posibilidades que el simple código JavaScript.

Además, al tener la suerte de poder utilizar IONIC 5, disponemos de toda la documentación por duplicado para que podamos escoger la opción que más nos interese. En las versiones anteriores, IONIC se encontraba empaquetado con Angular, con lo que sólo teníamos una alternativa. Ahora mismo tenemos a nuestro alcance las mismas facilidades, tanto si escogemos desarrollar nuestra app utilizando HTML+JavaScript o Angular. Además, sea cual sea la opción por la que nos declinemos, IONIC nos proporciona la funcionalidad y la documentación necesaria para cada uno de sus componentes en ambos casos:

Como opinión personal, me gustaría decir que una vez se aprende Angular, resulta difícil desprenderse de él, ya que se pueden desarrollar aplicaciones más complejas y mucho más estables, con un código fuente más legible y mucho más fácil de mantener y actualizar.

La funcionalidad de la aplicación

La funcionalidad a implementar será la misma que en el ejercicio anterior, aunque en esta ocasión vamos a estructurar mejor el código y dividiremos la aplicación en dos pantallas.

Vamos a enumerar de nuevo los aspectos principales de la aplicación, y observaremos que podemos obtener el mismo resultado desarrollando la aplicación con Angular.

La pantalla principal

  • Gestionar varias listas de tareas independientes.
  • Borrar de golpe todas las tareas de una lista.
  • Borrar una sola tarea de una lista determinada mediante un botón oculto que se visualizará al deslizar hacia la derecha la tarea a borrar.
  • Pedir confirmación antes de borrar cualquier tarea.
  • Permitir ordenar las tareas arrastrando cualquier elemento a una nueva posición.

La pantalla de detalles

  • Añadir tareas indicando la fecha, la descripción de la tarea, y un icono identificativo de la prioridad.
  • Visualizar y editar los detalles de cada tarea haciendo clic sobre el elemento correspondiente de la lista.

Primeros pasos

Requisitos

La mayoría de las aplicaciones de IONIC se crean y desarrollan principalmente utilizando la herramienta de la línea de comandos. A continuación enumeraremos los pasos necesarios para instalar el software necesario en nuestros ordenadores para poder desarrollar y compilar desde la consola aplicaciones de IONIC utilizando Angular.

En primer lugar, deberemos instalar Node.js (la versión LTS, recomendada para la mayoría de usuarios, tal como se indica en la web). Podremos comprobar si se ha instalado correctamente de la siguiente forma:

node --version
npm --version

A continuación deberemos instalar el cliente de IONIC, de la siguiente forma:

npm install -g ionic

La opción  -g significa que se va a instalar de manera global en nuestros equipos, y por lo tanto necesitaremos permisos de administrador. En el caso de utilizar un sistema operativo Windows es recomendable abrir un terminal en modo administrador. Para sistemas operativos Mac/Linux, el comando se deberá ejecutar con sudo.

Código base de la aplicación

Para comenzar a desarrollar nuestra aplicación deberemos partir de un código base generado automáticamente por IONIC. Bastará con ejecutar el siguiente comando para generar los ficheros necesarios:

ionic start tareas blank --type=angular --no-git --no-link

Al ejecutar el comando, IONIC nos informará del proceso con algunos avisos y  si todo va bien, al final nos mostrará un mensaje similar al siguiente:

[INFO] Next Steps:
       
       - Go to your newly created project: cd ./tareas
       - Run ionic serve within the app directory to see your app
       - Build features and components: https://ion.link/scaffolding-docs
       - Get Ionic DevApp for easy device testing: https://ion.link/devapp

Al finalizar el proceso, se habrá creado un directorio con el nombre tareas, que constituye el directorio raíz de nuestro proyecto, donde tendremos todo el código necesario para continuar con el desarrollo de nuestra aplicación. Para realizar los siguientes pasos deberemos acceder primero a dicha carpeta:

cd tareas

Y por último, puesto que la aplicación básica que acabamos de crear sólo dispone de una pantalla principal, procederemos además a añadir una página adicional, y un fichero auxiliar (servicio) donde ubicaremos la funcionalidad básica para gestionar las listas y sus elementos:

ionic generate page AddEditItem
ionic generate service list

Y a partir de ahora ya podemos comenzar a añadir el código específico de nuestra aplicación. Aunque la funcionalidad sea la misma, al utilizar Angular, el código fuente sí tendrá variaciones, que como vamos a observar a continuación, nos permitirán generar un código mejor estructurado y más legible que el de una aplicación del mismo tamaño desarrollada simplemente con JavaScript.

Si hemos ejecutado correctamente los comandos anteriores, IONIC ya nos habrá creado todos los ficheros que vamos a utilizar en este ejercicio:

  1. src/app/list.service.ts: Funciones auxiliares.
  2. src/app/home/home.page.html: Código HTML de la pantalla principal.
  3. src/app/home/home.page.ts: Código TypeScript de la pantalla principal.
  4. src/app/add-edit-item/add-edit-item.page.html: Código HTML de la pantalla con los detalles de las tareas.
  5. src/app/add-edit-item/add-edit-item.page.ts: Código TypeScript de la pantalla con los detalles de las tareas.

Probando la aplicación en el navegador

Una de las primeras ventajas con las que nos encontramos es que la misma herramienta de consola de IONIC se puede utilizar como servidor web, con lo que nos permitirá  probar nuestra aplicación en el navegador al mismo tiempo que se actualiza automáticamente después de realizar cualquier cambio en el código fuente. Bastará con ejecutar el siguiente comando desde la carpeta raíz del proyecto donde se encuentra nuestra aplicación, dejando el terminal abierto:

ionic serve

Si todo ha ido bien, se compilará la aplicación y deberíamos visualizar en el navegador algo del siguiente estilo:

(bastará con pulsar Ctrl+C en el terminal para finalizar la ejecución del comando)

Funciones auxiliares

En el fichero list.service.ts desarrollaremos el código de una clase que contenga un array de listas de tareas y las funciones básicas para acceder a las mismas y a sus elementos:

  1. getList(index): Nos devolverá la lista completa ubicada en la pestaña index (la primera pestaña vendrá indicada por el valor cero).
  2. saveList(listIndex): Guardará la lista indicada de manera permanente utilizando localStorage.
  3. getItem(listIndex, itemIndex): Devolverá una tarea en particular.
  4. setItem(listIndex, item, itemIndex?): Añadirá una tarea a la lista indicada, o si se indica el índice de una tarea concreta, la actualizará en vez de añadirla.
  5. deleteItem(listIndex, itemIndex): Borrará la tarea indicada.
  6. deleteList(listIndex): Borrará una lista entera.
  7. moveItem(listIndex, from, to): Cambiará de orden una tarea, moviéndola de la posición from a la posición to.

El fichero «list.service.ts» completo

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class ListService {

  list: any;

  constructor() { 
    this.list = [[]];
  }

  getList(index) {
    let list = localStorage.getItem('todo-list-'+index);
    if (list !== 'undefined' && list !== null) {
      this.list[index] = JSON.parse(list);
    }
    if (index>=this.list.length) this.list.push([]);
    return(this.list[index]);
  }

  saveList(listIndex) {
    localStorage.setItem('todo-list-'+listIndex, JSON.stringify(this.list[listIndex]));
  }

  getItem(listIndex, itemIndex) {
    return(this.list[listIndex][itemIndex]);
  }

  setItem(listIndex, item, itemIndex?) {
    if (itemIndex == undefined) this.list[listIndex].push(Object.assign({}, item));
    else this.list[listIndex][itemIndex] = Object.assign({}, item);
    this.saveList(listIndex);  
  }

  deleteItem(listIndex, itemIndex) {
    this.list[listIndex].splice(itemIndex,1);
    this.saveList(listIndex);
  }

  deleteList(listIndex) {
    this.list[listIndex].length = 0;
    this.saveList(listIndex);    
  }

  moveItem(listIndex, from, to) {
    let element = this.list[listIndex][from];
    this.list[listIndex].splice(from, 1);
    this.list[listIndex].splice(to, 0, element);
    this.saveList(listIndex);    
  }
}

La pantalla principal

En el fichero home.page.ts desarrollaremos el código de una clase que contendrá las variables y las funciones necesarias para manipular las listas y las tareas que se visualizan en la pantalla principal:

  1. constructor(ListService, AlertController): En el constructor inicializaremos el array de objetos con las propiedades que definen las diferentes listas (etiqueta, icono y lista de tareas). Si ya existen tareas al iniciar la aplicación, se leerán para que aparezcan en pantalla.
  2. toggleReorder(): Para activar o desactivar el botón de los elementos para reordenarlos.
  3. setTab(tabIndex): Activará la pestaña con el índice indicado.
  4. deleteItem(item?): Después de pedir confirmación, borrará todos los elementos de la lista de tareas activa, o sólo el elemento indicado, si éste se ha pasado por parámetro.
  5. moveItem(indexes): Recibe un objeto con la posición inicial de una tarea en la lista y la posición final donde se debe mover.

Para implementar la barra superior de la pantalla principal, ahora utilizaremos el siguiente código:

<ion-title>ToDo!</ion-title>
<ion-buttons slot="end">
  <ion-button (click)="deleteItem()" color="danger"><ion-icon slot="icon-only" name="trash"></ion-icon></ion-button>  
  <ion-button (click)="toggleReorder()"><ion-icon slot="icon-only" name="reorder"></ion-icon></ion-button>
  <ion-button [routerLink]="['/add-edit-item', { tab:tabIndex, item:-1 }]"><ion-icon slot="icon-only" name="add"></ion-icon></ion-button>
</ion-buttons>

Ya podemos observar algunas diferencias respecto al código JavaScript. En primer lugar, en vez de utilizar el atributo del evento onclick utilizaremos la sintaxis (click) (más detalles en la documentación de Angular). En segundo lugar, observamos una gran diferencia respecto a la opción de añadir un nuevo elemento. En este caso vamos a diseñar una nueva página (a la que accederemos con la url /add-edit-item) en vez de abrir un cuadro de diálogo modal. La sintaxis de Angular utilizada en este caso, nos permite pasar información ({ tab:tabIndex, item:-1 }) de una página a otra, de forma que sepamos a qué lista debemos añadir la nueva tarea, colocando además el índice del item a -1 para indicar que no queremos modificar ninguna tarea existente, sino añadir una nueva:

...
<ion-button [routerLink]="['/add-edit-item', { tab:tabIndex, item:-1 }]"><ion-icon slot="icon-only" name="add"></ion-icon></ion-button>
...

Para mostrar las diferentes pestañas (tabs) utilizaremos el siguiente código:

<ion-tab-bar #myTabs color="primary" [selectedTab]="tabs[0].label">
  <ion-tab-button *ngFor="let tab of tabs; let i=index" (click)="setTab(i)" [tab]="tab.label">
    <ion-label>{{tab.label}}</ion-label>
    <ion-icon [name]="tab.icon"></ion-icon>
  </ion-tab-button>
</ion-tab-bar>

Y para mostrar la lista de tareas:

<ion-list #myList lines="full">
  <ion-reorder-group [disabled]="!reorder" (ionItemReorder)="moveItem($event.detail)">
    <ion-item-sliding *ngFor="let item of tabs[tabIndex].list; let i=index">
      <ion-item [routerLink]="['/add-edit-item', { tab:tabIndex, item:i }]">
        <ion-label class="ion-text-wrap">
          <h2>{{item.task}}</h2>
          <p>{{item.date.substring(0,10)}}</p>
        </ion-label>
        <ion-icon slot="end" [name]="item.icon"></ion-icon>
        <ion-reorder slot="end"></ion-reorder>
      </ion-item>
      <ion-item-options side="start">
        <ion-item-option color="danger" (click)="deleteItem(i)">
          <ion-icon slot="icon-only" name="trash"></ion-icon>
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-reorder-group>
</ion-list>

Respecto a la versión con JavaScript, la mayor diferencia la observamos en las siguientes líneas:

<ion-item-sliding *ngFor="let item of tabs[tabIndex].list; let i=index">

...

<ion-tab-button *ngFor="let tab of tabs; let i=index" (click)="setTab(i)" [tab]="tab.label">

Utilizando Angular podemos insertar bucles dentro de nuestro código HTML que nos permitirán mostrar muy fácilmente varios elementos que tengan las mismas propiedades (consultar la documentación de angular para más detalles). De esta forma tendremos el mismo código independientemente de la cantidad de listas de tareas que vayamos a utilizar. Bastará con especificar en el constructor las etiquetas y los iconos de cada pestaña utilizando un simple array:

constructor(...) {
  this.tabs = [
    {label: 'School', icon: 'school', list: []},
    {label: 'Home', icon: 'home', list: []}
  ];
  ...
}

Para gestionar el botón de reordenar, también mejora mucho la sintaxis respecto a JavaScript:

<ion-reorder-group [disabled]="!reorder" (ionItemReorder)="moveItem($event.detail)">
...
</ion-reorder-group>

En este caso, la propiedad disabled se encierra entre corchetes para unirla a la variable reorder, y el evento ionItemReorder se encierra entre paréntesis.

El fichero «home.page.html» completo

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>ToDo!</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="deleteItem()" color="danger"><ion-icon slot="icon-only" name="trash"></ion-icon></ion-button>  
      <ion-button (click)="toggleReorder()"><ion-icon slot="icon-only" name="reorder-four"></ion-icon></ion-button>
      <ion-button [routerLink]="['/add-edit-item', { tab:tabIndex, item:-1 }]"><ion-icon slot="icon-only" name="add"></ion-icon></ion-button>
    </ion-buttons>
  </ion-toolbar>       
</ion-header>

<ion-content>
  <ion-list #myList lines="full">
    <ion-reorder-group [disabled]="!reorder" (ionItemReorder)="moveItem($event.detail)">
      <ion-item-sliding *ngFor="let item of tabs[tabIndex].list; let i=index" >
        <ion-item [routerLink]="['/add-edit-item', { tab:tabIndex, item:i }]"  >
          <ion-label class="ion-text-wrap">
            <h2>{{item.task}}</h2>
            <p>{{item.date.substring(0,10)}}</p>
          </ion-label>
          <ion-icon slot="end" [name]="item.icon"></ion-icon>
          <ion-reorder slot="end"></ion-reorder>
        </ion-item>
        <ion-item-options side="start">
          <ion-item-option color="danger" (click)="deleteItem(i)">
            <ion-icon slot="icon-only" name="trash"></ion-icon>
          </ion-item-option>
        </ion-item-options>
      </ion-item-sliding>
    </ion-reorder-group>
  </ion-list>
</ion-content>

<ion-footer>
  <ion-tab-bar #myTabs color="primary" [selectedTab]="tabs[0].label">
    <ion-tab-button *ngFor="let tab of tabs; let i=index" (click)="setTab(i)" [tab]="tab.label">
      <ion-label>{{tab.label}}</ion-label>
      <ion-icon [name]="tab.icon"></ion-icon>
    </ion-tab-button>
  </ion-tab-bar>
</ion-footer>

El fichero «home.page.ts» completo

import { Component, ViewChild } from '@angular/core';
import { IonTabBar, IonList, AlertController } from '@ionic/angular';
import { ListService } from '../list.service';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})

export class HomePage {
  @ViewChild('myTabs', {static: false}) tabRef: IonTabBar;
  @ViewChild('myList', {static: false}) listRef: IonList;
  tabs: any;
  tabIndex: number;
  reorder: boolean;

  constructor(private listService: ListService,
              private alertController: AlertController){
    this.tabs = [
      {label: 'School', icon: 'school', list: []},
      {label: 'Home', icon: 'home', list: []}
    ];
    this.tabs.forEach((tab, index) => {
      tab.list = this.listService.getList(index);
    });
    this.tabIndex = 0;
    this.reorder = false;
  }

  toggleReorder() {
    this.reorder = !this.reorder;
    this.listRef.closeSlidingItems();
  }

  setTab(tabIndex) {
    this.tabIndex = tabIndex;
    this.tabRef.selectedTab = this.tabs[this.tabIndex].label;
  } 

  async deleteItem(item?) {
    const alert = await this.alertController.create({
      header: item === undefined ? 'Delete all' : 'Delete item',
      message: 'Are you sure?',
      buttons: [
        {
          text: 'OK',
          handler: () => {
            this.listRef.closeSlidingItems();
            if (item === undefined) {
              this.listService.deleteList(this.tabIndex);
            }
            else {
              this.listService.deleteItem(this.tabIndex, item);              
            }
          }
        },       
        {
          text: 'CANCEL',
          role: 'cancel'
        }
      ]
    });

    await alert.present();
  }

  moveItem(indexes) {
    this.listService.moveItem(this.tabIndex, indexes.from, indexes.to);
    indexes.complete();
  }
}

El formulario para añadir o editar tareas

En el fichero add-edit-item-page.ts desarrollaremos el código de una clase que contendrá las variables y las funciones necesarias para editar o crear una tarea:

  1. constructor(Router, ActivatedRoute, AlertController, ListService): En el constructor inicializaremos por un lado un array con los nombres de los iconos para indicar las prioridades de las tareas, y a continuación recogeremos los parámetros proporcionados desde la pantalla principal (índices de la lista y elemento a modificar, si es el caso).
  2. error(message): Para mostrar mensajes de error si por ejemplo no se ha especificado ningún texto en la descripción de la tarea y pulsamos el botón de confirmar.
  3. save(): Comprobará si desde la pantalla principal se ha elegido una tarea a modificar o si por el contrario se ha pulsado el botón de nueva tarea, y llamará a la función del servicio, volviendo a la pantalla principal a continuación.

La barra superior de esta pantalla sólo contendrá un título y dos botones, uno para cancelar y otro para confirmar. Ambos nos llevarán de nuevo a la pantalla principal, pero si pulsamos el botón de confirmar, previamente se grabarán los datos introducidos:

<ion-title>ToDo</ion-title>
<ion-buttons slot="primary">
    <ion-button color="danger" [routerLink]="['/home']"><ion-icon slot="icon-only" name="close"></ion-icon></ion-button>
    <ion-button color="primary" (click)="save()"><ion-icon slot="icon-only" name="checkmark"></ion-icon></ion-button>
</ion-buttons>       
</ion-toolbar>

El formulario para introducir los datos de una nueva tarea o modificar los de una existente es muy sencillo:

<ion-list>
  <ion-item>
    <ion-label position="floating">Select date</ion-label>
    <ion-datetime display-format="D MMM YYYY" max="2050-12-31" [(ngModel)]="item.date"></ion-datetime>      
  </ion-item>
  <ion-item>
    <ion-label position="floating">Enter task</ion-label>
    <ion-input [(ngModel)]="item.task"></ion-input>
  </ion-item>
</ion-list>
<ion-segment [(ngModel)]="item.icon">
  <ion-segment-button *ngFor="let button of buttons" [value]="button">
    <ion-icon [name]="button"></ion-icon>
  </ion-segment-button>
</ion-segment>

La novedad a destacar es el uso de [(ngModel)], una de las indudables ventajas que nos ofrece Angular, ya que nos permite enlazar un atributo de la clase con un campo del formulario, de forma que las modificaciones que se produzcan queden reflejadas en los dos sentidos: el valor que tenga dicho atributo en el código TypeScript se mostrará en el código HTML, y cualquier modificación que hagamos en el formulario, también cambiará el valor del atributo de la clase. Se puede consultar la documentación oficial para más detalles.

Por otro lado, también estamos implementando un bucle para mostrar los posibles iconos indicativos de la prioridad de la tarea, lo que sin duda nos ahorra código HTML:

<ion-segment-button *ngFor="let button of buttons" [value]="button">
    <ion-icon [name]="button"></ion-icon>
</ion-segment-button>

Al igual que en el constructor de la página principal, bastará con especificar mediante un array todos los botones que deseemos visualizar:

constructor(...) { 
  this.buttons = ["radio-button-off", "radio-button-on", "snow", "flame"];
  ...
}

El fichero «add-edit-item.page.html» completo

<ion-header>
  <ion-toolbar>
    <ion-title>ToDo</ion-title>
    <ion-buttons slot="primary">
        <ion-button color="danger" [routerLink]="['/home']"><ion-icon slot="icon-only" name="close"></ion-icon></ion-button>
        <ion-button color="primary" (click)="save()"><ion-icon slot="icon-only" name="checkmark"></ion-icon></ion-button>
    </ion-buttons>       
  </ion-toolbar>
</ion-header>
<ion-content>
  <ion-list>
    <ion-item>
      <ion-label position="floating">Select date</ion-label>
      <ion-datetime display-format="D MMM YYYY" max="2050-12-31" [(ngModel)]="item.date"></ion-datetime>      
    </ion-item>
    <ion-item>
      <ion-label position="floating">Enter task</ion-label>
      <ion-input [(ngModel)]="item.task"></ion-input>
    </ion-item>
  </ion-list>
  <ion-segment [(ngModel)]="item.icon">
    <ion-segment-button *ngFor="let button of buttons" [value]="button">
      <ion-icon [name]="button"></ion-icon>
    </ion-segment-button>
  </ion-segment>
</ion-content>

El fichero «add-edit-item.page.ts» completo

import { Component } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { AlertController } from '@ionic/angular';
import { ListService } from '../list.service';

@Component({
  selector: 'app-add-edit-item',
  templateUrl: './add-edit-item.page.html',
  styleUrls: ['./add-edit-item.page.scss'],
})

export class AddEditItemPage {
  item: any;
  tabIndex: number;
  itemIndex: number;
  buttons: Array<string>;

  constructor(private router: Router,
              private route: ActivatedRoute,
              public alertController: AlertController,
              private ListService: ListService) { 
    this.buttons = ["radio-button-off", "radio-button-on", "snow", "flame"];

    this.tabIndex = +this.route.snapshot.paramMap.get('tab');
    this.itemIndex = +this.route.snapshot.paramMap.get('item'); 
    if (this.itemIndex >= 0) {
      this.item = Object.assign({}, this.ListService.getItem(this.tabIndex, this.itemIndex));
      this.item.date = new Date(this.item.date).toISOString();
    }
    else {
      this.item = { date: new Date().toISOString(), task: '', icon: 'radio-button-off'};
    } 
  }

  async error(message) {
    const alert = await this.alertController.create({
      message: message,
      buttons: ['OK']
    });

    await alert.present();
  }

  save() {
    if (!this.item.task.length) {
      this.error('The task cannot be empty');
    }
    else {
      if (this.itemIndex >= 0) {
        this.ListService.setItem(this.tabIndex, this.item, this.itemIndex);
      }
      else {
        this.ListService.setItem(this.tabIndex, this.item);      
      }
      this.router.navigate(['/home']);
    }
  }
}

El resultado

El procedimiento utilizado en este ejemplo supera obviamente al de la versión basada sólo en JavaScript, ya que ahora no sólo hemos mejorado a nivel de código, sino que hemos agilizado el proceso de desarrollo y actualización, obteniendo además una app que no requiere Internet, ya que ahora IONIC no se encuentra enlazado directamente como librería, sino empaquetado dentro de la propia aplicación.

Puedes hacer clic aquí para observar que también podemos acceder al código generado desde el navegador, como cualquier otra página web.

Menú lateral con opción de compartir con IONIC 5+JavaScript

El objetivo

En esta ocasión añadiremos al ejercicio anterior la opción de compartir, de forma que desde nuestra aplicación podamos enviar la lista de tareas mediante un mensaje de WhatsApp, un correo electrónico, un SMS, etc.

Además, añadiremos el código necesario para disponer de un menú lateral donde podremos añadir más opciones, y donde sugerimos además colocar la opción de borrar la lista de tareas, para que no esté tan accesible desde la pantalla principal:

El menú lateral

Primero añadiremos en la barra superior de la pantalla principal de nuestra aplicación un botón para desplegar el menú lateral:

<ion-header>
  ...
  <ion-menu-button></ion-menu-button>
  ...    
</ion-header>

Como podemos leer en la documentación de IONIC, el elemento <ion-menu-button></ion-menu-button> se encarga de todo, ya que crea automáticamente el icono del botón y añade la funcionalidad necesaria para desplegar el menú en la página actual.

Sólo nos falta añadir el código necesario con el menú lateral, que tendrá su propio encabezado y una lista con las opciones que deseemos. En nuestro caso pondremos la opción de reordenar, de compartir y de borrado de todos los elementos de la lista seleccionada. Además, añadiremos también un botón para volver a ocultar el menú:

<ion-menu content-id="content">
  <ion-header>
    ...
    <ion-menu-button></ion-menu-button>
    ...
  </ion-header>
  <ion-content>
    <ion-menu-toggle>
      <ion-list>
        <ion-item-divider><ion-label>Reorder and Share</ion-label></ion-item-divider>   
        <ion-item onclick="toggleReorder()">
          <ion-label>Enable/Disable reorder</ion-label>
          <ion-icon slot="end" name="reorder"></ion-icon>
        </ion-item>
        <ion-item onclick="share()">
          <ion-label>Share</ion-label>
          <ion-icon slot="end" name="share"></ion-icon>
        </ion-item>
        ...
      </ion-list>
    </ion-menu-toggle>
  </ion-content>
</ion-menu>

<div class="ion-page" id="content">
  <ion-header>
    ...
      <ion-menu-button></ion-menu-button>
    ...
  </ion-header>
  <ion-content>
    ...
  </ion-content>
</div>

Observaremos que el elemento <ion-menu></ion-menu> por defecto creará un menú que aparece desde la izquierda de la pantalla actual, tal como se especifica en la documentación de IONIC. Se podrá ocultar pulsando de nuevo el botón de menú, o con un gesto swipe hacia la izquierda, o incluso pulsando fuera del menú. Además, utilizaremos el elemento <ion-menu-toggle></ion-menu-toggle> para conseguir que al pulsar en cualquier opción, el menú también se cierre automáticamente.

El fichero «index.html» completo

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>ToDo!</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/dist/ionic/ionic.esm.js"></script>
  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/dist/ionic/ionic.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/[email protected]/css/ionic.bundle.css"/>

  <script src="cordova.js"></script>
  <script src="todo.js"></script>
</head>

<body onload="onLoad()">
  <ion-app>
    <ion-menu content-id="content">
      <ion-header>
        <ion-toolbar mode="ios" color="danger">
          <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
          </ion-buttons>  
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-menu-toggle>
          <ion-list lines="full">
            <ion-item-divider>
              <ion-label>Reorder and Share</ion-label>
            </ion-item-divider>
            <ion-item onclick="toggleReorder()">
              <ion-label>Enable/Disable reorder</ion-label>
              <ion-icon slot="end" name="reorder"></ion-icon>
            </ion-item>
            <ion-item onclick="share()">
              <ion-label>Share</ion-label>
              <ion-icon slot="end" name="share"></ion-icon>
            </ion-item>
            <ion-item-divider>
              <ion-label>Delete</ion-label>
            </ion-item-divider>          
            <ion-item onclick="deleteItem()">
              <ion-label>Delete all</ion-label>
              <ion-icon slot="end" name="trash" color="danger"></ion-icon>
            </ion-item>
          </ion-list>
        </ion-menu-toggle>
      </ion-content>
    </ion-menu>

    <div class="ion-page" id="content">
      <ion-header>
        <ion-toolbar mode="ios" color="primary">
          <ion-buttons slot="start">
            <ion-menu-button></ion-menu-button>
          </ion-buttons>          
          <ion-title>ToDo!</ion-title>
          <ion-buttons slot="end">
            <ion-button onclick="addEditItem()">
              <ion-icon name="add" slot="icon-only"></ion-icon>
            </ion-button>
          </ion-buttons>            
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-tabs>
          <ion-tab tab="school">
            <ion-list lines="full">
              <ion-reorder-group></ion-reorder-group>
            </ion-list>
          </ion-tab>
          <ion-tab tab="home">
            <ion-list lines="full">
              <ion-reorder-group></ion-reorder-group>
            </ion-list>
          </ion-tab>
          <ion-tab-bar slot="bottom" color="primary">
            <ion-tab-button tab="school">
              <ion-icon name="school"></ion-icon>
            </ion-tab-button>
            <ion-tab-button tab="home">
              <ion-icon name="home"></ion-icon>
            </ion-tab-button>
          </ion-tab-bar>
        </ion-tabs>
      </ion-content>
    </div>
  </ion-app>
</body>
</html>

La opción de compartir

Utilizaremos la funcionalidad nativa de nuestros dispositivos móviles para poder enviar la lista de tareas a alguno de nuestros contactos. Para incluir en nuestra aplicación el plugin necesario para acceder a dicha funcionalidad, bastará con añadir la siguiente línea al archivo config.xml:

<plugin name="cordova-plugin-x-socialsharing" spec="5.4.0" />

A continuación modificaremos el código fuente del archivo todo.js para añadir la función share(), que creará una cadena de texto y se la proporcionará al plugin de compartir para que se pueda enviar utilizando otra aplicación.

Bastará con crear la función share() con el código necesario para obtener en una única cadena de texto todas las tareas una detrás de otra, separadas por saltos de línea. Después sólo necesitamos llamar a la función socialsharing.share() del plugin para activar y mostrar el menú de compartir de nuestros móviles:

function share() {
    let text = "";
    getList().forEach((task, index) => {
      text += (index+1) + ". " + task.text + " - " + task.date.slice(0,10) + "\n";
    });
    window.plugins.socialsharing.share(text);
}

El archivo «config.xml» completo

<widget xmlns   = "http://www.w3.org/ns/widgets"
    xmlns:gap   = "http://phonegap.com/ns/1.0"
    id          = "com.fernandoruizrico.todo"
    versionCode = "1"
    version     = "0.0.1" >

    <name>ToDo!</name>

    <description>
        ToDo List.
    </description>

    <author href="https://fernandoruizrico.com" email="[email protected]">
        Fernando Ruiz Rico
    </author>

    <access origin="*" />
    <plugin name="cordova-plugin-whitelist" />
    <plugin name="cordova-plugin-vibration" />
    <plugin name="cordova-plugin-x-socialsharing" spec="5.4.0" />
</widget>

El archivo «todo.js» completo

function onLoad() { 
    document.addEventListener("ionModalDidDismiss", closeItems);
    document.addEventListener("ionAlertDidDismiss", closeItems);
    document.addEventListener("ionDidOpen", closeItems);
    document.addEventListener('ionItemReorder', (event) => { moveItem(event.detail); });
    document.querySelectorAll('ion-tab').forEach(function(t) { printList(t); });
}

function getTab() {
    return(document.querySelector('ion-tab:not(.tab-hidden)'));
}

function getList(tab = getTab()) {
    let list = localStorage.getItem('todo-list-'+tab.tab);
    return list ? JSON.parse(list) : [];
}

function saveList(tab, list) {
    localStorage.setItem('todo-list-'+tab.tab, JSON.stringify(list));
    printList(tab);
}

function printList(tab) {
    tab.querySelector('ion-reorder-group').innerHTML = "";

    getList(tab).forEach((item, index) => {
        tab.querySelector('ion-reorder-group').innerHTML +=
        `<ion-item-sliding>
           <ion-item onClick="addEditItem(`+index+`)">
             <ion-label text-wrap>
               <h2>`+item.text+`</h2>
               <p>`+item.date.slice(0,10)+`</p>
             </ion-label>
             <ion-icon slot="end" name="`+item.icon+`"></ion-icon>
             <ion-reorder slot="end"></ion-reorder>
          </ion-item>
          <ion-item-options side="start">
            <ion-item-option color="danger" onClick="deleteItem(`+index+`)">
                <ion-icon slot="icon-only" name="trash"></ion-icon>
            </ion-item-option>
          </ion-item-options>
        </ion-item-sliding>`;
    });    
}

function error(message) {
  const alert = document.createElement('ion-alert');
  alert.message = message;
  alert.buttons = ['OK'];

  document.querySelector('ion-app').appendChild(alert);
  alert.present();
}

function toggleReorder() {
    closeItems();
    let reorder = getTab().querySelector('ion-reorder-group');
    reorder.disabled = !reorder.disabled;
}

function closeItems() {
    getTab().querySelector('ion-list').closeSlidingItems();
}

function addEditItem(index = false) {
    closeItems();
    let list = getList();
    let item = null;

    if (index !== false) item = list[index];
    else item = { text:"", date:new Date().toISOString(), icon:"radio-button-off" };

    const modal = document.createElement('ion-modal');
    modal.component = document.createElement('div');
    modal.component.innerHTML = `
        <ion-header>
            <ion-toolbar>
                <ion-title>ToDo - `+(index !== false ? 'Edit task' : 'New task')+`</ion-title>
                <ion-buttons slot="primary">
                    <ion-button color="danger"><ion-icon slot="icon-only" name="close"></ion-icon></ion-button>
                    <ion-button color="primary"><ion-icon slot="icon-only" name="checkmark"></ion-icon></ion-button>
                </ion-buttons>       
            </ion-toolbar>
        </ion-header>
        <ion-content>
            <ion-list>
                <ion-item>
                    <ion-label position="floating">Select date</ion-label>
                    <ion-datetime display-format="D MMM YYYY" max="2050-12-31" value="`+item.date+`"></ion-datetime>            
                </ion-item>
                <ion-item>
                    <ion-label position="floating">Enter task</ion-label>
                    <ion-input value="`+item.text+`"></ion-input>
                </ion-item>
            </ion-list>
            <ion-segment value="`+item.icon+`">
                <ion-segment-button value="radio-button-off">
                    <ion-icon name="radio-button-off"></ion-icon>
                </ion-segment-button>  
                <ion-segment-button value="radio-button-on">
                    <ion-icon name="radio-button-on"></ion-icon>
                </ion-segment-button>  
                <ion-segment-button value="snow">
                    <ion-icon name="snow"></ion-icon>
                </ion-segment-button>
                <ion-segment-button value="flame">
                    <ion-icon name="flame"></ion-icon>
                </ion-segment-button>
            </ion-segment>
        </ion-content>`;

    modal.component.querySelector('[color="danger"]').addEventListener('click', () => {
        modal.dismiss();
    });

    modal.component.querySelector('[color="primary"]').addEventListener('click', () => {
        let newDate = modal.component.querySelector('ion-datetime').value;
        let newText = modal.component.querySelector('ion-input').value;
        let newIcon = modal.component.querySelector('ion-segment').value;

        if (!newText.length) {
            error('The task cannot be empty');
        }
        else {
            let newItem = { text:newText, date:newDate, icon:newIcon };
            if (index !== false) list[index] = newItem; 
            else list.unshift(newItem);
            saveList(getTab(), list);
            modal.dismiss();
        }
    });

    document.querySelector('ion-app').appendChild(modal);
    modal.present();
}

function moveItem(indexes) {
    let tab = getTab();
    let list = getList(tab);
    let item = list[indexes.from];
    list.splice(indexes.from, 1);
    list.splice(indexes.to, 0, item);
    indexes.complete();
    saveList(tab, list);
}

function deleteItem(index = false) {
    const alert = document.createElement('ion-alert');
  
    alert.header = index !== false ? 'Delete item' : 'Delete all',
    alert.message = 'Are you sure?',
    alert.buttons =  
            [{
                text: 'YES',
                handler: () => {
                    let list = getList();
                    if (index !== false) { list.splice(index, 1); }
                    else { list.length = 0; }
                    saveList(getTab(), list);
                }
            }, {
                text: 'NO',
                role: 'cancel'
            }]

    document.querySelector('ion-app').appendChild(alert);
    alert.present();
}

function share() {
    let text = "";
    getList().forEach((task, index) => {
      text += (index+1) + ". " + task.text + " - " + task.date.slice(0,10) + "\n";
    });
    window.plugins.socialsharing.share(text);
}

El resultado

Puedes hacer clic aquí para observar el aspecto final que tendrá la aplicación de la lista de tareas.