viernes, 4 de octubre de 2013

Comandos básicos de Git

Estos comandos los recopilé cuándo me decidí a entender y usar esto del control de versiones, espero sea de ayuda para más de una persona.  

Cómo empezar

Inicializando un nuevo repositorio local:
Se debe de crear la carpeta donde estará nuestro repositorio y nos movernos hacia ella
git init
Si se crea un repositorio local sin clonar y se necesita compartir los cambios, debemos agregar el alias remoto “origin” para facilitarnos esta tarea, este puede ser por SSH, HTTPS o por protocolo Git. Todo depende del lugar donde tengamos nuestro repositorio remoto.
Este alias nos servirá para evitar escribir la ruta de conexión remota cada vez que la necesitemos.
git remote add origin ssh://{usuario}@{servidor}:{ruta_hasta_proyecto}
Regularmente la ruta de conexión al repositorio se puede encontrar en el administrador web del repositorio remoto de dicho repositorio (GitHub, BitBucket, etc...)
Clonar un repositorio remoto
No es necesario inicializar un repositorio porque el proceso de clonación lo crea automáticamente, además la carpeta destino no debe existir
git clone ssh://{usuario}@{servidor}:{ruta_hasta_proyecto}
#la ruta debe ser desde la raíz como /var/www/html/mi_repositorio/
#Un ejemplo sería
git clone ssh://usuario@192.168.1.10:/var/www/html/mi_repositorio/
#Asumiendo que /var/www/html/mi_repositorio/ es un repositorio git
#El siguiente paso será ingresar el password del usuario en el servidor

Ramas [Branch]

Las ramas son una especie de copia de cierto momento de nuestro proyecto, en el que podemos hacer y deshacer todo lo que queramos sin ver comprometido nuestro proyecto principal. Yo siempre lo asocio con hacer una copia de la carpeta de nuestro proyecto y ponerle otro nombre para poder probar algún cambio sin perder lo que ya habíamos logrado.

Para poder ver qué ramas están en el repositorio local debemos usar lo siguiente:
git branch
Cómo hacer una nueva rama en el repositorio local:
git branch nueva_rama
Cómo hacer un checkout a una rama local existente:
git checkout rama_existente
Cómo crear una nueva rama y hacer checkout al mismo tiempo:
git checkout -b nueva_rama
Cómo borrar una rama
git branch -d rama_existente
Cómo unir dos ramas:
#primero se debe hacer un checkout a la rama destino y luego se ejecuta lo siguiente
git merge rama_fuente
#esto toma la rama_fuente y la une con la rama activa a la que hicimos el checkout inicialmente

Controlar cambios

Para poder llevar un control de los cambios se debe hacer cada cierto tiempo un “commit” de los cambios realizados, para esto primero se deben de agregar a la cola del commit los archivos.

Para ver el estado del proyecto (Si hay archivos nuevos, archivos modificados o borrados)
git status
Agregar archivos nuevos o modificados a la cola para preparar un commit
#Si se quieren agregar todos los archivos
git add .
#Si sólo se quiere agregar uno
git add nombre_archivo
Al eliminar archivos es necesario agregarlos a la cola del commit como una eliminación, esto se logra con la siguiente línea
git rm nombre_archivo
Para Hacer un commit para almacenar los cambios realizados en los archivos
#Si es un comentario pequeño se puede agregar de la siguiente forma
git commit -m "comentario"
#Si es más detallado se puede agregar de la siguiente forma
git commit
#El proceso nos pedirá un comentario para almacenarlo
Para hacer un “commit” de todos los archivos modificados podemos usar el siguiente comando que hace automáticamente un “git add .” antes de hacer el “commit” (también lo podemos unir con las otras variantes del comit como el -m)
git commit -a 

Compartir ramas

Para poder compartir una rama se debe de hacer un “push” de datos.
Dependiendo del tipo de repositorio al que haremos el push, no se puede hacer hacia la rama que esté seleccionada en la máquina remota (independientemente si es la master o es otra) a menos que la configuración del repositorio lo permita (tal es el caso de github, bitbucker o cualquiera parecido que por su naturaleza si permite hacerlo)
El push se hace desde la rama a la que le hicimos el último el checkout a menos que se indique lo contrario
git push origin rama_remota

Obtener cambios del servidor

Para poder obtener los cambios desde el servidor hay dos comandos “fetch” y “pull”. Los dos hacen lo mismo pero el fetch descarga todos los archivos y ramas del repositorio remoto (a menos que se especifique sólo una rama), y estas quedan en estado de “sólo lectura” y anteponiéndoles el texto "origin/" a cada rama, teniendo que hacer un merge con nuestras ramas para poder actualizarlas. En cambio, con el pull se puede obtener una rama en específico y se comporta como que hubieramos hecho un “git fetch” seguido de un “git merge” hacia la rama en la que estamos.
Lo más común y menos complicado es hacer un pull.
git pull origin rama_remota

