slide1

Alt1040. Noticias acerca de Internet, diseño, música, cine, opiniones, weblogs y medios

Es uno de los weblogs de tecnología más seguidos de la blogosfera hispana.

slide2

Bitelia. Blog de software, internet y servicios web

Software y aplicaciones para mejorar tu vida, guías de uso, trucos, listas, noticias y todo sobre tecnología.

slide3

Xataka. Publicación de noticias sobre gadgets y tecnología.

Últimas tecnologías en electrónica de consumo y novedades tecnológicas en móviles, tablets, informática, etc.

slide4

Wwwhatsnew. Aplicaciones, marketing y noticias en la web.

Servicios que os pueden ser útiles para dibujar, gestionar tareas, hacer amigos, encontrar restaurantes...

slide5

Fayerwayer. Discusiones y opiniones de lo ultimo en tecnología y gadgets

Con secciones dedicadas a Internet, Software o Redes Sociales es un referente a nivel de tecnología en español.

13 de junio de 2016

Gestión de proyectos software con Git y Github

Desde su nacimiento en 2005, Git ha evolucionado y madurado para ser fácil de usar, es tremendamente rápido, completamente distribuido, muy eficiente con grandes proyectos como el núcleo de Linux (manejo eficiente de velocidad y tamaño de los datos) y tiene un increíble sistema de ramificación (branching) para desarrollo no lineal (miles de ramas paralelas).

GIT

GIT es un gestor de proyectos software desarrollado por Linus Torwalds para Linux y diseñado para desarrollo distribuido.

Cada desarrollador trabaja de forma independiente en su propio repositorio y sincroniza el repositorio con otro cuando lo necesita.
Uno de los repositorios puede utilizarse como repositorio de referencia.

Tutorial Web y eBook: http://git-scm.com/book/es

Proyecto, directorio y versión


El directorio del proyecto

  • Un proyecto se suele gestionar en un directorio (o carpeta): el directorio contiene todos los ficheros del proyecto.
  • Explorador de ficheros: muestra el contenido de un directorio gráficamente.
    Hacer clic sobre un objetos gráfico ejecuta un comando predefinido.
  • Terminal de comandos: ejecuta comandos en directorio de trabajo.
    El directorio de trabajo asociado es la base de las rutas (paths) relativas y los objetos se identifican con rutas (paths) absolutas o relativas.
Historia de un proyecto

  • Historia de un proyecto: es la historia de cambios en el directorio del proyecto.
  • Versión (Commit): punto de la historia del proyecto que puede ser restaurado (reconstruido).
  • Se debe consolidar versión en los puntos del desarrollo que deseemos poder volver atrás en el futuro.
  • Versiones frecuentes facilitan el mantenimiento y la legibilidad de un programa.
Árbol de versiones

  • La rama principal del proyecto se denomina master: es la historia de cambios en el directorio del proyecto.
    Una rama suele realizar un desarrollo separado.
  • Las ramas se suelen integrar en master, una vez acabadas.
Repositorio y Versión

  • Un repositorio git es un "directorio donde gestionar versiones".
    Se puede guardar o restaurar versiones. Las versiones se guardan en el directorio oculto .git
  • Versión (commit): directorio (proyecto) congelado en un momento determinado, incluyendo todos sus ficheros y subdirectorios.
Identificador de versión (SHA1)

  • Cada versión generada por GIT se identifica con un número aleatorio único (clave SHA1).
    Ejemplo: 973751d21c4a71f13a2e729ccf77f3a960885682.
  • GIT permite equipos de desarrollo distribuidos: los repositorios se pueden clonar sin problemas (ninguna versión en ningún otro repositorio utilizará el mismo identificador).
Colaboración y Firma

  • GIT esta pensado para trabajar en grupo: toda operación va firmada por su autor.
    Al configurar GIT se da el nombre y email del autor.
  • Un usuario puede copiar o clonar otro repositorio y continuar el desarrollo por su cuenta sobre la copia.
  • Dos repositorios pueden volver a sincronizarse.

Configurar GIT

# El comando "git config" permite manejar opciones de configuración. 

