TTULO:

Bootstrap

AUTORES:

Viviana Zanini y Luis Hereter

COLECCIN:

Seriado

FORMATO:

24 x 17 cm

PGINAS:

192

Copyright .i MMXV. Es una publicacin de Fox Andina en coedicin con DLAGA S.A. Hecho el depsito que marca la ley 11723.
Todos los derechos reservados. Esta publicacin no puede ser reproducida ni en todo ni en parte, por ningn medio actual o
futuro sin el permiso previo y por esenio de Fox Andina S.A. Su infraccin est penada por las leyes 11723 y 25446. La editorial
no asume responsabilidad alguna por cualquier consecuencia derivada de la fabricacin, funcionamiento y/o utilizacin de los
servicios y productos que se describen y/o analizan. Todas las marcas mencionadas en este libro son propiedad exclusiva de sus
respectivos dueos. Impreso en Argentina. Libro de edicin argentina. Primera impresin realizada en Sevagraf, Costa Rica 5226,
Grand Bourg, Malvinas Argentinas, Pcia. de Buenos Aires en XI, MMXV.
Imagen de tapa: www.freepik.es

ISBN 978-987-734-049-5

Zanini, Viviana
Bootstrap /Viviana Zanini; Luis Hereter - la ed. - Ciudad Autnoma de Buenos Aires:
Fox Andina; Ciudad Autnoma de Buenos Aires: Dalaga; 2015.
192 p.; 24xl7 cm. - (Seriada; 21>

ISBN 978-987-734-049-5
l. Informtica. l. Hereter, Luis 11. Ttulo

CDD 005.l

BOOTSTRAP

ttfi#tfi

Prlogo
Con el correr de los aos, la tecnologa web ha mutado
de diferentes formas, desde los primeros sitios web hasta las
pginas que vemos hoy en da con diseo adaptable. Hace algn
tiempo, cuando contbamos con mquinas estndar con
procesadores Pentium, no se usaba JavaScript, ya que provocaba
que la carga de la pgina web fuera ms lenta. Hoy, con los
procesadores estndar actuales podemos utilizar JavaScript
junto con otras tecnologas como HTMLS y CSS3; y hemos
pasado a realizar operaciones del lado del cliente y muy pocas
del lado del servidor, como se vena haciendo tiempo atrs.
Todo va cambiando de acuerdo al avance de la tecnologa.
El Adobe Flash, que se usaba hace apenas tres o cuatro aos,
ya no se usa ms. Programar para PC de escritorio ya no es
lo ms recomendado, porque ahora debemos hacerlo teniendo
en cuenta todo tipo de resoluciones de pantalla. En cuanto al
diseo, ocurri algo similar: vimos surgir sitios casi sin diseo,
pasamos por otros cargados de animaciones y gifs, hasta el
diseo actual, minimalista, con pocos colores y, a veces, hasta
con toda la informacin en una sola pgina.
Los programadores y diseadores web fuimos mutando
como la tecnologa. Si hay algo que aprend con los aos es a
no quedarme con un solo lenguaje de programacin. Ayer poda
ser Adobe Flash y hoy es JavaScript combinado con alguna otra
cosa. Quizs -como les digo siempre a mis alumnos- el
programador web sea el programador ms completo, ya que
en la Web constantemente todo cambia.
Presentamos hoy un libro destinado a programadores
y diseadores: para los programadores independientes que
no quieran depender de un diseador, para los diseadores
que no quieran depender de un programador y para los
programadores y diseadores que quieran trabajar en conjunto.
Bootstrap es una de las herramientas ms completas y ms
usadas para la creacin de sitios web. Espero que disfruten
de este libro tanto como nosotros disfrutamos de hacerlo.

''

Luis Hereter
www.redusers.com

<<

6 [lfi#;fj

PRELIMINARES

El libro de un vistazo
En este libro aprenderemos a utilizar las herramientas que nos
proporciona el framework de Bootstrap para desarrollar sitios web
que se adapten a cualquier dispositivo, ya sea un telfono inteligente,
una tablet o una computadora de escritorio, siguiendo el concepto
de diseo adaptable (responsive design).

comportamiento del framework de acuerdo

a las diferentes resoluciones de pantalla.
Nos introduciremos en los conceptos bsicos

Finalmente, realizaremos un ejemplo prctico

sobre diseo web adaptable. Conoceremos qu

aplicando el sistema de rejillas y todo lo

es Bootstrap y todas las posibilidades que nos

aprendido hasta el momento.

ofrece este framework. Realizaremos una breve

descripcin de las principales caractersticas de
HTML5, JavaScript y las hojas de estilo CSS3
y PHP, que emplearemos para trabajar con
Comenzaremos a explicar aqu los principales

Bootstrap.

componentes grficos que trae Bootstrap, que

nos permitirn crear la interfaz de la aplicacin:
tipografa, encabezados, formatos de prrafo,
tablas, botones, etiquetas, badges, imgenes
En este captulo aprenderemos a descargar e

e iconos. Presentaremos sus principales

instalar el framework de Bootstrap. Veremos

caractersticas y opciones de configuracin.

cmo instalar un servidor web en nuestra

computadora para poder probar los proyectos
que realizaremos. Adems, conoceremos
diferentes editores de texto y finalmente
realizaremos una plantilla bsica.

*n

MAQUETACIN

A travs de diferentes ejemplos, conoceremos

y aprenderemos a utilizar los componentes de
navegacin en Bootstrap: men de pestaas,
men de pldoras, migas de pan y paginacin.
Tambin aprenderemos a utilizar y configurar

Una vez creada la plantilla bsica,

barras de progreso, listas y paneles. Todos

comenzaremos a explicar cmo se utiliza

estos componentes nos permitirn personalizar

el sistema de rejillas de Bootstrap basado

nuestro sitio web y adaptarlo segn nuestras

en 12 columnas o rejillas. Veremos el

necesidades e intereses.

>>

www.redusers.com

ttfi#tfi

BOOTSTRAP

FORMULARIOS

En esta seccin, nos dedicaremos a conocer el

funcionamiento y la utilidad de los formularios,

En este apartado, crearemos un blog sencillo

que nos permitirn introducir datos para luego

dedicado a la programacin, donde nuestro

ser procesados en el servidor. Explicaremos sus

cliente deber agregar artculos sobre

diferentes componentes y las distintas maneras

diferentes lenguajes de programacin.

de configurarlos.

Para ello, utilizaremos el gestor de contenidos

Joomla! y la plantilla Master Bootstrap.

ON WEB it' it' it'

CMS Y BOOTSTRAP

Este captulo consistir en el diseo y armado de

Finalmente, realizaremos una introduccin a los

un portfolio. Utilizaremos el sistema de rejillas de

gestores de contenido (CMS). Explicaremos cul

Bootstrap y los diferentes componentes grficos

es su utilidad y qu necesitamos para instalarlos.

para el armado de las pginas que compondrn

Para terminar, conoceremos cules son los

el sitio. Explicaremos tambin cmo realizar los

gestores de contenido de cdigo abierto ms

distintos enlaces entre las pginas del sitio.

populares.

A lo largo de este manual, podr encontrar una serie de recuadros que le brindarn informacin complemen
taria: curiosidades, trucos, ideas y consejos sobre los temas tratados. Para que pueda distinguirlos en forma
ms sencilla, cada recuadro est identificado con diferentes iconos:

CURIOSIDADES
E IDEAS

ATENCIN

DATOS TILES

SITIOS WEB

Y NOVEDADES

www.redusers.com

<<

SUSCRIBETE a
eBooks USERS

Lee cientos de ttulos cuando y donde quieras

"' Accede al catlogo completo por una mtnima cuota mensual.

"' Contenidos extra: encontrars material complementario que
"' Lee todos nuestros eBooks en cualquier momento y lug.:ir:
enriquecer tu experiencia de lectura.
solo necesitas estar conectado a internet.
"' ta actualizacin es continua y te iremos informando
"' Sin limites de tiempo ni de cantidad: solo t decides cunto leer.
sobre los lanzamientos.
"' RedUSERS Responde!: servicio incluido en tu abono. Tus dudas "' Si el servicio no te resulta til, puedes darte de baja
resueltas por nuestros expertos.
fcilmente: sin preguntas ni cuestionamientos. GARANTIZADO.

8 [lfi#;fj

PRELIMINARES

Contenido
Sobre los autores
Pr I ogo . .. .... .. .. .. ..

4
.. ..

.. . .

.. .. .. .. .. .. . . . 5

Maquetacin

El libro de un vistazo

Qu es la maquetacin?

52

Informacin complementaria

Configuracin de filas y columnas

53

Cmo adaptar nuestro diseo?

57

Bootstrap

Dos prefijos de clase

60

Diselo fullwidth

61

Viewport

62

Ocultar contenido

63

Qu es Bootstrap?

12

La clase clearfix

65

Breve historia

13

Utilizar media queries

67

Qu es el diseo web adaptable?

13

Ejemplo prctico

68

El sistema de rejillas (12 columnasl..

14

Resumen

73

Frontend (lado del cliente)

15

Actividades

74

HTML5

17

CCS3

22

Less

23

JavaScript

24

Componentes grficos

PH P

27

Tipografa

Resumen

29

Actividades

30

Iniciando Bootstrap

Agregar tipografa propia

76
76

Encabezados

77

Cmo enriquecer el texto

78

Transformar texto utilizando clases

79

Blockquotes

81

Cambiar el color del texto segn

Crear un servidor con XAMPP

32

Sitio web oficial

35

Labels

82

Descargar Bootstrap

36

Badges

82

Instalacin

37

Tablas

83

Distintos editores

.38

Botones

90

Sublime Text.

39

Iconos

97

Brackets

39

Imgenes

98

Primera plantilla

46

Resumen

49

Resumen

Actividades

50

Actividades

>>

www.redusers.com

el tipo de contenido

Thumbnails

82

99
99
100

ttfi#tfi

BOOTSTRAP

Componentes generales

Organizacin

151

Men principal

153

102

Pie de pgina

Navegadores {navs)

102

Pgina principal

160

Opciones para configurar nuestro men

104

Biografia

164

Paginacin

107

Trabajos

167

Migas de pan

109

Contacto

174

Alertas

110

Resumen

175

Barra de progreso

111

Actividades

176

Llstas

115

Paneles

119

Resumen

125

Actividades

126

Men

158

._

Ejemplo prctico
con Master Bootstrap
178

Bootstrap y CMS

Formularios

Instalacin de Joomla!

178

El administrador de Joomla!

180

Formularios

128

Instalacin de Master Bootstrap

181

Componentes de un formularlo

132

Configuracin del proyecto

183

Cuadros de texto

132

Resumen

191

Textarea

133

Actividades

192

Checkboxes y radios

134

Listas desplegables {comboboxes)

137

Configuraciones generales

138

Validacin de errores

138

CMS y Bootstrap

Control esttico

140

Qu es un CMS?

Desactivar campo

141

Cmo funciona un CMS?

Tamaf!o de los campos

141

Los ms populares

Texto de ayuda

142

WordPress

Ejemplo prctico: formulario de ingreso

143

Joomla!

Resumen

147

PrestaShop

Actividades

148

Moodle

MediaWiki

Drupal

Resumen

Ejemplo prctico:
diseo de un portfolio
Diseflo

10

Actividades

150

www.redusers.com

<<

RedUSERS
MElORATUPC
La red de productos sobre tecnolo.gia ms
importante del mundo de habla hispana
ibros

Desarro los temticos

en p,of undldad

Coleccionabl s

Cursos

tenstvos con

gran desarroflo vasu a

Revistas
Las ltimas tecnologas
exp cadas por expertos

..

. ewsletters

Reg strese en redusers com

para reabir un resumen con
las nmes noticias

RedUSRS PRE IUIA

u

pr

con

Nuestros productos en versin gita ccn

conten do adicional y a precios ncrefbtes

Usershoo

U&eraho;uedu

c..ccm

Revistas. r os y fascfcu1os a un cilc de

d stancta y con entregas a todo el mundo

Bootstrap
En este primer captulo, definimos qu es Bootstrap y cmo
fue desarrollado. Aprendemos en qu consiste el diseo web
adaptable y cmo funciona el sistema de columnas en Bootstrap.
Luego explicamos qu es el front-end o interfaz de usuario y,
por ltimo, realizamos una breve descripcin de las principales
caractersticas de HTMLS, JavaScript y las hojas de estilo CSS3
y PHP que emplearemos para trabajar con Bootstrap .

... Qu es Bootstrap? .............. 12

,,. JavaScript ............................. 24

Breve historia

13

Configuracin de un script...

25

Qu es el diseo web adaptable?

13

Variables en JavaScript

26

El sistema de rejillas
(12 columnas)

14

Frontend Ciado del el iente)

15

,,. HTMLS

27

Variables en P H P

28

Utilizar archivos externos

29

17

,,. Resumen

Estructura bsica
de una pgina HTMLS

,,. PHP

29

17

,,. Actividades ............................ 30

,,. CCS3

22

,,. Less ...................................... 23

JIJIJI

12

tlfi#,fJ

1. BOOTSTRAP

Qu es Bootstrap?
Bootstrap es un framework creado por el equipo de desarrollo
de la red social Twitter para realizar interfaces web adaptables
(responsive web design) a cualquier dispositivo, ya sea una tablet,
un telfono o una PC de escritorio. Esto quiere decir que la interfaz
se adapta automticamente a cualquier tamao y resolucin de pantalla
sin que el usuario tenga que modificar nada.
El framework utiliza hojas de estilo css, combinadas con el lenguaje
de programacin JavaScript (que veremos ms en detalle al final
de este captulo) y, adems, es compatible con la mayora de los
navegadores web, como Google Chrome, Mozilla Firefox y Safari.
Bootstrap es un software libre, por lo que los usuarios tienen
la libertad de usarlo, mejorarlo y distribuirlo libremente.

--

,.. ....
----

_,, ,

Tecnolog,a -

1..
. "-'"'"'.. .
=

,__,,.. ----.....
____
-------.. -
,,,.Ntw1lpll--.UIMAIII1dtlllf1

--

.. ....

:-_,__,. . .-.

------ - - - . .w.---------_.
------------ - -

.1

CJbt"""'-...,;1i.;.. ...

..

oi.),,IIV.lffl1ill:OOOS,e -kllfnttjo,

,,.._ __ .,.._........

_'*_....,.

.....,.

..-

Figura 1. Un mismo sitio web, visualizado en un monitor (arriba),

en una tablet (izquierda) y en un telfono inteligente (derecha).

>>

www.redusers.com

BOOTSTRAP

t!bi#+fj 13

Breve historia
Bootstrap fue creado en 2011 por Mark Otto y Jacob Thornton,
del equipo de desarrollo de la red social Twitter, con el fin de crear
un estndar de desarrollo interno a travs de un framework que utilice
JavaScript y CSS3. Antes de Bootstrap se utilizaba un conjunto de
libreras que resultaban inconsistentes y cuyo mantenimiento costaba
mucho trabajo a los desarrolladores. Con esta nueva herramienta,
no solo se le dio ms consistencia a la realizacin de proyectos web
internos sino que tambin se ahorr mucho tiempo en el desarrollo
de estos proyectos.
En agosto del mismo ao, sali la primera versin como cdigo
abierto en GitHub y, en febrero de 2012, Bootstrap se convirti en el
proyecto ms popular de desarrollo web.

Qu es el diseo web adaptable?

Antes de que profundicemos en el concepto que maneja el
framework de Bootstrap, tenemos que entender qu es el diseo
web adaptable o, en ingls, responsive web design (RWD).
Con el correr de los aos, la tecnologa creci y actualmente,
a diferencia de aos anteriores, hay ms tablets y telfonos inteligentes
que computadoras de escritorio. Es decir que disponemos de tamaos
y resoluciones de pantallas diferentes y, para que los sitios se visualicen
bien en cada uno de estos dispositivos, los diseadores o programadores
deben adaptar el formato de sus sitios web a cada una de las pantallas
disponibles en el mercado. Por esto surge la necesidad de desarrollar
un formato de sitio web estndar que se adapte a todos los tamaos y
resoluciones de pantalla: es all que surge el concepto de "web adaptable".

Un framework o marco de trabajo es un entorno para el desarrollo de aplicaciones que nos ayuda a
resolver, en forma rpida y eficaz, un determinado problema. utiliza un conjunto de libreras y mdulos
y le proporciona al desarrollador la opcin de reutilizar cdigo que es de uso comn y, de esta forma,
enfocarse en resolver solo el problema. Entre los frameworks ms conocidos est Django, utilizado para
el desarrollo web, y jQuery, para el desarrollo de JavaScript.

www.redusers.com

<<

14

tlfi#,fJ

1. BOOTSTRAP

Podramos definir al diseo web adaptable como la tcnica que

nos permite disear pginas web que pueden ser visualizadas
perfectamente en todos los dispositivos disponibles. Gracias a este tipo
de diseo, ya no necesitamos programar o disear una pgina web para
cada tipo de dispositivo existente en el mercado, ya que el sitio web
se adaptar automticamente al tamao, resolucin y orientacin del
dispositivo que estemos utilizando para acceder. La pgina web detecta
desde qu dispositivo se est conectando el usuario (mediante cdigo
de programacin) y elige la versin que ms se adapte a la resolucin
de pantalla de este.

El sistema de rejillas (12 columnas)

Para hacer que un sitio web se adapte a todo tipo de pantalla, ya sea
una tablet, telfono inteligente o computadora de escritorio, Bootstrap
utiliza un sistema de 12 columnas -llamadas tambin rejillas o
grids- para adaptar el contenido de la pgina
web a las distintas resoluciones y tamaos de
los dispositivos que pueden utilizarse.
EL SISTEMA DE
Por ejemplo, si diseamos una pgina web
12 REJILLAS PERMITE
basada en cuatro columnas, cuando accedemos
a ella desde una tablet, el contenido puede
ADAPTAR UN SITIO
reorganizarse a tres columnas, o a una sola si
WEB A DISTINTAS
lo hacemos desde un telfono inteligente.
En Bootstrap, ese sistema de columnas
RESOLUCIONES
lleva un prefijo de clase (que veremos en el
Captulo 3) compuesto por cuatro tamaos
diferentes, de acuerdo al dispositivo para el cual
se est programando. Por ejemplo, si tenemos

''

Es un servidor que nos permite alojar proyectos y trabajar en equipo junto con otros desarrolladores.
Tambin nos sirve para contribuir en el desarrollo de proyectos de otros. Para utilizarlo
tenernos que crear una cuenta gratuita y subir nuestro cdigo. Tambin posee un controlador de versiones
que nos permite saber quin modific nuestro proyecto, cundo y en qu parte del cdigo lo hizo.

>>

www.redusers.com

,,,,,,,,,,,,,,,

Iniciando Bootstrap
En este segundo captulo, observamos cmo funciona la
pgina web oficial del proyecto Bootstrap y cmo aprovechar
sus recursos. Tambin aprendemos todo lo necesario para
instalar Bootstrap en nuestra computadora y utilizarla como
un servidor web. Como vamos a necesitar utilizar un editor,
presentamos distintas alternativas gratis, como Sublime Text
y Brackets. Finalmente, hacemos nuestra primera plantilla
y conocemos otros modelos disponibles.

,,. Crear un servidor

con XAMPP

Brackels

32
,,. Primera plantilla

,,. Sitio web oficial

35

Otras plantillas

46
48

Descargar Bootstrap

36

Instalacin

37

,,. Resumen

49

38

,,. Actividades

50

,,. Distintos editores

Sublime Text...

JIJIJI

39

39

tlfi#,fJ

32

ill

2. INICIANDO BOOTSTRAP

Crear un servidor
con XAMPP
Ya conocimos qu es y para qu sirve Bootstrap. Ahora, para
comenzar a utilizar este framework, lo primero que tenemos que hacer
antes de instalarlo es tener un servidor web que nos permita alojar all
nuestros proyectos web. De esta manera, podremos probar y ver los
resultados de nuestros scripts sin necesidad de tener un hosting.
Para utilizar un servidor web en nuestra computadora y probar
los proyectos que vamos a realizar a lo largo de todo el libro,
recomendamos instalar Apache (www.apache.org).
Apache es un servidor web que soporta diferentes plataformas
y puede trabajar perfectamente con PHP, Python y Peri, entre otros
lenguajes de programacin.
Hay en la actualidad varios programas que nos permiten instalar
Apache en nuestras computadoras. Dependiendo del sistema operativo
que utilicemos, podemos optar por los siguientes:

WAMP (Windows, Apache, MySQL y PHP)

MAMP (Mac, Apache, MySQL y PHP)
LAMP (Linux, Apache, MySQL y PHP)
XAMPP (X-cualquier sistema operativo-, Apache, MySQL, PHP y PERL)
,l(lf"c....:-,... ..

e '"'

---,,= 9

"'==aa-

ltollll'

TheApache

Software Foundation

--

Communltylod dovelopment slnce 1999.

OPEN.

_....

Tkl A,ACMIE.

''

-----..,. -

TW.Ull FOUIIOATION

..... ,....... Plfl

t''IJIG

INNOVATION.

COMMUNITY.

,,. ..,AC

W1E CONtlllEJt OU!llta.'111

""o.lK1'1Allf OU""
tobnllt!:1U,1.,_..
,......
.,......,.

.,...,,..._

.....,.,J.J.. ,-

,_

'blltlilD11elil

APACHE PROJECTS
n..'jfil'.le""';,..;f"... ollJl!J. .ofl,!:i..u ...._,ocb.allillll'lii...:l\"'llwl.,:,o;w.i,_.,,...,...,.dll'dogid.f-i''\-O.
Ma.oli1'1Oti-OptllS.--'lo.i.6.:t.(50(nQr.i._
IOdldlll---""--PCl'>w,tcll,o.

FEATUREO PROJECTS

qvelodty

APACHE VEl.OCITY TOOL$

,_,.""""'....a. .1uif""'

\'oh:irrl'...... ,l\'tlo>riN<1..,._ ...

,)litMioA15 ... lt..'r'.)Or\foll'IJ'b ......
\tlroldne:bc,di,All

..... ,..,,

Figura 1. Podemos encontrar ms informacin sobre

Apache en su sitio web oficial: www.apache.org

>>

www.redusers.com

t!bi#+fj

BOOTSTRAP

33

Entre varias opciones de programas que nos sirven para instalar

Apache, en este libro optamos por uno de los programas ms
conocidos y populares, XAMPP, que cuenta con todos los requisitos
que necesitamos para armar nuestro servidor web.
XAMPP es un software de distribucin de Apache gratuito que
pertenece a la organizacin Apache Friends. Como bien se indica
en su pgina web oficial, es fcil de instalar y contiene, entre otros
componentes, MySQL, PHP y Peri.

! ,_ . . . ,__
13 XAMPP Apache + MySQL + PHP + Peri

ml )av1pp
----.
, .... .,. .__,_, --._._
_ ..
,._. _ _..,.Y..,,.f,....,y
-

);lONf'P .. _