Crear ramas en el repositorio remoto

En el caso que necesitemos compartir una rama local en el servidor remoto, pero esta no esté aún el comando es el siguiente:
git push origin {nueva_rama}
Como se puede observar no hay un cambio significativo, porque al hacer un push se verifica si la rama existe, y si no existe se crea

Borrar ramas remotas

Cuando ya no se necesite más una rama y se deba borrar, lo que debemos ejecutar es lo siguiente:
git push origin --delete {rama_remota}

Histórico

Para poder ver todos los commits que hemos hecho a lo largo del tiempo podemos usar el siguiente comando:
git log


Todo esto que han leído es lo básico para usar git en la consola. Claro que hay clientes con entornos gráficos que permiten administrar repositorios, el "Git Gui" es un ejemplo de ello, pero por experiencia sé que es mejor conocer los básico y luego se darán cuenta que podrán usar cualquier cliente con interfaz gráfica. Además de que hasta ahorita no he encontrado un cliente que haga todo sin que haya necesidad de ejecutar algunos comandos de vez en cuando.

Más información en http://gitref.org/

miércoles, 17 de julio de 2013

Control de versiones: Git

La primera vez que yo escuché acerca del control de versiones me pareció que era la forma de llevar los números de las versiones en una aplicación, en esos tiempos empezaba a programar y no le tomé mucha importancia. Mucho tiempo después, cuando ya debía trabajar con varios compañeros a la vez, me dí cuenta que sirve para controlar las versiones del proyecto que cada uno está haciendo.

Cuando varias personas trabajan en un mismo proyecto es bastante probable que toquen los mismos archivos (y a veces las mismas líneas). Debido a eso es necesario una herramienta que compare los archivos de varias personas, pero compararlos manualmente no es la solución porque es muy engorroso. Para esto yo elegí Git, luego de leer muchos consejos y comparaciones entre varios gestores.

Git es una herramienta de control de versiones diseñada para ser descentralizada, cada uno puede tener una copia del proyecto y trabajar todo lo que quiera con ella sin necesidad de estar conectado a un mismo lugar, y cuando todo esté listo se puede unir con los cambios que los otros compañeros hayan hecho para tener un producto terminado listo para entrar al testeo.

Se pueden hacer ramas para probar código o hacer nuevas características, correcciones, etc... Todo depende del ingenio que nosotros tengamos a la hora de trabajar con el.

Todo esto hace que nosotros trabajemos con toda confianza sin miedo de perder lo que hicimos, y todo se pone más entretenido si usamos un servidor para hostear nuestro repositorio como GitHub o Bitbucket (Yo uso más bitbucket, pero para mi son muy parecidos aunque GitHub sea más famoso)

Yo recomiendo empezar desde lo básico, la línea de comandos... Eso les permitiría aprender a usarlo bien (no soy muy fan de las interfaces gráficas para estas cosas)

Les dejo un link que me hubiera servido mucho cuando estaba aprendiendo, espero que a más de alguno le sirva. Es como una guía para aprender lo básico en 15 minutos. (Está en inglés)
http://try.github.io/levels/1/

lunes, 8 de octubre de 2012

Empezando con jQueryMobile

Para empezar vamos a hablar un poco de cómo está estructurado jQuery Mobile.

Debo decir que es uno de los frameworks que más me ha gustado para móviles, es sencillo de usar y tiene la mayoría de los componentes que en un móvil podríamos llegar a necesitar.
El sitio es http://jquerymobile.com/ y lo más interesante es que su documentación es para móviles, bueno, también se puede ver en un PC pero lo interesante se lo veo porque muchas cosas ya están ahí implementadas y podemos ir a ver cómo funcionan con el famoso "Click derecho - Ver código fuente".

la documentación está en este link http://jquerymobile.com/demos/1.1.1/

Lo primero que hay que saber es que está construido en HTML5, por lo tanto el doctype hay que dejarlo así < !DOCTYPE html > como en cualquier otra página que vaya a incluir etiquetas de HTML5, lo siguiente es agregar la estructura de las etiquetas así:

< html >
< head >
< title > Mi titulo < / title>
< / head >

Esta es la misma que hay que escribir para cualquier página web, y además debemos incluir un META nuevo para que nuestra página se pueda ver en dispositivos móviles cómodamente porque evita el zoom que normalmente hace un navegador móvil. El meta es el siguiente:
< meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no" >

Como les decía, este hace que el ancho de nuestra página sea el mismo del dispositivo y que la escala inicial sea 1 al igual que la escala inicial y la escala máxima y que el usuario no pueda escalar el sitio, en otras palabras limita el "pinchToZoom", que tan popular hizo el iPhone, que viene por defecto en las páginas web.
Esto es importante porque sino nuestra página no se verá como una para dispositivos móviles, sino que parecerá una página de escritorio común y corriente abierta desde un teléfono.

