Share
Esta parte final de la serie Google Maps API For Designers redondea las cosas con un diseño receptivo, imágenes de retina y una gama de herramientas de prueba y depuración que facilitan mucho la vida. Ofrece un recorrido completo por toda una serie de áreas, que puede explorar en sus propios proyectos..
Página de inicio sensible. Izquierda - estilo móvil. A la derecha - estilo portátil / de escritorio / tableta. A menos que haya estado durmiendo poco a poco durante los últimos años, sabrá que el diseño responsivo consiste en hacer un cambio en el sitio web y adaptarlo de acuerdo con el dispositivo que se ve en.
La página de inicio de esta demostración (arriba) también usa un diseño responsivo para presentar a las personas una versión alterada del mapa según el dispositivo, o más específicamente el ancho de la pantalla que están usando.
El primer paso antes de hacer algo más es asegurarnos de que la metaetiqueta de la ventana gráfica esté configurada en el cabeza de tu pagina.
Nota: Precisamente qué atributos de viewport usas para configurar las cosas depende de ti. Lea nuestra guía para más detalles..
El enfoque popular para tratar con el diseño responsivo que usaremos aquí es aplicar preguntas de los medios dentro de la CSS. Las consultas de medios son una forma de segmentar el CSS y aplicar diferentes estilos dependiendo, por ejemplo, del ancho de la ventana gráfica en la que se está viendo el sitio web..
El código que figura a continuación es bastante largo, pero es útil para ver qué está pasando. Para ver este código en acción, eche un vistazo a la página de inicio. Si lo está viendo en una pantalla más grande, arrastre el lado del navegador para hacerlo más estrecho. Cuando el ancho de su navegador sea inferior a 640px, el diseño debería cambiar.
La consulta de medios en este caso es la @media (ancho mínimo: 641 px) código en la línea 101, y el CSS subsiguiente dentro de las llaves. Esta consulta de medios está comprobando el ancho del dispositivo.
Es bueno usar un primer enfoque móvil; esta es la idea de que el estilo predeterminado está dirigido a dispositivos móviles, y luego se agregan progresivamente las excepciones de los medios de comunicación a medida que las vistas aumentan. Este enfoque ayuda a los sitios web a cargar más rápido en dispositivos móviles. Por ejemplo, cosas como la imagen de fondo grande que hemos usado solo se cargan para dispositivos de pantalla más grandes.
Así que en el código anterior, la primera parte del código (es decir, encima de la consulta de medios) - @media (ancho mínimo: 641 px) ) se cargará de forma predeterminada en todos los dispositivos. Entonces el @media (ancho mínimo: 641 px) la consulta de medios carga los estilos dentro de las llaves para dispositivos cuyo ancho es mayor a 641px de ancho.
Una pregunta común es:
“¿Dónde deberían estar los puntos de interrupción en el diseño?”
El punto de interrupción en este ejemplo es 641px. Esta demostración solo usa un punto de interrupción, pero a menudo querrá más de uno. Esto puede depender mucho de su contenido y también de la gama de dispositivos a los que apunta y las resoluciones de pantalla populares en el mercado..
En este ejemplo, el iPhone (ancho es 640px) mostrará el estilo móvil predeterminado, mientras que el iPad2 (ancho es 768) mostrará la versión de escritorio. Nuestro punto de corte elegido es apropiado para este mapa, porque los gráficos son demasiado grandes para el teléfono. Sin embargo, otros sitios web más basados en texto pueden encontrar que solo cuando se cambia a tamaños de pantalla mucho más pequeños el estilo debe cambiarse significativamente, por lo que los puntos de interrupción pueden ser más bajos.
Nota: Cuando se seleccionan puntos de interrupción, a menudo es más inteligente considerar el diseño, observando dónde descansos, En lugar de apuntar a resoluciones de dispositivos específicos. Los tamaños de pantalla son tan amplios y variados, además de que cambian a medida que pasa el tiempo, que simplemente no hay forma de realizar un seguimiento preciso de ellos.
A veces es apropiado presentar a los usuarios versiones de contenido completamente diferentes, según sus circunstancias de visualización..
En nuestro caso, esto se hace usando dos div etiquetas (es decir,. button_to_map_mobile y button_to_map_standard), cada uno con un enlace diferente y un botón verde 'mapa de visita' ligeramente diferente. Si está usando una computadora portátil o de escritorio, vea la página de inicio y arrastre la parte lateral de su navegador hasta que el diseño cambie a la distribución móvil. Debes notar que el botón verde 'mapa de visita' cambia ligeramente para incluir la palabra 'móvil'. Si hace clic en este botón ahora, obtendrá una versión móvil del mapa.
La consulta de medios se utiliza para alternar que div es actualmente visible. Es decir. Si echa un vistazo al código listado arriba, puede ver que el button_to_map_standard tiene el pantalla: ninguna; aplicado cuando el estilo móvil predeterminado está en uso, pero cuando la consulta de medios detecta que la pantalla tiene más de 641 píxeles de ancho, aplica la bloqueo de pantalla; a button_to_map_standard. (La consulta de medios hace lo contrario a la button_to_map_mobile div).
Si está siguiendo este tutorial para crear su propia página web, observe detenidamente el código fuente disponible en el enlace en la parte superior de esta página. Personalmente, me resultó más fácil hacer que algo funcionara inicialmente utilizando el enfoque de "primero móvil" y un punto de interrupción, antes de expandirlo a un diseño más complejo.
Vale la pena señalar que la elección entre alternativa contenido y sensible El contenido es algo a lo que debe prestar mucha atención al desarrollar sitios web para múltiples dispositivos..
Esperemos que haya echado un vistazo a la nueva versión móvil del mapa. Volveremos a eso en un minuto. Pero primero, vale la pena echar un vistazo a cómo la página de inicio usa imágenes diseñadas para pantallas de retina.
Las pantallas de retina (y otras de alta densidad de píxeles) tienen tantos píxeles, tan juntos que es casi imposible que la retina en el ojo humano distinga los píxeles individuales. Las pantallas de retina se consideran la próxima generación de pantallas, y un número creciente de dispositivos ya las tienen, como los iPhones 4 y 5 y algunos MacBook Pros de altas especificaciones. Sin embargo, el inconveniente es que los gráficos que no están preparados con estas pantallas en mente se verán un poco borrosos.
Afortunadamente, hay algunas maneras de evitar esto. El enfoque que elija dependerá de la naturaleza de la imagen en sí. Esta demo utiliza dos enfoques; Biblioteca retina.js y gráficos SVG.
Retina.js es una biblioteca de JavaScript liviana, que se puede descargar gratis. Solo tiene que guardar el archivo JavaScript adyacente a su sitio web en su servidor y agregar la siguiente línea de código justo antes del cierre cuerpo etiqueta.
A continuación, guardar dos versiones de cada imagen; una el doble del tamaño en el que vería la imagen en una pantalla estándar y la otra en el tamaño normal. El truco para que esta biblioteca funcione es que necesita guardar sus imágenes en la misma carpeta de su servidor y seguir la estricta convención de nombres. -
Luego agrega su imagen al marcado de su página como de costumbre, simplemente agregando la versión de resolución estándar -
Cuando alguien ve su sitio web en una pantalla de retina, la presencia del script retina.js le dice a su sitio web que verifique si hay una versión de alta resolución disponible.
Aunque retina.js tiene la limitación del tiempo que se tarda en guardar dos versiones para cada imagen, puede ser muy útil para imágenes fotográficas o no vectoriales..
El botón verde 'visitar mapa' en la página de inicio usa el complemento retina.js. Para ver esto en acción, intente ver el sitio en un dispositivo de retina, por ejemplo. iPhone 4 o 5, y mire qué nítido es el texto en el botón verde. Si ha descargado su propia copia del código, elimine el complemento retina.js y vuelva a ver el sitio web en el dispositivo de retina. Debes notar que la calidad del botón (por ejemplo, las líneas blancas dentro del texto) es peor.
Recomiendo usar retina.js para imágenes fotográficas clave o de tipo no vectorial que no cambian a menudo, en su página de inicio o incorporadas en su plantilla. Sin embargo, si, por ejemplo, está ejecutando un blog con varios autores, probablemente no sea realista esperar que creen dos versiones para cada imagen..
Otro enfoque para crear gráficos nítidos para pantallas de retina es usar imágenes SVG. SVG en realidad significa gráficos vectoriales escalables. Como su nombre lo sugiere, las imágenes SVG son adecuadas para imágenes de tipo vectorial (es decir, ¡no fotos!)
A medida que se amplían los gráficos vectoriales, conservan su nitidez.. Para ver un ejemplo, eche un vistazo a la página de inicio. El icono de engranajes y llave es un gráfico SVG. Su ancho está ajustado al 50%. A medida que cambia el tamaño de su navegador, debería poder ver que siempre se mantiene perfectamente nítido. También se mantiene perfectamente nítido si hace zoom en su navegador (por ejemplo, en un teléfono).
Los gráficos SVG son en realidad un formato vectorial basado en XML. Esto significa que puede editarlos directamente, si lo desea, utilizando un editor de texto básico. El código de arriba crea una imagen del círculo amarillo debajo..
Demo SVG simple (captura de pantalla). Puede insertar imágenes SVG en sus páginas web de la misma manera que insertaría un jpg o cualquier otra imagen..
SVG es compatible con todos los navegadores modernos, incluidos los que se utilizan en dispositivos de retina como los iPhones 4 y 5. Sin embargo, aún es importante proporcionar un respaldo para los navegadores más antiguos que no los admiten, por ejemplo, IE 8. Si es así. Si utiliza Modernizr (ver más abajo) para el resto de su sitio, este es un enfoque sensato. Sin embargo, también hay un complemento dedicado de JavaScript disponible, SVGeezy, que se ocupará de esto.
Para usar este complemento, descargue el script y guárdelo junto a su sitio web en su servidor. Luego agregue la siguiente línea de código antes de la etiqueta de cuerpo cerrado.
De manera similar al complemento de retina descrito anteriormente, en realidad proporcionará dos imágenes cada vez; el archivo SVG y el archivo jpeg o png de reserva. Ambos deben estar almacenados en el mismo lugar en su servidor. Cuando el complemento SVGeezy note que su navegador no admite archivos SVG, usará la versión alternativa de la imagen.
Si ha descargado los archivos de origen para la demostración desde el enlace en la parte superior de esta página, eche un vistazo al archivo SVG refresh.svg y como el tutorial4_index.html archivo utiliza esta imagen.
Cuando se trata de crear los archivos SVG, ¡la idea de codificar manualmente un archivo de imagen es suficiente para hacer que hasta los geeks corren una milla! Afortunadamente, puede guardar imágenes como archivos SVG de Adobe Illustrator (haga clic en Archivo> Guardar> SVG) o el software de edición de imagen vectorial de código abierto, Inkscape. Dicho esto, recomiendo hacer algunas pruebas de prueba para asegurarse de que sus diseños aparezcan como se espera en el navegador..
También hay una gran cantidad de sitios web que ofrecen íconos SVG gratuitos para descargar. El ícono de engranajes utilizado en esta demostración es de Iconos del juego. Otro buen sitio web es Icon Finder, que enumera los formatos disponibles junto con todos los resultados de búsqueda. Icon Finder también es muy útil para tener una idea de qué tipo de imágenes se pueden producir como archivos SVG.
Aunque los archivos SVG solo funcionarán para algunos tipos de imágenes, si se explotan con cuidado pueden proporcionar una forma eficaz de entregar gráficos nítidos a todos los dispositivos. Antes de continuar, vale la pena mencionar que hay otras formas de implementar imágenes de retina no implementadas en esta demostración, como usar una solución PHP del lado del servidor que usa cookies y archivos .htacces modificados, o usar fuentes de iconos.
Esta demo tiene dos versiones del mapa; Una versión para computadora portátil / de escritorio / tableta y una versión móvil..
Tanto el mapa móvil como el de escritorio utilizan los mismos datos (es decir, fotos) almacenados en Flickr. Crear dos versiones puede parecer estar haciendo trampa ligeramente. Y, para la gran mayoría de sitios web, no recomendaría versiones separadas para dispositivos móviles y de escritorio debido a los obvios costos de mantenimiento. Sin embargo, el nuevo tipo de mapa de Google que hemos estado construyendo es un caso en el que tener dos versiones es sensato.
De manera crucial, sin embargo, no vamos a duplicar los datos. En lugar, ambas versiones del mapa se basan en el mismo conjunto de datos en Flickr. Esto significa que la sobrecarga de tener dos versiones es mínima, y tenemos la flexibilidad para personalizar la apariencia del mapa dependiendo del dispositivo.
He extendido el ejemplo del último tutorial. El tutorial extrae datos de esta nueva cuenta de Flickr (ID de usuario: 99915664 @ N08). (Recordatorio: cada Flickr tiene un nombre de usuario fácil de recordar, en este caso Bennett1671, y un número de ID de usuario, en este caso 99915664 @ N08.) Por lo tanto, si está siguiendo las instrucciones del último tutorial, debe apuntar su mapa a esta nueva cuenta de Flickr..
Esta nueva cuenta de Flickr incluye fotos para todos los festivales, incluidos los eventos más pequeños y principales. La cuenta de Flickr utilizada en el tutorial anterior solo incluía fotos para los festivales más pequeños. Las fotos de los principales eventos no fueron almacenadas en Flickr..
Etiquetar tus fotos en Flickr es la clave para que esto funcione. Cada foto en Flickr está etiquetada para indicar si son una evento principal o un pequeño evento (estas etiquetas son necesarias para la versión de computadora portátil / computadora de escritorio / tableta) y si son una Evento, scotlandevent, evento de gales o irelandevent (Estas etiquetas son necesarias para la versión móvil).
Cuando se hace clic en el botón naranja Eventos más pequeños en la versión de computadora portátil / computadora de escritorio / tableta, se realiza la siguiente llamada a la API de Flickr. Esto llama a la cuenta de Flickr del 99915664 @ N08 y filtra los resultados por etiqueta. pequeño evento.
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f7095d157adfd78715344ed893a9554b&user_id=99915664@N08&tags=smallevent&has_geo=1&extras=geo&formation.jpja.jpg?
En la versión móvil, agrupé los marcadores según el país y coloreé los iconos en consecuencia. Así, por ejemplo, cuando hace clic en el marcador blanco de Inglaterra, se realiza la siguiente llamada a la API de Flickr. Esta llamada a la API es la misma que la anterior, excepto que filtra los resultados según la etiqueta Evento.
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f7095d157adfd78715344ed893a9554b&user_id=99915664@N08&tags=englandevent&has_geo=1&extras=geo&format=jsonJpJJ.Je.jpg?
Consulte el tutorial anterior para obtener una descripción completa de cómo se procesan los resultados de estas llamadas a la API de Flickr. Ambos utilizan el método flickr.photos.search de la API de Flickr..
Todos los marcadores de mapas en la versión móvil son archivos SVG (ver arriba). Por lo tanto, aunque son un poco más simples que los iconos en la versión de computadora portátil / computadora de escritorio / tableta, siempre se mantienen nítidos cuando se ven en pantallas de retina, como el iPhone 4 o 5.
Para finalizar esta serie de tutoriales, solo quiero resaltar algunas herramientas que encuentro útiles al desarrollar mapas, o cualquier otra cosa en línea, para el caso. Sé que hay cientos, tal vez miles, de herramientas, y por lo tanto, esta no es una lista exhaustiva de ninguna manera. En cambio, es el 'juego de herramientas' que utilizo para probar cosas y averiguar por qué algo no ha ido al plan..
Estas herramientas son útiles, quizás esenciales, para evitar la pesadilla de lograr que un sitio web funcione perfectamente en su propia máquina, solo para descubrir que hace algo inesperado en la máquina de un cliente o de los clientes..
Para acceder a las herramientas del desarrollador de Chrome, abra Chrome y haga clic en Botón de menú en la parte superior derecha y luego Herramientas, entonces Herramientas de desarrollo.
La pestaña Elementos en las herramientas de Google Chrome Developers te permite hacer clic en partes de tu página web para revelar información sobre cómo se ha procesado con el navegador. Esto hace una cantidad enorme de cosas; suficiente para llenar un tutorial completo por su cuenta! Algunos bits que uso a menudo son:-
La pestaña Red te dice cuánto tarda en cargarse cada parte de una página web. No todos los navegadores admiten todas las funciones HTML y CSS. Esto puede ser problemático cuando quiere aprovechar las características más interesantes de HTML5 y CSS3, mientras se asegura de que las personas con la copia más antigua de IE también puedan acceder a su sitio web..
Pero a menos que tenga una memoria extraordinaria (¡no la tengo!), Es casi imposible recordar qué navegadores se oponen a qué funciones. Aquí es donde el sitio web caniuse es muy útil. Este sitio web proporciona un resumen de qué características HTML, CSS, SVG, etc. son compatibles con qué versiones de los navegadores.
Además, si desea utilizar una nueva función pero los navegadores más antiguos no la admiten, puede utilizar la biblioteca de JavaScript Modernizr. Como explican en su página web:
“Aprovechar las nuevas tecnologías web es muy divertido, hasta que tiene que admitir navegadores que se quedan atrás. "Modernizr le facilita la escritura de JavaScript y CSS condicionales para manejar cada situación, ya sea que un navegador admita una característica o no".
Si el navegador de un usuario no admite una función en particular, Modernizr también le permite especificar una función de repliegue. Esto es muy similar al complemento SVGeezy descrito anteriormente.
Además de planificar la compatibilidad con el navegador y los recursos alternativos al crear su sitio, también es importante probarlo en diferentes navegadores. Browserstack es una forma eficiente de hacer esto. Le permite enviar una URL y luego ver cómo funciona el sitio en diferentes navegadores. La única desventaja es que implica una cuota de suscripción. Aunque esto es posiblemente más barato que tener un banco de máquinas y dispositivos reales disponibles para pruebas. También está disponible una versión de prueba gratuita para que pueda echar un vistazo y ver lo que piensa..
Otra herramienta útil de prueba del navegador cuando se trata de los misterios de hacer que las cosas funcionen en IE, es el sitio web Modern.IE. Como su nombre lo sugiere, es solo para IE. Pero es gratis y sigue siendo un recurso muy útil..
Antes de echar un vistazo a su sitio web en Browserstack o ModernIE, es importante validar su código para solucionar cualquier error de sintaxis.
Un validador es una aplicación web gratuita que compara su código con los estándares actuales. Los estándares son importantes para garantizar que su sitio web funcione de manera predecible en diferentes navegadores y dispositivos.
También hay una serie de herramientas que le ayudarán a verificar su sintaxis de JavaScript. Closure Compiler es en realidad una herramienta para comprimir su JavaScript (lo que también puede hacer si su tamaño de archivo es masivo), pero también es útil para verificar errores de sintaxis. p.ej. ¡Molestos faltantes de punto y coma que nos atrapan a todos! Si copia y pega en su código y pulsa Compilar, cualquier error se resaltará en la pestaña Errores. Otro sitio útil para verificar el código es JSHint.
La velocidad de la página es importante porque no solo los visitantes serán rechazados si su sitio tarda mucho tiempo en cargarse, sino que Google puede tener esto en cuenta al solicitar resultados de búsqueda..
Hay una serie de herramientas que te permitirán probar esto, incluyendo -
Estas herramientas también ofrecen sugerencias de mejoras de rendimiento que puede realizar. Por ejemplo, una mejora común que puede hacer es comprimir aún más sus imágenes. Puede usar estas herramientas en conexión con la pestaña de Red en las Herramientas de desarrolladores de Google Chrome (arriba) para investigar problemas potenciales.
¡Vale eso es todo! Como dije al comienzo de este tutorial, ¡sería un recorrido de alerta! Esperemos que después de esta serie de tutoriales ahora estés equipado para hacer tus propias creaciones de mapas de Google. Que te diviertas!
Los créditos para la mayoría de las imágenes (por ejemplo, las fotos del festival) se pueden encontrar al final de los tutoriales anteriores 1 y 3. Estos son los nuevos bits de este tutorial:
Accentsconagua