_ _._.......,_,

U1
Lool

New XAMPP w,th

PHP5519&563
vers,ons

---
dU__., e

_,_..
_________
......,

..

.,,. ""'

IWI',

,..._...

Figura 2. Sitio web oficial de la organizacin Apache Friends,

en el que se distribuyen de forma gratuita las distintas versiones
disponibles de XAMPP: www.apachefriends.org/esjindex.html
Para instalarlo, una vez que ingresamos al sitio oficial, podemos
optar por descargar el archivo de instalacin desde la barra de men
principal presionando la opcin Descargar, o desde la pantalla principal
del sitio, tal como se observa en la Figura 2.

Un servidor web es un programa que nos permite alojar sitios web y transferir esos datos por medio
del protocolo HTIP. Estos datos son accedidos por medio de un navegador web; es decir que nos
permiten visualizar pginas web a travs de un navegador, como Chrome o Safari, entre otros. Estos
servidores deben ser alojados en un ordenador con conexin a Internet. El servidor web ms utilizado en
la actualidad es Apache.

www.redusers.com

<<

tlfi#,fJ

34

2. INICIANDO BOOTSTRAP

De acuerdo a nuestro sistema operativo -al momento de escribir

este libro-, contamos con la versin para:

Windows versin 5.6.6 (PHP 5.6.3)

