lunes, 24 de marzo de 2014

Comando en Composer


Composer es una gran herramienta que nos permite administrar diferentes librerías en PHP para proyectos en donde se requiere una gran cantidad de ellas, como es el caso de Symfony2 que debe resolver varias dependencias.

Una de las formas de instalar Symfony2 es gracias a la utilización de composer donde descarga de Internet las últimas versiones de las librerías que necesita.

Vamos a aprovechar que nos gusta Symfony2 y que además utilizamos composer para instalarlo. Ahora bien para comenzar a utilizar ejecutemos composer de la siguiente manera:

$ php composer.phar

Luego de un tiempo de tener instalado composer, es posible que necesitemos llevarlo hasta la última versión, y esto lo podemos hacer de la siguiente manera:

$ php composer.phar self-update -v

Para estos casos siempre recomiendo utilizar sus modos verbose (-v) de esa forma van a poder conseguir muchísima información adicional en caso de que exista algún problema.

Siguiendo con los comandos, podemos desplegar una lista de comandos disponibles para composer ejecutando las siguientes opciones:

$ php composer.phar list

domingo, 23 de marzo de 2014

El modelo de negocio detrás del Bootstrap


El Bootstrap sin duda es uno de los frameworks front-end más populares y usados en estos últimos años y es que el mismo mercado, con la cantidad de dispositivos y navegadores web lo requieren y la gente que los usa lo llevó al salón de la fama.

Claro está que detrás de todo software bien realizado, existe un sin fin de modelos de negocios que podemos aprovechar, además, la licencia MIT en el que se encuentra el Bootstrap lo permite legítimamente.

Es allí donde podemos citar como ejemplo a themefores de envato y a {wrap}bootstrap dos compañía que reúnen y convocan a excelentes diseñadores y especialistas en front-end para desarrollar themes, templates y dashboard basados en bootstrap con toda la tecnología HTML5, CSS3, Responsive Designer, jQuery, etc.

{wrap}bootstrap

martes, 18 de marzo de 2014

Workflow en Git

El workflow de Git es la manera en la cuál podemos dar una estructura de commits, branch y fusiones dentro de la etapa del desarrollo de un software. 

De tanto escribir artículos sobre Git, esta sin duda parece ser #7DiasConGit y la realidad es que a medida que más lo usan, más se van a ir dando cuenta de todas las bondades que nos ofrece como programador y administrador de proyectos.


Hoy les quería dejar un enlace sobre el Workflow en Git y esto de estructurar nuestros proyectos al momento de separar las tareas, dividirlos en ramas y posteriormente fusionarlas.

El Workflow requiere un manejo importante de ramas o branch dentro de Git, dejar en claro siertas directrices para tener en cuenta y buscar la mejor forma de ejecutar el proyecto entre los colaboradores que posteriormente van a enviar o impactar sus cambios en el código fuente del repositorio principal.

Existen muchas estrategia como la de tener un branch master donde solo va a apuntar las versiones finales, por otro lado un branch develop y diferentes ramas features donde pueden crear una rama para cada funcionalidad nueva dentro del proyecto, fusionarlas constantemente con develop hasta tener un producto maduro antes de pasar a master.

lunes, 17 de marzo de 2014

Como editar el mensaje de un commit en Git


Cada vez que utilizo Git para realizar el tracking y el control de versiones en un software más estoy convencido de las bondades que brinda a los desarrolladores.

La idea de hoy es aprender como podemos modificar el mensaje que dejamos cada vez que realizamos un commit al cambiar parte del código fuente.

Lo primero que podemos hacer es ver los log para determinar cuáles son los nombres que asignamos a los commits ejecutados, para ello podemos ejecutar:

$ git log --graph --online 

Ahora bien para cambiar el mensaje del último commit, lo podemos hacer de la siguiente manera:

$ git commit --amend -m "Nuevo mensaje del commit."

A este cambio podemos hacerle un push para subirlo a un repositorio principal como puede ser GitHub u otro servidor

$ git push --force

Es posible que necesitemos cambiar el mensaje de varios commits anteriores ya ejecutados y para ello vamos a utilizar el siguiente comando:

$ git rebase -i HEAD~cantidad_commit

en un ejemplo en concreto el comando quedaría:

$ git rebase -i HEAD~3

lunes, 10 de marzo de 2014

Ramas en Git

Este último fin de semana me dediqué a codear un poco en Python, colaborando para un proyecto Software Libre de Seguridad y la verdad que tuve que trabajar bastante con las ramas o branch en Git y la verdad es que estuvo genial.

La idea de hoy es recomendar que si se encuentran desarrollando un software por más grande o pequeño que crean que sea, utilicen un sistema de control de versiones, lo que les va a permitir tener mucha más transparencia en el desarrollo, van a poder tener un log de todos los cambios dentro de sus programas y esto va ya sea si se encuentran trabajando en equipo o solos y una de esas alternativas es Git.