# Las opciones configuradas pueden afectar a distintos ámbitos (proyectos): 
#    - Para todos los proyectos en el sistema.  
#       Usar opción --system. La configuración se guarda en /etc/gitconfig
#    - Para todos los proyectos del usuario.  
#       Usar opción --global. La configuración se guarda en ~/.gitconfig
#    - Sólo para el proyecto actual.  
#       Sin opción. La configuración se guarda en .git/config 

# Consultar todas las opciones existentes: git help config

# Para firmar correctamente contribuciones y versiones debemos configurar:
$ git config --global user.name "Pedro Ramirez" 
$ git config --global user.email pramirez@dit.upm.es

# Consultar el valor de todas las opciones configuradas:
$ git config --list  
user.name=Pedro Ramirez 
user.email=pramirez@dit.upm.es
color.ui=true 

# Consultar el valor de una opción:
$ git config user.name  
Pedro Ramirez

Ayuda

# Ayuda en línea de comandos: 

$ git help          # Muestra lista con los comandos existentes 

$ git help comando  # Ayuda sobre comando especificado 

$git help add       # Ayuda sobre el comando add

$ git add --help    # Equivalente a anterior
$ man git-add       # Equivalente a anterior


# Manual de referencia, chuletas, videos, otros enlaces: 

http://git-scm.com/doc

http://ndpsoftware.com/git-cheatsheet.html 

https://na1.salesforce.com/help/doc/en/salesforce_git_developer_cheatsheet.pdf 

GITHUB

GITHUB es el portal de repositorios GIT: https://github.com

Ofrece un enfoque social y colaborativo: red social para compartir proyectos software.

Los repositorios públicos son gratis, los privados de pago: cuenta con más de 20M (Linux, Eclipse, jQuery, RoR, etc)

Gestión de organizaciones y proyectos software:

  • Soporta equipos de desarrollo distribuidos, abiertos o privados.
  • Uso y acceso muy sencillo a versiones, tareas, bugs, ...
  • Herramientas para desktop (MAC y Windows)
  • Incluye muy buenos tutoriales.

GITHUB: registro y ayuda

#   Lo primero es crear una cuenta y una vez creada, debemos seguir sus instrucciones para:

#  1) Configurar y conectar con GITHUB nuestro GIT local:

https://help.github.com/articles/set-up-git/

#  2) Instrucciones para crear y clonar repositorios:

https://help.github.com/articles/create-a-repo
 
#  3) Instrucciones para colaborar en proyectos software distribuidos:

https://help.github.com/articles/be-social/


Subir un repositorio local a GITHUB

# Para subir un repositorio local a GITHUB debemos:
 
#  1) Crear un repositorio vacío en GITHUB con New Repository

#  2) Configurar repo. remoto origin con repositorio vacío

$ git remote add origin https://github.com/pepe/proy1

#  3) Hacer push de rama master local a origin

$ git push -u origin master # -u "tracking reference"

Fork: Copiar un proyecto en GITHUB

# Fork permite copiar un repositorio (proyecto) en nuestra cuenta en GITHUB
# 
#  -> Una vez copiado (clonado) tenemos acceso a él y podemos evolucionarlo

Contribuir a un proyecto GITHUB

# La forma habitual de contribuir a un proyecto en GITHUB es seguir estos 4 pasos: 

#  1) Crear una copia del repositorio original en GITHUB con "Fork" en la cuenta propia 

#  2) Clonar la rama creada en nuestra cuenta en nuestro ordenador local 

p1> git clone https://github.com/pepe/proy1

#  3) Modificar el proyecto local, realizar commit y "push" a nuestra copia en GITHUB 

p1> ...........
p1> git add ... 
p1> git commit -m '.........'
p1> git push origin master 

#  4) Hacer "Pull Request" desde nuestra cuenta en GITHUB pidiendo al administrador del 
# repositorio original que introduzca nuestros cambios 

GITHUB App for MAC & for Windows


