Blog Personal

Monday, April 9, 2012

Video Tutorial de Listas Html con jQueryMobile

En este video podremos observar como crear una Lista html con jQueryMobile, las referencias a las librerías que necesitamos para trabajar con el framework css de jQueryMobile. Adicionalmente les indicaré como modificar algunos estilos css3 usando la herramienta de inspección html llamada firebug y generando estilos de gradientes con una página web que genera dicho estilos.

La página web que genera estilos con gradientes es la siguiente:
http://www.colorzilla.com/gradient-editor/

Tambien cuentan con un simulador en la página de jQueryMobile el cual les permite agregar elementos y descargar el código html generado.

Muchas gracias.

Sunday, April 8, 2012

Kata, Coding Dojo y TDD

En este nuevo post, trataremos algunos conceptos muy usados en metodologías ágiles, los cuales vengo desarrollando en un curso de Desarrollo para Entorno Web.

A continuación veremos los siguientes conceptos: Kata, Coding Dojo, TDD, Rspec.

Kata:

Es una palabra japonesa que describe lo que en un inicio se consideró una serie, forma o secuencia de movimientos preestablecidos que se pueden practicar normalmente solo, pero también en parejas.

La Kata aplicado a principios de programación se traduce en pequeños ejercicios, de menos de 1 hora de duración, que nos ayudan a aprender y mejorar; especialmente, pequeños retos de programación diseñados por terceros, con un propósito específico en mente.

Coding Dojo:

Primero analizaremos la palabra "Dojo", la cual esta asociada a un lugar de meditación y/o practica de las artes marciales.

Asociado a programación se trata de una reunión de programadores para trabajar en un reto de programación durante unas horas, una tarde o incluso un día entero. En definitiva esta es una forma divertida de aprender técnicas nuevas con programadores que posiblemente en otras circunstancias no tengamos la oportunidad de trabajar.

TDD (Test Driven Development):

Desarrollo guiado por pruebas, o Test-driven development (TDD) es una práctica de programación que involucra otras dos prácticas: Escribir las pruebas primero (Test First Development) y Refactorización (Refactoring). Para escribir las pruebas generalmente se utilizan las pruebas unitarias (unit test en inglés). En Primer Lugar se escribe una prueba y se verifica que las pruebas fallen (Rojo), luego se implementa el código que haga que la prueba pase satisfactoriamente (Verde) y seguidamente se refactoriza el código escrito (Refactor). El propósito del desarrollo guiado por pruebas es lograr un código limpio que funcione.

Apreciaciones Personales:

A continuación les presento mis apreciaciones, las cuales daré tomando como base la experiencia y lo aprendido en el curso.

La Kata me parece realmente interesante desarrollar pruebas las cuales permiten poner a prueba tu capacidad e ingenio de forma divertida y mas aún usando el pair programming, ya que permite desarrollar y escuchar a tu commpañero y tomarte un tiempo para reflexionar y bien se sabe que 2 cabezas piensan mejor que una.
Coding Dojo esta totalmente asociado a la Kata, ya que se trata de reunión en la cual se resuelven pruebas de programación las cuales son las Katas, esto es particularmente interesante, ya que se trata de un grupo de personas enfocadas en resolver pruebas de programación que es principalmente lo que nos ineteresa.
TDD resulta mucho mas interesante debido a que no permite realizar código inducirlo al error, corregirlo, luego refactorizar y luego aumentar la complejidad, es decir, permite realizar y mejorar un código de forma progresiva.

Ruby es un lenguaje de programación orientado a XP que busca simplificar las lineas de código realizadas y es una potente herramienta para el desarrollo de websites.

Rspec permite ejecutar las pruebas desarrolladas siguiendo TDD, lo cual es de mucha utitlidad.

Bibliografía

http://es.wikipedia.org/wiki/Kata

http://mundogeek.net/archivos/2011/03/02/katas-de-codigo/

http://www.genbetadev.com/metodologias-de-programacion/que-es-un-coding-dojo

http://es.wikipedia.org/wiki/Desarrollo_guiado_por_pruebas

Sunday, March 25, 2012

jQueryMobile en Rails

En este post veremos como usar jQuerymobile en Rails.

Procedemos a crear un proyecto llamado, para este caso lo llamaremos "jqmoblog", hacemos lo siguiente:
> rails new jqmoblog

Ahora nuestro proyecto ha sido creado, y ahora nos ubicamos en nuestro proyecto creado
> cd jqmoblog
> rails server

Luego creamos el scaffold que usaremos para nuestro proyecto:
> rails generate scaffold Post title:string body:text

Ahora ejecutaremos el siguiente comando para la migración de nuestra base de satos
> rake db:migrate

