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
Comentarios de: hd magazine 03 201301 (0)
No hay comentarios