OES J CURSO VISUALY PrACTICO 1D DY acodkoMmacolan<-1ike ms backend Sitios multiplataforma con Bootstrap Elementos HTML \ Iconos, meniis y navegadores \ Barra de progreso \ Alertas B © EA @® ax © O Ost rau(BES S5FF curso VISuAL Y PRACTICO Reh WEB Full Stack oY Vane icedsnesiKe| backend Direccion Edioial ——_Atancién a eer, Miguel Lodertremer —_suseripcionasy ventas Cae usershop@redusers com rs 454011) 4110-8700 Nv +52-58-8821-9560 Publicidad [email protected] Produceion giafiea —_*544011/41108700, Gustavo De Matteo Fernando jam ‘Autor Fernando Luna tinue Argenta Cp Von Ravwaink ch ssn. Ee 9 tr 108 io Bare el S441) 4506 964/008 er De ‘altplnas Si Q6NPie Sie Pea 122 Cy 1SSEM, Ben As tO 4806-018 been DF rea itcaS ACN, hte? Ieee ache Pda a Get, el 35068 Mein ler Coi sists de ptirs Ibes iss SA CV ‘Gr 58D Col Gras ei, Deeps: UTADA Ds eal CC ono Tel 512-267. Pane Cebu Skea SA fasta Paar E35 pa 2a ee Lr StT 1290 rem 21 ray Ex SAL, Prey 102, engi e230 9% oP Vea Derbi Carrs Bou Aas Eco Bo oe as 23% SN. cue al La PaGaL 88212-40840. Go veuay rics Sie Toc, at zit; Fox oa S16 Novore do 180,130, CTSOBE, Gund Auipona do Bucs Avs. Arges Fata Wain mgt © WANA 255-85 Ts cos enact pb ropes nen par inmate pas pep de ‘sacar we sume esa ara iy ile crac eta das cura yo lain els nies yas ese ace, {nano pct at atv ean pn bss ab ue eres We, UE lo PR SAENGER SSS. (ae 225 yh, un aa Ac oral Poe tah. Ren area. R iva iysselanoe 011-4110-8700 | USERSHOP.REDUSERS.COM ae ea coo) 12 Sitios multiplataforma con Bootstrap GI Sitios multtiplataforma: Bootstrap EIB Elementos HTML en Bootstrap IB Iconos, mends y navegadores BEI Alertas HIG Barra de progreso HIE Listas en grupo HIE Migrer la web UsersLife CONTENIDO ADICIONAL ONLINE Codigo fuente, elementos graficos utilizados en los ejemplos y otros contenidos adicionales se pueden descargar en redusers.com/u/programadorwebSitios multiplataforma: Bootstrap Hasta ahora, hemos atravesado las diferentes Instancias que forman las bases de un desarrollador ‘web nativo. ATMLS, CSS, JavaScript y @mediaQueries son las herramientas més fuertes con las que podemos contar cuando se trata de desarrollar un sitio web ‘multiplataforma, Pero, dentro de la faceta full stack, es ‘muy comiin encontrarse con diferentes empresas tanto desarrolladoras de software como clientes que, para acelerar aiin mas los tlempos de creacién de sitios y aplicaciones web, se vuelcan al uso de frameworks que ‘optimicen la ereacién del frontend o interfez.grafica Estos le permiten, al desarrollador web, enfocar sus fuerzas en la logica, la base de datos y los web services, {que pueden llegar a conformar una aplicacion, y despreocuparse por la estética o el comportamiento responsivo que la aplicacién web necesite tener. ¥en la actualidad, una de las herramientas més populares que permite solventar estos puntos importantes en una web es Bootstrap. REDUSERS Bi PROGRAMADOR WEB Full Stack éQué es Bootstrap? Bootstrap es un framework creado por el equipo de desarrollo dela red social Twitter para realizar Interfaces web adaptables (responsive web design) a cualquier dispositivo, ya sen una tablet, un teléfono buna PCde esritorio. Esto quiere decir que la nterfax se adapta a cualquier tamaio y resolucién de pantalla sin la intervencién del usuario, Ena Imagen 01, podemos apreciar el sitio de Twitter (www:twitter:com) visualizado desde Google Chrome, en sus tres versiones: web, tablet y mobile. Siempre utilizamos Chrome, en principio en modo normal, yy luego a través de las herramientas para el desarrollador, activando CTRL*SHIFT*M, para invocar el visor responsive que integra este médulo de Chrome, Alli podemos ver ema se comparta una misma webs, emuldndola en las plataformas méviles. Imagen, Podemos probar el Aiseho responsivo de Twitter.com desde las herramientas para desarrollador de nuestro navegador web,Para que Twitter se comporte asf, Bootstrap fue el cencargado de facilitar la tarea responsiva para todas: las plataformas, La creacién de esta herramienta por parte del equipo de desarrollo de Twitter faclité la ‘area de llevar una plataforma web, de forma arménica, alas diferentes interfaces y pantallas que actualmente existen en el mercado. Queda todo en familia Para hacer una plataforma totalmente compatible con los navegadores web mas populares, el equipo de desarrollo de Bootstrap aris la igiea de las clases aque conforman su interfz,uilzanda holes de esta CSS y JavaScript. De esta maneta, se garantiza que os navegadores web se comporten de a forma més estable posible cuando deben cargar un sitio web creado con este framework. Ea FRAMEWORKS rapida y concisa el desarrollo de aplicaciones as. Bootstrap, Jquerymobile, Create JS, Foundation y HTMILS boilerplate son algunos de los frameworks responsivas més populares, Sino funciona el modo responsivo en Chrome, cambiemos el UserAgent desde el apartado Network Conditions. Breane x © 9 0 0 [0 emmmmemntonpiten Theme example This Buttons oI - ow ESOC - template showeasing he optonal theme stylesheet included in Bootstrap. Use ‘tsa staring point o reate something more unique by building on or mexsyng it \magen 02, Las web oficiales de ‘frameworks, como Bootstrap, son siempre jor ejemplo para robar cuén efectiva es la hherramienta. Tables Ba Clase 12 Sitios multiplataforma con BootstrapFilosofia responsiva de Bootstrap Para responder de manera eficienteen lo que se refierea sitios responsivos, Bootstrap utiliza un sistema conocido como 12 columnas (0 rejillas). Este permite adaptar el contenido de una pagina web a Jas diferentes resoluciones de pantalla que puedan presentarse durante el acceso aun sitio web. Amayor ancho de pantalla, I distribucién de contenido en las diferentes rejillas se podra. visualizar a lo ancho de ella. A medida que la pantalla se va achicando, cada celda componente de la rejilla se ublcaré en una siguiente fila, reardensndose automaticamente Para poder lograr esto, se define de manera predeterminada un ancho especifico que represente a cada tipo de pantalla, Las pantallas con un ancho ‘menor a 768px son tomadas como pantallas de celulares; las que se ubican entre 768px,y 991px son interpretadas como tablets, y las mayores a 992px xyason definidas como pantallas de equipos de excritorio. Cada una de estas pantallas invocard a una clase determinada dentro de un archiva .CSS, para poder adaptar facilmente los componentes y la interfaz de Bootstrap, y que esta se vea de manera 6ptima enel display del equipo donde la web fue invocada, Cuando Bootstrap carga la hoja de estilos correspondiente a Ja pantalla identificada, no solo define el ancho de los componentes internos de la web o la distribucién en filas de estos. También se ‘ocupa de redefinir el tamaiio de fuentes de estilos HTML y el detalle de estilos de los componentes, ‘entre otros tantos cambios aplicados. C6émo integrar Bootstrap Existen diferentes maneras de integrar Bootstrap a nuestros desarrollos web, Veamos las mds comunes a instalandola desde NodelS; linstalindola desde Bower; i descargando y referenciando los archivos localmente; i referenciando el framework a través de un CDN valido, ELindicador 12 columnas (o rejillas) refiere al maximo posible que Bootstrap acepta. Podemos disefiar webs de tan solo 4 0 6 columnas. REDUSERS Ei PROGRAMADOR WEB Full Stack Bootstrap para estructurar_ _un sitio web responsivo.Nuestra opeién para desarrollar las explicaciones do esta clase serd referenciando el framework desde un CDN vilido. En este script, creamos la funcién muestroAlertal). En lla agrogamos un if que se encarga de buscar que exista la clase contenedorDeAlorta, Si existe, ejecuta sabre esta ‘ol método append|), agregando ol div correspond que sera el alerta de la ausencia de disponibilidad de la ‘seccién donde el usuario i ‘modificamos la clase CS5style, agregando el atributo splay, que visual El ltimo paso que nos queda es establ ‘contenedorDeAlerta er, sobre una, valert alert-danger alert- class=‘close’ ~hidden="true’>étimes;la seccitoacute:n encuentra disponible por el momento.