Contenido responsive con Foundation

Clase 15 de 45 • Curso de Frontend con Bootstrap y Foundation 2016

Resumen

Añadamos contenido responsive.

Vamos a insertar un mapa que en desktop sea un mapa interactivo, pero en movile solo sea una imagen estática para esto usaremos interchange.

Recuerda:

El orden en que agregues los elementos en interchange importa.

Los navegadores no permiten intentar acceder a otro sitio desde un archivo, por esto debemos usar un servidor web.

David Camacho

student•

Para hacer contenido repsonsive design con Foundation, vamos a utilizar el atributo 'data-interchange', con este atributo podemos indicarle que valores va a tomar, partiendo desde small, continuando con medium y finalizando con large. Debemos llevar el orden indicado anteriormente, ya que Foundation parte desde el concepto de Mobile First.

El data-interchange le vamos a pasar valores de la misma manera que un array, es decir dentro de corchetes [] y separandolos por coma ',' de la siguiente manera:

data-interchange="[valor, small],[valor, medium],[valor, large]"

En caso de que se omita alguno de los tamaños, ejemplo medium o large, pues tomara como referencia el valor anterior, debido a que Foundation parte del concepto de Mobile First.

Ejemplo 1:

En este ejemplo vamos a mostrar una imagen diferente para cada tamaño.

Ejemplo 2:

Este es el ejemplo de la clase, en este ejemplo el documento mapa-small.html lo unico que vamos a guardar es una etiqueta de <img src="assets/mapa.png"/> con una imagen por dentro

Mientras que en el documento mapa-medium.html, vamos a guardar la etiqueta iframe que nos da google al momento de compartir un mapa.

Si corremos el Ejemplo #2, vamos a ver que no funciona.. Esto se debe a que no se puede realizar un request desde un archivo HTML, debido a que en el assets/mapa-medium.html, estamos accediendo a google desde un archivo estatico de nuestro PC y los navegadores no permiten hacer eso, no podemos embeber un iframe en un archivo y luego acceder a el.

Para ello vamos a hacer uso de la herramienta serve, para ello es necesario tener:

NodeJS
NPM

Luego de tener instalado NodeJS en nuestro pc, podemos ir a NPM y buscar la herramienta serve de tjholowaychuk, basicamente es un servidor local que nos sirve los archivos emulando un servidor web, de esta manera podemos acceder al index.html dentro de un servidor web y eso si nos permite realizar un request fuera.

Procedemos a instalarlo desde la consola, con el comadno: npm install -g serve

Una vez instalado, nos posicionamos en el directorio donde tenemos el archivo de nuestro proyecto, y ahi vamos a ejecutar el comando: 'serve .'

Donde . es la ubicacion actual y nos va a simular un servidor desde ahi.

Vicente

student•

El gusto y la curiosidad por lo desconocido, por aquello que no se ve, me hizo ser un forofo del bakend. Las bases de datos... esas cosas tan extrañas... ahí es donde Julián triunfa. No solo ahí, claro, es un fenómeno. No obstante, creo que Julián tiene pendiente algo con nosotros, los alumnos: demostrarnos que el backend no sólo es hermoso y gratificante sino que no tiene porqué ser complicado. Y eso es difícil de hacer, por ejemplo, enseñando microservicios y AVA simultáneamente (le pasamos un test a algo que sin las instrucciones del test no sabríamos poner en marcha). Yo creo que primero los microservicios a pelo, luego AVA y luego lo juntamos.

Tú, Sacha, amigo Sacha, me has deleitado siempre en el frontend, desde jQuery hasta yo-yo, Foundation..., un placer, también, volar contigo.

Que tengan un buen día.

Vicent

Darwel Duran

student•

tenga cuidado con colocar los elementos del array del atributo data-interchange=[] pegados data-interchange=[pagina.html,small] ya que no se visualiza lo correcto es dejar un espacio entre la coma y el siguiente elemento data-interchange=[pagina.html, small]

Jesus Abraham Berzunza Pavón

student•

Otra forma de servir los archivos es como nos muestra Leonidas en el curso de responsive.

Tener instalado python (Mac y Linux viene por defecto)
Posicionarse en el directorio del proyecto
Escribir el comando

python -m SimpleHTTPServer

gian carlos leon apaclla

student•

usen el xamp se los recomiendo para que aban su proyecto mas rapido con el loclahost de xamp

Itzel

student•

creo que necesita una actualizada el curso…mmm por que al entrar a npm en serve no se ve el que dice