GITHUB App es una herramienta gráfica muy eficaz para gestionar proyectos git localmente en el PC. Solo está soportada para MAC y para Windows.

  • Permite ver y gestionar el directorio de trabajo del proyecto y los cambios realizados,
  • Ver las versiones de un proyecto (historia) y los cambios realizados en cada versión.
  • Ver y gestionar las ramas de un proyecto y su sincronización con repositorios remotos.
Descargar (e instalar) GITHUB para MAC: https://mac.github.com
Descargar (e instalar) GITHUB para Windows: https://windows.github.com


Extracto del curso "Desarrollo de servicios en la nube con HTML5, Javascript y node.js" impartido a través de la plataforma online MiríadaX.
El curso incluye también el despliegue de servicios de servidor en la nube e introduce técnicas básicas de ingeniería software.



6 de junio de 2016

Alojar páginas web con Google Drive no será posible a partir del 31 de agosto de 2016

Google lo lleva anunciando desde hace cerca de un año: "la función de alojamiento de páginas web desde Google Drive dejará de estar disponible a patir de agosto de 2016".
En su blog oficial, explica las razones y ofrece la posibilidad de compra de un dominio a través de su plataforma Google Domains.


Llevo haciendo uso de este servicio desde que Google lo anunció y me ha sido de mucha utilidad para compartir de forma pública algunos de los casos prácticos que expongo en los artículos de mi blog.

Y como no es conveniente dejar los deberes para el último momento, me he puesto manos a la obra y he migrado todos estos proyectos a otro repositorio de carácter público.

Como ya indicaba en el post de principios de 2014 ¿sabías que Google Drive permite alojar páginas web?:
"para la publicación de un sitio web lo ideal es disponer de hosting y dominio propios pero para compartir ficheros o páginas estáticas a modo de ejemplos, existen numerosos servicios gratuitos que cubren perfectamente esta funcionalidad".

Finalmente me he decantado por el servicio de alojamiento de repositorios de software GitHub porque cubre sobradamente mis necesidades.

Algunas razones de peso son:

  • GitHub es totalmente gratuito para alojar código open source, siendo estos repositorios de visibilidad pública.
    No obstante, cuenta con un plan de precios para los repositorios privados.
  • es el servicio elegido por proyectos de software libre como Linux, Eclipse, jQuery, reddit, Sparkle, curl, Ruby on Rails, node.js, ClickToFlash, Erlang/OTP, CakePHP, Redis, y otros muchos.
  • algunas de las grandes empresas de Internet, como Facebook, alojan ahí sus desarrollos públicos, tales como el SDK, librerías, ejemplos, etc.
  • dispone de un visor de código mediante el cual, a través del navegador, podremos consultar en un instante el contenido de un determinado fichero

¿cómo configurar Git?

Documentación de usuario: Set Up Git

