PDF de programación - hd magazine 03 201301

AÑO ----------- 0
NÚMERO -------- 3
FECHA: 2013-01-28

#3

“ELVIS”

HD Hackers &
+

DEVELOPERS

Magazine digital de distribución
mensual sobre Software Libre, Hacking y Programación
para profesionales del sector de Tecnologías de la Información

Staff

Eugenia Bahit
Indira Burga
Laura Mora
María José Montes Díaz
Milagros Infante Montero

Arquitecta GLAP & Agile Coach

Ingeniera de Sistemas

Administradora de Redes y Sistemas

Técnica en Informática de Gestión

Est. Ingeniería de Sistemas

Hackers & Developers Magazine se distribuye bajo una licencia Creative Commons Atribución
NoComercial CompartirIgual 3.0 Unported . Eres libre de copiar, distribuir y compartir este material.
FREE AS IN FREEDOM!

HD

Hackers &
DEVELOPERS
+

#3

Hackers & Developers Magazine, es
una iniciativa sin fines de lucro
destinada al fomento y difusión de
las tecnologías libres presentes o
futuras, bajo una clara óptica
docente y altruista, que resulte de
interés técnico y/o científico a
profesionales
de
sector
Tecnologías de
Información.
Hackers & Developers Magazine se
sostiene económicamente con el
apoyo de
comunidad, no
recibiendo subvención alguna de
ninguna empresa, organización u
organismo
Gobierno.
Necesitamos de tu apoyo para
poder mantener este proyecto.

del
la

de

la

Ayúdanos a continuar
con este proyecto
Puedes
hacer un donativo ahora,
de 10, 15, 25, 50, 100 o 150 USD
para ayudar a que Hackers &
Developers Magazine pueda seguir
publicándose de forma gratuita,
todos los meses. Puedes donar con
PayPal o Tarjeta de Crédito a través
del siguiente enlace:
www.hdmagazine.org/donar

CON TU DONACIÓN DE USD 150
RECIBES DE REGALO,

UNA FUNDA DE

NEOPRENE PARA TU
ORDENADOR PORTÁTIL

VALUADA EN USD 25.-
(Origen: Estados Unidos)

“Hacker es alguien que disfruta
jugando con la inteligencia”

Richard Stallman
Free Software, Free Society
(Pág. 97), GNU Press 2010-2012

En esta edición:
Twitter Bootstrap: un elegante, intuitivo y poderoso framework..........4
Web Scraping: excavando en la red......................................................10
¿Cómo empiezo con JavaScript?...........................................................17
Conociendo a DOM: Parte I..................................................................26
Manual de MVC: (3) Los objetos View..................................................32
Mis primeros pasos con MongoDB.......................................................40
Introducción a Perl (Parte I).................................................................45
Introducción al desarrollo dirigido por pruebas..................................51
IPv6, el presente..................................................................................57
Pásate a GNU/Linux con Arch: Gestores de ventanas y escritorios........69
Invitación al proyecto GcalcTool: GNOME Calculator...........................79
Ubuntu Rookie: Toma 3........................................................................84

Y LAS SECCIONES DE SIEMPRE:
ASCII Art...................................................................... Pág. 86
Este mes: Homenaje Rock & Roll con Elvis Presley
Zona U!........................................................................ Pág. 87
La comunidad de nuestros lectores y lectoras

Créditos

Hackers & Developers Magazine es posible gracias al compromiso de:

Responsable de Proyecto

Eugenia Bahit

Responsables de Comunicación

Indira Burga (Atención al Lector) - Milagros Infante (Difusión)

Staff Permanente

Eugenia Bahit

Arquitecta GLAMP & Agile Coach

www.eugeniabahit.com

Indira Burga

Ingeniera de Sistemas
about.me/indirabm

Milagros Infante Montero

Estudiante de Ingeniería en Sistemas

www.milale.net

Laura Mora

Administradora de Redes y

Sistemas GNU/Linux

blackhold.nusepas.com

María José Montes Díaz

Técnica en Informática de Gestión

archninfa.blogspot.com.es

Colaboradores Estables

Redactores Voluntarios

Elizabeth Ramírez

(Ingeniera Electrónica)

Sergio Infante Montero
(Ingeniero Informático)

Celia Cintas

Eliana Caraballo

Yecely Díaz

(Maestra en Inteligencia Artificial)

Hackers & Developers Magazine agradece a los portales que nos ayudan con la difusión del proyecto:

Difusión

www.debianhackers.net

www.desarrolloweb.com

www.desdelinux.net

E-mail de Contacto:
[email protected]

Hackers & Developers Magazine – Año 0, Número 3 4

Twitter Bootstrap: un
elegante, intuitivo y
poderoso framework



N
G
I
S
E
D
B
E
W
E
V
I
S
N
O
P
S
E
R



¿Buscas un framework que te permita hacer magia en
tus desarrollos? Conoce a Twitter Bootstrap y
sorpréndete con la cantidad de cosas geniales que
puedes hacer. Cómo el
Responsive Web Design
combinado con esta herramienta te da a entender
gráficamente como puedes obtener un diseño para
gobernar a todos.

