Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge branch 'master' of github.com:defaude/asciicasts.com-translations

  • Loading branch information...
commit bd56a68925d1bee8e5580ead2972152ce16e7794 2 parents 034c2ee + 0f7a701
@eifion eifion authored
View
204 episodes/298 - Getting Started With Spree/es.html
@@ -0,0 +1,204 @@
+<p><a href="http://spreecommerce.com/">Spree</a> es una soluci&oacute;n completa de e-commerce que se puede integrar f&aacute;cilmente en una aplicaci&oacute;n Rails, para convertirla en una tienda que venda productos. En este episodio configuraremos Spree sobre una aplicaci&oacute;n Rails nueva y ajustaremos algunas de sus funcionalidades para hacernos una idea de c&oacute;mo funciona y ver si encaja con las necesidades de nuestras aplicaciones.</p>
+
+<h3>Instalaci&oacute;n de Spree</h3>
+
+<p>Spree depende de <a href="http://www.imagemagick.org/script/index.php">ImageMagick</a> para gestionar el procesamiento de im&aacute;genes, por lo que lo tenemos que instalarla antes que Spree. La forma m&aacute;s sencilla es usar HomeBrew.</p>
+
+``` terminal
+$ brew install imagemagick
+```
+
+<p>Tras la instalaci&oacute;n de ImageMagick crearemos una nueva aplicaci&oacute;n Rails 3.1 que llamaremos <code>store</code>. Spree se puede integrar en una aplicaci&oacute;n Rails ya existente, pero es buena idea empezar con una aplicaci&oacute;n nueva para ver las cosas que a&ntilde;ade.</p>
+
+
+``` terminal
+$ rails new store
+```
+
+<p>Para instalar Spree y sus dependencias tenemos que a&ntilde;adirlo al <code>Gemfile</code> de nuestra aplicaci&oacute;n y luego ejecutar <code>bundle</code>. Spree se actualiza con mucha frecuencia, por lo que hemos especificado el n&uacute;mero de versi&oacute;n. La versi&oacute;n m&aacute;s reciente en el momento de escribir este episodio es la <code>0.70.1</code>.</p>
+
+``` /Gemfile
+source 'http://rubygems.org'
+
+gem 'rails', '3.1.1'
+
+gem 'sqlite3'
+
+# Gems used only for assets and not required
+# in production environments by default.
+group :assets do
+ gem 'sass-rails', '~> 3.1.4'
+ gem 'coffee-rails', '~> 3.1.1'
+ gem 'uglifier', '>= 1.0.3'
+end
+
+gem 'jquery-rails'
+
+group :test do
+ gem 'turn', :require => false
+ # Pretty printed test output
+end
+
+gem 'spree', '0.70.1'
+```
+
+<p>Tras la instalaci&oacute;n de las gemas tenemos que ejecutar un generador para a&ntilde;adir Spree a nuestra aplicaci&oacute;n.</p>
+
+``` terminal
+$ rails g spree:site
+```
+
+<p>Esta orden hace varias cosas. Copia los ficheros de migraci&oacute;n que crea las tablas de la base de datos necesarias para Spree y cambia algunos de los archivos de configuraci&oacute;n de nuestra aplicaci&oacute;n, la mayor&iacute;a dentro de <code>app/assets</code>. El generador tambi&eacute;n eliminar&aacute; los archivos <code>application.js</code> y <code>application.css</code> por lo que si los hemos personalizado tendremos que integrar nuestros cambios a la manera que Spree organiza los recursos de la aplicaci&oacute;n.</p>
+
+<p>Veremos que en los subdirectorios de <code>app/assets</code> de nuestra aplicaci&oacute;n (<code>images</code>, <code>javascripts</code> y <code>stylesheets</code>) ahora aparecen nuevos directorios llamados <code>admin</code> y <code>store</code>. Esto se hace as&iacute; para que podamos tener separados los recursos de la tienda de cara al p&uacute;blico y su panel de administraci&oacute;n. En el fichero <code>all.css</code> (o <code>application.js</code>) podremos ver que se hace <code>require</code> de varios archivos que se encuentran dentro de Spree.</p>
+
+``` /app/assets/stylesheests/store/all.css
+/*
+ * This is a manifest file that'll automatically include all the stylesheets available in this directory
+ * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
+ * the top of the compiled file, but it's generally better to create a new file per style scope.
+ *
+
+ *= require store/spree_core
+ *= require store/spree_auth
+ *= require store/spree_api
+ *= require store/spree_promo
+ *= require store/spree_dash
+
+ *= require_self
+ *= require_tree .
+*/
+```
+
+<p>Antes de dar por concluida nuestra etapa de configuraci&oacute;n a&uacute;n nos queda una orden por lanzar que ejecutar&aacute; las migraciones copiadas anteriormente. N&oacute;tese que nos preguntar&aacute; si queremos destruir los contenidos que ya existen en la base de datos.</p>
+
+
+``` terminal
+$ rake db:bootstrap
+This task will destroy any data in the database. Are you sure you want to
+continue? [y/n] y
+db/development.sqlite3 already exists
+...
+```
+
+<p>La orden tambi&eacute;n nos preguntar&aacute; por una direcci&oacute;n de correo y una clave para el usuario de administraci&oacute;n. Utilizaremos los valores que nos dan por defecto. Por &uacute;ltimo se nos preguntar&aacute; si queremos cargar ciertos datos de ejemplo y diremos que s&iacute; para tener algo que ver en la tienda.</p>
+
+
+``` terminal
+Email [spree@example.com]:
+Password [spree123]:
+Load Sample Data? [y/n]: y
+```
+
+<p>Ya podemos empezar con el servidor de nuestra aplicaci&oacute;n y echarle un vistazo.</p>
+
+<h3>Un vistazo r&aacute;pido a Spree</h3>
+
+<p>Este es el aspecto de nuestra tienda. Por defecto no se aplica ning&uacute;n tema, por lo que todo tiene un aspecto bastante plano, pero de todas formas tenemos una tienda completa de e-commerce en nuestro sitio, con todos los productos de ejemplo generados anteriormente, incluyendo adem&aacute;s un carrito de la compra y un proceso de <em>checkout</em>.</p>
+
+
+<div class="imageWrapper">
+ <img src="http://asciicasts.com/system/photos/841/original/E298I01.png" width="842" height="368" alt="El sitio básico de Spree."/>
+</div>
+
+<p>Hay tambi&eacute;n una secci&oacute;n de administraci&oacute;n a la que se puede acceder por <a href="http://localhost:3000/admin"><code>http://localhost:3000/admin</code></a>, y podremos verla una vez que hayamos iniciado la sesi&oacute;n utilizando la direcci&oacute;n de correo y la clave que nos proporcion&oacute; el generador. Se trata de una interfaz de administraci&oacute;n bastante completa donde podremos ver los pedidos procesados, y varias gr&aacute;ficas que nos muestran cu&aacute;les son los productos m&aacute;s vendidos. Tambi&eacute;n podemos ver y editar los productos y pedidos en otras secciones.</p>
+
+
+<div class="imageWrapper">
+ <img src="http://asciicasts.com/system/photos/842/original/E298I02.png" width="842" height="464" alt="El sitio de administración."/>
+</div>
+
+<p>La secci&oacute;n de administraci&oacute;n tambi&eacute;n dispone de varias opciones de configuraci&oacute;n, incluyendo la posibilidad de cambiar los m&eacute;todos de pago de la tienda (diferentes para cada entorno) siendo configurables las distintas credenciales para cada pasarela de pago.</p>
+
+<h3>Personalizaci&oacute;n</h3>
+
+<p>Con todo esto ya tenemos una soluci&oacute;n de e-commerce bastante completa en nuestra aplicaci&oacute;n Rails, pero &iquest;y si queremos tener m&aacute;s control sobre el aspecto exacto de la tienda? La plantilla por defecto de la tienda es bastante sosa, porque no se ha aplicado ning&uacute;n tema. Dedicaremos el resto de este episodio a ver varias maneras de personalizar el comportamiento y el aspecto de la tienda.</p>
+
+<p>Spree soporta temas y extensiones, y el tema <a href="https://github.com/spree/spree_blue_theme">Blue Theme</a> sirve como ejemplo de c&oacute;mo podemos persoanlizar Spree. Este tema, como la mayor&iacute;a de extensiones de Spree, es un <em>engine</em> de Rails, por lo que podemos usarlo para redefinir diversos contenidos de los directorios <code>app/assets</code> y <code>app/overrides</code>. Para instalar el tema, tan s&oacute;lo tenemos que a&ntilde;adir el siguiente archivo al <code>Gemfile</code>, y ejecutar <code>bundle</code>.</p>
+
+``` /Gemfile
+gem 'spree_blue_theme', :git => 'git://github.com/spree/spree_blue_theme.git'
+```
+
+<p>Para que el tema funcione es necesario cambiar una hoja de estilos y cambiar los estilos por defecto (los que empiezan por <code>require store/</code>) por el que se suministra con el tema.</p>
+
+``` /app/assets/stylesheets/store/all.css
+/*
+ * This is a manifest file that'll automatically include all the stylesheets available in this directory
+ * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
+ * the top of the compiled file, but it's generally better to create a new file per style scope.
+ *
+
+ *= require store/screen
+ *= require_self
+ *= require_tree .
+*/
+```
+
+<p>La tienda queda tras esto con un aspecto totalmente diferente. El uso de temas sirve como ejemplo de c&oacute;mo se puede personalizar el aspecto de una aplicaci&oacute;n basada en Spree.</p>
+
+
+<div class="imageWrapper">
+ <img src="http://asciicasts.com/system/photos/843/original/E298I03.png" width="842" height="562" alt="The site with the theme applied."/>
+</div>
+
+<h3>C&oacute;mo personalizar partes individuales del sitio</h3>
+
+<p>A continuaci&oacute;n veremos c&oacute;mo personalizar secciones individuales del sitio. Si, por ejemplo, queremos cambiar el logotipo de la parte superior de la p&aacute;gina por el nuestro, por supuesto podemos hacerlo. La imagen por defecto est&aacute; en <code>/assets/admin/bg/spree_50.png</code>, y la instala el <em>engine</em> de Spree, pero en nuestra aplicaci&oacute;n podemos redefinirla.</p>
+
+<p>Hay dos formas de hacerlo. Una es crear el directorio <code>/app/assets/images/admin/bg</code> en nuestra aplicaci&oacute;n y copiar otra imagen, por ejemplo la imagen por defecto <code>rails.png</code>, cambi&aacute;ndole el nombre a <code>spree_50.png</code>. La imagen tendr&aacute; precedencia sobre la imagen por defecto, y lo veremos al recargar la p&aacute;gina (aunque probablemente tengamos que reiniciar el servidor para que se detecten los cambios).</p>
+
+<p>Otra forma de modificar el logo es redefiniendo parte de la configuraci&oacute;n de Spree. La configuraci&oacute;n por defecto se encuentra en un <a href="https://github.com/spree/spree/blob/master/core/app/models/spree/app_configuration.rb">fichero</a> que contiene un gran n&uacute;mero de opciones de configuraci&oacute;n, que incluye una opci&oacute;n que dice a d&oacute;nde apunta el logotipo por defecto. Spree contiene un completo sistema de preferencias que nos permite configurar estas opciones de varias maneras. Podemos hacerlo mediante la base de datos, mediante el panel de administraci&oacute;n o podemos crear un inicializador y hacer los cambios mediante Ruby. Escogeremos esta &uacute;ltima opci&oacute;n y crearemos un nuevo fichero de configuraci&oacute;n <code>spree.rb</code>.</p>
+
+``` /config/initializers/spree.rb
+Spree::Config.set(logo: &quot;store/rails.png&quot;)
+```
+
+<p>Se usa <code>Spree::Config.set</code> para establecer opciones de configuraci&oacute;n, y habiendo configurado el logotipo podemos mover nuestra imagen a <code>/app/assets/images/store</code> y llamarla <code>rails.png</code>. Cuando volvamos a cargar la p&aacute;gina veremos que la imagen se encuentra en <code>http://localhost:3000/assets/store/rails.png</code>.</p>
+
+<p>Tambi&eacute;n se puede personalizar Spree redefiniendo partes de una plantilla. Para hacer esto tenemos que encontrar la plantilla en el c&oacute;digo fuente de Spree. Esto no es muy dif&iacute;cil pero tendremos que tener cuidado de examinar el c&oacute;digo fuente de la misma versi&oacute;n de Spree que hayamos instalado como gema. En nuestro caso tendremos que ver <a href="https://github.com/spree/spree/tree/v0.70.1">la versi&oacute;n 0.70.1</a>. Tras esto podemos navegar hasta <code>core/app/views/layouts</code>, que es la plantilla que debemos redefinir porque contiene el c&oacute;digo que muestra el logotipo.</p>
+
+``` /app/views/layouts/spree_application.html.erb
+<div id="logo" data-hook>
+ <%= logo %>
+</div>
+```
+
+<p>Hay dos formas de hacer este cambio. Podr&iacute;amos copiar el <em>layout</em> al mismo sitio en nuestra aplicaci&oacute;n, y Spree usar&aacute; esta nueva plantilla en lugar de la de por defecto, reflej&aacute;ndose en nuestra aplicaci&oacute;n cualquier cambio que hagamos en ella.</p>
+
+
+<p>Otra forma de hacerlo es usar una gema llamada <a href="https://github.com/railsdog/deface">Deface</a>. No tenemos por qu&eacute; instalar esta gema porque ya es una dependencia de Spree, y podemos usarla en el directorio <code>/app/overrides</code> que gener&oacute; la instalaci&oacute;n de Spree para poder redefinir parte de las plantillas de Spree. La informaci&oacute;n del README de la p&aacute;gina del proyecto contiene varios ejemplos que muestran su fucnionamiento. Copiaremos el primer ejemplo a un nuevo fichero en este directorio llamado <code>logo.rb</code> y lo modificaremos para la parte de la p&aacute;gina que queramos cambiar.</p>
+
+``` /app/overrides/logo.rb
+Deface::Override.new(:virtual_path => "layouts/spree_application",
+ :name => "logo",
+ :replace_contents => "#logo",
+ :text => "Store")
+```
+
+<p>Aqu&iacute; podemos usar cuatro opciones. El <code>virtual_path</code> es la ruta a la plantilla erb que deseamos modificar, mientras que el <code>name</code> puede ser cualquier cosa. Queremos reemplazar los contenidos de un <code>div</code> que tiene un <code>id</code> igual a <code>logo</code>, por lo que utilizaremos la opci&oacute;n <code>replace_contents</code> y le pasaremos un selector CSS que selecciona dicho <code>div</code>. La opci&oacute;n final especifica con qu&eacute; queremos cambiar dicho contenidos; por ahora cambiaremos el logotipo por el texto &ldquo;Store&rdquo;.</p>
+
+<p>Si recargamos la p&aacute;gina veremos que ha desaparecido el logo y que en su lugar aparece un texto.</p>
+
+<div class="imageWrapper">
+ <img src="http://asciicasts.com/system/photos/844/original/E298I04.png" width="842" height="370" alt="El logo ha sido reemplazado por el texto ."/>
+</div>
+
+
+<p>Aunque hemos cambiar la imagen por texto, tenemos que darle algo de estilos, que podremos a&ntilde;adir en el directorio <code>stylesheets/store</code>. Es buena pr&aacute;ctica hacerlo con un nuevo archivo. Haremos que el texto sea un poco m&aacute;s grande y el color sea blanco.</p>
+
+``` /app/assets/stylesheets/store/layout.css.scss
+#logo {
+ font-size: 32px;
+ color: #FFF;
+}
+```
+
+<p>Si ahora visitamos la aplicaci&oacute;n veremos los nuevos estilos.</p>
+
+
+<div class="imageWrapper">
+ <img src="http://asciicasts.com/system/photos/845/original/E298I05.png" width="842" height="370" alt="El texto con los estilos aplicados."/>
+</div>
+
+<p>Con esto terminamos este episodio. Spree ofrece mucha m&aacute;s funcionalidad que no hemos visto hoy aqu&iacute;, por lo que se recomienda leer las <a href="http://guides.spreecommerce.com/">Gu&iacute;as de Spree</a> donde hay mucha m&aacute;s informaci&oacute;n: hay un apartado dedicado a pr&aacute;cticamente cualquier cosa que necesitemos saber acerca de Spree.</p>
View
159 episodes/300 - Contributing to Open Source/es.html
@@ -0,0 +1,159 @@
+<p><a href="https://github.com/">Github</a> hace que sea muy f&aacute;cil colaborar con proyectos de c&oacute;digo abierto. En este episodio veremos c&oacute;mo hacerlo enviando una petici&oacute;n de cambio al <a href="https://github.com/myronmarston/vcr">proyecto VCR</a>. Vimos esta gema, que proporciona una manera de guardar las transacciones HTTP y reproducirlas para acelerar los tests, en el <a href="http://railscasts.com/episodes/291-testing-with-vcr?view=asciicast">episodio 291</a>. Myron Marston, el autor de la gema, suele estar muy pendiente de las colaboraciones que recibe su proyecto.</p>
+
+<p>Supongamos que hemos encontrado un problema en esta gema, y que queremos enviar un parche que lo corrige. Lo primero que hay que hacer es ver la herramienta de incidencias de la gema y ver si este problema ha sido ya atacado. Si el proyecto dispone de lista de correo es buena idea hacer algunas b&uacute;squedas en ella para ver si hay mensajes relacionados con el problema que hemos encontrado. Si se trata de cambios grandes es buena idea discutirlos primero para ver si hay inter&eacute;s en dicho cambio.</p>
+
+<h3><a href="http://www.youtube.com/watch?feature=player_detailpage&amp;v=nHLzj_6HCjU#t=270s">Fork It!</a></h3>
+
+<p>Una vez que estemos listos para empezar en nuestra correcci&oacute;n, el primer paso es bifurcar el proyecto. Para esto tenemos que visitar la p&aacute;gina del mismo y hacer clic en el bot&oacute;n &lsquo;fork&rsquo;, que al cabo de unos segundos crear&aacute; nuestra propia copia del repositorio, y una vez que haya acabado podemos visitar nuestra propia versi&oacute;n y clonarla a partir de su URL.</p>
+
+``` terminal
+$ git clone git@github.com:eifion/vcr.git
+$ cd vcr
+```
+
+<p>Tras el clonado, deber&iacute;amos poder ver las ramas que tenemos:</p>
+
+
+``` terminal
+$ git branch -r
+ origin/1-x-stable
+ origin/HEAD -> origin/master
+ origin/jruby_nailgun
+ origin/master
+```
+
+<p>Merece la pena destacar que hay una rama para la versi&oacute;n estable 1, que es la versi&oacute;n actual de la gema. La rama <code>master</code> apunta a la versi&oacute;n 2, que se encuentra actualente en fase de pre-lanzamiento. Debemos tener esto en cuenta: la versi&oacute;n de la gema con la que estamos trabajando puede que sea distinta de la que estamos viendo su c&oacute;digo.</p>
+
+<p>Siempre es buena idea leer la documentaci&oacute;n al montar el entorno de desarrollo de un proyecto. En este caso hay una secci&oacute;n de desarrollo en el fichero <a href="https://github.com/eifion/vcr/blob/master/README.md">README</a> que nos dice que las peticiones de cambio ser&aacute;n bienvenidas siempre que los cambios que hagamos vengan con tests. El fichero README no da instrucciones sobre la suite de tests de la gema, pero al menos Travis CI dice que todos los tests est&aacute;n <a href="http://travis-ci.org/#!/myronmarston/vcr">pasando</a>.</p>
+
+<p>El proyecto tiene un Gemfile, por lo que sabemos que utiliza Bundler para sus dependencias. Deber&iacute;amos poder instalarlas ejecutando <code>bundle install</code>, pero al hacerlo vemos un error. Esto no es de extra&ntilde;ar porque la configuraci&oacute;n var&iacute;a de un sistema a otro por lo que deber&iacute;amos esperar encontrarnos con algunas pegas a la hora de instalar un proyecto en nuestro entorno.</p>
+
+<p>El error que vemos est&aacute; relacionado con la gema <code>rb-fsevent</code>, y una b&uacute;squeda r&aacute;pida nos indica que el problema tiene que ver con nuestra configuraci&oacute;n. Estamos usando <a href="https://github.com/kennethreitz/osx-gcc-installer">GCC Installer</a> en lugar de la instalaci&oacute;n completa de XCode en nuestro equipo, lo que impide que se instale rb-fsevent. El problema ya est&aacute; corregido en esta gema, pero no en su versi&oacute;n estable, por lo que podemos corregirlo estableciendo la versi&oacute;n de <code>rb-fsevent</code> a la versi&oacute;n de pre-lanzamiento.</p>
+
+``` /Gemfile
+# Additional gems that are useful, but not required for development.
+group :extras do
+ gem 'guard-rspec'
+ gem 'growl'
+ gem 'relish', '~> 0.5.0'
+ gem 'fuubar'
+ gem 'fuubar-cucumber'
+
+ platforms :mri do
+ gem 'rcov'
+ gem 'rb-fsevent', '0.9.0.pre4'
+ end
+
+ platforms :mri_18, :jruby do
+ gem 'ruby-debug'
+ end
+
+ platforms :mri_19 do
+ gem 'ruby-debug19'
+ end unless RUBY_VERSION == '1.9.3'
+end
+```
+
+<p>Al ejecutar <code>bundle</code> todo se instalar&aacute; correctamente.</p>
+
+<h3>Ejecuci&oacute;n de los tests</h3>
+
+<p>Intentemos pasar a continuaci&oacute;n los tests de la gema. Con frecuencia viene una tarea Rake por defecto que hace esto, por lo que deber&iacute;a bastar con lanzar <code>rake</code>, pero es mejor ejecutar <code>bundle exec rake</code> para asegurarnos que estamos usando los binarios de las gemas instaladas por Bundler.</p>
+
+
+``` terminal
+$ bundle exec rake
+ 1504/1504: 100% |==========================================| ETA: 00:00:00
+```
+
+<p>Los tests pasan, quedando un par de ellos pendientes, lo que est&aacute; bien. Tras esto se ejecutan los escenarios de Cucumber, donde vemos un mensaje de error bastante largo, que b&aacute;sicamente viene a decir &ldquo;<code>no such file to load -- spec</code>&rdquo;. Parece ser que nos falta una dependencia que Bundler no ha instalado.</p>
+
+<p>Despu&eacute;s de investigar un poco resulta que el proyecto utiliza <a href="http://book.git-scm.com/5_submodules.html">subm&oacute;dulos de Git</a> por lo que para que funcione debemos ejecutar estas dos &oacute;rdenes:</p>
+
+``` terminal
+$ git submodule init
+$ git submodule update
+```
+
+<p>Con esto se copiar&aacute;n los subm&oacute;dulos a nuestro repositorio. Ya podemos intentar ejecutar los tests y ver si pasan, cosa que esta vez s&iacute; ocurre.</p>
+
+
+<h3>Desarrollo de nuestros cambios</h3>
+
+<p>Hemos tenido algunos problemas para que pasen los tests pero lo hemos conseguido al fin. Podr&iacute;amos habernos ahorrado algo de tiempo si la documentaci&oacute;n hubiera sido un poco m&aacute;s detallada en cuanto a la configuraci&oacute;n del entorno. Por tanto, nuestra primera petici&oacute;n de cambio consistir&aacute; en la mejora de la documentaci&oacute;n del fichero README para configurar el entorno de desarrollo.</p>
+
+<p>Resulta que ya existe una p&aacute;gina de wiki dedicada a la colaboraci&oacute;n con el proyecto VCR, pero s&oacute;lo contiene lo m&aacute;s b&aacute;sico de la configurac&oacute;n. Editemos esta p&aacute;gina para a&ntilde;adir m&aacute;s informaci&oacute;n, bas&aacute;ndonos en los problemas que hemos encontrado. Tras esto podemos enviar una petici&oacute;n de cambio para a&ntilde;adir el enlace a esta gu&iacute;a en el README.</p>
+
+<p>Antes de hacer cambios al c&oacute;digo debemos estar seguros de que tenemos el directorio limpio.</p>
+
+
+``` terminal
+$ git status
+# On branch master
+# Changes not staged for commit:
+# (use "git add <file>..." to update what will be committed)
+# (use "git checkout -- <file>..." to discard changes in working directory)
+#
+# modified: Gemfile
+#
+no changes added to commit (use "git add" and/or "git commit -a")
+```
+
+<p>Como hemos modificado el Gemfile, ser&aacute; mejor que deshagamos este cambio antes de avanzar.</p>
+
+
+``` terminal
+$ git checkout .
+noonoo:vcr eifion$ git status
+# On branch master
+nothing to commit (working directory clean)
+```
+
+<p>Es buena idea establecer una rama Git separada para cada petici&oacute;n de cambio que queramos hacer.</p>
+
+
+``` terminal
+$ git checkout -b readme-contributing-link
+```
+
+<p>Con esto ya podemos hacer nuestro cambio. En la secci&oacute;n de desarrollo de <code>README.md</code> hemos a&ntilde;adido un enlace a la p&aacute;gina del wiki que acabamos de cambiar.</p>
+
+
+``` /README.md
+## Development
+
+* Source hosted on [GitHub](http://github.com/myronmarston/vcr).
+* Direct questions and discussions to the [mailing list](http://groups.google.com/group/vcr-ruby).
+* Report issues on [GitHub Issues](http://github.com/myronmarston/vcr/issues).
+* Pull requests are very welcome! Please include spec and/or feature coverage for every patch,
+ and create a topic branch for every separate change you make.
+* See the [Contributing](https://github.com/myronmarston/vcr/blob/master/CONTRIBUTING.md)
+ guide for instructions on running the specs and features.
+```
+
+<p>Una vez que hayamos hecho estos cambios podemos ejecutar <code>git diff</code> para repasarlos. Si estamos satisfechos, podemos entregar los cambios :</p>
+
+
+``` terminal
+$ git commit -a -m "adding contributing link to readme."Next we need to push our branch to our remote repository.
+$ git push origin readme-contributing-link
+Counting objects: 5, done.
+Delta compression using up to 2 threads.
+Compressing objects: 100% (3/3), done.
+Writing objects: 100% (3/3), 328 bytes, done.
+Total 3 (delta 2), reused 0 (delta 0)
+To git@github.com:eifion/vcr.git
+ * [new branch] readme-contributing-link -> readme-contributing-link
+```
+
+<p>Esto a&ntilde;adir&aacute; la rama a nuestro repositorio en Github.</p>
+
+<p>Cuando ahora visitemos nuestro repositorio en Github podremos cambiar la rama actual a la que tenemos reci&eacute;n creada.</p>
+
+<div class="imageWrapper">
+ <img src="http://asciicasts.com/system/photos/851/original/E300I01.png" width="944" height="563" alt="Selección de la rama correcta en Github."/>
+</div>
+
+<p>Luego podemos hacer clic en &ldquo;Pull Request&rdquo; para enviar nuestra solicitud de cambio al due&ntilde;o original. Tendremos que rellenar un formulario explicando los cambios que hemos hecho, tras lo cual podremos enviar nuestra petici&oacute;n.</p>
+
+<p>Esto es todo lo que hace falta para enviar una petici&oacute;n de cambio a un proyecto de c&oacute;digo abierto en Github. Si nuestro cambio es aceptado, pondr&aacute; las cosas m&aacute;s f&aacute;ciles para el siguiente que quiera colaborar. Ahora es tu turno.</p>
View
194 episodes/302 - In-place Editing/es.html
@@ -0,0 +1,194 @@
+<div class="imageWrapper">
+ <img src="http://asciicasts.com/system/photos/858/original/E302I01.png" width="800" height="418" alt="La página de perfil de usuario."/>
+</div>
+
+<p>Arriba se muestra la p&aacute;gina del perfil de un usuario en una aplicaci&oacute;n Rails. Existe un enlace &ldquo;Edit Profile&rdquo; al final de la p&aacute;gina que nos lleva a otra p&aacute;gina donde podemos editar nuestros datos.</p>
+
+<div class="imageWrapper">
+ <img src="http://asciicasts.com/system/photos/859/original/E302I02.png" width="800" height="543" alt="La página de edición del perfil de un usuario."/>
+</div>
+
+<p>Queremos que los usuarios puedan editar sus datos directamente en la p&aacute;gina de su perfil haciendo clic en cualquiera de ellos en lugar de utilizar una p&aacute;gina espec&iacute;fica de edici&oacute;n. Al hacer clic sobre &eacute;l, el campo deber&iacute;a pasar a ser editable y se guardar&iacute;an los cambios pulsando la tecla Intro.</p>
+
+<h3>Best In Place</h3>
+
+<p>Hay varios <em>plugins</em> de Rails que nos pueden ayudar a la hora de a&ntilde;adir esta edici&oacute;n en l&iacute;nea en nuestra aplicaci&oacute;n. Hay publicada una lista muy completa de ellos en <a href="https://www.ruby-toolbox.com/categories/rails_in_place_editing">The Ruby Toolbox</a>. El que vamos a usar esta vez se llama <a href="https://github.com/bernat/best_in_place">Best In Place</a>, si bien merece la pena echar un vistazo a los otros. Best In Place es una bifurcaci&oacute;n de otro proyecto llamado <a href="https://github.com/janv/rest_in_place">Rest in Place</a>, pero lo que marca la diferencia entre estos dos es el <em>helper</em> <code>best_in_place</code> con el que se hace muy f&aacute;cil a&ntilde;adir campos de edici&oacute;n en l&iacute;nea en nuestras aplicaciones Rails.</p>
+
+<p>Best In Place tiene una p&aacute;gina de <a href="https://github.com/janv/rest_in_place">demostraci&oacute;n</a> y si la probamos veremos que podemos editar cualquier campo haciendo clic en &eacute;l, momento en el que se cambia el texto est&aacute;tico por el elemento de formulario apropiado para el tipo de dato del formulario. Al pulsar Intro o hacer clic fuera del campo los datos se enviar&aacute;n al servidor para que se actualice la base de datos. Es posible validar los campos, por lo que si se introduce una direcci&oacute;n incorrecta (por ejemplo) aparecer&aacute; un mensaje de error y el valor volver&aacute; al que ten&iacute;a antes de la edici&oacute;n. Tambi&eacute;n se soportan otros tipos de datos por lo que se puede mostrar un desplegable para editar una asociaci&oacute;n o una caja de selecci&oacute;n para los campos booleanos. Veamos qu&eacute; tenemos que hacer para a&ntilde;adir esta funcionalidad a nuestra p&aacute;gina de perfil.</p>
+
+<h3>C&oacute;mo a&ntilde;adir Best In Place a nuestra aplicaci&oacute;n</h3>
+
+<p>Primero tenemos que a&ntilde;adir la gema de Best In Place al Gemfile de la aplicaci&oacute;n y luego ejecutar <code>bundle</code>.</p>
+
+
+
+``` /Gemfile
+source 'http://rubygems.org'
+
+gem 'rails', '3.1.3'
+
+gem 'sqlite3'
+
+# Gems used only for assets and not required
+# in production environments by default.
+group :assets do
+ gem 'sass-rails', '~> 3.1.5'
+ gem 'coffee-rails', '~> 3.1.1'
+ gem 'uglifier', '>= 1.0.3'
+end
+
+gem 'jquery-rails'
+gem 'best_in_place'
+```
+
+<p>La gema incluye dos ficheros de JavaScript que deberemos incluir en la aplicaci&oacute;n, <code>jquery.purr</code> (que es un <em>plugin</em> de jQuery) y <code>best_in_place</code>. Dado que se trata de una aplicaci&oacute;n Rails 3.1 tenemos que a&ntilde;adir ambos ficheros al manifiesto.</p>
+
+``` /app/assets/javascripts/application.js
+//= require jquery
+//= require jquery_ujs
+//= require jquery.purr
+//= require best_in_place
+//= require_tree .
+```
+
+<p>Tenemos que definir los campos que ser&aacute;n editables, lo que haremos en el fichero CoffeeScript para el modelo <code>users</code>. Tan s&oacute;lo tenemos que invocar a <code>best_in_place()</code> en aquellos elementos que queramos que se puedan modificar. Se lo aplicaremos a los elementos que tengan la clase <code>best_in_place</code>.</p>
+
+
+``` /app/assets/javascripts/users.js.coffee
+jQuery ->
+ $('.best_in_place').best_in_place()
+```
+
+<p>Con esto ya podemos empezar a aplicar Rest In Place a nuestra p&aacute;gina de perfil de usuario. Este es el aspecto que tiene ahora mismo la plantilla:</p>
+
+
+``` /app/views/users/show.html.erb
+<h1>User Profile</h1>
+
+<p>
+ <b>Name:</b>
+ <%= @user.name %>
+</p>
+<p>
+ <b>Email:</b>
+ <%= @user.email %>
+</p>
+<p>
+ <b>Gender:</b>
+ <%= @user.gender %>
+</p>
+<p>
+ <b>Public profile:</b>
+ <%= @user.public_profile %>
+</p>
+<p>
+ <%= @user.bio %>
+</p>
+
+<%= link_to 'Edit Profile', edit_user_path(@user) %>
+```
+
+<p>La plantilla sencillamente muestra el valor de cada campo. A&ntilde;adiremos el m&eacute;todo <em>helper</em> de Best In Place a los campos <code>name</code> y <code>email</code>. El m&eacute;todo recibir&aacute; dos argumentos, el objeto que estamos viendo y un s&iacute;mbolo para el campo que deseamos editar.</p>
+
+
+``` /app/views/users/show.html.erb
+<p>
+ <b>Name:</b>
+ <%= best_in_place @user, :name %>
+</p>
+<p>
+ <b>Email:</b>
+ <%= best_in_place @user, :email %>
+</p>
+```
+
+<p>Al cargar la p&aacute;gina del perfil del usaurio y hacer clic en <code>name</code> o <code>email</code>, veremos que el campo se hace editable.</p>
+
+<div class="imageWrapper">
+ <img src="http://asciicasts.com/system/photos/860/original/E302I03.png" width="800" height="429" alt="El campo de nombre ya es editable."/>
+</div>
+
+<h3>Persistencia de los cambios</h3>
+
+<p>Al modificar un campo y luego hacer clic fuera de &eacute;l veremos que el campo vuelve a su valor anterior, lo que no es lo que queremos que ocurra. Si recargamos la p&aacute;gina veremos que aparece un mensaje que dice que se ha actualizado el usuario y la p&aacute;gina muestra el valor modificado.</p>
+
+<div class="imageWrapper">
+ <img src="http://asciicasts.com/system/photos/861/original/E302I04.png" width="800" height="458" alt="La página se actualiza cuando la recargamos."/>
+</div>
+
+<p>Esto ocurre as&iacute; porque Best In Place env&iacute;a las actualizaciones mediante JSON al servidor, pero <code>UsersController</code> no est&aacute; preparado para responder a peticiones JSON adecuadamente. El controlador utiliza las siete acciones REST habitual, que son las que espera Best In Place, por lo que cuando se cambia el valor en el campo se invoca la acci&oacute;n <code>update</code> con los par&aacute;metros correctos, pero &eacute;sta no responde a la petici&oacute;n como debiera.</p>
+
+<p>Para corregir esto tenemos que a&ntilde;adir un bloque <code>respond_to</code> en <code>update</code> o (al ser una aplicaci&oacute;n Rails 3) utilizar <code>respond_with</code> que se encargar&aacute; de todo, siempre qu epongamos una llamada a <code>respond_to</code> al principio de nuestro controlador. As&iacute; que lo a&ntilde;adiremos.</p>
+
+
+``` /app/controllers/users_controller.rb
+class UsersController < ApplicationController
+ respond_to :html, :json
+
+ # Se omiten otras acciones
+
+ def update
+ @user = User.find(params[:id])
+ @user.update_attributes(params[:user])
+ respond_with @user
+ end
+
+end
+```
+
+<p>Si tenemos que personalizar este comportamiento podemos utilizar un bloque <code>respond_to</code> en la acci&oacute;n <code>update</code>, y hay un ejemplo de c&oacute;mo hacer esto en el <a href="https://github.com/bernat/best_in_place/blob/master/README.md">README</a> de Best In Place.</p>
+
+<p>Ahora que nuestro controlador responde en JSON, la funcionalidad de edici&oacute;n en l&iacute;nea funciona correctamente. Los cambios que hagamos se guardar&aacute;n en la base de datos y la interfaz de usuario se actualizar&aacute; tal y como esper&aacute;bamos.</p>
+
+<p>Aqu&iacute; tambi&eacute;n funcionan las validaciones. Si introducimos una direcci&oacute;n de correo incorrecta aparecer&aacute; un mensaje de error, aunque el que se usa por defecto no resultar&aacute; especialmente visible.</p>
+
+<div class="imageWrapper">
+ <img src="http://asciicasts.com/system/photos/862/original/E302I05.png" width="800" height="475" alt="Los errores de validación por defecto no son muy vistosos."/>
+</div>
+
+<p>Lo podemos embellecer con un poco de CSS.</p>
+
+``` /app/assets/stylesheets/users.css.scss
+.purr {
+ position: fixed;
+ top: 30px;
+ right: 100px;
+ width: 250px;
+ padding: 20px;
+ background-color: #FCC;
+ border: solid 2px #666;
+ &:first-letter { text-transform: uppercase };
+}
+```
+
+<p>Todos estos estilos se encuentra en la clase <code>purr</code> que es lo que utiliza Best In Place. Si volvemos a cargar la p&aacute;gina e introducimos una direcci&oacute;n de correo incorrecta el mensaje tendr&aacute; un mejor aspecto.</p>
+
+<div class="imageWrapper">
+ <img src="http://asciicasts.com/system/photos/863/original/E302I06.png" width="800" height="475" alt="Tras añadir un poco de CSS los mensajes de error tienen mejor aspecto."/>
+</div>
+
+<h3>Gesti&oacute;n de otros tipos de datos</h3>
+
+<p>Por ahora s&oacute;lo hemos hecho editables los campos <code>name</code> y <code>email</code>. Veamos a continuaci&oacute;n los otros atributos de la p&aacute;gina del usuario. El campo <code>bio</code> contiene un fragmento m&aacute;s largo de texto, pero por defecto Best In Place s&oacute;lo mostrar&aacute; una caja con una &uacute;nica l&iacute;nea. Podemos cambiar este comportamiento a&ntilde;adiendo el atributo <code>type</code>.</p>
+
+``` /app/views/users/show.html.erb
+<%= best_in_place @user, :bio, type: :textarea %>
+```
+
+<p>El campo <code>public_profile</code> es un campo booleano por lo que deber&iacute;amos usar el tipo <code>checkbox</code> y pasar los valores queramos mostrar en la opci&oacute;n <code>:collection</code>.</p>
+
+``` /app/views/users/show.html.erb
+<%= best_in_place @user, :public_profile, type: :checkbox, collection: %w[No Yes] %>
+```
+
+<p>Al hacer clic el valor de este campo cambiar&aacute; entre las dos opciones. La opci&oacute;n de g&eacute;nero podr&iacute;amos tratarla igual, pero en este caso hemos utilizado <code>:select</code> en lugar de <code>:checkbox</code> y hemos pasado una lista de opciones.</p>
+
+``` /app/views/users/show.html.erb
+ <%= best_in_place @user, :gender, type: :select, :collection [["Male", "Male"], ["Female", "Female"], ["", "Unspecified"]] %>
+```
+
+<p>Al hacerlo as&iacute;, aparecer&aacute; un men&uacute; desplegable al hacer clic en el g&eacute;nero.</p>
+
+
+<p>Con esto cerramos este episodio. Ya tenemos una opci&oacute;n de edici&oacute;n en l&iacute;nea para todos los campos de nuestra p&aacute;gina de perfil de usuario. Habr&aacute; veces en las que queramos hacer algo un poco m&aacute;s complicado, por ejemplo mostrar opciones de una asociaci&oacute;n, o quiz&aacute; formatear un campo de precio donde el valor mostrado puede ser distinto del que se muestra al editar. Esto resulta un poco complejo por desgracia en la versi&oacute;n actual de Best In Place. En estas situaciones es mejor volver al formulario tradicional de edici&oacute;n o implementar nuestra propia soluci&oacute;n.</p>
+
Please sign in to comment.
Something went wrong with that request. Please try again.