Artículos que se han visto afectados por este cambio y cuyos ficheros públicos ya apuntan al nuevo directorio GitHub (ordenados de más reciente a más antiguo):

  • Como crear un índice para Blogger personalizable por Título o Categorías
    <div id="all-post" class="all-post"></div>
    <script>
    var conf = {
     sortBy:   'orderlabel',  // forma en que se muestran las artículos publicados
     lastPost: 10,            // últimos post (10) a los que les pongo una marca
     date:     1,             // 0:no aparece la fecha de publicación | 1:mostramos la fecha de publicación
     newPost: 'Nuevo!!',      // texto o marca que aparece en los últimos artículos
     newtab:   1              // 0:abre link en la misma ventana | 1:abre link en ventana nueva
    }
    </script>
    <script src="https://cdn.jsdelivr.net/gh/jmacuna/index-blogger@master/index-blogger.js"></script>
    <script src="[URL DE TU BLOG]/feeds/posts/default?max-results=9999&alt=json-in-script&callback=loadtoc"></script>
    

  • Calendario con todos los post publicados en Blogger
    <div id='calendar'><strong>Loading...</strong></div>
    <script>
    var conf = {
     bgcolor: '#1e4e7e', 
     newtab:  1,         // 0:abre link en la misma ventana | 1:abre link en ventana nueva
     tooltip: true,      // false:title por defecto | true:tooltip con css3
     start:   1,         // 0:Domingo | 1:Lunes
     days:    "Lunes|Martes|Miercoles|Jueves|Viernes|Sabado|Domingo",
     months:  "Enero|Febrero|Marzo|Abril|Mayo|Junio|Julio|Agosto|Septiembre|Octubre|Noviembre|Diciembre",
     date:    "Ir al mes actual"
    }
    </script>
    <script src='https://cdn.jsdelivr.net/gh/jmacuna/calendar-widget@master/create-calendar.js' type='text/javascript'></script>
    <script src='https://www.tecnoblog.guru/feeds/posts/summary?max-results=1000&alt=json-in-script&orderby=published&callback=createCalendar' type='text/javascript'></script>
    
  • Gadget para aumentar tu número de suscriptores - Blogger
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/jmacuna/subscription-feedburner@master/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
    <script>
    idleTime = 0;
    $(document).ready(function(){
     $limit = 5; //seconds
     if ($.cookie('test_status') != '1') {
      function timerIncrement() {
       idleTime = idleTime + 1;
       if (idleTime > $limit) {
        $('html, body').css('overflow', 'hidden');
        $('.subs-popup ').fadeIn('slow');
        idleTime = 0;
       }
      }
      // Increment the idle time counter every second.
      var idleInterval = setInterval(timerIncrement, 1000); // 1 second
      // Zero the idle timer on mouse movement.
      $(this).mousemove(function (e) {
       idleTime = 0;
      });
      $(this).keypress(function (e) {
       idleTime = 0;
      });
      $.cookie('test_status', '1', { expires: 30 });
     }
     $('.email-close').click(function() {
      $('.subs-popup').fadeOut('slow');
      $('html, body').css('overflow', 'auto');
      $limit = 9999;
     });
    });
    </script>
    
    <div class="subs-popup">
     <div id="newsletter">
      <div class="email-close">X</div>
      <div class="newsletter-wrap">
       <h4>Suscríbete y recibe<br/>contenido exclusivo</h4>
       <p>Las últimas novedades del blog<br/>directamente a tu email.<br/><br/></p>
       <form action="http://feedburner.google.com/fb/a/mailverify?loc=es-ES&uri=[FEED_DE_TU_BLOG]" method="post" onsubmit="$('.email-close').click();window.open('about:blank', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" novalidate="">
        <input name="uri" type="hidden" value="bloggertrix"/>
        <input name="loc" type="hidden" value="en_ES"/>
        <input type="email" value="" name="email" placeholder="Tu e-mail aqui..." required=""/><br/><br/>
        <input type="submit" value="Suscribirme" class="button-popup">
       </form>
      </div>
     </div>
    </div>
    
  • Comentarios con desplazamiento de texto para Blogger (efecto marquee)
    <table class="comments">
    <tr><td class="title">Últimos comentarios</td></tr>
    <tr><td><div class="scroller">
    <script type="text/javascript">
    var numComments  = 10,
        showAvatar  = true,
        avatarSize  = 40,
        roundAvatar = true,
        characters  = 40,
        showMorelink = false,
        moreLinktext = "More »",
        defaultAvatar  = "http://i.imgur.com/3QqaBeS.png",
        hideCredits = true;
    </script>
    <script src="https://cdn.jsdelivr.net/gh/jmacuna/comments-avatar@master/w2b_recent_comments_with_avatars.js"></script>
    <script src="[URL DE TU BLOG]/feeds/comments/default?alt=json&callback=w2b_recent_comments"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="http://www.jqueryscript.net/demo/jQuery-Plugin-For-Infinite-Any-Content-Scroller-scrollForever/scrollForever.js"></script>
    </div></td></tr>
    </table>
    <script type="text/javascript">$(document).ready(function({$(".scroller").scrollForever({dir:"top",container:"ul",inner:"li",speed:1000,delayTime:10,continuous:true,num:1});});</script>
    
Todos aquellos lectores del blog que utilicen alguno de los gadgets que comparto, deberán realizar ajustes para que las url públicas estén alojadas en https://cdn.jsdelivr.net en lugar de https://www.googledrive.com/host.