Escrito por: Milagros Alessandra Infante Montero (Est. Ing. Informática)

Estudiante de Ingeniería Informática. Miembro de APESOL
(Asociación Peruana de Software Libre) y de la comunidad de software
libre Lumenhack. Miembro del equipo de traducción al español de
GNOME. Apasionada por el desarrollo de software, tecnología y
gadgets. Defensora de tecnologías basadas en software libre y de
código abierto.

Webs:
Blog: www.milale.net

Redes sociales:
Twitter / Identi.ca: @milale

E

n los primeros días de Twitter, se usaban muchas librerías que fueran familiares
con los requerimientos del front-end pero había inconsistencias que dificultaban el
poder mantenerlos; y es cuando Bootstrap nació y creció significativamente.

Twitter Bootstrap es Software Libre con licencia Apache 2.0

¿Por qué Twitter Bootstrap?
Al inicio Bootstrap solo era CSS, pero a medida que pasó el tiempo ganó un rango de
características como declaraciones identadas, variables, operaciones y funciones de

color. Las ventajas más resultantes que tiene es su fácil implementación con solo
ponerlo en tu código y el poderoso CSS que contiene y cubre las necesidades del
desarrollo de la web.

Al ver en profundidad a Bootstrap encontraremos 7 archivos diferentes:

1. reset.less: Un restablecimiento CSS creado por Eric Meyer y modificado para

nuestro uso eliminando elementos innecesarios.

2. preboot.less: Variables de color y mixins para gradientes, transparencias y

transiciones.

3. scaffolding.less: Estilos básicos y globales para generar un sistema de red,

diseño estructural y plantillas de página.

4. type.less: Cabeceras, texto del cuerpo, listas, código y un sistema de tipografía

versátil y durable.

5. patterns.less: Elementos de interfaz repetibles como navegación, modales e
información sobre herramientas para llevarlo más allá de los estilos
predeterminados.

6. forms.less:

Estilos duraderos para diversos tipos de entrada, diseño de

formularios y estados de control.

7. tables.less: Estilos para datos tabulares en pantallas variadas.

Bootstrap funciona dando una solución clara y uniforme a las tareas de de interfaz de
cada día de los desarrolladores; se ha convertido en una de las muchas herramientas del
front-end en nuevas aplicaciones y sitios Web. Se usa para arrojar prototipos rápidos y
guía la ejecución de diseños mas sofisticados y esfuerzos de ingeniería más grandes. Es
el camino simple para aplicaciones altamente usables, limpias y rápidas.

Responsive web design con Twitter Bootstrap
Responsive web design es un enfoque, el cual debe cambiar tu manera de pensar. La
idea básica detrás es: un diseño para gobernarlos a todos (sí, como en el Señor de los
anillos, un anillo para gobernar a todos).

No m.tu-dominio.com; no touch.tu-dominio.com; no 3 archivos de CSS separados; no 7
archivos gráficos para cada dispositivo o cada orientación; solo “tu-dominio.com” tal
cual en plataformas de escritorio, tablets, Smart Phones, etc.

“One design to rule them all”

Twitter Bootstrap ofrece un montón de cosas increíbles:

•

Estilos globales para el cuerpo para restablecer tipo y fondo, estilos de enlace,

©2013 HDMagazine.org – Creative Commons Atribución NoComercial CompartirIgual 3.0 Unported

Pág. 5

sistema de red y dos diseños simples.

•

•

Estilos para elementos HTML comunes como tipografía, código, tablas,
formularios, botones, un conjunto de iconos, etc.

Estilos básicos para componentes de interfaz comunes como pestañas, alertas,
cabeceras de página y más.

• Plugins de JavaScript para cosas como información sobre herramientas, modales,

etc.

•

La más importante, es que es fácil de aprender y usar, ya que tiene muy buena
documentación y todos los ejemplos con los que un desarrollador puede soñar.

Empezando con Twitter Bootstrap
Al entrar a la página oficial1 descargamos la versión personalizada y luego de extraer el
paquete obtenemos lo siguiente:

milagros@joe:~code/bootstrap$ tree
.
├── css
│ ├── bootstrap.css
│ ├── bootstrap.min.css
├── js
│ ├── bootstrap.js
│ ├── bootstrap.min.js
├── img
│ ├── glyphicons-halflings.png
│ └── glyphicons-halflings-white.png
└── prueba.html

Para descargar Twitter Bootstrap, ingresa en http://twitter.github.com/bootstrap/

Por ejemplo, si tenemos un archivo HTML en blanco:

<!DOCTYPE html>
<html>

<head>

</head>
<body>

</body>

</html>

<meta charset="utf-8">
<title>Proyecto sin bootstrap</title>

<p>Nuestra página aún no es responsive</p>

Para tener ya Bootstrap en nuestro archivo debemos hacer la debida referencia al CSS y

1

http://twitter.github.com/bootstrap/



©2013 HDMagazine.org – Creative Commons Atribución NoComercial CompartirIgual 3.0 Unported

Pág. 6

al JS de Bootstrap:

<!DOCTYPE html>
<html>

<head>

</head>
<bo