Git es un sistema distribuído para realizar un seguimiento de los cambios que llevamos nosotros y nuestro equipo conforme pasa el tiempo. Una de las características de Git es el uso de branchs o ramas que nos permite organizar nuestro código.


En particular cuando me encuentro desarrollando un sistema, me gusta utilizar branch para aislar alguna nueva funcionalidad de la rama principal o master del desarrollo con el fin de mantener el orden a medida que el software crece.

martes, 4 de marzo de 2014

Como fusionar Symfony2 y Bootstrap

Hoy les quería dejar un How-To de como hago para fusionar Symfony2 y el Bootstrap de Twitter, de esa forma lograr tener unas mejores vistas y hacer uso de estos dos framework fantásticos, por eso para saltear algunos pasos les recomiendo tener descargado Symfony2 y la última versión estable del Bootstrap, ambos totalmente libres y esperando ser usados.

Figura 1: Como fusionar Symfony2 y Bootstrap

Los que les voy a explicar a continuación es la forma que yo utilizo para realizar la integración de estos dos framework, con lo cuál la idea es optimizar las plantillas y reutilizar código para continuar escalando.

Para saltear algunos pasos les dejo los enlaces para instalar Symfony2 en su servidor de pruebas:


Una vez que tengamos todo instalado, vamos a crear un Bundle con sus configuraciones por defectos de forma simple y rápida, para comprender la secuencias de comando les recomiendo leer su ayuda:

$ php app/console help generate:bundle

$ php app/console generate:bundle --namespace=Sistema/BlogBundle


Figura 2: Generación de Bundle

Ahora lo que vamos a modificar es el archivo base.html.twig donde vamos a utilizarlo siempre antes de cargar las plantillas, en él vamos a reemplazar por el siguiente código:

archivo: app/Resources/views/base.html.twig 

<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}Welcome!{% endblock %}</title>
        {% block stylesheets %}{% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>                                                       
        {% block body %}{% endblock %}                           
        {% block javascripts %}{% endblock %}                 
    </body>
</html>

Ahora vamos a ir al a la estructura del Bundle que creamos, que seguramente se encuentra en src/Sistema/BlogBundle/Resources y copiamos dentro del directorio public/ todo el contenido del bootstrap, osea todo el directorio css, js y fonts.

Figura 3: Directorio public/

Para poder publicar los assets de nuestro Bundle vamos a ejecutar:

$ php app/console assets:install web

Figura 4: Publicar os assets del Bundle

Dentro del directorio views/ del Bundle, vamos a crear un archivo llamado layout.html.twig y que va a contener el siguiente código:

archivo: src/Sistema/BlogBundle/Resources/views/layout.html.twig 

{% extends '::base.html.twig' %}

{% block stylesheets %}
<link href="{{ asset('bundles/sistemablog/css/bootstrap.css') }}" type="text/css" rel="stylesheet">
<link href="{{ asset('bundles/sistemablog/css/bootstrap-responsive.css') }}" type="text/css" rel="stylesheet">
{% endblock %}

{% block body %}
{% endblock %}

{% block javascripts %}
<script type="text/javascript" src="{{ asset('bundles/sistemablog/js/bootstrap.js') }}"></script>
{% endblock %}

Ahora para finalizar lo único que nos queda es editar el archivo de la vista Default/ de la siguiente manera:

archivo: src/Sistema/BlogBundle/Resources/views/Default/index.html.twig

{% extends 'SistemaBlogBundle::layout.html.twig' %}

{% block body %}
<!-- Static navbar -->
    <div class="navbar navbar-default navbar-static-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>
<div class="container">
      <!-- Main component for a primary marketing message or call to action -->
      <div class="jumbotron">
        <h1>Hello {{ name }}</h1>
        <p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>
        <p>To see the difference between static and fixed top navbars, just scroll.</p>
        <p>
          <a class="btn btn-lg btn-primary" href="#" role="button">View navbar docs &raquo;</a>
        </p>
      </div>
    </div> <!-- /container -->
{% endblock %}

Figura 5: Pruebas en local sin el template de Bootstrap

Figura 6: Pruebas en local con la template de Bootstrap

Se puede ver que antes de visualizar esta vista extiende los contenidos del archivo layout.html.twig que a su vez se extiende de la estructura base.html.twig esta es una de las grandes ventajas de utilizar Twig en la capa de vista, además de los llamados block que en todos momento hacemos uso.

Como resultado podemos ver como desde las vistas de Symfony2 podemos convocar a las clases que se encuentran en el Bootstrap y hacer que nuestra aplicación adopte todo su estilo.

Ojalá le sea útil este pequeño How-To donde se muestra como integrar el Bootstrap de Twitter con las vistas de Symfony2 de tal forma que nos permita seguir escalando en todas las vistas de la aplicación.

Saludos!

Enlace | Symfony2 y Bootstrap

Entradas populares