Cesar David Ramírez Dimaté

student•

No importa si se ve igual, lo importante es que te funcione.

Ricardo Garrido Cruz

student•

Aportación:

Hola, es el 15 de Abril del 2018, pongo la fecha debido a las actualizaciones.

Bueno, si tienen problemas para ver el servidor, intente el puerto 5000, en ver del 3000, ya que “serve” se actualizo.

Espero les haya servido el dato.

Fabricio Galindo Copado

student•

Claro que si ya tienes un servidor local instalado solo subes el proyecto a tu www y listo. puedes abrir los iframes desde ahí.
saludos !

Carlos Francisco Betancourt Requena

student•

Yo utilicé Python para configurar el servidor, tengo instalado Python 3 y en la consola de windows una vez posicionado en el directorio del proyecto, ejecuté el comando:

python -m http.server

Y en el navegador utilizo la URL: http://localhost:8000/

Juan David lemus Rubiano

student•

no encuentro el paquete, tienen que mirar a ver como se soluciona eso ahi, por que creo que no voy a poder seguir viendo el tutorial

Jonathan Jiménez

student•

Buenas compañeros, comparto esto puesto que haciendo el seguimiento de la clase tuve un error.

Al lanzar el comando serve . y entrar a la dirección http://localhost:3000 me mostraba el index.html, pero no me cargaba ningún archivo más, por lo que se mostraba sin estilos y sin las propiedades que añade foundation al js.

Para solucionarlo, lo que hice es crear un servidor de ficheros estáticos en nodejs lo más sencillo posible para que realizase la misma función que el comando serve . .

Os lo comparto para que si alguien tiene el mismo problema y no tiene ningún conocimiento sobre como funciona nodejs pueda seguir el curso sin demasiados problemas.

Primero, como explica Sacha en el vídeo del curso, deberemos instalar nodejs, una vez tenemos node instalado, nos dirigiremos a nuestra carpeta del proyecto platzipalooza.

A continuación instalaremos express ( express es un framework web que entre otras cosas nos permite crear un servidor de ficheros estáticos ), para hacerlo usaremos el comando npm install express.

Una vez tenemos express instalado correctamente, en la raíz de nuestro proyecto crearemos un archivo llamado server.js .

En este archivo incluiremos las líneas de código que añado a continuación:

var express=require(‘express’);
var app=express();

app.use(express.static(__dirname + ‘/’));

var server=app.listen(3000,function(){
console.log(‘Servidor web iniciado en el puerto 3000’);
});

Tras haber añadido estas líneas al fichero server.js ,solamente quedará por línea de comandos lanzar nuestro servidor de archivos estáticos, con el comando node server.js y acceder a nuestro navegador a la url http://localhost:3000.

Saludos,

Ana Dopereiro

student•

ayyyyy siempre me atranco con node.js!!! ayuda!!

lo intalo en c: pero yo trabajo en d:

y en la consola no me funciona cuando ejecuto

$ npm install -g serve

y yo creo que es por eso,me muevo con cd para cambiar de carpeta y no me cambia, he mirado un monton de clases en platzi pero no me resuelven el problema... alguien me ayuda?? gracias!

Ricardo Azpeitia P.

student•

Intentaste con sudo?

sudo npm install

Ana Dopereiro

student•

muchas gracias por responder! lo he probado y no funciona, me dice que no reconoce el comando. Como puedo cambiarme de carpeta? si me aparece por defecto c:\users\ana y yo quiero ir a una carpeta en D:?

Bautista Moran

student•

tengo un problema con el data-interchange y es que no me cambia la imagen en tamaños de dispositvo mas pequeños, queda la misma.

Diego Forero

Team Platzi•

Hola verifica la documentación de foundation ya que esta ha cambiado con respecto al curso ya que cuando se hizo el curso estaba aun en versión beta.

Daniel Muñoz Martín

student•

Tengo un problema con mi interchange, me funciona pero solo si le doy a recargar la pagina al cambiarme de resolucion.
Si parto de small y voy a medium sigue estirando la imagen de small y hasta que no actualizo la pagina en medium no me aparece la imagen correspondiente para la resolucion que defini en el interchange…

Alguien sabe a que se debe ?? Muchas gracias de antemano !

Diego Forero

Team Platzi•

Revisa si en la consola de las herramientas de desarrollador en chrome hay algún error.

Bautista Moran

student•

a mi me pasa lo mismo y me dice que el map.html esta mal formado

Marco Vinicio González Jiménez

