Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Bootstrap
Bootstrap
Bootstrap
AUTORES:
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).
Bootstrap.
*n
MAQUETACIN
necesidades e intereses.
>>
www.redusers.com
ttfi#tfi
BOOTSTRAP
FORMULARIOS
de configurarlos.
CMS Y BOOTSTRAP
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
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
53
57
Bootstrap
60
Diselo fullwidth
61
Viewport
62
Ocultar contenido
63
Qu es Bootstrap?
12
La clase clearfix
65
Breve historia
13
67
13
Ejemplo prctico
68
14
Resumen
73
15
Actividades
74
HTML5
17
CCS3
22
Less
23
JavaScript
24
Componentes grficos
PH P
27
Tipografa
Resumen
29
Actividades
30
Iniciando Bootstrap
76
76
Encabezados
77
78
79
Blockquotes
81
32
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
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
181
Componentes de un formularlo
132
183
Cuadros de texto
132
Resumen
191
Textarea
133
Actividades
192
Checkboxes y radios
134
137
Configuraciones generales
138
Validacin de errores
138
CMS y Bootstrap
Control esttico
140
Qu es un CMS?
Desactivar campo
141
141
Los ms populares
Texto de ayuda
142
WordPress
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
en p,of undldad
Coleccionabl s
Cursos
tenstvos con
Revistas
Las ltimas tecnologas
exp cadas por expertos
..
. ewsletters
pr
con
Usershoo
U&eraho;uedu
c..ccm
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 .
Breve historia
13
Configuracin de un script...
25
13
Variables en JavaScript
26
El sistema de rejillas
(12 columnas)
14
15
,,. HTMLS
27
Variables en P H P
28
29
17
,,. Resumen
Estructura bsica
de una pgina HTMLS
,,. PHP
29
17
22
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,
,,.._ __ .,.._........
_'*_....,.
.....,.
..-
>>
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.
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
''
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.
Brackels
32
,,. Primera plantilla
35
Otras plantillas
46
48
Descargar Bootstrap
36
Instalacin
37
,,. Resumen
49
38
,,. Actividades
50
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:
e '"'
---,,= 9
"'==aa-
ltollll'
TheApache
Software Foundation
--
OPEN.
_....
Tkl A,ACMIE.
''
-----..,. -
TW.Ull FOUIIOATION
INNOVATION.
COMMUNITY.
,,. ..,AC
""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
,_,.""""'....a. .1uif""'
..... ,..,,
>>
www.redusers.com
t!bi#+fj
BOOTSTRAP
33
! ,_ . . . ,__
13 XAMPP Apache + MySQL + PHP + Peri
ml )av1pp
----.
, .... .,. .__,_, --._._
_ ..
,._. _ _..,.Y..,,.f,....,y
-
);lONf'P .. _
_ _._.......,_,
U1
Lool
---
dU__., e
_,_..
_________
......,
..
.,,. ""'
IWI',
,..._...
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
ml
.J' Con.'lg
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
1. 1 18 p,..
12 1 2J ,..
12 19 21 p r
12 1 l1 p r
(ma.nJ
1, 1!1 25 p,.
>>
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.
Ocultar contenido
63
La clase clearfix
65
68
JIJIJI
60
Disee fullwidth
61
Viewport.
62
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.
>>
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>
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
>>
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
,, 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
82
Thumbnails
99
,, Labels
82
,, Resumen .................................. 99
,, Badges
82
,, 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.
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>
..
/ea.-...,....., .
j?:
Ttulo h 1
Mn>
toflyGame
Factt'Ol>k
lighm1ngnewtab
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
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
Men
Navegadores Cnavs)
102
Paginacin
Migas de pan
Alertas
JIJIJI
111
Listas
115
Paneles
119
Resumen
125
Actividades
126
102
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.
>>
www.redusers.com
t!bi#+fj 103
BOOTSTRAP
Home
Trabajos
Contacto
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
Trabajos
Contacto
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
... Formularios
128
Validacin de errores
138
128
Control esttico
140
Formulario en lnea
129
Desactivar campo
141
Formulario horizontal
131
141
Texto de ayuda
142
... Componentes
de un formulario
132
Cuadros de texto
132
Textarea
133
Checkboxes y radios
134
143
... Resumen
147
... Actividades
148
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
Enviar
>>
www.redusers.com
t!bi#+fj 129
BOOTSTRAP
Ingrese su nombre:
tng8'>E su norrb<e
Enviar
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
ingrese su nombre
ingrese su apellido
Enviar
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
160
,, Actividades
176
150
ill
tlfi#,fJ
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
..........
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
<<
152
tlfi#,fJ
>>
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
183
178
Cabecera de la pgina
184
Imagen principal..
186
Mdulos de servicios
186
187
Pie de pgina
190
El administrador
de Joomla!
180
Instalacin
de Master Bootstrap
181
JIJIJI
Resumen
191
Actividades
192
178
tlfi#,fJ
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.
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
OetatlK de acceso a la
administracin
. ._,,,_,,..
. . .......,""."-1'0
.- ..........
... ...
""'' '""'
...,._...,...
Figura 2. Si la instalacin
se ha realizado correctamente,
veremos esta pantalla.
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.
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!
>>
------.
...--
-
_,
...
---
. .-.--..---.
. ..,_____..-
-_-...-,_.-r-.. ... ..._
>> NIVEL DE USUARIO
Intermedio/ Avanzado
ISBN: 978987-734-0495
>> CATEGORA
Desarrollo/ Internet/ Mobile
REOUSERS.com
PROFESOR EN NEA
9 789877 340495