Linux versin 5.6.6 (PHP 5.6.3)

OS X versin 5.6.6 (PHP 5.6.3)

Una vez que descargamos el archivo de instalacin de XAMPP,
procedemos a instalarlo como cualquier otro programa, siguiendo
las instrucciones de instalacin. Entre otras cosas, nos preguntar qu
componentes queremos instalar y en qu directorio se instalar XAMPP.
Al finalizar el proceso de instalacin veremos que, en el caso
de Windows (WAMP), se instala una carpeta en el directorio C:
(suponiendo que es nuestro directorio principal del sistema operativo),
denominada xampp. En el caso de Linux (LAMP), generalmente se
instala en el directorio opt/lamp y, en OS X (MAMP), nos va a crear
un directorio xampp en el directorio principal del disco, con un acceso
directo a la carpeta htdocs en Aplicaciones.
XAWil Control Panel "32 1 ( Compli.d: M1y 71h 2013 J

ml

.J' Con.'lg

XAMPP Control Panel V3.2.1

Modules

Servico

- r:,

Module

Pll)is)

Port{s)

Apacl,9

41J
4320

80. 443

MySOL

3280

3306

Adions

Netotal

Start

Adm:

Config

l.og

.. Help

si..

Adm!

Con6g

L.og,

I.Old

