diff options
Diffstat (limited to 'es-es')
| -rw-r--r-- | es-es/edn-es.html.markdown | 111 | ||||
| -rw-r--r-- | es-es/jquery-es.html.markdown | 4 | ||||
| -rw-r--r-- | es-es/less-es.html.markdown | 393 | ||||
| -rw-r--r-- | es-es/powershell-es.html.markdown | 2 | ||||
| -rw-r--r-- | es-es/sass-es.html.markdown | 585 | ||||
| -rw-r--r-- | es-es/wolfram-es.html.markdown | 138 |
6 files changed, 1230 insertions, 3 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/jquery-es.html.markdown b/es-es/jquery-es.html.markdown index d35e6f17..27ad48bb 100644 --- a/es-es/jquery-es.html.markdown +++ b/es-es/jquery-es.html.markdown @@ -79,7 +79,7 @@ $('#btn').on( ); // Puede mover y ocultar elementos con algunos métodos de efecto -$('.table').hide(); # Oculta el(los) elemento(s) +$('.table').hide(); // Oculta el(los) elemento(s) // Nota: llamar a una función en estos métodos aún oculta el elemento $('.table').hide(function(){ @@ -134,7 +134,7 @@ $('p').height(); // Obtiene sólo la altura de la primera etiqueta 'p' // Puedes utilizar 'each' para recorrer todos los elementos var heights = []; $('p').each(function() { - heights.push($(this.height)); // Añade todas las alturas "p" de la etiqueta a la matriz + heights.push($(this).height()); // Añade todas las alturas "p" de la etiqueta a la matriz }); diff --git a/es-es/less-es.html.markdown b/es-es/less-es.html.markdown new file mode 100644 index 00000000..fa09db9f --- /dev/null +++ b/es-es/less-es.html.markdown @@ -0,0 +1,393 @@ +--- +language: less +filename: learnless-es.less +lang: es-es +contributors: + - ["Saravanan Ganesh", "http://srrvnn.me"] +translators: + - ["César Suárez", "https://github.com/csuarez"] +--- + +Less es un pre-procesador CSS, que añade características como variables, anidación, mixins y más. +Less (y otros pre-procesadores como [Sass](http://sass-lang.com/) ayudan a los desarrolladores a escribir código mantenible y DRY (Don't Repeat Yourself). + +```css + + +//Los comentarios de una línea son borrados cuando Less es compilado a CSS. + +/* Los comentarios multi-línea se mantienen. */ + + + +/*Variables +==============================*/ + + +/* Puedes almacenar un valor 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 por toda tu hoja de estilos. +Ahora, si quieres cambiar un color, sólo lo tienes que hacer una vez.*/ + +body { + background-color: @primary-color; + color: @secondary-color; + font-family: @body-font; +} + +/* Esto compilará en: */ + +body { + background-color: #a3a4ff; + color: #51527F; + font-family: 'Roboto', sans-serif; +} + + +/* Esto es mucho más mantenible que tener que cambiar el color + cada vez que aparece en tu hoja de estilos. */ + + + +/* Mixins +==============================*/ + + +/* Si tienes el mismo código para más de un elemento, puede que + quieras reutilizarlo fácilmente. */ + +.center { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; +} + +/* Puedes usar un mixin simplemente añadiendo el selector como un estilo. */ + +div { + .center; + background-color: @primary-color; +} + +/* Esto compilará en: */ + +.center { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; +} + +div { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + background-color: #a3a4ff; +} + +/* Puedes omitir que se compile el código del mixin añadiendo un + paréntesis después del selector. */ + +.center() { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; +} + +div { + .center; + background-color: @primary-color; +} + +/* Esto compilará en: */ +div { + display: block; + margin-left: auto; + margin-right: auto; + left: 0; + right: 0; + background-color: #a3a4ff; +} + + + +/* Anidación +==============================*/ + + +/* Less te permite anidar selectores dentro de otros selectores. */ + +ul { + list-style-type: none; + margin-top: 2em; + + li { + background-color: #f00; + } +} + +/* '&' es replazado por el selector padre. */ +/* También se pueden anidar seudo clases. */ +/* Ten en cuenta que anidar demasiado puede hacer tu código menos + mantenible. Las buenas prácticas recomiendan 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; +} + + + +/* Funciones +==============================*/ + + +/* Less ofrece funciones que pueden ser usadas para cumplir una gran variedad + de tareas. Considera lo siguiente: */ + +/* Las funciones pueden ser llamadas usando su nombre y pasándole los argumentos + requeridos. */ + +body { + width: round(10.25px); +} + +.header { + background-color: lighten(#000, 0.5); +} + +.footer { + background-color: fadeout(#000, 0.25) +} + +/* Compila en: */ + +body { + width: 10px; +} + +.header { + background-color: #010101; +} + +.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 calcula la media de dos números. */ + +.average(@x, @y) { + @average-result: ((@x + @y) / 2); +} + +div { + .average(16px, 50px); // aquí se llama a la función + padding: @average-result; // y aquí se usa el valor "devuelto" +} + +/* Compila en: */ + +div { + padding: 33px; +} + + + +/* Extender (Herencia) +==============================*/ + + +/* Extend es una manera de compartir propiedades de un selector con otro. */ + +.display { + height: 50px; +} + +.display-success { + &:extend(.display); + border-color: #22df56; +} + +/* Compila en: */ +.display, +.display-success { + height: 50px; +} +.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 Less. */ + + +/*Partials and Imports +==============================*/ + + + +/* Less allows you to create partial files. This can help keep your Less + code modularized. Partial files conventionally begin with an '_', + e.g. _reset.less. and are imported into a main less file that gets + compiled into CSS */ + +/* Consider the following CSS which we'll put in a file called _reset.less */ + +html, +body, +ul, +ol { + margin: 0; + padding: 0; +} + + /* Less ofrece @import para poder importar parciales a un fichero. Esto se + diferencia del @import de CSS en que no hace otra petición HTTP para + importar el fichero, 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; +} + + + +/* Operaciones matemáticas +==============================*/ + + +/* Less ofrece los siguientes operadores: +, -, *, / y %. Estos son útiles + para calcular valores directamente en tu código Less 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%; +} + + +``` + +## Practica Less + +Si quieres probar Less en tu navegador, prueba: +* [Codepen](http://codepen.io/) +* [LESS2CSS](http://lesscss.org/less-preview/) + +## 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://lesscss.org/features/) +* [Less CSS - Guía para principiantes (EN)](http://www.hongkiat.com/blog/less-basic/) diff --git a/es-es/powershell-es.html.markdown b/es-es/powershell-es.html.markdown index dd92eb97..9eb35967 100644 --- a/es-es/powershell-es.html.markdown +++ b/es-es/powershell-es.html.markdown @@ -18,7 +18,7 @@ Una diferencia clave con respecto a Bash es que en PowerShell casi todo son mani Si no está seguro sobre el ambiente de ejecución en su sistema: -``` +```powershell Get-ExecutionPolicy -List Set-ExecutionPolicy AllSigned # Otras opciones de políticas de ejecución son: 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. diff --git a/es-es/wolfram-es.html.markdown b/es-es/wolfram-es.html.markdown new file mode 100644 index 00000000..44ec9e09 --- /dev/null +++ b/es-es/wolfram-es.html.markdown @@ -0,0 +1,138 @@ +--- +language: wolfram +lang: es-es +contributors: + - ["Daniel Caballero", "http://github.com/danielcaballero796/"] +filename: learnwolfram-es.md +--- + +Wolfram es un lenguaje subyacente originalmente utilizado en Mathematica, pero ahora esta disponible para su uso en múltiples contextos. + +El lenguaje de Wolfram tiene varias interfaces: +* La interfaz de línea de comandos kernel de Raspberry Pi (recién llamada _The Wolfram Language_) que se ejecuta interactivamente y no puede producir entrada gráfica. +* _Mathematica_ que es un texto rico / editor de matemáticas con Wolfram interactivo construido: presionando shift + Return en una "celda de código" crea una celda de salida con el resultado, que no es dinámica +* _Wolfram Workbench_ la cual es la interfaz de Eclipse del lenguaje Wolfram + +El código de este ejemplo se puede escribir en cualquier interfaz y editarlo con Wolfram Workbench. Cargar directamente en Matematica puede resultar incómodo porque el archivo no contiene información de formato de celda (lo que haría que el archivo sea un desastre enorme para ser leído como texto) - puede ser visto / editado pero tal vez requerira algún ajuste. + +``` +(* Esto es un comentario *) + +(* En Mathematica en lugar de utilizar estos comentarios, puede crear una celda de texto + Y anotar su código con texto e imágenes bien escritas *) + +(* Escribe una expresión devuelve el resultado *) +2*2 (* 4 *) +5+8 (* 13 *) + +(* Llamada de función *) +(* Nota, los nombres de funciones (y todo lo demás) distingue entre mayúsculas y minúsculas *) +Sin[Pi/2] (* 1 *) + +(* Sintaxis alternativa para la Llamada de una función con un parámetro *) +Sin@(Pi/2) (* 1 *) +(Pi/2) // Sin (* 1 *) + +(* Cada sintaxis en WL tiene algún equivalente como una llamada de función *) +Veces[2, 2] (* 4 *) +Mas[5, 8] (* 13 *) + +(* El uso de una variable por primera vez lo define y lo hace global *) +x = 5 (* 5 *) +x == 5 (* verdadero, Estilo-C asignación y pruebas de igualdad *) +x (* 5 *) +x = x + 5 (* 10 *) +x (* 10 *) +Modifique[x, 20] (* No estaba bromeando cuando dije que TODO tiene una función equivalente *) +x (* 20 *) + +(* Debido a que WL se basa en un sistema de álgebra computacional, *) +(* El uso de variables indefinidas está bien, simplemente obstruyen la evaluación *) +cow + 5 (* 5 + cow, cow es indefinido por lo que no puede evaluar más *) +cow + 5 + 10 (* 15 + cow, Va a evaluar lo que puede *) +% (* 15 + cow, % Busca el último retorno *) +% - cow (* 15, cow variable indefinida cancelada *) +moo = cow + 5 (* Cuidado, moo ahora tiene una expresión, no un número! *) + +(* Definición de una función *) +Double[x_] := x * 2 (* Nota: = para evitar la evaluación inmediata del RHS + y después de x para indicar que no hay restricciones de concordancia de patrones *) +Double[10] (* 20 *) +Double[Sin[Pi/2]] (* 2 *) +Double @ Sin @ (Pi/2) (* 2, @-Sintaxis evita colas de paréntesis *) +(Pi/2) // Sin // Double(* 2, //-Sintaxis lista las funciones en orden de ejecución *) + +(* Para un uso de programación de estilo imperativo; Para separar declaraciones *) +(* Descarta cualquier salida de LHS y ejecuta RHS *) +miPrimero[] := (Print@"Hola"; Print@"Mundo") (* Tenga en cuenta que los padres externos son críticos + ; La precedencia es menor que := *) +miPrimero[] (* Hola Mundo *) + +(* Estilo-C para bucle *) +PrintTo[x_] := For[y=0, y<x, y++, (Print[y])] (* Start, test, incr, body *) +PrintTo[5] (* 0 1 2 3 4 *) + +(* bucle *) +x = 0; While[x < 2, (Print@x; x++)] (* Ciclo con prueba y cuerpo *) + +(* Si y condicionales *) +x = 8; If[x==8, Print@"Yes", Print@"No"] (* Condición, Caso verdadero, Caso distinto*) +Switch[x, 2, Print@"Two", 8, Print@"Yes"] (* Interruptor de estilo de coincidencia de valor *) +Which[x==2, Print@"No", x==8, Print@"Yes"] (* estilo de caso distinto *) + +(* Las variables distintas de los parámetros son globales por defecto, incluso dentro de las funciones *) +y = 10 (* 10, Variable global y *) +PrintTo[5] (* 0 1 2 3 4 *) +y (* 5, Global por contador de bucle dentro de PrintTo *) +x = 20 (* 20, Variable global x *) +PrintTo[5] (* 0 1 2 3 4 *) +x (* 20, x en PrintTo Es un parámetro y automáticamente local *) + +(* Las variables locales se declaran utilizando la metafunción del módulo *) +(* Version con variable local*) +BetterPrintTo[x_] := Module[{y}, (For[y=0, y<x, y++, (Print@y)])] +y = 20 (* Variable global y *) +BetterPrintTo[5] (* 0 1 2 3 4 *) +y (* 20, eso es mejor *) + +(* El módulo realmente nos permite declarar cualquier ámbito que nos guste *) +Module[{count}, count=0; (* Declare el alcance de este recuento de variables *) + (IncCount[] := ++count); (* Estas funciones están dentro de ese ámbito *) + (DecCount[] := --count)] +count (* count - Variable global count no esta definida *) +IncCount[] (* 1, usando count variable dentro del alcance *) +IncCount[] (* 2, incCount lo actualiza *) +DecCount[] (* 1, decCount tambien lo hace *) +count (* count - Aún ninguna variable global con ese nombre*) + +(* listas *) +miLista = {1, 2, 3, 4} (* {1, 2, 3, 4} *) +miLista[[1]] (* 1 - Los índices de la lista de notas comienzan en 1, no 0 *) +Map[Double, miLista] (* {2, 4, 6, 8} - Lista de estilo funcional mapa función *) +Double /@ miLista (* {2, 4, 6, 8} - Sintaxis abreviada para arriba *) +Scan[Print, miLista] (* 1 2 3 4 - Lista de bucle sobre estilo imperativo *) +Fold[Plus, 0, miLista] (* 10 (0+1+2+3+4) *) +FoldList[Plus, 0, miLista] (* {0, 1, 3, 6, 10} - Guardar los resultados intermedios *) +Append[miLista, 5] (* {1, 2, 3, 4, 5} - Note que miLista no está actualizada *) +Prepend[miLista, 5] (* {5, 1, 2, 3, 4} - añada "miLista = " Si quieres que lo sea *) +Join[miLista, {3, 4}] (* {1, 2, 3, 4, 3, 4} *) +miLista[[2]] = 5 (* {1, 5, 3, 4} - Esto actualiza miLista *) + +(* Asociaciones, aka Diccionarios /Hashes *) +miHash = <|"Green" -> 2, "Red" -> 1|> (* crea una asociación *) +miHash[["Green"]] (* 2, uselo *) +miHash[["Green"]] := 5 (* 5, actualizalo *) +miHash[["Puce"]] := 3.5 (* 3.5, extiendalo *) +KeyDropFrom[miHash, "Verde"] (* Limpia la llave Verde *) +Claves[miHash] (* {Rojo} *) +Valores[miHash] (* {1} *) + +(* Y no puedes hacer ninguna demo de Wolfram sin mostrar esto *) +Manipular[y^2, {y, 0, 20}] (* Devuelve una interfaz de usuario reactiva que muestra y ^ 2 + Y permite ajustar y entre 0-20 con un deslizador. + Sólo funciona en interfaces gráficas *) +``` + +##Listo para mas? + +* [Centro de Documentación](http://reference.wolfram.com/language/) |