Luego procedemos a inicializar nuestro proyecto
> rails server

cargamos nuestro proyecto en nuestro browser: http://localhost:3000

En este paso veremos que nos carga por defecto el: public/index.html

Por lo tanto, procedemos a eliminar el archivo:
> rm public/index.html

Y procedemos a editar el archivo config/routes.rb con el siguiente código:
Jqmoblog::Application.routes.draw do
resources :posts
root :to => "posts#index"
end

Ahora cargamos nuevamente http://localhost:3000 y vemos que cargará una lista vacía de Posts.

Luego procedemos a importar las librerias de jquery y jquerymobile en el acrhivo app/views/layouts/application.html.erb que es como nuestro master template, el archivo tiene que quedar de la siguiente manera:

< head >
< title >Prueba
< link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
< %= stylesheet_link_tag "application", :media => "all" % >
< %= javascript_include_tag "application" % >
< script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js ">
< script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js ">
<%= csrf_meta_tags %>
< / head >

Además por mi cuenta creo conveniente eliminar el archivo app/assets/stylesheets/scaffolds.css.css debido a que contiene estilos que afectan los estilos que aplica la librería de jQuerymobile

Luego aplicamos el atributo data-role al contenedor de la pagina para que aplique los elementos de jQuerymobile

< body >
< div data-role="page" >
<%= yield %>
< /div >
< /body >

Luego, editamos nuestra vista index.html.erb de la siguiente manera:

< div data-role="header" data-theme="b" class="ui-header ui-bar-b" role="banner" >
< h1 >Listing posts
<%= link_to 'Add', new_post_path, "data-transition" => "slide", "data-direction" => "reverse","data-icon" => "plus", "class" => "ui-btn-right" %>
< /div >

< div data-role="content" >
< ul data-role="listview" data-divider-theme="b" data-inset="true" >
< li data-role="list-divider" role="heading">Lista de Posts

<% @posts.each do |post| %>
< li data-theme="c" >
<%= link_to post.title, post, "data-transition" => "slide" %>
<%= link_to 'edit post', edit_post_path(post), "data-icon" => "gear" %>
< /li >
<% end %>
<% if @posts.empty? %>
< li >No hay Posts< /li >
<% end %>
< /ul >
< /div >

La página index ahora se verá de la siguiente manera:

Luego editamos nuestra pagina new.html.erb

< div data-role="header" data-theme="b" class="ui-header ui-bar-b" role="banner" >
< h1>New Post
< /div>

< div data-role="content" class="rounded-content" >
<%= render 'form' %>
< /div >

Ahora podemos darle click al botón +Add y veremos que la pagina se mostrará de la siguiente manera:

Ahora editamos el archivo show.html.erb

< div data-role="header" data-theme="b" class="ui-header ui-bar-b" role="banner" >

< h1><%= @post.title %>

< %= link_to 'Home', posts_url, "data-icon" => "home", "class" => "ui-btn-right" % >

< /div>

< div data-role="content" class="rounded-content" >

<%= @post.body % >

< /div >

Y luego de crear un post lo veremos de la siguiente manera:

Ahora para la actualización de paginas editamos el archivo "edit.html.erb", el cual quedará d ela siguiente manera:

< div data-role="header" data-theme="b" class="ui-header ui-bar-b" role="banner" >

< h1>Editing Post

<%= link_to 'Delete', @post, :method => :delete, "data-icon" => "delete", "class" => "ui-btn-right" %>

< /div >

< div data-role="content" class="rounded-content" >

<%= render 'form' %>

< /div >

Ahora veremos la página de la siguiente manera:

Como se habrán dado cuenta los archivos edit.html.erb, new.html.erb y show.html.erb tienen una clase llamada "rounded-content" en el div contenedor del contenido principal de las páginas.

Esta es una clase que yo he definido para contener los contenidos y para que puede ser legible con el fondo que usaremos.

agregue estilos a el archivo app/assets/stylesheets/posts.css.scss, de la siguiente manera:

.ui-page {
background: url(/assets/background.png) repeat center 0 #dfdfdf;
}

.ui-content.rounded-content {
background: #fff;
margin: 30px 20px 15px 20px;
-moz-border-radius: 0.6em 0.6em 0.6em 0.6em;
-webkit-border-radius: 0.6em;
border-radius: 0.6em;
}

Ahora las paginas se verán de la siguiente manera, en los cuales obervamos un contender de fondo con bordes redondeado blanco y un background tipo cesped:

Index

Show

New

Edit

Si desean clonar y descargar el código para hacer esto, pueden hacerlo desde gitHub desde la siguiente url

https://github.com/KevinVC/jqmoblog

Saludos,

Kevin Vega C.