student•

Hola alguien podría ayudarme por favor? Me sale este error en la consola.

npm ERR! Darwin 15.5.0

npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "install" "-g" "serve"

npm ERR! node v6.9.1

npm ERR! npm v3.10.8

npm ERR! path /usr/local/lib/node_modules

npm ERR! code EACCES

npm ERR! errno -13

npm ERR! syscall access

npm ERR! Error: EACCES: permission denied, access '/usr/local/lib/node_modules'

npm ERR! at Error (native)

npm ERR! { Error: EACCES: permission denied, access '/usr/local/lib/node_modules'

npm ERR! at Error (native)

npm ERR! errno: -13,

npm ERR! code: 'EACCES',

npm ERR! syscall: 'access',

npm ERR! path: '/usr/local/lib/node_modules' }

npm ERR!

npm ERR! Please try running this command again as root/Administrator.

npm ERR! Please include the following file with any support request:

npm ERR! /Users/Bee/npm-debug.log

Ricardo Azpeitia P.

student•

Intentaste con sudo?

Marco Vinicio González Jiménez

student•

si tambien coloque este código pero no puedo correr la carpeta con serve

sudo npm install

Jorge Hernandez Rozo

student•

Excelente clase lo aprovechare mucho en mis futuros proyectos 😄

Cesar David Ramírez Dimaté

student•

Para los que quieran instalar nodejs, npm y serve en la terminal en ubuntu les dejo los siguientes comandos:

1. Instalar NodeJs y npm
sudo apt-get update
sudo apt-get install build-essential libssl-dev
sudo apt-get install curl
curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh -o install_nvm.sh
bash install_nvm.sh
	# Close and reopen your terminal to start using nvm
nvm ls-remote
	# Revisar versiones
nvm install 8.11.1
node -v
	# v8.11.1
npm -v
	# 5.6.0
2. Instalar el paquete "serve"
npm install -g serve
3. Iniciar servidor local
cd Documents/platzipalooza
serve .

Cesar David Ramírez Dimaté

student•

Javier Marquínez Marquínez

student•

Hola a todos,

Yo puse los archivos html en la raíz del proyecto y no me dio el error que le sale a Sacha, también me parece unabuena opción que el mapa no ocupe el 100% de la pantalla para que así haya un espacio a la hora de hacer scroll y poder llegar a la parte final de la página sin que el mapa nos moleste.

Espero que les sirva

Saludos

Gabriel Martínez Portilla

student•

Agregaría para dispositivos móviles que a parte de mostrar solo la imagen fuera un link que llevara a google maps.

Ivan Cardozo

student•

A alguno le paso que no le cargan las imagenes con data-interchange?

A mi me cargo solo una imagen , pero nada que ver con las del proyecto.

Me meti en foundation para ver si lograba ver alguna actualizacion del codigo , pero esta igual.

Contenido responsive con Foundation

¡Hemos renovado este curso!

¿Dónde aprender frontend actualizado?

Bienvenido al curso

Bienvenidos al curso de frontend con Bootstrap y Foundation

Introducción a Frameworks Frontend

Foundation

Presentación del proyecto para Foundation

Grilla de Foundation

Grilla Flex de Foundation

Foundation Icon Fonts 3

Títulos en Foundation

Barra de menú en Foundation

Botones en Foundation

Tabs con Foundation

Carrousel en Foundation con Orbit

Tablas de precio con Foundation

Igualar alto de columnas en Foundation

Contenido responsive con Foundation

Formularios con Foundation

Validación de formularios con Foundation

Navegación avanzada con Foundation

Barra de navegación fija con Foundation

Modificando Tabs en Foundation

Menú offcanvas con Foundation

Menú Drilldown con Foundation

Obteniendo datos del formulario

Bootstrap

Presentación del proyecto de Bootstrap

Bootstrap lanzó su versión v4.0.0-alpha.6

Contenedores en Bootstrap

Grillas en Bootstrap

Grillas Flex con Bootstrap

Barra de navegación con Bootstrap

Navegación responsive con Bootstrap

Carousel con Bootstrap

Imágenes responsivas con Bootstrap

Formularios con Bootstrap

Modals en Bootstrap

Breadcrumbs con Bootstrap

Filtros con Bootstrap

Cards con Bootstrap

Conclusiones

Cierre del Curso

Desafío 01

Desafío 02

Desafío 03

Desafío 04

Contenido complementario

Personalizando Bootstrap

Zurb Development Stack

Yeoman