Lo siguiente que deben de hacer es incluír el archivo CSS y los JS necesarios:
< link rel="stylesheet" href="lib/jquery.mobile-1.1.0.min.css" / >
< script src="lib/jquery-1.7.2.min.js">< / script >
< script src="lib/jquery.mobile-1.1.0.min.js" >< / script >

La ubicación depende de dónde tengan los archivos, yo los guardo casi siempre en una carpeta llamada "lib".

Todo lo demás lo debemos incluir en el body de nuestra pagina.
Es muy importante mencionar que jQuery Mobile usa como base los atributos personalizados que nos permite tener HTML5 para interactuar facilmente con Javascript, por lo tanto lo que nosotros escribiremos para la interfaz de jQuery Mobile es html solamente.
¿Cómo funciona? pues para un header en la página necesitamos un div como el siguiente:
< div data-role="header" data-position="fixed" >
< h1 >Mi primera pagina< / h1 >
< / div >

El atributo personalizado es "data-role" que es donde se ubica qué tipo de componente será ese div, en este caso será un header y tiene otro atributo llamado data-position que al estar en "fixed" hace que nuestro header siempre esté hasta arriba, y el footer siempre esté abajo. Dentro tiene un H1, que es el que sirve para escribir el título a la página.

Para el contenido de la página podemos poner lo siguiente:
< div data-role="content" >
< h2 > Hola Mundo < / h2 >
< / div >


Ahora quitamos el "data-position" y sólo cambiamos el "data-role", esto formará parte del contenido de la página que podría ser "scrollable".

Para poner un footer necesitamos lo siguiente:

< div data-role="footer" data-position="fixed" >
< h3 > Mi barra inferior < / h3 >
< / div >



Volvemos a escribir el "data-position" y nuevamente cambiamos el "data-role" y el contenido.

Este código nos puede generar nuestra primera página, pero falta algo muy importante y una de las mejores cosas que tiene jQuery Mobile, los data-role="page".
Nuestro código de la página debe de estar dentro de uno, y por qué? pues simplemente porque en un mismo archivo podemos tener más de una "pantalla" y con anclas podemos hacer que jQuery Mobile nos oculte y muestre las "pantallas" que querrámos, pero esto lo mostraré más adelante.

Para ver el código del ejemplo dirígete hacia aquí

Si quieren verlo como se vería en un dispositivo móvil pueden hacer pequeña la ventana o usar este script, solo arrastrenlo a la barra de "bookmarks" en su navegador, es un script para probar sitios optimizados con "Responsive Design" y jQuery Mobile usa esa tecnología.

Responsive Test

martes, 24 de julio de 2012

Desarrollo Web para dispositivos móviles

Desde hace ya mucho tiempo me ha atraído mucho desarrollar alguna aplicación para un dispositivo móvil, la primera que hice fue en J2ME para un teléfono hace ya un par de años, pero no me convenció mucho el resultado porque era muy engorroso estar probando y la JVM en móviles era muy limitada, así que ya no seguí probando.

Pero ahora existen muchas posibilidades, hacer apps para Android, para iOS (que es más costoso $$), para Windows Phone, o una aplicación web compatible con alguno de estos dispositivos, que incluya HTML5.

Cabe aclarar que HTML5 no es el que logró que los teléfonos pudieran ver páginas web, sólo llegó a mejorar la experiencia por sus nuevos estándares, y a enriquecer la programación de aplicaciones web.

Hay varios frameworks para elegir en este campo, los que yo conozco mejor y he probado son sólo dos: Sencha Touch y jQuery Mobile, me gustan mucho y me decidí por probarlos porque no dependen de un lenguaje de servidor, por lo tanto se pueden complementar casi con cualquiera (yo prefiero usar PHP).

De esos dos, el más sencillo de implementar es jQuery Mobile (jQM), pero también tiene menos componentes que Sencha Touch (STouch).
jQM se basa en una codificación semántica y al cuando el navegador está listo, renderiza todas las etiquetas que encuentre en la página. Esto ayuda mucho porque no es necesario tener un conocimiento profundo de Javascript para poder generar nuestra página.

Sencha Touch tiene una estructura parecida a la de ExtJS, la versión para aplicaciones web de escritorio. Por lo tanto hay que tener un poco de conocimientos de POO y Javascript para no perderse mucho al principio, ya que hay muchas maneras de llegar al resultado que queremos.


