Mostrando entradas con la etiqueta html5. Mostrar todas las entradas
Mostrando entradas con la etiqueta html5. Mostrar todas las entradas

domingo, 15 de septiembre de 2019

Markdown - Guía rápida



Hoy os quiero hablar de Markdown, un lenguaje de marcado que nos permite formatear nuestros textos de manera rápida y simple, generando una salida similar al HTML.

Para que lo veáis mejor, os pongo unos ejemplos de HTML vs. Markdown
  • Encabezado 1  
    • HTML:     <h1>Título</h1>  
    • Markdown: # Título
  • Encabezado 2
    • HTML:     <h2>Subtítulo</h2>
    • Markdown: ## Subtítulo
  • Cursiva
    • HTML:      <i>Texto</i>
    • Markdown:  *Texto*
  • Negrita
    • HTML:     <b>Texto</b>
    • Markdown:  **Texto**
  • Enlace
    • HTML:     <a href="https://www.tecnificados.com">enlace</a>
    • Markdown:  enlace(https://www.tecnificados.com)
¿Dónde puedo utilizar Markdown?

En la web existen muchos editores que traducen Markdown a HTML ya procesado. Por ejemplo: https://stackedit.io o https://dillinger.io

Pero a mí lo que me gusta es que este formato es soportado en los repositorios de código más importantes como Github, Bitbucket,...

Por eso en la mayoría de los proyectos de estos repositorios, siempre hay un "readme.md" que contiene la documentación inicial.

Guía rápida de Markdown

Cursiva
Texto entre un asterisco * o un guión bajo _ . Ejemplo:

*Texto en cursiva*

Negrita
Texto entre dos asteriscos ** o dos guiones bajos __ . Ejemplo:


**Texto en negrita**

Saltos de línea:
Para generar un párrafo deja una linea en blanco (pulsa "enter" dos veces)
Para generar un salto de linea dentro del mismo párrafo deja dos espacios en blanco al final de la linea

Encabezados:
Con almohadilla(#), se concatenan tantos como niveles necesites. Ejemplo:

# Encabezado H1
## Encabezado H2
### Encabezado H3
#### Encabezado H4
##### Encabezado H5
###### Encabezado H6

Listas
Para crear simples listados se utilizan *, - o +. Utiliza el que más te guste, o combínalos. Ejemplo:
- Ironman
- Hulk
+ Viuda Negra
* Capitana Marvel
* Dr. Strange
+ Spiderman

Listas anidadas
Para crear listas anidadas utiliza cuatro espacios:

- Fase 1
- Iron Man (2008)
- The Incredible Hulk (2008)
- Iron Man 2 (2010)
- Thor (2011)
- Capitán América: el primer vengador (2011)
- The Avengers (2012)
- Fase 2
- Iron Man 3 (2013)
- Thor: The Dark World (2013)
- Captain America: The Winter Soldier (2014)
- Guardianes de la Galaxia (2014)
- Avengers: Age of Ultron (2015)
- Ant-Man (2015)
- Fase 3
- Capitán América: Civil War (2016)
- Doctor Strange (2016)
- Guardianes de la Galaxia Vol. 2 (2017)
- Spider-Man: Homecoming (2017)
- Thor: Ragnarok (2017)
- Black Panther (2018)
- Avengers: Infinity War (2018)
- Ant-Man and the Wasp (2018)
- Capitana Marvel (2019)
- Avengers: Endgame (2019)
- Spider-Man: Lejos de casa (2019)
         
Listas ordenadas
Tenemos que escribir el número seguido de un punto. También se pueden anidar con los cuatro espacios.

1. Fase 1
1. Iron Man (2008)
2. The Incredible Hulk (2008)
3. Iron Man 2 (2010)
4. Thor (2011)
5. Capitán América: el primer vengador (2011)
6. The Avengers (2012)
2. Fase 2
1. Iron Man 3 (2013)
2. Thor: The Dark World (2013)
3. Captain America: The Winter Soldier (2014)
4. Guardianes de la Galaxia (2014)
5. Avengers: Age of Ultron (2015)
6. Ant-Man (2015)
3. Fase 3
1. Capitán América: Civil War (2016)
2. Doctor Strange (2016)
3. Guardianes de la Galaxia Vol. 2 (2017)
4. Spider-Man: Homecoming (2017)
5. Thor: Ragnarok (2017)
6. Black Panther (2018)
7. Avengers: Infinity War (2018)
8. Ant-Man and the Wasp (2018)
9. Capitana Marvel (2019)
10. Avengers: Endgame (2019)
11. Spider-Man: Lejos de casa (2019)

Linea horizontal
Escribiendo *** o --- o ___

Enlaces en línea
Se escriben enmarcando el texto a enlazar entre corchetes [] y el link a seguir entre paréntesis. Ejemplo:

Pulsa [aquí](https://www.tecnificados.com) para ir a mi blog.

Enlaces automáticos
Se escriben introduciendo una URL entre los símbolos <>. Ejemplo:

<https://www.tecnificados.com>

Código
Si necesitas añadir código (html, sql, ...) lo puedes hacer con el acento `

El texto debe estar entre dos acentos. Ejemplo:

`Select name, year from films where year > 1980`

También lo puedes utilizar con varias líneas, pero en este caso deben ser tres acentos ```. Ejemplo:

```
Select name, year
from films 
where year > 1980
```

Imágenes
Insertar una imagen se parece mucho a insertar un enlace. Sólo hay que poner una exclamación ! al principio, y así se visualizará la imagen. Ejemplo:

![Imagen de Ironman](https://terrigen-cdn-dev.marvel.com/content/prod/1x/002irm_ons_cut_dsk_01_1.jpg)

El texto entre corchetes es el texto que se visualizará si la imagen no se carga.

Si además quieres añadir texto alternativo lo puedes hacer añadiendo al final el texto entre comillas. Ejemplo:

![Imagen de Ironman](https://terrigen-cdn-dev.marvel.com/content/prod/1x/002irm_ons_cut_dsk_01_1.jpg "Ironman de pie mirandote fijamente")

Tablas
Las tablas en Markdown son muchísimo más fáciles de escribir que en HTML.

Sólo tenemos que decir cuáles son los elementos de la cabecera, separar los campos con la barra horizontal y separar cada columna con la barra vertical | Ejemplo:

Nombre| Películas
-- | --
Fase I | 6
Fase II | 6
Fase III | 11

Podemos alinear las columnas utilizando dos puntos : junto a las líneas horizontales de la línea de separación. Con dos puntos a la izquierda de la línea, la columna estará alineada a la izquierda. Si los ponemos a la derecha de la línea, se alinearán a la derecha. Si los ponemos a ambos lados, su alineación será centrada. Lo mejor es verlo con un ejemplo:

Saga|Nombre | Películas
:-- |:--: | --:
Gemas del Infinito | Fase I | 6
Gemas del Infinito | Fase II | 6
Gemas del Infinito | Fase III | 11

Caracteres que Markdown interpreta 
A veces necesitamos utilizar caracteres como * o -

Para eso está la barra invertida \

Si la utilizamos justo antes del carácter que no interese, no será interpretada. Ejemplo:

Esto es un asterisco \*

Y con esto acabamos la guía rápida de Markdown.

He creado un repositorio en Github (https://github.com/tecnificados/markdown), donde están todos los ejemplos de la guía rápida. Se encuentran en el fichero "readme.md", que por defecto interpreta. Si queréis acceder al modo texto, para ver la sintaxis de Markdown, hacerlo a través de este enlace:

https://raw.githubusercontent.com/tecnificados/markdown/master/README.md

Espero que os sea de utilidad.

lunes, 29 de febrero de 2016

Aplicaciones móviles con INTEL XDC



Ya llevo dos cursos para realizar aplicaciones móviles: "Desarrollo de aplicaciones en Android", y "Apps en Firefox OS". La gracia que tenía el último, es que desarrollabas en HTML5, empaquetabas tu proyecto en un zip, y ya tenías el instalador.

Por desgracia Firefox OS, no ha triunfado, pero la idea de HTML5 como base para una APP me parecía muy sencillo y potente.

En esta idea se basan las aplicaciones híbridas. Aunque soy más partidario de las nativas, reconozco que es mucho más rápido desarrollar para varias plataformas con este modelo.

Navegando por la web he encontrado Intel XDK, un IDE de desarrollo en HTML5 que utiliza librerías como Apache Cordova para exportar las aplicaciones a distintas plataformas.

Como primera prueba voy a intentar importar una pequeña página web que replica una App muy básica:


Antes de nada tenemos que descargarnos XDK, esto lo podemos hacer desde esta página: https://software.intel.com/es-es/intel-xdk.

Una vez descargado, nos lo instalamos, nos registramos para poder utilizarlo y una vez dentro veremos la siguiente pantalla:



La verdad es que es sorprendente todo lo que podemos llegar a hacer, desde aplicaciones básicas hasta juegos utilizando motores que ya están integrados. La cosa promete.

Nosotros vamos a probar la última opción: "Import Your HTML5 Code Base".

En el primer paso seleccionamos la ruta de nuestro proyecto (la carpeta que contiene el archivo "index.html"), y al cabo de unos pasos básicos más ya tenemos nuestro código importado.


Desde esta pantalla, en el menú de la derecha podemos ejecutar la aplicación en un emulador y ver cómo queda en distintos dispositivos.


En la parte superior hay una serie de pestañas, una de ellas es "BUILD", si la pulsamos nos aparecen todas las opciones para las que podemos construir un instalador para nuestra APP.


Al pulsar el siguiente paso nuestro código se sube a la nube de Intel para un posterior compilado.


Si pulsamos en el botón verde se realizará el paso final y se preparará nuestro instalador.


Último paso, descargar nuestra APP, con un pequeño resumen del estado de la compilación.


Unos minutos después lo he instalado en el móvil, esto es lo que aparecía:


Y así es como se ve cuando se ejecuta:


No me ha quedado muy responsive :(

La verdad es que como primera aproximación estoy muy contento con XDC, tengo que practicar más.