diff options
Diffstat (limited to 'es-es')
| -rw-r--r-- | es-es/css-es.html.markdown | 244 | ||||
| -rw-r--r-- | es-es/json-es.html.markdown | 59 | ||||
| -rw-r--r-- | es-es/livescript-es.html.markdown | 339 | ||||
| -rw-r--r-- | es-es/markdown-es.html.markdown | 252 |
4 files changed, 894 insertions, 0 deletions
diff --git a/es-es/css-es.html.markdown b/es-es/css-es.html.markdown new file mode 100644 index 00000000..31000785 --- /dev/null +++ b/es-es/css-es.html.markdown @@ -0,0 +1,244 @@ +--- +language: css +filename: learncss-es.css +contributors: + - ["Mohammad Valipour", "https://github.com/mvalipour"] + - ["Marco Scannadinari", "https://github.com/marcoms"] +translators: + - ["Daniel Zendejas","https://github.com/DanielZendejas"] +lang: es-es +--- + +Tutorial de CSS en español + +En los primeros días de la web no había elementos visuales, todo +era texto plano. Pero después, con el desarrollo de los navegadores, +las páginas con contenido visual empezaron a ser más comunes. +CSS es el lenguaje estándar que existe para separar el contenido +(HTML) y el aspecto visual de las páginas web. + +Lo que CSS hace es proveer con una sintaxis que te permite apuntar a distintos +elementos HTML y asignarles diferentes propiedades visuales. + +CSS, como cualquier otro lenguaje, tiene múltiples versiones. Aquí nos enfocamos +en CSS 2.0. No es la versión más reciente pero sí la más soportada y compatible. + +**NOTA:** Como los resultados de CSS son efectos visuales, para aprenderlo, +necesitarás probar todo tipo de cosas en ambientes como +[dabblet](http://dabblet.com/). Este artículo se enfoca, principalmente, en +la sintaxis y consejos generales. + +```css +/* ¡Los comentarios aparecen dentro de diagonal-asterisco, justo como esta línea! */ + +/* #################### + ## SELECTORES + ####################*/ + +/* Generalmente, la sentencia principal en CSS es muy simple. */ +selector { propiedad: valor; /* más propiedades separados por punto y coma...*/ } + +/* El selector es usado para apuntar a (seleccionar) un elemento en la página. + +¡Puedes apuntar a todos los elementos en la página con el asterisco! */ +* { color:red; } + +/* +Dado un elemento como este en la página: + +<div class='una-clase clase2' id='unaId' attr='valor' /> +*/ + +/* puedes seleccionar el <div> por el nombre de su clase */ +.una-clase { } + +/*¡O por sus dos clases! */ +.una-clase.clase2 { } + +/* O por el nombre de su elemento */ +div { } + +/* O por su Id */ +#unaId { } + +/* ¡O por el hecho de que tiene un atributo! */ +[attr] { font-size:smaller; } + +/* O por el hecho de que el atributo tiene un valor determinado */ +[attr='valor'] { font-size:smaller; } + +/* Empieza con un valor ('val' en este caso)*/ +[attr^='val'] { font-size:smaller; } + +/* O termina con un valor ('or' en este caso) */ +[attr$='or'] { font-size:smaller; } + +/* O incluso contiene un valor ('lo' en este caso) */ +[attr~='lo'] { font-size:smaller; } + +/*Más importante, puedes combinar estos criterios de búsqueda entre sí. +No debe existir ningún espacio entre estas partes porque hace que el +significado cambie.*/ +div.una-clase[attr$='or'] { } + +/* También puedes seleccionar un elemento HTML basándote en sus padres*/ + +/* Un elemento que es hijo directo de otro elemento (Seleccionado de la forma que +vimos anteriormente) */ + +div.un-padre > .nombre-clase {} + +/* O cualquiera de sus ancestros en la jerarquía*/ +/* La siguiente sentencia selecciona a cualquier elemento que tenga una clase +"nombre-clase" y sea hijo de un div con clase "un-padre" EN CUALQUIER PROFUNDIDAD*/ +div.un-padre .nombre-clase {} + +/* advertencia: el mismo selector sin espacio tiene otro significado. ¿Puedes +identificar la diferencia?*/ + +/* También puedes seleccionar un elemento basado en su hermano inmediato previo*/ +.yo-estoy-antes + .este-elemento { } + +/*o cualquier hermano previo */ +.yo-soy-cualquiera-antes ~ .estes-elemento {} + +/* Existen algunas pseudo-clases que permiten seleccionar un elemento +basado en el comportamiendo de la página (a diferencia de la estructura de +la página) */ + +/* Por ejemplo, para cuando pasas el mouse por encima de un elemento */ +:hover {} + +/* o una liga visitada*/ +:visited {} + +/* o una liga no visitada aún*/ +:link {} + +/* o un elemento de un formulario que esté seleccionado */ +:focus {} + + +/* #################### + ## PROPIEDADES + ####################*/ + +selector { + + /* Unidades */ + width: 50%; /* en porcentaje */ + font-size: 2em; /* dos veces el tamaño de la fuente actual */ + width: 200px; /* en pixeles */ + font-size: 20pt; /* en puntos */ + width: 5cm; /* en centimetros */ + width: 50mm; /* en milimetros */ + width: 5in; /* en pulgadas */ + + /* Colores */ + background-color: #F6E; /* en hexadecimal corto */ + background-color: #F262E2; /* en hexadecimal largo */ + background-color: tomato; /* puede ser un color con nombre */ + background-color: rgb(255, 255, 255); /* en rgb */ + background-color: rgb(10%, 20%, 50%); /* en rgb percent */ + background-color: rgba(255, 0, 0, 0.3); /* en rgb semi-transparente (con valor alfa)*/ + + /* Imagenes */ + background-image: url(/ruta-a-la-imagen/imagen.jpg); + + /* Fuentes */ + font-family: Arial; + font-family: "Courier New"; /* si el nombre contiene espacios, debe ir entre comillas */ + font-family: "Courier New", Trebuchet, Arial; /* si la primera fuente no se encontró + entonces se busca la seguna, o la tercera, así recursivamente*/ +} + +``` + +## Uso + +Guarda cualquier CSS que quieras en un archivo con extensión `.css`. + +```xml +<!-- Necesitas incluir tu archivo CSS en el elemento <head> de tu HTML: --> +<link rel='stylesheet' type='text/css' href='ruta/archivoDeEstilos.css' /> + +<!-- +también puedes incluir CSS dentro del archivo HTML. Esta no es una buena práctica +y debe ser evitada. +--> +<style> + selector { propiedad:valor; } +</style> + +<!-- +También se pueden aplicar propiedades al elemento directamente. +Esta práctica también debe ser evitada a toda costa +--> +<div style='propiedad:valor;'> +</div> + +``` + +## Preferencia y orden + +Como te habrás dado cuenta un elemento puede ser seleccionado por más +de un selector. En este caso alguna de las reglas cobra preferencia +sobre las otras: + +Dado el siguiente CSS: + +```css +/*A*/ +p.clase1[attr='valor'] + +/*B*/ +p.clase1 {} + +/*C*/ +p.clase2 {} + +/*D*/ +p {} + +/*E*/ +p { propiedad: valor !important; } + +``` + +Y el siguiente HTML: + +```xml +<p style='/*F*/ propiedad:valor;' class='clase1 clase2' attr='valor'> +</p> +``` + +El orden respetado es el siguiente: +Recuerda, la preferencia es por cada **property**, no para el bloque completo. + +* `E` tiene la preferencia más elevada gracias a la palabra `!important`. + Es recomendado evitar esto a menos que sea estrictamente necesario incluirlo. +* `F` le sigue, porque es estilo incrustado directamente en el HTML. +* `A` le sigue, porque es más específico que cualquier otra opción. + más específico = más especificadores. Aquí hay tres especificadores: elemento `p` + + nombre de la clase `clase1` + un atributo `attr='valor'` +* `C` le sigue. Aunque tiene el mismo número de especificadores como `B` + pero aparece después. +* Luego va `B` +* y al final `D`. + +## Compatibilidad + +La mayoría de las funcionalidades de CSS2 (y gradualmente de CSS3) son compatibles +en todos los navegadores y dispositivos. Pero siempre es vital tener en mente la +compatibilidad y disponibilidad del CSS que uses con respecto a los navegadores +y dispositivos para los que desarrolles. + + +[QuirksMode CSS](http://www.quirksmode.org/css/) es una excelente referencia para esto. + +## Referencias + +* [Understanding Style Precedence in CSS: Specificity, Inheritance, and the Cascade](http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/) +* [QuirksMode CSS](http://www.quirksmode.org/css/) +* [Z-Index - The stacking context](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context) + diff --git a/es-es/json-es.html.markdown b/es-es/json-es.html.markdown new file mode 100644 index 00000000..fff678eb --- /dev/null +++ b/es-es/json-es.html.markdown @@ -0,0 +1,59 @@ +--- +language: json +filename: learnjson-es.json +contributors: + - ["Anna Harren", "https://github.com/iirelu"] + - ["Marco Scannadinari", "https://github.com/marcoms"] +translators: + - ["Daniel Zendejas","https://github.com/DanielZendejas"] +lang: es-es +--- + +Siendo JSON un formato de intercambio de infomación tan sencillo, probablemente este será el Learn X in Y más sencillo jamás. + +JSON en su forma más pura no tiene comentarios, pero la mayoría de los parseadores aceptarán comentarios de C (//, /\* \*/). De todas formas, para el propóstio de esto todo será JSON 100% válido. Por suerte, habla por sí mismo. + +```json + +{ + "llave": "valor", + + "llaves": "siempre debe estar entre comillas (ya sean dobles o simples)", + "numeros": 0, + "strings": "Høla, múndo. Todo el unicode está permitido, así como \"escapar\".", + "soporta booleanos?": true, + "vacios": null, + + "numero grande": 1.2e+100, + + "objetos": { + "comentario": "La mayoria de tu estructura vendra de objetos.", + + "arreglo": [0, 1, 2, 3, "Los arreglos pueden contener cualquier cosa.", 5], + + "otro objeto": { + "comentario": "Estas cosas pueden estar anidadas, muy util." + } + }, + + "tonteria": [ + { + "fuentes de potasio": ["bananas"] + }, + [ + [1, 0, 0, 0], + [0, 1, 0, 0], + [0, 0, 1, "neo"], + [0, 0, 0, 1] + ] + ], + + "estilo alternativo": { + "comentario": "Mira esto!" + , "posicion de la coma": "no importa - mientras este antes del valor, entonces sera valido" + , "otro comentario": "que lindo" + }, + + "eso fue rapido": "Y, estas listo. Ahora sabes todo lo que JSON tiene para ofrecer." +} +``` diff --git a/es-es/livescript-es.html.markdown b/es-es/livescript-es.html.markdown new file mode 100644 index 00000000..103a3142 --- /dev/null +++ b/es-es/livescript-es.html.markdown @@ -0,0 +1,339 @@ +--- +language: LiveScript +filename: learnLivescript-es.ls +contributors: + - ["Christina Whyte", "http://github.com/kurisuwhyte/"] +translators: + - ["Daniel Zendejas", "http://github.com/DanielZendejas/"] +lang: es-es +--- + +LiveScript es un lenguaje funcional compilado sobre Javascript. Comparte +la mayoría de la semántica con este mismo lenguaje. Composición de funciones, +comparación de patrones y muchas otras cosas son las adiciones que hace +LiveScript. Está inspirado en lenguajes como Haskell, F# y Scala. + +Livescript es un bifurcación de [Coco][], que en sí mismo es una bifurcación +de [CoffeeScript][]. El lenguaje es estable, y una nueva versión está en +desarrollo activo para traer aún más funciones. + +[Coco]: http://satyr.github.io/coco/ +[CoffeeScript]: http://coffeescript.org/ + +La retroalimentación siempre es bienvenida, así que sientete libre de +contactarme en [@kurisuwhyte](https://twitter.com/kurisuwhyte) :) + +```coffeescript +# Justo como su primo CoffeeScript, LiveScript usa símbolos de gato para +# comentarios de una sola línea + +/* + Comentarios multi-línea son escritos con estilo de C. Usa este estilo si quieres + que los comentarios se preserven en el output de Javascript + */ +``` +```coffeescript +# En lo que a la sintaxis se refiere, LiveScript usa indentación para delimitar +# bloques en lugar de llaves {} y espacios para aplicar funciones, en lugar de +# paréntesis. + +######################################################################## +## 1. Valores básicos +######################################################################## + +# La carencia de valor se define con la palabra `void` en lugar de `undefined` +void # igual que `undefined` pero más seguro (no puede ser sobre escrito) + +# Ningún valor válido se representa con Null. +null + +# El valor básico más pequeño es de tipo lógico: +true +false + +# Y tiene múltiples alias que significan lo mismo: +on; off +yes; no + +# Luego vienen los números. Estos número con punto flotante tienen la misma +# precisión que los de JS: +10 +0.4 # Note que el `0` al inicio es requerido + +# Para fines de fácil lectura, puedes usar guiones bajos y sufijos en un +# número, y estos serán ignorados por el compilador. +12_344km + +# Los Strings son secuencias de caracteres inmutables, como en JS: +"Christina" # ¡Los apóstrofes están bien! +"""Strings + de muchas + líneas + están + bien + también.""" + +# A veces quieres codificar un palabra clave, la diagonal invertida sirve para esto: +\keyword # => 'keyword' + + +# Los arreglos son colecciones ordenadas de datos: +frutas = + * \manzana + * \naranja + * \pera + +# Una forma más concisa de representarlos son con corchetes: +frutas = [ \manzana, \naranja, \pera ] + +# Esta es una conveniente de crear listas de Strings, usando +# espacio en blanco para delimitar los items: +frutas = <[ manzana naranja pera ]> + +# Puedes recuperar un item usando su índice (empezando en 0): +frutas[0] # => "manzana" + +# Los objetos son colecciones de pares llave/valor sin ordenar, entre otras cosas, +# (detallaremos más al respecto en un momento): +persona = + nombre: "Christina" + gusta: + * "gatitos" + * "otras cosas" + +# Otra vez, puedes expresar el objeto con más consistencia con llaves {}: +persona = {nombre: "Christina", gusta: ["gatitos", "otras cosas"]} + +# Puedes conseguir un valor por medio de su llave: +persona.nombre # => "Christina" +persona["nombre"] # => "Christina" + + +# Las expresiones regulares tienen la misma sintaxis que en JavaScript: +expresion-regular = /\s$/ + +# A excepción de que puedes hacer expresiones de múltiples líneas +# (los comentarios y espacios se ignoran): +expresion-regular = // + function\s+(.+) # nombre + \s* \((.*)\) \s* # argumentos + { (.*) } # cuerpo + // + + +######################################################################## +## 2. Operaciones básicas +######################################################################## + +# Los operadores aritméticos son los mismos que en JavaScript: +1 + 2 # => 3 +2 - 1 # => 1 +2 * 3 # => 6 +4 / 2 # => 2 +3 % 2 # => 1 + + +# Las comparaciones son casi las mismas, excepto `==` que es igual +# a `===` en. El operador `==` de JS en LiveScript es `~=`, y `===` +# permite comparaciones entre objetos y arreglos, y también +# comparasiones más estrictas: +2 == 2 # => true +2 == "2" # => false +2 ~= "2" # => true +2 === "2" # => false + +[1,2,3] == [1,2,3] # => false +[1,2,3] === [1,2,3] # => true + ++0 == -0 # => true ++0 === -0 # => false + +# Otros operadores relacionales incluyen <, <=, > and >= + +# Los valores lógicos pueden ser combinados mediante los operadores +# lógicos `or`, `and` and `not`: +true and false # => false +false or true # => true +not false # => true + +# Las colecciones también tienen algunos operadores adicionales: +[1, 2] ++ [3, 4] # => [1, 2, 3, 4] +'a' in <[ a b c ]> # => true +'nombre' of { nombre: 'Chris' } # => true + + +######################################################################## +## 3. Funciones +######################################################################## + +# Como LiveScript es funcional, uno esperaría que las funciones recibirían +# un buen tratamiento. En LiveScript es más que aparente que las funciones +# son de primera clase: +suma = (primerElemento, segundoElemento) -> primerElemento + segundoElemento +add 1, 2 # => 3 + +# Las funciones que no reciben argumentos son llamadas rápidamente +dos = -> 2 +dos! + +# LiveScript, al igual que JS, aplica ámbitos (alcance) a sus variables y +# tiene cierres (closures) también. A diferencia de JavaScript, el operador +# `=` sirve como declaración y siempre declarará la variable en lado izquierdo. + +# El operador `:=` está disponible para *reusar* un nombre del ámbito del padre. + +# Puedes acceder a los argumentos de una función para conseguir +# los datos internos de una estructura de datos rápidamente: +cola = ([cabeza, ...resto]) -> resto +cola [1, 2, 3] # => [2, 3] + +# También puedes transformar argumentos usando operadores binarios o unarios. +# Argumentos por defecto también son posibles +foo = (a = 1, b = 2) -> a + b +foo! # => 3 + +# También puedes usarlo para clonar un argumento en particular para evitar efectos +# secundarios, por ejemplo: +copiar = (^^objetivo, fuente) -> + for k,v of fuente => objetivo[k] = v + objetivo +a = { a: 1 } +copiar a, { b: 2 } # => { a: 1, b: 2 } +a # => { a: 1 } + +# Una función puede ser abreviada usando una flecha larga en lugar de una corta: +suma = (primerElemento, segundoElemento) --> primerElemento + segundoElemento +sumaAbreviada = suma 1 +sumaAbreviada 2 # => 3 + +# Las funciones obtienen un argumento `it` implícito, incluso si no declaras +# ningún argument +identidad = -> it +identidad 1 # => 1 + +# Los operadores no son funciones en LiveScript. ¡Pero se pueden convertir fácilmente +# en una! Presentamos el seccionamiento de operadores: +dividir-entre-2 = (/ 2) +[2, 4, 8, 16].map(dividir-entre-2) .reduce (+) + +# LiveScript vive de otras cosas aparte de las funciones. Como en cualquier lenguaje +# funcional obtienes medios para componer (juntar) funciones: +doble-menos-uno = (- 1) . (* 2) + +# A parte de la clásica fórmula matemática `f . g`, también cuentas co los operadores +# `>>` y `<<`, que describen el flujo de los valores dentro de las funciones: +double-minus-one = (* 2) >> (- 1) +double-minus-one = (- 1) << (* 2) + +# Hablando del flujo de los valores, LiveScript también tiene los operadores `|>` y `<|` +# que aplican un valor a una función: +map = (f, xs) --> xs.map f +[1 2 3] |> map (* 2) # => [2 4 6] + +# También puedes escoger dónde quieres que el valor se posicione, sólo márcalo con un +# guíon bajo: +reducir = (f, xs, initial) --> xs.reducir f, initial +[1 2 3] |> reducir (+), _, 0 # => 6 + +# El guíon bajo también se usa para apartar lugares para tus argumentos, por ejemplo: +division = (dividendo,divisor) -> dividendo / divisor +dividir-entre-2 = division _, 2 +dividir-entre-2 4 # => 2 + +# Por último, LiveScript tiene back-calls (útiles mecanismos para hacer +# callbacks.). A pesar de esto deberías intentar formas más funcionales de hacerlo, +# como Promises: +leerArchivo = (nombre, f) -> f name +a <- leerArchivo 'foo' +b <- leerArchivo 'bar' +console.log a + b + +# Igual a: +leerArchivo 'foo', (a) -> leerArchivo 'bar', (b) -> console.log a + b + + +######################################################################## +## 4. Patrones, guardias y control de flujo +######################################################################## + +# Puedes bifurcar cálculos con la expresión `if...else`: +x = if n > 0 then \positive else \negative + +# En lugar de `then`, puedes usar `=>` +x = if n > 0 => \positivo + else \negativo + +# A pesar de esto, a las condiciones complejas es mejor expresarlas con el `switch`: +y = {} +x = switch + | (typeof y) is \number => \numero + | (typeof y) is \string => \string + | 'length' of y => \arreglo + | otherwise => \objeto # `otherwise` y `_` son lo mismo. + +# Los cuerpos de las funciones, declaraciones y asignaciones tienen un `switch` por defecto, +# así que no necesitas escribirlo nuevamente: + +take = (n, [x, ...xs]) --> + | n == 0 => [] + | _ => [x] ++ take (n - 1), xs + + +######################################################################## +## 5. Comprehensions (Auxiliares) +######################################################################## + +# Mientras que los auxiliares funcionales (para lidiar con listas y objetos) +# están en la librería estándar de JavaScript (y complementada con prelude-ls, +# que es una "librería estándar" de LiveScipt) los "comprehensions" (Auxiliares) +# usualemente te permiten hacer lo mismo pero más rápido y con una sintaxis más +# comprehensible (de ahí su nombre en inglés): +unoAVeinte = [1 to 20] +pares = [x for x in oneToTwenty when x % 2 == 0] + +# `when` y `unless` pueden ser usados como filtros en el auxiliar. + +# Los auxiliares para objetos funcionan de la misma forma, excepto que regresa un +# objeto en lugar de un arreglo: +copiar = { [k, v] for k, v of source } + + +######################################################################## +## 4. PROGRAMACIÓN ORIENTADA A OBJETOS +######################################################################## + +# Mientras que LiveScript es un lenguaje funcional en la mayoría de los +# aspectos, también brinda ayudas para la programación orientada a objetos. +# Algunas de estas ayudas son la sintaxis para las clases y un poco de "azucar" +# para las clases heredada de CoffeeScript: +class Animal + (@nombre, tipo) -> + @tipo = tipo + action: (accion) -> "*#{@nombre} (un #{@tipo}) #{accion}*" + +class Gato extends Animal + (@nombre) -> super @nombre, 'gato' + ronronear: -> @action 'ronronea' + +gatito = new Gato 'Mei' +gatito.purr! # => "*Mei (un gato) ronronea*" + +# A parte del clásico patrón de herencia simple, también puedes proveer +# cuantas mezclas quieras para una clase. Las mezclas sólo son objetos: +Abrazable = + abrazar: -> @action 'es abrazado' + +class GatoAbrazable extends Gato implements Abrazable + +gatito = new GatoAbrazable 'Ronroneo' +gatito.abrazar! # => "*Mei (un gato) es abrazado*" +``` + +## Más recursos + +Existe mucho más sobre LiveScript, pero esto debe bastar para que empieces. +El [sitio oficial](http://livescript.net/) tiene mucha información sobre el +lenguaje, y un compilador en linea para que pruebes cosas inmediatamente. + +También querras probar un poco de [prelude.ls](http://gkz.github.io/prelude-ls/), +y probar el canal `#livescript` en la red Freenode. diff --git a/es-es/markdown-es.html.markdown b/es-es/markdown-es.html.markdown new file mode 100644 index 00000000..3865126c --- /dev/null +++ b/es-es/markdown-es.html.markdown @@ -0,0 +1,252 @@ +--- +language: markdown +filename: markdown-es.md +contributors: + - ["Dan Turkel", "http://danturkel.com/"] +translators: + - ["Daniel Zendejas", "https://github.com/DanielZendejas"] +lang: es-es +--- + +Markdown fue creado por John Gruber en 2004. Su propósito es ser una sintaxis fácil de leer y escribir que se convierta +fácilmente a HTML (y, actualmente, otros formatos también). + +¡Denme todo la retroalimentación que quieran! / ¡Sientanse en la libertad de hacer forks o pull requests! + + +``` +<!-- Markdown está basado en HTML, así que cualquier archivo HTML es Markdown +válido, eso significa que podemos usar elementos HTML en Markdown como, por +ejemplo, el comentario y no serán afectados por un parseador Markdown. Aún +así si creas un elemento HTML en tu archivo Markdown no podrás usar sintaxis +Markdown dentro de él. --> + +<!-- La implementación de Markdown cambia de acuerdo al parseador. Esta +guía servirá para clarificar cuales características son universales y +cuales son específicas de cada parseador--> + +<!-- Headers --> +<!-- Puedes crear headers HTML fácilmente precediendo al texto con una serie +de símbolos de números (#)--> + +# Esto es un <h1> +## Esto es un <h2> +### Esto es un <h3> +#### Esto es un <h4> +##### Esto es un <h5> +###### Esto es un <h6> + +<!-- Markdown también nos proveé con dos alternativas para indicar h1 y h2 --> +Esto es un h1 +============= + +Esto es un h2 +------------- + +<!-- Estilos para texto plano --> +<!-- El texto puede ser fácilmente estilizaedo con italicas, negritas o tachado +usando markdown --> + +*Este texto está en itálicas.* +_Al igual que este texto._ + +**Este texto está en negritas.** +__Al igual que este texto.__ + +***Este texto tiene ambos estilos.*** +**_Al igual que este!_** +*__¡Y este!__* + +<!-- En Github Flavored Markdown, el cual es usado para mostrar archivos +Markdown en Github, también tenemos: --> + +~~Este texto está tachado.~~ + +<!-- Los párrafos son una o múltuples líneas de texto adyacentes separadas por +una o múltiples líneas en blanco--> + +Este es un párrafo. Estoy escribiendo un párrafo, ¿No es divertido? + +Ahora estoy en el párrafo dos. +¡Sigo en el párrafo dos! + +¡Estoy en el párrafo tres! + +<!-- Si en algún momento quieres insertar un break HTML <br />, puedes terminar +un párrafo con dos o más espacios y luego empieza un párrafo nuevo--> + +Termino con dos espacios (selecciona esta línea completa para que los veas). + +¡Hay un <br /> arriba de mí! + +<!-- Las citas de bloque son fáciles y se pueden hacer con el caracter >. --> + +> Esta es una cita de bloque. Puedes +> envolver tus líneas manualmente y poner un `>` antes de cada línea o puedes dejar que tus líneas sean muy largas y que se envuelvan solas. +> No hay diferencia, siempre y cuando empiecen con `>`. + +> ¿También puedes usar más de un nivel +>> de indentación? +> Esto es muy útil ¿No? + +<!-- Listas --> +<!-- Las listas desordenadas se hacen usando asteriscos, símbolos de más, + o guiones --> + +* Item +* Item +* Otro item + +o + ++ Item ++ Item ++ Un item más + +o + +- Item +- Item +- El último item + +<!-- Las listas ordenadas se logran con un número seguido de un punto --> + +1. Item uno +2. Item dos +3. Item tres + +<!-- Aunque Markdown mostrará los items correctamente en orden, esto no +es una buena idea --> + +1. Item uno +1. Item dos +1. Item tres +<!-- (Esto muestra lo mismo que el ejemplo de arriba) --> + +<!-- También puedes usar sub-listas --> + +1. Item uno +2. Item dos +3. Item tres + * Sub-item + * Sub-item +4. Item cuatro + +<!-- Bloques de código --> +<!-- Puedes indicar un bloque de código (usan los elementos <code>) indentando +una línea con cuatro espacios o un tab--> + + Esto es código + Esto también + +<!-- También puedes insertar dos tabs (o cuatro espacios adicionales) +para indentar dentro del código --> + + my_array.each do |item| + puts item + end + +<!-- Código dentro de la línea puede ser escrito usando la comilla ` --> + +¡John no sabía lo que la función `go_to()` hacía! + +<!-- Con Github Flavored Markdown, puedes usar una sintaxis especial para código --> + +\`\`\`ruby <!-- quita esas comillas cuando lo hagas, deja sólo ```ruby ! --> +def foobar + puts "Hello world!" +end +\`\`\` <!-- aquí también, sin comillas, sólo ``` --> + +<!-- El texto de arriba no necesita indentación, aparte Github usará +resaltará la sintaxis del lenguaje que especifiques después de ``` --> + +<!-- Regla horizontal (<hr />) --> +<!-- Las reglas horizontales se agregan fácilmente con tres o más asteriscos o guiones, +con o sin espacios. --> + +*** +--- +- - - +**************** + +<!-- Ligas --> +<!-- Una de las mejores cosas de Markdown es la facilidad para hacer ligas. Pon +el texto a mostrar en corchetes [] seguidos por la URL en paréntesis () --> + +[¡Haz click!](http://test.com/) + +<!-- También puedes agregar el titulo de la liga usando comillas dentro de los paréntesis --> + +[¡Haz click!](http://test.com/ "Liga al test.com") + +<!-- También funcionan las rutas relativas. --> + +[Ir a la música](/music/). + +<!-- Markdown también soporta ligas con estilo de referencia --> + +¡[Has click a esta liga][liga1] para más información! +[También mira esta liag][foobar] si quieres. + + + + +<!-- El título también puede estar en comillas simples o dentro de paréntesis, +también se pueden omitir completamente. Las referencias pueden estar en cualquier +lugar en tu documento y los IDs de referencia pueden ser lo que sea mientras sean únicos. --> + +<!-- También hay "nombramiento implicito" el cual te permite usar el texto de la liga como id --> + +[Esta][] es una liga. + + + +<!-- Pero no se usa comúnmente. --> + +<!-- Imagenes --> +<!-- Las imagenes se hacen de la misma forma que las ligas pero con un símbolo de exclamaciónal frente! --> + + + +<!-- Y el estilo de referencia funciona como se espera --> + +![Esta es una etiqueta.][myimage] + + + +<!-- Misceláneos --> +<!-- Auto-ligas --> + +<http://testwebsite.com/> equivale a +[http://testwebsite.com/](http://testwebsite.com/) + +<!-- Auto-ligas para correos electrónicos --> + +<foo@bar.com> + +<!-- Escapando caracteres --> + +Quiero escribir *este texto rodeado por asteriscos* pero no quiero que esté en itálicas, +así que hago esto: \*Este texto está rodeado de asteriscos\*. + +<!-- Tablas --> +<!-- Las tablas sólo están disponibles en Github Flavored Markdown y son un poco pesadas, +pero si de verdad las quieres: --> + +| Col1 | Col2 | Col3 | +| :----------- | :------: | ------------: | +| Izquierda | Centrado | Derecha | +| blah | blah | blah | + +<!-- o, para los mismos resultados --> + +Col 1 | Col2 | Col3 +:-- | :-: | --: +Ugh esto es feo | has que | pare. + +<!-- ¡El fin! --> + +``` + +Para más información, mira el post oficial de John Gruber's [aquí](http://daringfireball.net/projects/markdown/syntax) y la gran referencia de Adam Pritchard's [aquí](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet). |