diff options
Diffstat (limited to 'es-es')
| -rw-r--r-- | es-es/edn-es.html.markdown | 111 | ||||
| -rw-r--r-- | es-es/sass-es.html.markdown | 585 |
2 files changed, 696 insertions, 0 deletions
diff --git a/es-es/edn-es.html.markdown b/es-es/edn-es.html.markdown new file mode 100644 index 00000000..32bba37d --- /dev/null +++ b/es-es/edn-es.html.markdown @@ -0,0 +1,111 @@ +--- +language: edn +filename: learnedn-es.edn +contributors: + - ["Jason Yeo", "https://github.com/jsyeo"] +translators: + - ["Gino Amaury", "https://github.com/ginoamaury"] +lang: es-es +--- + +La notación de datos extensible (Extensible Data Notation (EDN)) es un formato para serializar los datos. + +La notación se utiliza internamente por Clojure para representar programas. También es +utilizado como un formato de transferencia de datos como JSON. A pesar de que se utiliza más comúnmente en +Clojure, existen implementaciones de EDN para muchos otros lenguajes. + +El principal beneficio de EDN sobre JSON y YAML es que es extensible. +Vamos a ver cómo se extiende más adelante. + +```clojure +; Los comentarios comienzan con un punto y coma. +; Cualquier cosa después del punto y coma es ignorado. + +;;;;;;;;;;;;;;;;;;; +;;;Tipos Básicos;;; +;;;;;;;;;;;;;;;;;;; + +nil ; También conocido en otros lenguajes como nulo (null). + +; Booleanos +true +false + +; Las cadenas se encierran entre comillas dobles +"desayuno húngaro" +"tortilla de queso del granjero" + +; Los caracteres están precedidos por barras invertidas +\g \r \a \c \e + +; Las palabras claves comienzan con dos puntos.Se comportan como las enumeraciones. Más o menos +; Como símbolos en Ruby +:huevos +:queso +:aceitunas + +; Los símbolos se utilizan para representar los identificadores.Estos empiezan con #. +; puedes tener espacios usando el símbolo /. cualquier cosa precedida / es +; un espacio en el nombre. +#cuchara +#cocina/cuchara ; no es lo mismo que #spoon +#cocina/tenedor +#github/tenedor ; no se puede comer con este. + +; Números enteros y flotantes +42 +3.14159 + +; Las listas son secuencias de valores. +(:bollo :empanada-de-res 9 "yum!") + +; Vectores permiten acceso aleatorio +[:helado 1 2 -2] + +; Los mapas son estructuras de datos asociativos que se asocian con la clave de su valor. +{:huevos 2 + :jugo-de-limon 3.5 + :mantequilla 1} + +; Usted no está restringido a usar palabras clave como claves. +{[1 2 3 4] "decirle a la gente lo que llevaba", + [5 6 7 8] "Entre mas tu ves, mas lo odias"} + +; Puede usar comas para facilitar la lectura. Se tratan como espacios en blanco. + +; Los conjuntos son colecciones que contienen elementos únicos. +#{:a :b 88 "huat"} + +;;;;;;;;;;;;;;;;;;;;;;;;;;;; +;;;Elementos de etiqueta ;;; +;;;;;;;;;;;;;;;;;;;;;;;;;;;; + +; EDN puede ser extendido por elementos de etiqueta con el símbolo #. + +#MyYelpClone/MenuItem {:nombre "huevos-Benedict" :clasificacion 10} + +; Permíteme explicar esto con un ejemplo en colujre. Supongamos que quiero +; transformar ese pedazo de EDN en un registro del Menú. + +(defrecord MenuItem [nombre clasificacion]) + +; Para transformar EDN en valores clojure, necesitaremos usar el constructor en EDN +; lectura, edn/read-string + +(edn/read-string "{:huevos 2 :mantequilla 1 :harina 5}") +; -> {:huevos 2 :mantequilla 1 :harina 5} + +; Para transformar los elementos de etiqueta, definir la función de lectura y pasar un mapa +; que asigna etiquetas a funciones del lector de edn/read-string al igual que. + +(edn/read-string {:lectores {'MyYelpClone/MenuItem map->menu-item}} + "#MyYelpClone/MenuItem {:nombre \"huevos-benedict\" :clasificacion 10}") +; -> #user.MenuItem{:nombre "huevos-benedict", :clasificacion 10} + +``` + +# Referencias + +- [EDN spec (EN)](https://github.com/edn-format/edn) +- [Implementations (EN)](https://github.com/edn-format/edn/wiki/Implementations) +- [Tagged Elements (EN)](http://www.compoundtheory.com/clojure-edn-walkthrough/) diff --git a/es-es/sass-es.html.markdown b/es-es/sass-es.html.markdown new file mode 100644 index 00000000..89e56ba5 --- /dev/null +++ b/es-es/sass-es.html.markdown @@ -0,0 +1,585 @@ +--- +language: sass +filename: learnsass.scss +contributors: + - ["Laura Kyle", "https://github.com/LauraNK"] + - ["Sean Corrales", "https://github.com/droidenator"] + - ["Kyle Mendes", "https://github.com/pink401k"] + - ["Keith Miyake", "https://github.com/kaymmm"] +translators: + - ["César Suárez", "https://github.com/csuarez"] +lang: es-es +--- + +Sass es un lenguaje que extiende CSS y que añade características tales como variables, anidación, mixins y más. Sass (y otros preprocesadores tales como [Less](http://lesscess.org/)) ayudan a los desarrolladores a escribir código mantenible y DRY (Don't Repeat Yourself). + +Sass tiene dos sintaxis para elegir: SCSS, que usa la misma que CSS pero con las características añadidas de Sass, y Sass (la sintaxis original) que usa identación en vez de llaves y puntos y comas. Este tutorial está escrito en SCSS. + +Si ya estás familiarizado con CSS3, vas a entender Sass relativamente rápido. Sass no ofrece nuevas propiedades de estilo, si no que añade herramientas para escribir tus CSS de manera más eficiente, haciendo su mantenimiento mucho más sencillo. + +```scss + + +//Los comentarios en una sola línea son eliminados cuando Sass es compilado a CSS. + +/* Los comentarios multi-línea se mantienen. */ + + + +/* Variables +============================== */ + + +/* Puedes almacenar valores CSS (como un color) en una variable. +Usa el símbolo '$' para crear una variable */ + +$primary-color: #A3A4FF; +$secondary-color: #51527F; +$body-font: 'Roboto', sans-serif; + +/* Puedes usar las variables a lo largo de tu hoja de estilos. +Ahora, si quieres cambiar el color, sólo lo tienes que hacer una vez. */ + +body { + background-color: $primary-color; + color: $secondary-color; + font-family: $body-font; +} + +/* Este código compilará en: */ +body { + background-color: #A3A4FF; + color: #51527F; + font-family: 'Roboto', sans-serif; +} + +/* El resultado es mucho más mantenible que tener que cambiar el color +cada vez que aparece en la hoja de estilos. */ + + + +/* Directivas de control +============================== */ + + +/* Sass permite usar @if, @else, @for, @while, y @each para controlar la + compilación de tu código en CSS. */ + +/* Los bloques @if/@else se comportan tal como es de esperar */ + +$debug: true !default; + +@mixin debugmode { + @if $debug { + @debug "Modo debug activado"; + + display: inline-block; + } + @else { + display: none; + } +} + +.info { + @include debugmode; +} + +/* Si $debug es true, .info es mostrado; si es false entonces +no se muestra. + +Nota: @debug mostrará información de depuración en la consola. +Es muy útil para ver el contenido de tus variables cuando estás depurando. */ + +.info { + display: inline-block; +} + +/* @for es un bucle que itera un conjunto de valores. +Es particularmente útil para dar estilos a una colección de objetos. +Hay dos formas "through" y "to". El primero incluye el último valor +mientras que el segundo para antes del último valor. */ + +@for $c from 1 to 4 { + div:nth-of-type(#{$c}) { + left: ($c - 1) * 900 / 3; + } +} + +@for $c from 1 through 3 { + .myclass-#{$c} { + color: rgb($c * 255 / 3, $c * 255 / 3, $c * 255 / 3); + } +} + +/* Esto compila en: */ + +div:nth-of-type(1) { + left: 0; +} + +div:nth-of-type(2) { + left: 300; +} + +div:nth-of-type(3) { + left: 600; +} + +.myclass-1 { + color: #555555; +} + +.myclass-2 { + color: #aaaaaa; +} + +.myclass-3 { + color: white; +// SASS convierte automáticamente #FFFFFF a white +} + +/* @while es bastante sencillo: */ + +$columns: 4; +$column-width: 80px; + +@while $columns > 0 { + .col-#{$columns} { + width: $column-width; + left: $column-width * ($columns - 1); + } + + $columns: $columns - 1; +} + +/* Esto se convierte en el siguiente CSS: */ + +.col-4 { + width: 80px; + left: 240px; +} + +.col-3 { + width: 80px; + left: 160px; +} + +.col-2 { + width: 80px; + left: 80px; +} + +.col-1 { + width: 80px; + left: 0px; +} + +/* @each funciona parecido a @for, pero usa una lista en ver del valor ordinal +Nota: puedes especificar listas como cualquier otra variable usando espacios +como delimitadores. */ + +$social-links: facebook twitter linkedin reddit; + +.social-links { + @each $sm in $social-links { + .icon-#{$sm} { + background-image: url("images/#{$sm}.png"); + } + } +} + +/* Esto resultará en: */ + +.social-links .icon-facebook { + background-image: url("images/facebook.png"); +} + +.social-links .icon-twitter { + background-image: url("images/twitter.png"); +} + +.social-links .icon-linkedin { + background-image: url("images/linkedin.png"); +} + +.social-links .icon-reddit { + background-image: url("images/reddit.png"); +} + + + +/* Mixins +==============================*/ + + +/* Si te encuentras con que estás escribiendo el mismo código en más de un +elemento, puede que quieras almacenarlo en un mixin. + +Usa la directiva '@mixin', más un nombre para tu mixin. */ + +@mixin center { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; +} + +/* Puedes usarlo con '@include' y el nombre del mixin. */ + +div { + @include center; + background-color: $primary-color; +} + +/* Esto compilará en: */ +div { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + background-color: #A3A4FF; +} + +/* Puedes usar mixins para crear una propiedad shorthand. */ + +@mixin size($width, $height) { + width: $width; + height: $height; +} + +/* La que puedes invocar pasándole los argumentos width y height. */ + +.rectangle { + @include size(100px, 60px); +} + +.square { + @include size(40px, 40px); +} + +/* Compila en: */ +.rectangle { + width: 100px; + height: 60px; +} + +.square { + width: 40px; + height: 40px; +} + + + +/* Funciones +============================== */ + + +/* Sass ofrece funciones que pueden ser usadas para realizar una gran variedad + de tareas. Por ejemplo: */ + +/* Se pueden invocar funciones usando su nombre y pasándole los + argumentos requeridos. */ +body { + width: round(10.25px); +} + +.footer { + background-color: fade_out(#000000, 0.25); +} + +/* Compila en: */ + +body { + width: 10px; +} + +.footer { + background-color: rgba(0, 0, 0, 0.75); +} + +/* Puedes definir tus propias funciones. Las funciones son muy similares a + los mixins. Cuando tengas que elegir entre una función y un mixin, recuerda + que los mixins son mejores para generar CSS, mientras que las funciones son + mejores para la lógica que puedas necesitar en tu código Sass. Los ejemplos + de la sección 'Operadores matemáticos' son candidatos ideales para ser + usados como una función reusable. */ + +/* Esta función toma un tamaño objetivo y el tamaño de un padre y + devuelve el porcentaje. */ + +@function calculate-percentage($target-size, $parent-size) { + @return $target-size / $parent-size * 100%; +} + +$main-content: calculate-percentage(600px, 960px); + +.main-content { + width: $main-content; +} + +.sidebar { + width: calculate-percentage(300px, 960px); +} + +/* Compila en: */ + +.main-content { + width: 62.5%; +} + +.sidebar { + width: 31.25%; +} + + + +/* Extender (Herencia) +============================== */ + + +/* Extend es una manera de compartir propiedades de un selector con otro. */ + +.display { + @include size(5em, 5em); + border: 5px solid $secondary-color; +} + +.display-success { + @extend .display; + border-color: #22df56; +} + +/* Compila en: */ +.display, .display-success { + width: 5em; + height: 5em; + border: 5px solid #51527F; +} + +.display-success { + border-color: #22df56; +} + +/* Extender una declaración CSS es preferible a crear un mixin + debido a la manera en la que Sass agrupa las clases que comparten + los mismos estilos base. Si esto fuese hecho con un mixin, el ancho, + alto y el borden aparecerían duplicados para cada una de las declaraciones + que usasen el mixin. Esto no afectará a tu workflow, pero infla + innecesariamente los ficheros generados por el compilador Sass. */ + + + +/* Anidación +============================== */ + + +/* Sass permite anidar selectores dentro de otros selectores. */ + +ul { + list-style-type: none; + margin-top: 2em; + + li { + background-color: #FF0000; + } +} + +/* '&' será reemplazado por el selector del padre. */ + +/* También puedes anidar seudo clases. */ + +/* Ten en cuenta que anidar demasiado hará tu código menos mantenible. +Como buena práctica, se recomienda no tener más de 3 niveles de anidación. +Por ejemplo: */ + +ul { + list-style-type: none; + margin-top: 2em; + + li { + background-color: red; + + &:hover { + background-color: blue; + } + + a { + color: white; + } + } +} + +/* Compila en: */ + +ul { + list-style-type: none; + margin-top: 2em; +} + +ul li { + background-color: red; +} + +ul li:hover { + background-color: blue; +} + +ul li a { + color: white; +} + + + +/* Parciales e importaciones +============================== */ + + +/* Sass permite que crees ficheros parciales. Esto te puede ayudar a mantener + tu código Sass modularizado. Los ficheros parciales deben comenzar por '_', + p.e. _reset.css. + Los parciales no son convertidos en CSS. */ + +/* Mira este al que vamos a añadir un fichero llamado _reset.css */ + +html, +body, +ul, +ol { + margin: 0; + padding: 0; +} + +/* Con @import puedes importar parciales a un fichero. Este se diferencia del + @import de CSS en que no hace otra petición HTTP para importar el fichero. + Sass, sino que combina el código importado en el código compilado. */ + +@import 'reset'; + +body { + font-size: 16px; + font-family: Helvetica, Arial, Sans-serif; +} + +/* Compila en: */ + +html, body, ul, ol { + margin: 0; + padding: 0; +} + +body { + font-size: 16px; + font-family: Helvetica, Arial, Sans-serif; +} + + + +/* Placeholders +============================== */ + + +/* Los placeholders son útiles cuando estás creando una declaración CSS a + extender. Si quieres crear una declaración que sólo va a ser usada con @extend, + puedes hacerlo mediante un placeholder. Los placeholders comienzan con '%' + en vez de '.' o '#'. Esto no aparecen en el código CSS compilado. */ + +%content-window { + font-size: 14px; + padding: 10px; + color: #000; + border-radius: 4px; +} + +.message-window { + @extend %content-window; + background-color: #0000ff; +} + +/* Compila en: */ + +.message-window { + font-size: 14px; + padding: 10px; + color: #000; + border-radius: 4px; +} + +.message-window { + background-color: #0000ff; +} + + + +/* Operaciones matemáticas +============================== */ + + +/* Sass provee los siguientes operadores: +, -, *, / y %. Estos son útiles + para calcular valores directamente en tu código Sass en vez de usar valores + calculados a mano. Mira el siguiente ejemplo que prepara un sencillo diseño + de dos columnas. */ + +$content-area: 960px; +$main-content: 600px; +$sidebar-content: 300px; + +$main-size: $main-content / $content-area * 100%; +$sidebar-size: $sidebar-content / $content-area * 100%; +$gutter: 100% - ($main-size + $sidebar-size); + +body { + width: 100%; +} + +.main-content { + width: $main-size; +} + +.sidebar { + width: $sidebar-size; +} + +.gutter { + width: $gutter; +} + +/* Compila en: */ + +body { + width: 100%; +} + +.main-content { + width: 62.5%; +} + +.sidebar { + width: 31.25%; +} + +.gutter { + width: 6.25%; +} + +``` + +## ¿SASS o Sass? +¿Alguna vez has pensado si Sass es un acrónimo o no? Seguramente no, pero te lo vamos a explicar de todas maneras. "Sass" es una palabra, no un acrónimo. +Como todo el mundo lo escribe como "SASS", el creador del lenguaje lo ha llamado de broma "Syntactically Awesome StyleSheets" (Hojas de estilo sintácticamente increíbles). + + +## Practica Sass +Si quieres probar Sass en tu navegador, prueba [SassMeister](http://sassmeister.com/). +Puedes usar cualquier sintaxis, o elegir en la configuración entre Sass y SCSS. + +## Compatibilidad +Sass puede ser usado en cualquier proyecto mientras tengas un programa que lo compile en CSS. Quizás quieras comprobar si el CSS que estás usando es compatible con tus navegadores objetivo. + +[QuirksMode CSS](http://www.quirksmode.org/css/) y [CanIUse](http://caniuse.com) son buenos recursos para comprobar la compatibilidad de navegadores. + + +## Más información +* [Documentación oficial (EN)](http://sass-lang.com/documentation/file.SASS_REFERENCE.html) +* [The Sass Way (EN)](http://thesassway.com/) tiene tutoriales (para principiantes y avanzandos) and artículos. |