Y a esto se le puede agregar que ha surgido una tecnología desde hace ya un tiempo que permite programar en Javascript y poder construír una app nativa para cada OS móvil, ya sea Android, iOS, Windows Phone, Blackberry, Palm WebOS, Bada o Symbian. Este se llama PhoneGap y utiliza un servidor apache interno para servir páginas web localmente dentro de la app. Usa una versión de Apache llamada Córdova y es muy fácil de implementar. Bueno, que sea fácil de implementar PhoneGap no quiere decir en ningún momento que desarrollar la aplicación lo sea también, ya que desde aquí no poseemos un "PHP" que nos preconstruya nuestra página, todo lo debemos hacer con Javascript para el entorno, JSONP para peticiones a servidores de datos, CSS para el estilo y alguno que otro evento que nos brinda PhoneGap. Sólo el hecho de que no tengamos un lenguaje de servidor nos hace que debamos cambiar nuestro estilo de programación.
Tiene sus ventajas, y una de las mejores es que no hay que escribir el código para cada plataforma, sino que se desarrolla una sóla vez y luego se usa la versión de PhoneGap adecuada para cada una de las plataformas en las que queremos tener nuestra app. 



domingo, 15 de julio de 2012

Sombras y bordes con CSS3

Sin duda una de las mejores cosas que hay ahora es CSS3, junto con HTML5.
Antes, cuando un diseñador web quería agregar un botón en una página que tuviera un aspecto agradable, como tener un degradado o sombras cuando se posicionaba el mouse sobre él, se debía de hacer uso de ciertos "trucos" como insertar imágenes en las esquinas para que tuviera bordes redondeados o que el fondo completo del botón sea una imagen para poder tener un degradado, o en su defecto usar un botón hecho en flash.

Por experiencia, todo esto era algo engorroso, ya que se debía de hacer muchas cosas a la vez y se sobrecargaba el archivo de código HTML, porque se tenía que recurrir a tablas, imágenes, eventos de los objetos, javascript para los "hovers", plugins, etc.... Pero ahora, existe CSS3, que aun no es completamente estándar pero va avanzando, que nos permite dar degradados distintos a nuestras etiquetas, agregarles sombras, insertarle elementos antes o después, bordes redondeados, sombras, pseudoclases en css (esto ya estaba desde antes pero se han agregado nuevas), animaciones, podemos jugar con los bordes y hacer triángulos, flechas, una infinidad de cosas que podemos lograr ahora y que han venido a darle un poco de flexibilidad a esa web "cuadrada" a la que estabamos acostumbrados.

En un ejemplo se pueden ver algunas de estas cosas, principalmente los bordes redondeados y las sombras, queda algo así como el siguiente:


Este botón tiene tres características "nuevas": el degradado gris, los bordes redondeados y la sombra en el hover.
Las tres cosas existían desde hace algún rato en los navegadores basados en webkit, que si no me fallan mis conocimientos son Safari, Chrome, Chromium, Safari mobile, el navegador de Android, y probablemente otros de los que no estoy completamente familiarizado. También estuvieron disponible en Firefox y Firefox Mobile para Android y he leído un poco que también en Opera Desktop.
Bueno, desde hace mucho estaban en todos los navegadores, con su forma peculiar de declarar, MENOS en el IE < 9.

Lo que se puede usar para poner un degradado es los siguiente:
background: -webkit-linear-gradient(top, #FFF, #BBB);
Que es exactamente el que se usa en el estilo del botón, pero este funciona para navegadores basados en webkit, para hacerlo un poco más "multinavegador" debemos piner las siguientes lineas

background: #FFF; 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#BBB));
background: -webkit-linear-gradient(top, #FFF, #BBB);
background: -moz-linear-gradient(top, #FFF, #BBB);
background: -ms-linear-gradient(top, #FFF, #BBB);
background: -o-linear-gradient(top, #FFF, #BBB);
En este caso, el que entienda el navegador es el que se va a aplicar.

Para el borde redondeado es un poco más corto y sencillo, de la siguiente forma:

-webkit-border-radius: 5px 5px; 
-moz-border-radius: 5px 5px; 
border-radius: 5px 5px;
Este es para webkit, mozilla y el estándar. Los pixeles son para el tamaño del radio que tendrá la esquina, se puede pasar un valor para que lo tome en todas las esquinas, dos valores para arriba y abajo, y los cuatro valores de cada esquina.

Y por último para la sombras es el siguiente código:
-webkit-box-shadow: #666 0px 0px 5px; 
-moz-box-shadow: #666 0px 0px 5px; 
box-shadow: #666 0px 0px 5px;
Este recibe el color de la sombra, la posición en X y la posición en Y con respecto al objeto que lo muestra y la longitud de la sombra.

Teniendo todas estas opciones, lo que hace falta es imaginación y creatividad para utilizarlo, y ganas de experimentar con cosas nuevas también, creo que eso es más importante.

El código completo esta en el siguiente enlace:
Ejemplo de botón