catedra - diseño web responsivo - bootstrap

Vista previa del material en texto

Diseño Web Responsivo
Bootstrap
Programación y Servicios Web – APU 
plan 2008
Diseño Web Responsivo
 Ante los primeros smarthfone primeramente el
mercado reaccionó lanzando webs con dos
dominios, creando tanto versiones para escritorio
como para móviles.
 (del ingles Responsive Web Design) permite
diseñar Interfaces Web Responsivas (adaptables)
al dispositivo empleando HTML5 y CSS3.
 El consorcio W3C en 2008 saca el documento
“Mobile Web Best Practices” en el que define el
concepto “OneWeb”, un solo diseño web para
todos los dispositivos.
Conceptos claves
A nivel implementación Responsive Web Design
tiene tres conceptos claves.
 Primero es el uso de Media Queries que ofrece
CSS3 permite aplicar estilos condicionalmente en
base a parámetros del dispositivo.
 Segundo se trata del diseño web fluido de
layouts (esquema de la distribución de los
elementos dentro de una página web), definidos
en % que se ajustan al ancho de la pantalla.
 Tercero, se trata de elementos fluidos dentro de
estos layouts, ej. las fuentes, las imágenes, etc.
Aplicaciones nativas vs 
Aplicaciones Web
 App nativa: desarrollada para una plataforma
móvil concreta, tienen acceso a
funcionalidades del dispositivo (descargados
de markets oficiales, requiere instalación).
 Web app: disponible en Internet y se puede
acceder a través de cualquier navegador
móvil o de escritorio, Se desarrolla bajo
Javascript, CSS y HTML, no requieren
instalación.
 App hibridas: igual que las web apps pero
con capacidad de acceso a las
funcionalidades del dispositivo. Ej. Instagram.
Aplicaciones nativas vs 
Aplicaciones Web
 En una aplicación nativa cada plataforma móvil
dispone de su propio entorno de desarrollo y
lenguaje de programación (iOS emplea
Objective C, Android emplea Java)
 Esto implica un mayor coste para el
desarrollador de la aplicación y que esta no
será compatible con otras plataformas,
 Las aplicaciones webs emplean únicamente
HTML, CSS y Javascript funcionando en
cualquier navegador.
Media Querys
 Por ejemplo tomemos la siguiente mediaquerie: 
@media screen and (min-width: 480px) and (max-
width: 960px) {
…..} 
 Esta mediaquerie es una expresión condicional por el 
cual si se cumplen las condiciones que se 
especifiquen se aplicará el código CSS de la regla.
screen, print, son 
tipos de dispositivos
Frameworks front-end
 Suelen consistir en una estructura de
archivos y directorios de código estándar
divididos en elementos html, css y javascript.
 Nos proporcionan un código css para diseñar
nuestros layouts, generalmente basados en
grids o cuadriculas
 suelen contener definiciones de tipografía,
soluciones para el problema de las
incompatibilidades de los distintos
navegadores como reset css, y componentes
avanzados de interfaces de usuario.
Frameworks Bootstrap
 Uno de los frameworks más populares y
utilizados del mercado para la creación
de páginas responsive.
 Bootstrap es un conjunto de herramientas
proporcionadas por los creadores de Twitter
que nos aportan distintos widgets y estilos para
desarrollar con gran agilidad el front-end de
nuestras aplicaciones web.
Bootstrap – sistema de 
columnas
Se basa en la disposición o creación de una web en
base a columnas flexibles. Las cuales se escalaran
automáticamente al tamaño y posición adecuada
dependiendo del tamaño de la pantalla en la que se
renderiza.
Adaptación en funcion del 
ancho del Viewport
Bootstrap – Visibilidad y 
Ocultación
Bootstrap – código en 
acción.
Componentes responsive
Bootstrap incluye un completo conjunto
de componentes responsivos:
⚫ Barras de navegación
⚫ Botones
⚫ Formularios
⚫ Tablas
⚫ Desplegables
⚫ Y muchos mas…
Ref: https://getbootstrap.com/
https://getbootstrap.com/