Stop

Admn

Conf,g

l.ogs

Admln

Conf>g

Config

Log

File.lila

Start

,...,cury
Tome

..

III Shel
I

Explo,l

Cnecklng IOt prorequ,cltoc

Ali proroqu,,ts lound
lnl1lahz.n9 Modu'tc
S1an,ng Clitcl< Ttmtr

1. 1 18 p,..
12 1 2J ,..
12 19 21 p r
12 1 l1 p r

(ma.nJ

1, 1!1 25 p,.

(J S1atu3 change deteted runmng

Conttol Panel Rudy

Ant"'ll,ng 10 mn Apacl,t app
(ApadltJ
Slocuc chango dotoctod n,nrung
(my.QIJ Attompting to ,ton MySOL app
(Apkllo)

Figura 3. Siempre que trabajemos con un servidor web,

debemos verificar que el servicio est activo. De lo contrario,
nos dar error al querer acceder a una URL que tengamos alojada.
Una vez que instalamos el servidor, para alojar nuestras pginas web
siempre las crearemos en el directorio C:\xampp\htdocs. Como podemos

>>

www.redusers.com

,,,,,,,,,,,,,,,

Maquetacin
En este captulo, conocemos la maquetacin web;
aprendemos a utilizar Bootstrap a partir de un diseo
y a configurar las filas y las columnas del framework.

Tambin vemos cmo se comporta Bootstrap en diferentes

resoluciones de pantalla, aprendemos a ocultar contenido y
conocemos qu son las media queries. Por ltimo, realizamos
un ejemplo a partir del contenido visto en el captulo .

... Qu es la maquetacin? ...... 52

Ocultar contenido

63

La clase clearfix

65

... Configuracin de filas

y columnas ........................ 53

... Cmo adaptar

... Utilizar media queries ........... 67

... Ejemplo prctico

68

nuestro diseo? ...................... 57

JIJIJI

Dos prefijos de clase

60

Disee fullwidth

61

Viewport.

62

... Resumen ....................... 73

Actividades

74

52

tlfi#,fJ

3. MAQUETACIN

Qu es la maquetacin?
La maquetacin web, o tambin llamada diagramacin web,
consiste en la distribucin y organizacin de los distintos elementos
de nuestra pgina web a partir de un diseo. Por ejemplo: dnde
y qu contenido va en las cabeceras o pie de pgina, qu artculo
poner, dnde y qu enlaces va a tener el men principal, cmo van a
estar distribuidas las imgenes, cuntos documentos HTML vamos
a necesitar, entre otras cosas.
Tenemos que considerar que todo empieza por el diseo. Este es
realizado por los diseadores grficos mediante programas como
Adobe Photoshop o Adobe Illustrator.
Los programadores web antiguamente empleaban las etiquetas
HTML -etables-e/table para maquetar; hoy, se utilizan las etiquetas
<div><ldiv> conjuntamente con hojas de estilo (CSS). Todo proyecto
web que nos pidan desarrollar podemos realizarlo tambin mediante
Bootstrap, utilizando el concepto de filas y columnas que maneja
muy bien este framework. Con Bootstrap obtendremos un resultado
final idntico al que nos puede llegar a pasar un diseador grfico
y, a su vez, podremos hacerlo adaptable a cada dispositivo, si es
que as nos lo piden.
Por ltimo, una vez que tenemos el diseo y luego la maquetacin
del sitio web, solo nos resta programarlo para crear la interactividad
entre el usuario y el servidor.

Figura l. Ejemplo de sitio web maquetado con Adobe Photoshop.

>>

www.redusers.com

BOOTSTRAP

t!bi#+fj 53

Configuracin
de filas y columnas
Para realizar una buena maquetacin de un sitio web es necesario
entender cmo funciona en Bootstrap el concepto de filas y columnas.
Toda fila y columna debe ir siempre en un contenedor que se
adapta al ancho de la pantalla, que puede tener un ancho fijo o
un ancho variable. Para eso, debemos utilizar la clase container
o container-fluid, respectivamente.
Un contenedor no es ms que una etiqueta <div><ldiv> que nos va a
servir para que podamos agregar nuestras filas y columnas al diseo.
Por ejemplo, si queremos utilizar un contenedor fijo -es decir,
basado en pixeles-, empleamos el siguiente cdigo:
-cdiv class="container">
<ldiv>

Si, en cambio, queremos que el contenido de nuestra pgina ocupe

el 100 % del ancho del dispositivo en el que estamos visualizando la
pgina, emplearemos el siguiente cdigo:
-cdiv class="container-fluid">
<ldiv>

las etiquetas de HTML <div><ldiv> se utilizan para definir una seccin o contenido especfico.
Unida a las hojas de estilo (CSS}, podemos darle a esta seccin una ubicacin dentro de nuestra
pgina web, as como configurar su tamao, color, tipo de letra, entre otras cosas. En HTML5,
muchas secciones que se realizaban con esta etiqueta fueron reemplazadas por etiquetas
nuevas, como -esecttcns-e/sectlon y <footer><ffooter>, entre otras. De esta manera, queda ms
organizado el contenido de nuestro sitio web.

www.redusers.com

<<

54

tlfi#,fJ

3. MAQUETACIN

Cada fila en Bootstrap ocupa 12 columnas que representan el

ancho total de la pantalla dividido en 12. Estas tienen un espacio
de 15 px por lado, es decir, un total de 30 px, dado que cada columna
tiene dos lados. El contenido de cada columna tiene un margen
tambin de 15 px.
Para cada fila hay que agregar un <div><ldiv> con la clase row, como
podemos observar en el siguiente ejemplo:
-cdiv class="container">
-cdiv class="row">
<fdiV>
<ldiv>

Dentro de cada fila tenemos que agregar las columnas, siempre de

acuerdo a lo que necesitemos y teniendo en cuenta que el total de las
mismas es siempre 12. A cada columna tenemos que aplicarle el prefijo
de la clase, ya sea .col-xs, .col-sm, .col-md o .col-lu, de acuerdo al ancho
de la pantalla del dispositivo, tal como veremos ms adelante en este
mismo captulo.
Por ejemplo, si necesitamos poner en nuestro sitio web tres
imgenes, tenemos que colocar en una fila solamente cuatro columnas,
porque 4 es el resultado de dividir 12 sobre 3. Entonces, para la
primera imagen, tenemos un ancho de cuatro columnas, al igual
que para las imgenes restantes.

Figura 2. La suma de todas las columnas no puede superar el total de 12.

>>

www.redusers.com

Componentes grficos
En este captulo, conocemos los principales
componentes grficos que nos ofrece el framework
y sus diversas formas de utilizacin: tipografa, tipos

de encabezados, formato de prrafos, tablas, botones,

etiquetas, badges, imgenes e iconos.

,, Tipografa
Agregar tipografa propia

76

Opciones de estilo

84

76

,, Encabezados ...................... 77
,, Cmo enriquecer el texto ... 78

,, Botones

90

Tamao

91

Agrupar botones

92

Botones desplegables

94

Transformar texto
utilizando clases

79

Btockquotes

81

,, Imgenes ................................. 98

Cambiar el color del texto

segn el tipo de contenido

82

Thumbnails

99

,, Labels

82

,, Resumen .................................. 99

,, Badges

82

,, Actividades ..................... 100

,, Tablas ................................... 83

JIJIJI

,, Iconos ................................. 97

76

tlfi#,fJ

4. COMPONENTES GRFICOS

Tipografa
Bootstrap cuenta con una gran variedad de tipografa para los
componentes que forman el framework, pero tambin tenemos la
opcin de agregarla nosotros mismos, como veremos a continuacin.

Agregar tipografa propia

En caso de que por algn motivo quisiramos cambiar la tipografa
y utilizar alguna que no incluya el framework, lo que debemos hacer es
crear nuestro propio estilo y enlazarlo en el eheadse/heads de la pgina
HTML, siempre por debajo del llamado al estilo propio de Bootstrap:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/
css/bootstrap.min.css">
<link rel="stylesheet" href="css/miEstilo.css" type="text/css" I>

Adems, en la hoja de estilo miEstilo.css tenemos que agregar

la fuente y el vnculo a esta:
@font-face {
font-family: "mi Fuente";
src: urlUmiFuente.ttf) format("truetype");
}

Al final, para utilizarla solo tenemos que hacer un llamado a nuestra

fuente; si fuera un ttulo <hl><lhl>, quedara de la siguiente forma:
hl { font-family: "miFuente", sans-serif !important;}

La palabra reservada "important" se utiliza en hojas de estilo (CSS) para darle ms importancia a
algunas propiedades y, de esta forma, ignorar el estilo general de nuestra pgina web para considerar
uno propio. Se debe colocar en el valor de la propiedad en la hoja de estilo, antes del punto y coma. Por
ejemplo: fontsize: 20px !important;.

>>

www.redusers.com

t!bi#+fJ 77

BOOTSTRAP

Encabezados
Como bien sabemos, HTML dispone de seis encabezados, que
se organizan por tamao e importancia del 1 al 6. As, por ejemplo,
<hl><lhl> es un ttulo de tamao grande y de mucha importancia,
que nos servir para un encabezado principal.
<hl> Ttulo hl<lhl>
<h2> Ttulo h2<1h2>
<h3> Ttulo h3<1h3>
<h4> Ttulo h4<1h4>
<h5> Ttulo h5<1h5>
<h6> Ttulo h6<1h6>

Si quisiramos agregar un subtexto a ese mismo ttulo,

debemos utilizar la etiqueta esmalbe/smalb, y el cdigo quedara
de este modo:
<hl> Ttulo hl csmalbEste es un subtexto del Ttulo hl<lsmall><lhl>

El subtexto tendr el 80 % del tamao de la etiqueta que lo contiene.

..

/ea.-...,....., .
j?:

Aplicaciones l'JEo:rMenY.lboc:t "Helramfer

Ttulo h 1

Mn>

toflyGame

Factt'Ol>k

lighm1ngnewtab

Este es un subtexto del Ttulo h1

Figura 1. En Bootstrap se pueden utilizar subtextos dentro de la misma

etiqueta HTML ch 1> </h 1> con la etiqueta csma 11 > </ sma11 >.

Si quisiramos modificar algn archivo con extensin .less, como cualquier otro archivo del proyecto que
no tenemos en la descarga del framework, debemos ir a la pgina principal de Bootstrap en GitHub:
https://github.com/twbsjbootstrap. All podemos descargar el proyecto con todos los archivos sin
compilar para modificar a nuestro gusto.

www.redusers.com

<<

78

tlfi#,fJ

4. COMPONENTES GRFICOS

Cmo enriquecer el texto

El tamao del texto en Bootstrap es de 14 px, tanto para prrafos
<P><IP> como para todo el contenido en general. El interlineado
tline-helqhtt es de 1.428 con un margen (margin-bottom) de 10 px.
Las variables que manejan el tamao de la tipografa son dos y estn
incluidas en el directorio variables.less; una para el tamao de la letra
base (@font-size-base) y otra para el interlineado (@font-height-base).
Contamos con un conjunto de etiquetas que podemos emplear para
enriquecer nuestros textos. A continuacin veremos algunas de ellas.
Si queremos destacar algn prrafo, el framework cuenta con
la clase lead, que puede ser aplicada en el prrafo, como podemos
observar en el siguiente ejemplo:
-cpc-Prrafo normal sin aplicar ninguna clase-op
<P class="lead">Prrafo con la clase leadc/p

Para destacar algn texto utilizando negrita, debemos utilizar

la etiqueta <strong><lstrong>:
-cpc-Prrafo normal cstronqctexto resaltado con la etiqueta strong <lstrong><IP>

Con la etiqueta <em><lem> obtenemos texto en cursiva:

-cpc-Prrafo normal -cemstexto en cursiva con la etiqueta em <lem><IP>

Para texto subrayado debemos utilizar la etiqueta <U><IU>:

-cpc-Prrafo normal custexto subrayado utilizando la etiqueta u <lu><IP>

Prrafo normal texto con ta etiqueta smal

Pttrrafo normal txto rs.aldo con l.l tiqu@t3 strong

Prrafo normal texto en curstve con la ellqueta em

Prrafo normal texto subravado

ubltzando ta @tiouera u

Figura 2. Ejemplos
de estilos que pueden ser
aplicados en nuestros textos.

>>

www.redusers.com

Componentes generales
En este captulo aprendemos cmo crear un men de
navegacin utilizando botones y herramientas disponibles
en el framework. Vemos qu es una paginacin y cmo
armarla. Tambin explicamos cmo utilizar migas de pan
y cmo configurar mensajes de alerta. Por ltimo, creamos

barras de progreso y configuramos listas y paneles.

Men
Navegadores Cnavs)

102

Paginacin
Migas de pan
Alertas

JIJIJI

111

Listas

115

Paneles

119

Resumen

125

Actividades

126

102

Opciones para configurar

nuestro men

Barra de progreso

104

107
109
110

102

ill

tlfi#,fJ

S. COMPONENTES GENERALES

Men
Un men consiste en un conjunto de tems a partir de los cuales los
usuarios pueden acceder a una pgina web o realizar una determinada
tarea previamente programada por el sistema.
Para realizar un men desplegable en Bootstrap, tenemos que utilizar
la clase de JavaScript dropdown. Para ello, es conveniente tener enlazadas
las libreras correspondientes de JavaScript, como ya vimos en el
Captulo 2 y subsiguientes. En este ejemplo, el enlace es por CON:
-cscript src="http://code.jquery.com/jquery-2.l.3.min.js"><lscript>

Recordemos que las libreras deben ser incluidas antes del llamado
a la librera de Bootstrap, para hacer uso de las clases que nos
proporciona JavaScript.

Navegadores (navs)
Una variedad de mens son los navegadores (en ingls, navs),
que nos permiten ir de una pgina a otra. Para esto, debemos utilizar
la clase .nav, combinada con algn otro prefijo de clase de acuerdo al
resultado que queramos mostrar, como pueden ser pestaas o pldoras.

Pestaas de navegacin
Las pestaas de navegacin, tambin conocidas como solapas
(en ingls, tabs), le permiten al usuario navegar y ver contenido
sin tener que cambiar de ventana.
Pestaa A

Pestaa B

Pestaa e

Pestaa

Titulo de la pestaa A
Contenido de la pestaa A.

Figura 1. La navegacin por pestaas nos permite agregar contenido

ms organizado a nuestro sitio web sin tener que cambiar de pgina.

>>

www.redusers.com

t!bi#+fj 103

BOOTSTRAP

Para poder realizar una pestaa de navegacin en Bootstrap, a la

clase nav tenemos que agregarle el prefijo de clase nav-tabs, dentro de una
lista HTML <Ul><IUI>. En las etiquetas HTML de la lista <li><lli> vamos a
escribir el ttulo y enlace de las diferentes pestaas de nuestro navegador.
El siguiente cdigo muestra un ejemplo de pestaas de navegacin:
<UI class-vnav nav-tabs">
<li class="active"><a href="#">Home<la><lli>
-clb-ca href="#"> Trabajos<la><lli>
<I b-ca href=" #">Contacto<la><II i>
<IUI>
Tambin podemos aprovechar la opcin para que una de las
pestaas est activa con la clase active dentro de las etiquetas <li><lli>,
como lo hicimos en el ejemplo anterior.

Home

Trabajos

Contacto

Figura 2. Tres pestaas con Bootstrap, en las que se puede

apreciar la pestaa Trabajos que se encuentra activa
mostrando su contenido gracias a la clase active.

Pldoras
El men pldoras (en ingls, pil/s) es muy parecido al men de
pestaas de navegacin. La diferencia radica en que este tipo de men
muestra cada opcin como si fuera un botn (o pldora), en lugar de
mostrar el recuadro de pestaas.

Cuando realizamos una barra de navegacin para dispositivos mviles, generalmente esta se encuentra
minimizada y, al tocarla, se despliega y muestra las opciones de nuestro men. Si queremos cambiar el
punto de ruptura para que se vea minimizada a partir de un determinado ancho de nuestra pgina y no en
el estndar que nos ofrece el framework, tenemos que modificar el valor de la variable del archivo Less
@gridfloatbreackpoint.

www.redusers.com

<<

104

tlfi#,fJ

S. COMPONENTES GENERALES

Para crear un men de navegacin de pldoras tenemos que agregar

la clase .nav-pills. De esta forma obtendremos un men muy parecido a
los mens tradicionales realizado con botones.
<UI classevnav navpills">
<I i classe" active" ><a href=" #11 > H ornec/aec/l i>

dbca href="#"> Trabaiosc/acotb

<I bca href=" #11 >Contacto<la><II b<ful>

Agregando la clase active veremos cmo ese enlace de nuestro men

aparece como activo o seleccionado.
<li class="active"><a href=" #">Home<la><lli>

Trabajos

Contacto

Figura 3. El men pldoras se obtiene

agregando la clase nav-pi 11 s.

Opciones para configurar nuestro men

Para dejar nuestro men de navegacin fijo en la parte superior de la
pgina, debemos utilizar la clase navbar-static-top.
enav ctassvnavbar navbarstatictop" role="navigation">
<lnav>

Esto har que nuestro men est ubicado en la parte superior, pero
si hacemos scroll, desaparecer. En cambio, si queremos que quede fijo
y no desaparezca, debemos utilizar la clase navbar-fixed.
Si queremos que los enlaces de la barra de navegacin se muestren
a la derecha de la pantalla, debemos utilizar la clase pull-right; si
queremos que aparezcan a la izquierda, la clase pull-left.
<UI classevnav navpills pullright">
<li class="active"><a href="#">Home<la><lli>
clbca href="#"> Irabaiose/asc/lb

>>

www.redusers.com

,,,,,,,,,,,,,,,

Formularios
Aprendemos en este apartado qu son los formularios
y cmo utilizarlos en Bootstrap. Conocemos sus distintos

componentes y las distintas maneras de configurarlos.

Por ltimo, vemos un ejemplo prctico de cmo armar
un formulario de ingreso de usuarios, utilizando iconos
y el sistema de columnas del framework .

... Formularios

128

Validacin de errores

138

Formulario vertical o bsico

128

Control esttico

140

Formulario en lnea

129

Desactivar campo

141

Formulario horizontal

131

Tamao de los campos

141

Texto de ayuda

142

... Componentes
de un formulario

132

Cuadros de texto

132

Textarea

133

Checkboxes y radios

134

... Ejemplo prctico:

formulario de ingreso

143

... Resumen

147

... Actividades

148

Listas desplegables (comboboxes) .137

... Configuraciones generales .... 138

JIJIJI

128

ill

tlfi#,fJ

6. FORMULARIOS

Formularios
Un formulario se utiliza para recibir datos del usuario. Estos luego
son enviados y procesados en el servidor con un lenguaje como, por
ejemplo, PHP.
Todo formulario debe tener un mtodo de envo (method) y una ruta
al archivo en el servidor en donde se van a procesar esos datos (action).
En este libro hablaremos del envo de datos a un servidor utilizando el
lenguaje de programacin PHP, aunque el concepto nos va a servir para
todos los lenguajes que procesan datos del lado del servidor.
Un formulario bsico en HTML tiene la siguiente estructura:
<form actione" archivo.php" method=" POST">
<!Contenido del formulario >
dabel for="nombre">lngrese su nombre: <llabel>
<input type="text" name="nombre" placeholder="ingrese su nombre">
clBotn para el envo de datos >
<input type="submit" valuee" Enviar">

c/form

En este ejemplo, el formulario cuenta con un control HTML input del

tipo text, en donde el usuario debe ingresar su nombre y despus hacer
clic en el botn Enviar, para mandar esos datos que ingres al servidor
para ser procesados por medio del lenguaje de programacin PHP.
Ingrese su nombre:

Enviar

Figura l. Formulario simple

en HTML sin Bootstrap.

En Bootstrap, contamos con tres tipos de diseo de formulario:

vertical o bsico, en lnea y horizontal.

Formulario vertical o bsico

Para crear un formulario de este tipo debemos utilizar la clase
form-control que nos va a permitir agrupar los distintos componentes
del formulario. Por defecto, estos toman el estilo de Bootstrap, pero

>>

www.redusers.com

t!bi#+fj 129

BOOTSTRAP

agregndoles algunas clases podemos modificar el comportamiento de

los componentes del formulario. A continuacin, podemos observar el
mismo formulario de la Figura 1, pero esta vez utilizando el framework:
<form actione=archlvo.php" method="POST">
<!Contenido del formulario >
cdiv classe=formqroup?
clabel for="nombre">lngrese su nombre: c/labeb
<input type="text" name="nombre" classe=formcontro!"
placeholder="ingrese su nombre">
<ldiv>
cdiv class="formgroup">
clabel for="apellido">lngrese su Apellido: <llabel>
<input type="text" name="apellido" ctasseform-control"
placeholder="ingrese su apellido">
<ldiv>
clBotn para el envo de datos >
<input type:11submit11 classe=btn btndefault" value=" Enviar">
<lform>

Ingrese su nombre:

tng8'>E su norrb<e
Enviar

Figura 2. Formulario bsico creado mediante Bootstrap.

Observando el cdigo anterior, vemos que la clase form-group nos
permite agrupar cada elemento label con su correspondiente input. Si
agregamos la clase from-control a un componente -como, en nuestro
ejemplo, a los componentes input- le estamos proporcionando una
anchura del 100 % a dicho componente.

Formulario en lnea
Los formularios en lnea (en ingls, inline form) tienen la
particularidad de que todos sus componentes se encuentran
en una lnea. Este tipo de formulario se utiliza cuando tenemos
www.redusers.com

<<

130

tlfi#,fJ

6. FORMULARIOS

que trabajar para espacios reducidos, como tablets o telfonos

inteligentes, generalmente en medidas con un ancho inferior a 768 px.
Para crear un formulario en lnea debemos utilizar la clase form-inline,
directamente en la etiqueta de creacin del formulario HTML <form>
<lform>. Si tambin Je aadimos a cada label la clase sronly, ocultamos
las etiquetas y de esta forma ocupamos menos espacio en pantalla. Al
emplear esta clase debemos utilizar la propiedad placeholder.
cforrn action=" aren ivo.php" rnethode" POST" classe" forminl ine" >
<!Contenido del formulario >
cdiv class="formgroup">
clabel

classe=sr-only" for="nombre">lngrese su nombre: c/labeb

<input type="text" nameevnombre" classe=forrncontrol"

placeholder="ingrese su nombre">
<ldiv>
cdiv class="formgroup">
clabel classevsr-only" for="apellido">Ingrese su Apellido: /labeb
<input type="text" name="apellido" class="formcontrol"
placeholder="ingrese su apellido">
<ldiv>
<!Botn para el envo de datos >
<input type="submit" class="btn btndefault" value="Enviar">
<lform>

ingrese su nombre

ingrese su apellido

Enviar

Figura 3. Los formularios en lnea nos sirven cuando

estamos programando para resoluciones con espacios reducidos.

Placeholder se puede traducir al espaol como "marcador de posicin". La propiedad placeholder nos
sirve para darle al usuario una sugerencia de qu es lo que queremos que escriba en un campo de texto
del formulario. Esa sugerencia o ayuda aparecer dentro del campo de texto como marca de agua.
De esta forma, nos permite ahorrar espacio, por lo que se recomienda su uso en telfonos inteligentes.

>>

www.redusers.com

,,,,,,,,,,,,,,,

Ejemplo prctico:
diseo de un portfolio
A travs de un ejemplo sencillo, vemos cmo disear y armar
un sitio web partiendo de un diseo recibido. Aprendemos
las distintas formas de diagramar el sitio web, as como el
armado de las diferentes pginas. Explicamos cmo realizar
los distintos enlaces entre las pginas del sitio y finalmente
aprendemos a realizar una pgina de contacto utilizando
un formulario en Bootstrap.

JIJIJI

,, Diseo

150

,, Biografia

164

,, Organizacin

151

,, Trabajos

167

,, Men principal

153

,, Contacto

174

,, Pie de pgina

158

,, Resumen

175

" Pgina principal

160

,, Actividades

176

150

ill

tlfi#,fJ

7. EJEMPLO PRCTICO: DISEO DE UN PORTFOLIO

Diseo
El diseo y armado de nuestra pgina web de ejemplo consistir
en un portfolio, esto es, un sitio en el que un diseador grfico
muestra todos sus trabajos en fotografa, dibujo y editorial. El sitio
tendr tambin una pgina de contacto para realizar consultas o
pedidos de presupuesto. Para poder realizar el portfolio, tenemos
que tener en cuenta que todo comienza con el diseo. Para esto,
partiremos de un diseo que, si bien est incompleto, ya que es solo
a modo de ejemplo, nos servir para ver cmo podemos trabajar
utilizando el framework. Una vez que terminemos este ejemplo,
tendremos la posibilidad de armar nuestra propia web o bien, a partir
de un diseo, diagramar la estructura HTML utilizando Bootstrap.

-- """"""""' .. - -- _.,_

Bienvenidos a mi sitio!
"

,.w

..........

Figura 1. Diseo de un sitio web de portfolio

realizado en Adobe Photoshop.

Un portfolio (o portafolio, en espaol) no es ms que la muestra de trabajos (ya sea en fotos o con
enlaces a pginas web) realizados por un diseador grfico, diseador web o fotgrafo, entre otros.
Es como si fuera un currculum vitae en donde se puede acceder a los trabajos ms importantes
realizados por el profesional. Por esta razn, es lo ms recomendado para darse a conocer en la
Web o conseguir clientes.

>>

www.redusers.com

t!bi#+fj 151

BOOTSTRAP

Organizacin
Para comenzar a trabajar, lo primero que tenemos que hacer
es organizarnos. La organizacin consiste en, simplemente, armar
los directorios del proyecto para que, una vez terminado, se pueda
entender con facilidad en dnde estn los archivos que lo componen.
Tambin es importante tener organizado el proyecto para trabajar en
equipo, ya que no todos trabajamos de la misma manera. Por eso es
mejor estandarizar la forma de trabajo, para que sea entendible en
futuras versiones o por diferentes desarrolladores.
Al directorio principal de nuestro proyecto lo vamos a llamar
portfolio, y es ah en donde vamos a ubicar todos los archivos
y carpetas que lo van a componer. Tambin debemos crear una
carpeta css para agregar nuestros propios estilos CSS, ms all del
estilo principal que utilicemos con las libreras de Bootstrap -que
llamaremos por medio de CON (red de entrega de contenidos)-;
un directorio para incluir los archivos PHP, que podemos llamar
inc; y, por ltimo, un directorio de imgenes compuesto por varias
carpetas de acuerdo a la categora de imgenes que necesitemos,
al que llamaremos img. En caso de que trabajemos con los archivos
que componen el framework de Bootstrap, podemos utilizar una
carpeta llamada js, pero, como dijimos anteriormente, el enlace
lo haremos por medio de CON.

--

P """-01f(1,-- ........

.
..,
.'........

,..--..

-...
" --..

,_

11

Figura 2. La organizacin del directorio de nuestro

proyecto nos permite trabajar ms fcil y cmodamente.
www.redusers.com

<<

152

tlfi#,fJ

7. EJEMPLO PRCTICO: DISEO DE UN PORTFOLIO

La manera en la que trabajaremos, teniendo en cuenta la estructura

de los directorios que hemos creado, va a ser la siguiente: en el
directorio principal crearemos un archivo llamado index.php que ser
el encargado de contener la informacin principal del sitio con los
diferentes enlaces a otros directorios:
<!DOCTYPE htmb
chtml lang="es">
<head>
<meta charsel="utf8">
<meta name="viewport" contente=widthedevicewidth, in ltialscaleel " >
<title>M i portfol iootltle
<! Bootstrap >
<I ink rel=" stylesheet" href=" https://maxcdn.bootstrapcdn.com/boot
strap/3 .3.4/css/bootstrap.m in.css" >

-ctink rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/

bootstrap/3.3.4/css/bootstraptheme.min.css">
<link rel="stylesheet" hrefe" css/esti lo.css" type=" texVcss">
<! jQuery >
cscript src="http://code.jquery.com/jquery2.l .3.m i n.js" ><lscri pt
cscript src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/
bootstrap.min.js"><lscript>
<lhead>
<body>
<?php
include 'inc/cabezal.php';
include 'inc/detalle.php';
include 'inc/pie.php'
<lbody>
<lhtml>

Como podemos observar en el cdigo, toda la estructura dentro

de la etiqueta HTML -cheads-e/head es igual a lo que estuvimos viendo

>>

www.redusers.com

,,,,,,,,,,,,,,,

Ejemplo prctico
con Master Bootstrap
En este captulo, explicamos cmo funciona el gestor de
contenidos Joomla! con Bootstrap y, mediante un ejemplo,
vemos cmo instalar la ltima versin y configurar su idioma.
Luego seguimos algunos pasos para instalar la plantilla
Master Bootstrap y comenzar a configurar nuestro proyecto.
Aprendemos cmo crear el men principal, el pie de pgina
y el contenido principal de nuestro sitio web.

Bootstrap y CMS
Instalacin de Joomla!

178

Armar una hoja de estilo propia

183

178

Cabecera de la pgina

184

Imagen principal..

186

Mdulos de servicios

186

Imgenes en la parte central

187

Pie de pgina

190

El administrador
de Joomla!

180

Instalacin
de Master Bootstrap

181

Configuracin del proyecto ... 183

JIJIJI

Resumen

191

Actividades

192

178

tlfi#,fJ

8. EJEMPLO PRCTICO CON MASTER BOOTSTRAP

Bootstrap y CMS
Desde el lanzamiento de Bootstrap, casi todos los gestores de
contenido o CMS (que veremos en detalle en el Captulo OnWeb)
se han adaptado y permiten utilizar este framework. Esto les
brinda a los desarrolladores herramientas para poder utilizar y
crear el sistema de rejillas del CMS, haciendo de esta forma que el
sitio web se adapte a todos los dispositivos, utilizando sus clases,
componentes y estilos.
Como la mayora de los gestores de contenido, Joomla! se vio
afectado con el lanzamiento de Bootstrap. Es por eso que desde la
versin z.x nos permite incorporar el framework y, actualmente,
con la ltima versin, 3.x, Jo hace de manera ptima, porque
directamente Jo incorpora en el ncleo, creando la librera JUI
Uoomla User Interface; en espaol, 'interfaz para usuarios Joomla').

Instalacin de Joomla!
Para comenzar a trabajar en este nuevo proyecto web, lo primero
que necesitamos es descargar del sitio oficial de Joomla! su ltima
versin disponible (al momento de realizar este libro, la 3.4.3).
Para descargarlo, ingresamos a: www.joomla.org/download.html
Tambin, desde la misma web, vamos a necesitar instalar el idioma,
que por defecto es el ingls. Para esto, tenemos que ir al men
principal y hacer clic en Extend y Juego seleccionar la opcin Translation.
Dentro de esa pgina hacemos clic en Joomla! 3.x Translation Packs
y luego buscamos el idioma que deseamos instalar; en nuestro caso,
el espaol. Al hacer clic sobre Spanish, nos lleva a la pgina del
proyecto, desde donde vamos a poder descargar la traduccin.
Una vez que descargamos Joomla!, descomprimimos el archivo
y Jo ubicamos en el directorio local de nuestra computadora, donde
tenemos instalado XAMPP. Vamos a denominar ejemplo2 a la carpeta
con el contenido de Joomla!. De esta forma, nos queda un directorio
parecido o igual al siguiente: C:\xampp\htdocs\ejemplo2
Para ejecutar el programa, debemos escribir en nuestro navegador
la URL del sitio; en este ejemplo: http://localhost/ejemplo2
Una vez que ingresamos a esa direccin, seguimos los pasos que
nos indica el asistente y, al finalizar, tendremos instalado Joomla! 3.

>>

www.redusers.com

t!bi#+fj 179

BOOTSTRAP

Joomla!"

-. -"'-------. . . -.Oo---

mm

-- _E.,..,

COnflgut"aCIII prlnC.ipal

__

_
"'

_ ....,11

.,........

w-a_..,...,.

__.... .,.oJI"
'

,. .
,

. . . .-.. -......

__

___

___. . _ ...
...... _
u

e,.;._.. _

--

Figura 1. Al comenzar
la instalacin, veremos
una pgina como la que
se puede apreciar aqu.

En la primera pantalla de la instalacin, debemos configurar el nombre

del sitio (en nuestro caso, Ejemplo2), una descripcin general para los
motores de bsqueda, el e-mail del administrador y una contrasea que
siempre debemos recordar para administrar la web.
El segundo paso, de gran importancia, es la configuracin de la base
de datos. Seleccionamos primero qu tipo de base de datos vamos a
utilizar (en nuestro caso, MySQL) y despus nos pedir su hospedaje:
puede ser la direccin IP, o bien, como la base se encuentra en el mismo
servidor, LocalHost. Luego debemos colocar nuestro usuario y contrasea.
Tambin completamos el nombre de la base de datos: en nuestro caso,
base_joomla. Por ltimo, el prefijo que tendrn las tablas: amxuf_.
Finalmente, en el paso 3 (finalizacin) de la instalacin de Joomla! se
nos pregunta si queremos cargar datos de ejemplo predeterminado o
simplemente queremos la instalacin vaca sin ningn dato. En nuestro
caso, la vamos a dejar vaca; por lo tanto, hacemos clic en el tem Ninguno.
Para finalizar, antes de comenzar la instalacin, Joomla! nos mostrar
un resumen de toda la configuracin general de nuestra web. Chequeamos
que est todo correcto y hacemos clic en el botn Instalar que se encuentra
situado arriba a la derecha de la pantalla.

j..DIRECCINIP

La direccin IP (IP address) es un nmero nico e irrepetible que se utiliza para identificar
a una computadora que se encuentra conectada a una red de computadoras que utilizan el protocolo IP
(Internet Protoco. Esta direccin consiste en un conjunto de cuatro nmeros del O al 255, separados
por puntos, como por ejemplo 200.32.124.130.

www.redusers.com

<<

180

tlfi#,fJ

8. EJEMPLO PRCTICO CON MASTER BOOTSTRAP

Antes de finalizar la instalacin, y si tenemos conexin a Internet,

podemos proceder a instalar el idioma para nuestro sitio (en nuestro caso,
el espaol). Presionamos el botn Paso extra: Instalar idiomas, luego, en la
ventana que se abre, seleccionamos la opcin Spanish (espaol) y el botn
Siguiente. En la ventana que se abre, donde aparecen las opciones para la
administracin y el idioma predeterminado para el sitio, seleccionamos
nuevamente Spanish (espaol).
kJoornla!"
hlicM:Sadosl Ahcna Joomt.a:' ya ost.a Instalado

OetatlK de acceso a la

Joomtl! en su prcp.., kBoma o

administracin

creacan do un sitio multiidioma

bsico

. ._,,,_,,..
. . .......,""."-1'0
.- ..........

... ...

""'' '""'

...,._...,...

Figura 2. Si la instalacin
se ha realizado correctamente,
veremos esta pantalla.

En el caso de no poseer conexin a Internet, podemos configurar

el idioma desde la administracin del CMS, usando el archivo que
bajamos del sitio oficial de Joomla! al comienzo de la instalacin.
Finalmente, debemos borrar la carpeta de instalacin: podemos
hacerlo manualmente, en el directorio principal de nuestro sitio web,
o bien haciendo clic en el botn Eliminar carpeta de instalacin.

El administrador de Joomla!
El administrador de nuestro sitio web creado en Joomla! es la
herramienta ms importante, ya que nos permitir configurar el sitio y
agregarle contenido. Para acceder a l, debemos aadir a la direccin
URL de nuestra web el directorio para referendario (administrator).
En nuestro ejemplo: http://localhost/ejemplo2/administrator
Al acceder vamos a encontrar una pantalla de logueo, en
donde tendremos que completar nuestro usuario y contrasea de
administradores, que son los que configuramos al instalar el sitio web.

>>

www.redusers.com

Bootstrap
Este libro est destinado a programadores, diseadores y toda persona que posea cono
cimientos bsicos sobre programacin web (HTML, JavaScript y CSS) y quiera aprender a
utilizar las herramientas que nos proporciona este framework para la creacin de sitios
web responsive. Con explicaciones sencillas y ejemplos prcticos, el lector aprender a
utilizar la herramienta ideal para desarrollar, de manera simple y rpida, sitios web que
se adapten a diferentes dispositivos y pantallas.

* EN ESTE LIBRO ENCONTRARA:

/ Introduccin: diseo web adaptable (responsive web design) y el sistema de columnas. Caractersticas bsicas de
HTML5, JavaScript. Hojas de estilo CSS3 y PHP / Instalacin: crear un servidor con XAMPP Editores de texto Sublime Text

y Brackets. / Maquetacin: configuracin de las filas y las columnas. Uso de media queries. / Componentes grficos:
tipografa, tipos de encabezados, formato de prrafos, tablas, botones, etiquetas, badges, imgenes e iconos.
I Componentes generales: Armado de la estructura del sitio. Creacin de un men de navegacin. Configuracin
de la paginacin. Migas de pan, mensajes de alerta, barras de progreso, listas y paneles. I Formularios: creacin y
configuracin./ Ejemplos prcticos: gestores de contenido (CMS) y su integracin con Bootstrap. Diseo de un portfolio.
Instalacin y configuracin de Joomla ! . Presentacin de la plantilla Master Bootstrap de Gonzalo Suez.

Bienvenidos a mi sitio!

1,c,,..... ._...111*",.,,of,,erlMtf,..:,pi,c"II". "'"-'111- 91;'!'01111"'51"1,

._.. ..,m "'"'w.,11, ..,.; mt11

>>

------.

...--
-
_,
...
---
. .-.--..---.
. ..,_____..-
-_-...-,_.-r-.. ... ..._
>> NIVEL DE USUARIO
Intermedio/ Avanzado

SOBRE LOS AUTORES

Luis Hereter es analista de sistemas
de computacio, profesor de Sistemas
y desarrollador de aplicaciones
mviles y de escritorio.

Mis mejores traba,os t.to11C1P1to:1..,...,.,1o11

Viviana Zanini es analista de

sistemas de computacin y profesora
de Informtica. Ha sido autora de varias
publicaciones en esta misma editorial.

ISBN: 978987-734-0495

>> CATEGORA
Desarrollo/ Internet/ Mobile

REOUSERS.com

En nuestro sitio podr encontrar noticias

relacionadas y tambin participar de la comunidad
de tecnologa ms importante de Amrica Latina.

PROFESOR EN NEA

Ante cualquier consulta tcnica relacionada

con el libro, puede contactarse oon nuestros
expertos: [email protected].

9 789877 340495