() translation by (you can also view the original English article)
Esta parte final de la serie API Google Maps para diseñadores resume todo al analizar el diseño responsivo, las imágenes retina y una gama de herramientas para pruebas y depuración que hacen la vida mucho más fácil. Ésta ofrece una visita guiada a través de una amplia variedad de áreas, las cuales puedes explorar más en tus propios proyectos.
Diseño responsivo y consultas de medios
A menos que hayas estado durmiendo bajo un arbusto durante los últimos años, sabrás que el diseño responsivo se trata de hacer que un sitio web cambie y se adapte de acuerdo al dispositivo en el que se visualice.
La página de inicio de este ejemplo (arriba) también usa un diseño responsivo para presentar a la gente una versión alterada del mapa dependiendo del dispositivo o, más específicamente, del ancho de pantalla que estén usando.
El primer paso antes de que hagamos otra cosa es asegurarnos de que la etiqueta meta viewport esté configurada en el head de tu página.
1 |
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> |
Nota: los atributos exactos de viewport que vas a usar para configurar las cosas dependen de ti. Lee nuestra guía para ver más detalles.
El enfoque popular para trabajar con diseño responsivo que usaremos aquí es aplicar consultas de medios dentro de CSS. Las consultas de medios son una forma de segmentar el CSS y aplicar diferentes estilos dependiendo de, por ejemplo, el ancho del viewport en el que el sitio web esté siendo visualizado.
La siguiente lista de código es bastante larga, pero es útil para ver qué está pasando. Para ver este código en acción revisa la página de inicio. Si la estás viendo en una pantalla más grande, arrastra un lado del navegador para hacerlo más estrecho. Cuando el ancho de tu navegador esté por debajo de 640px, el diseño deberá cambiar.
1 |
<!--Setting up the CSS styles-->
|
2 |
<style type="text/css"> |
3 |
|
4 |
html { |
5 |
height: 100%; |
6 |
}
|
7 |
|
8 |
#gears{ |
9 |
width:50%; |
10 |
}
|
11 |
|
12 |
img { |
13 |
border:none; |
14 |
}
|
15 |
|
16 |
body { |
17 |
height: 100%; |
18 |
margin: 0px; |
19 |
padding: 0px; |
20 |
background: none; |
21 |
}
|
22 |
|
23 |
#overall_wrapper { |
24 |
height: 100%; |
25 |
width: 100%; |
26 |
margin:0px; |
27 |
padding:0px; |
28 |
border:none; |
29 |
background:none; |
30 |
}
|
31 |
|
32 |
#title_box{ |
33 |
width: 100%; |
34 |
background-color:#89cbed; |
35 |
text-align:center; |
36 |
margin:0px; |
37 |
padding-top:5px; |
38 |
padding-bottom:10px; |
39 |
border:none; |
40 |
}
|
41 |
|
42 |
#yellow_line_and_arrow{ |
43 |
display:none; |
44 |
}
|
45 |
|
46 |
#button_to_map_standard{ |
47 |
width: 100%; |
48 |
background: none; |
49 |
text-align:center; |
50 |
margin-left:auto; |
51 |
margin-right:auto; |
52 |
margin-top: 2px; |
53 |
margin-bottom: 5px; |
54 |
padding: 0px; |
55 |
display:none; |
56 |
}
|
57 |
|
58 |
#button_to_map_mobile { |
59 |
width: 95%; |
60 |
background: none; |
61 |
text-align:center; |
62 |
margin-left:auto; |
63 |
margin-right:auto; |
64 |
margin-top: 10px; |
65 |
margin-bottom: 10px; |
66 |
padding: 0px; |
67 |
display:block; |
68 |
}
|
69 |
|
70 |
#blurb_about_demo_wrapper{ |
71 |
width: 100%; |
72 |
background: #09F; |
73 |
margin:0px; |
74 |
padding:0px; |
75 |
border:none; |
76 |
}
|
77 |
|
78 |
#blurb_about_demo_content{ |
79 |
width: 80%; |
80 |
margin-left:auto; |
81 |
margin-right:auto; |
82 |
margin-top:5px; |
83 |
padding-top:5px; |
84 |
font-family:Tahoma, Geneva, sans-serif; |
85 |
font-size: 1.8em; |
86 |
line-height: 2em; |
87 |
text-align:center; |
88 |
color:#ffffff; |
89 |
}
|
90 |
|
91 |
#footer_box_wrapper{ |
92 |
width: 100%; |
93 |
background-color:#89cbed; |
94 |
text-align:center; |
95 |
margin:0px; |
96 |
padding:0px; |
97 |
border:none; |
98 |
border-top-width:2px; |
99 |
border-top-style:solid; |
100 |
border-top-color:#ffffff; |
101 |
}
|
102 |
|
103 |
#footer_box_content{ |
104 |
width: 80%; |
105 |
margin-left:auto; |
106 |
margin-right:auto; |
107 |
font-family:Tahoma, Geneva, sans-serif; |
108 |
font-size: 1.1em; |
109 |
line-height: 1.4em; |
110 |
color:#ffffff; |
111 |
}
|
112 |
|
113 |
/*The media query. This CSS overwrites the corosponding elements (above) when the screen is over 641px in width. */
|
114 |
@media (min-width: 641px) { |
115 |
|
116 |
body { |
117 |
height: 100%; |
118 |
margin: 0px; |
119 |
padding: 0px; |
120 |
background-image: url('background9.jpg'); |
121 |
background-color: #B3CDE6; |
122 |
background-repeat: no-repeat; |
123 |
background-attachment: fixed; |
124 |
background-position: right bottom; |
125 |
background-size: cover; |
126 |
}
|
127 |
|
128 |
#overall_wrapper { |
129 |
|
130 |
height: 100%; |
131 |
width: 40%; |
132 |
margin-left: auto; |
133 |
margin-right: auto; |
134 |
margin-top:0px; |
135 |
margin-bottom:0px; |
136 |
padding-left: 5%; |
137 |
padding-right: 5%; |
138 |
padding-top: 2%; |
139 |
padding-bottom: 2%; |
140 |
border-right-width: 2px; |
141 |
}
|
142 |
|
143 |
#title_box{ |
144 |
width: 400px; |
145 |
background-color:#89cbed; |
146 |
text-align:center; |
147 |
margin-left:auto; |
148 |
margin-right:auto; |
149 |
margin-bottom:2px; |
150 |
padding-top:10px; |
151 |
padding-bottom:10px; |
152 |
border-top-left-radius:20px; |
153 |
border-top-right-radius:20px; |
154 |
border-bottom-left-radius:0px; |
155 |
border-bottom-right-radius:0px; |
156 |
}
|
157 |
|
158 |
#yellow_line_and_arrow{ |
159 |
width: 400px; |
160 |
text-align:center; |
161 |
margin-left:auto; |
162 |
margin-right:auto; |
163 |
margin-top:2px; |
164 |
display:block; |
165 |
}
|
166 |
|
167 |
#button_to_map_standard{ |
168 |
width: 95%; |
169 |
background: none; |
170 |
text-align:center; |
171 |
margin-left:auto; |
172 |
margin-right:auto; |
173 |
margin-top: 2px; |
174 |
margin-bottom: 5px; |
175 |
padding: 0px; |
176 |
display:block; |
177 |
}
|
178 |
|
179 |
#button_to_map_mobile { |
180 |
width: 95%; |
181 |
background: none; |
182 |
text-align:center; |
183 |
margin-left:auto; |
184 |
margin-right:auto; |
185 |
margin-top: 2px; |
186 |
margin-bottom: 5px; |
187 |
padding: 0px; |
188 |
display:none; |
189 |
}
|
190 |
|
191 |
#blurb_about_demo_wrapper{ |
192 |
width: 95%; |
193 |
background:#ffffff; |
194 |
text-align:center; |
195 |
margin-left:auto; |
196 |
margin-right:auto; |
197 |
margin-top: 10px; |
198 |
margin-bottom: 0px; |
199 |
padding-top:5px; |
200 |
padding-left:5px; |
201 |
padding-right:5px; |
202 |
padding-bottom:15px; |
203 |
border-top-left-radius:20px; |
204 |
border-top-right-radius:20px; |
205 |
border-bottom-left-radius:0px; |
206 |
border-bottom-right-radius:0px; |
207 |
}
|
208 |
|
209 |
#blurb_about_demo_content{ |
210 |
font-family:Tahoma, Geneva, sans-serif; |
211 |
font-size: 1.4em; |
212 |
line-height: 1.6em; |
213 |
color:#09C; |
214 |
}
|
215 |
|
216 |
#footer_box_wrapper{ |
217 |
width: 95%; |
218 |
background-color:#89cbed; |
219 |
text-align:center; |
220 |
margin-left:auto; |
221 |
margin-right:auto; |
222 |
margin-top:0px; |
223 |
margin-bottom:30px; |
224 |
padding-left: 5px; |
225 |
padding-right: 5px; |
226 |
padding-top: 1px; |
227 |
padding-bottom: 2px; |
228 |
border-radius: 20px; |
229 |
border-top-left-radius:0px; |
230 |
border-top-right-radius:0px; |
231 |
border-bottom-left-radius:20px; |
232 |
border-bottom-right-radius:20px; |
233 |
border-width:0px; |
234 |
}
|
235 |
|
236 |
#footer_box_content{ |
237 |
font-family:Tahoma, Geneva, sans-serif; |
238 |
font-size: 0.9em; |
239 |
line-height: 1.3em; |
240 |
color:#ffffff; |
241 |
}
|
242 |
}
|
243 |
|
244 |
</style>
|
La consulta de medios en este caso es el código @media (min-width: 641px) en la línea 101 y el CSS siguiente dentro de las llaves. Esta consulta de medios está verificando el ancho del dispositivo.
El diseño Mobile First
Es bueno usar un enfoque mobile first (móvil primero); la idea es que el estilo predeterminado esté dirigido a los dispositivos móviles, para después añadir excepciones progresivamente usando consultas de medios a medida que los viewports se vuelvan más grandes. Este enfoque ayuda a que los sitios web carguen más rápido en los dispositivos móviles. Por ejemplo, cosas como la imagen grande de fondo que hemos usado solamente se cargarán en dispositivos con pantallas más grandes.
Por lo tanto, en el código anterior la primera parte (es decir, arriba de la consulta de medios - @media (min-width: 641px)) será cargada de forma predeterminada en todos los dispositivos. Luego la consulta de medios @media (min-width: 641px) carga los estilos dentro de las llaves para los dispositivos cuyos anchos sean de más de 641px.
Puntos de quiebre
Una pregunta común es:
"¿En qué parte del diseño deberían estar los puntos de quiebre?"
El punto de quiebre en este ejemplo es 641px. Este ejemplo solamente usa un punto de quiebre, pero a menudo se requiere más de uno. Esto puede depender mucho de tu contenido y también de la gama de dispositivos en los que quieras enfocarte, así como las resoluciones de pantalla populares en el mercado.
En este ejemplo, el iPhone (cuyo ancho es de 640px) mostrará el estilo móvil predeterminado, mientras que la iPad2 (cuyo ancho es de 768) mostrará la versión de escritorio. El punto de quiebre que elegimos es apropiado para este mapa, ya que los gráficos son demasiado grandes para el teléfono. Sin embargo, para otros sitios web que están más basados en texto, solamente es necesario cambiar el estilo significativamente cuando se trata de tamaños de pantalla mucho más pequeños, por lo que los puntos de quiebre quizá sean menores.
Nota: al elegir puntos de quiebre a menudo es más prudente simplemente considerar el diseño, observar en dónde está el quiebre, en vez de enfocarse en resoluciones de dispositivos específicas. Los tamaños de las pantallas son tan amplios y variados, además de que cambian con el paso del tiempo, que simplemente no hay manera de hacer un seguimiento preciso de ellos.
Dirigiendo a los usuarios a las diferentes versiones del mapa
Algunas veces es apropiado mostrar a los usuarios versiones completamente diferentes del contenido, dependiendo de las circunstancias en las que lo estén visualizando.
En nuestro caso, esto se hace usando dos etiquetas div (es decir, button_to_map_mobile y button_to_map_standard), cada una conteniendo un vínculo diferente y un botón verde "visit map" ("visitar mapa") ligeramente diferente. Si estás en una computadora portátil o de escritorio, ve a la página de inicio y arrastra la orilla de tu navegador hacia adentro hasta que el diseño cambie al estilo móvil. Deberías notar que el botón verde "visit map" ("visitar mapa") cambia ligeramente para incluir la palabra "mobile" ("móvil"). Si haces clic en este botón ahora obtendrás una versión móvil del mapa.
La consulta de medios se usa para alternar el div visible actualmente. Es decir, si revisas la lista de código anterior, puedes ver que button_to_map_standard tiene aplicado el display:none; cuando el estilo móvil predeterminado se encuentra en uso, pero cuando la consulta de medios detecta que la pantalla tiene un ancho de más de 641 píxeles, ésta aplica el display:block; a button_to_map_standard. (La consulta de medios hace lo opuesto al div button_to_map_mobile).
Si estás siguiendo este tutorial creando tu propia página web, revisa bien el código fuente disponible en el vínculo de la parte superior de esta página. Personalmente me resultó más sencillo hacer que algo funcionara al principio usando el enfoque "mobile first" y un punto de quiebre, antes de expandirlo a un diseño más complejo.
Vale la pena señalar que la elección entre contenido alternativo y contenido responsivo es algo que debes tener muy en cuenta al desarrollar sitios web para múltiples dispositivos.
Imágenes retina
Ojalá que ya hayas echado un vistazo a la nueva versión móvil del mapa. Vamos a regresar a eso en un minuto. Pero primero, vale la pena revisar la forma en la que la página de inicio usa imágenes diseñadas para las pantallas retina.
Las pantallas retina (y otras de alta densidad de píxeles) tienen tantos píxeles, tan juntos entre sí, que es casi imposible para la retina del ojo humano distinguir píxeles individuales. Las pantallas retina se consideran la siguiente generación de pantallas, y un número cada vez mayor de dispositivos ya las tienen, por ejemplo los iPhones 4 y 5 así como algunas MacBook Pros con especificaciones altas. Sin embargo, la desventaja es que los gráficos que no se preparen teniendo estas pantallas en mente se verán un poco borrosos.
Afortunadamente hay algunas formas de evitar esto. El enfoque que elijas dependerá de la naturaleza de la imagen en sí. Este ejemplo usa dos enfoques; la biblioteca retina.js y los gráficos SVG.
Retina.js
Retina.js es una biblioteca ligera de JavaScript que puede descargarse gratuitamente. Solamente necesitas guardar el archivo JavaScript junto a tu sitio web en tu servidor y añadir la siguiente línea de código justo antes de la etiqueta body de cierre.
1 |
<script type="text/javascript" src="/scripts/retina.js"></script> |
A continuación debes guardar dos versiones de cada imagen; una del doble del tamaño en el que verías la imagen en una pantalla estándar, y la otra con el tamaño normal. El truco para hacer funcionar a esta biblioteca es que necesitas guardar tus imágenes en la misma carpeta en tu servidor y seguir la estricta convención de nomenclatura:
- emilysypic.jpg = versión en resolución normal
- emilyspic@2x.jpg = versión en alta resolución
A continuación debes añadir tu imagen al marcado de tu página de forma normal, solamente añadiendo la versión de resolución estándar:
1 |
<img src="/images/my_image.png" /> |
Cuando alguien visualice tu sitio web en una pantalla retina, la presencia de la secuencia de comandos retina.js le indica a tu 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 requiere para guardar dos versiones de cada imagen, puede ser muy útil para imágenes de tipo fotográfico o no vectoriales.
El botón verde "visitar mapa" de la página de inicio usa el complemento retina.js. Para ver esto en acción, intenta visualizar el sitio en un dispositivo retina, por ejemplo un iPhone 4 o 5, y observa lo nítido que se ve el texto del botón verde. Si descargaste tu propia copia del código, elimina el complemento retina.js y visualiza el sitio web en el dispositivo retina de nuevo. Deberás notar que la calidad del botón (por ejemplo, las líneas blancas dentro del texto) es menor.
Yo recomendaría el uso de retina.js para imágenes clave fotográficas o no vectoriales que no cambien a menudo, en tu página de inicio o integradas en tu plantilla. Sin embargo, si por ejemplo estás administrando un blog con múltiples autores, probablemente no sea realista esperar que éstos generen dos versiones para cada imagen.
SVGs
Otro enfoque para crear gráficos nítidos para las pantallas retinas es usar imágenes SVG. SVG en realidad significa Gráficos vectoriales escalables (Scalable Vector Graphics, por sus siglas en inglés). Como su nombre lo indica, las imágenes SVG son adecuadas para las imágenes de tipo vectorial (es decir ¡no fotografías!).
Para ver un ejemplo revisa la página de inicio. El icono del engrane y la llave inglesa es un gráfico SVG. Su ancho está configurado en 50%. A medida que cambies el tamaño de tu navegador podrás ver que siempre se mantiene perfectamente nítido. También se mantiene perfectamente nítido si usas la herramienta para ampliar en tu navegador (por ejemplo en un teléfono).
1 |
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> |
2 |
<circle cx="100" cy="100" r="90" stroke="red" stroke-width="9" fill="yellow" /> |
3 |
</svg>
|
Los gráficos SVG en realidad son un formato vectorial basado en XML. Esto significa que puedes editarlos directamente, si lo deseas, usando un editor de texto básico. El código anterior crea la imagen del círculo amarillo mostrado a continuación.
Puedes insertar imágenes SVG en tus páginas web de la misma manera en la que insertarías un jpg o cualquier otra imagen.
<img src="yellowcircle.svg" width="70" height="70">
Los SVG son compatibles con todos los navegadores modernos, incluyendo a aquellos usados en los dispositivos retina como los iPhones 4 y 5. Sin embargo, aún es importante proporcionar un respaldo para los navegadores antiguos que no son compatibles con ellos, por ejemplo IE 8. Si ya estás usando Modernizr (ver más adelante) para el resto de tu sitio, entonces éste es un enfoque sensato. Sin embargo, también hay disponible un complemento JavaScript dedicado, SVGeezy, que se encargará de esto.
Para usar este complemento, descarga la secuencia de comandos y guárdala junto a tu sitio web en tu servidor. Luego agrega la siguiente línea de código antes de la etiqueta body de cierre.
1 |
<script type="text/javascript" src="svgeezy_plugin/svgeezy.js"></script> |
2 |
<script type="text/javascript"> |
3 |
svgeezy.init(false, 'png'); // this will let the plugin check all images |
4 |
</script>
|
De manera similar al complemento retina discutido anteriormente, en realidad vas a proporcionar dos imágenes cada vez; el archivo SVG y el archivo de respaldo jpeg o png. Ambas deben ser almacenadas en el mismo lugar en tu servidor. Cuando el complemento SVGeezy se de cuenta de que tu navegador no es compatible con los archivos SVG, éste usará la versión alternativa de la imagen.
Si has descargado los archivos fuente del ejemplo a partir del vínculo de la parte superior de esta página, echa un vistazo al archivo SVG refresh.svg y cómo es que el archivo tutorial4_index.html usa esta imagen.
Cuando se trata de crear los archivos SVG, la idea de codificar manualmente un archivo de imagen ¡en suficiente para asustar hasta al más geek de los geeks!. Por fortuna, puedes guardar imágenes como archivos SVG desde Adobe Illustrator (haz clic en File > Save > SVG, o Archivo > Guardar > SVG) o bien puedes usar Inkscape, el software de edición de imágenes vectoriales de código abierto. Dicho lo anterior, te recomiendo hacer algunas pruebas con esto para asegurarte de que tus diseños se muestren según lo esperado en el navegador.
También hay muchos sitios web que ofrecen iconos SVG gratuitos para ser descargados. El icono de engrane usado en este ejemplo es de Game Icons. Otro buen sitio web es Icon Finder, que muestra los formatos disponibles junto con todos los resultados de la búsqueda. Icon Finder también es bastante útil para obtener una idea del tipo de imágenes que pueden generarse como archivos SVG.
Aunque los archivos SVG solamente funcionarán para algunos tipos de imágenes, si se aprovechan con cuidado pueden proporcionar una manera poderosa de brindar gráficos nítidos para todos los dispositivos. Antes de seguir, vale la pena mencionar que hay otras maneras de implementar las imágenes retina que no usamos en este ejemplo, por ejemplo mediante una solución PHP del lado del servidor que usa cookies y un archivo .htacces modificado, o también usando fuentes de iconos.
Un conjunto de datos: dos versiones del mapa
Este ejemplo tiene dos versiones del mapa; una versión para portátil/escritorio/tableta y una versión móvil.
Crear dos versiones puede parecer como si estuviéramos haciendo trampa. Además, para la gran mayoría de los sitios web yo no recomendaría versiones para móvil y escritorio separadas debido al evidente trabajo adicional de mantenimiento. Sin embargo, el nuevo tipo de mapa de Google que hemos estado creando es un caso en el que tener dos versiones es algo sensato.
Sin embargo, fundamentalmente no vamos a duplicar los datos. En vez de eso, ambas versiones del mapa serán dibujadas a partir del mismo conjunto de datos en Flickr. Esto significa que el trabajo adicional de tener dos versiones es mínimo, y contamos con la flexibilidad de personalizar la apariencia del mapa dependiendo del dispositivo.
He extendido el ejemplo del tutorial anterior. El tutorial obtiene información a partir de esta cuenta nueva de Flickr (id de usuario: 99915664@N08). (Recordatorio - cada Flickr tiene un nombre de usuario fácil (más o menos) de recordar, en este caso bennett1671, y un número ID de usuario, en este caso 99915664@N08). Por lo tanto, si estás continuando con lo que hiciste en el tutorial anterior, necesitas dirigir tu mapa hacia esta nueva cuenta de Flickr.
Esta nueva cuenta de Flickr incluye fotos de todos los festivales, incluyendo a los eventos principales y a los más pequeños. La cuenta de Flickr usada en el tutorial anterior solamente incluía fotos para los festivales más pequeños. Las fotos de los eventos principales no se almacenaron en Flickr.
Etiquetando en Flickr
Etiquetar tus fotos en Flickr es la clave para que las cosas funcionen. Cada foto en Flickr está etiquetada para indicar si son mainevent o smallevent (estas etiquetas son necesarias para la versión portátil/escritorio/tableta) y si son un evento englandevent, scotlandevent, walesevent o irelandevent (estas etiquetas son necesarias para la versión móvil).
Las llamadas de la API Flickr
Cuando se hace clic en el botón naranja Smaller Events (Eventos más pequeños) en la versión portátil/escritorio/tableta, se lleva a cabo la siguiente llamada de la API Flickr. Ésta llama a la cuenta 99915664@N08 de Flickr y filtra los resultados por la etiqueta smallevent.
1 |
http://api.flickr.com/services/rest/?method=flickr.photos.search&api_key=f7095d157adfd78715344ed893a9554b&user_id=99915664@N08&tags=smallevent&has_geo=1&extras=geo&format=json&jsoncallback=? |
En la versión móvil, he agrupado los marcadores de acuerdo al país y coloreado los iconos en consecuencia. Así que, por ejemplo, cuando hagas clic en el marcador blanco de Inglaterra se llevará a cabo la siguiente llamada a la API Flickr. Esta llamada a la API es la misma que la anterior, pero filtra los resultados en base a la etiqueta englandevent.
1 |
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=json&json&jsoncallback=? |
Por favor revisa el tutorial anterior para obtener una descripción completa de la manera en la que se procesan los resultados de estas llamadas a la API de Flickr. Ambas usan el método flickr.photos.search de la API de Flickr.
Archivos SVG y la versión móvil
Todos los marcadores para el mapa en la versión móvil son archivos SVG (ver arriba). Por lo tanto, aunque son un poco más sencillos que los iconos en la versión portátil/escritorio/tableta, estos siempre permanecen nítidos al visualizarse en pantallas retina, tales como las de los iPhone 4 o 5.
Pruebas y depuración
Para terminar esta serie de tutoriales, solamente quiero destacar algunas herramientas que encontré útiles al desarrollar mapas o cualquier otra cosa en línea en general. Sé que hay cientos, tal vez miles, de herramientas disponibles, por lo que ésta no pretende ser una lista exhaustiva de ninguna manera. En cambio, es el "kit de herramientas" que yo uso para probar cosas y averiguar por qué algo no ha salido de acuerdo al plan.
Estas herramientas son útiles, tal vez esenciales, para evitar la pesadilla de que un sitio web funcione perfectamente en tu propia computadora, solamente para descubrir que hace algo inesperado en la computadora de un cliente o clientes.
Herramientas para desarrolladores de Google Chrome
Para acceder a las herramientas para el desarrollador en Chrome, abre Chrome y haz clic en Menu Button (Botón Menú) en la parte superior derecha, luego en Tools (Herramientas) y luego en Developer Tools (Herramientas para el Desarrollador).
Esta función hace una enorme cantidad de cosas, ¡suficientes para llenar un tutorial completo sobre sí misma!. Algunas partes que uso a menudo son:
- Pestaña Elements (Elementos, ver arriba) - Te permite hacer clic en áreas de tu página web y ver el código subyacente. También te permite experimentar con el CSS y ver los cambios "en directo" en tu página web. Esto es útil al experimentar con diferentes diseños.
- Pestaña Console (Consola) - Ésta mostrará errores. Algunas veces son inofensivos, otras veces (¡especialmente al construir un sitio!) necesitan algo de atención.
- Pestaña Network (Red, ver abajo) - Te permite ver todos los recursos que se estén cargando (a la izquierda) e incluye una línea del tiempo (derecha) con velocidades de carga para que puedas identificar qué podría estar ralentizando a tu sitio.
Compatibilidad con navegadores
No todos los navegadores son compatibles con todas las funciones de HTML y CSS. Esto puede ser problemático cuando quieres aprovechar las herramientas más interesantes de HTML5 y CSS3 y al mismo tiempo asegurarte de que las personas con las copias más antiguas de IE también puedan acceder a tu sitio web.
Pero a menos que tengas una memoria extraordinaria (¡yo no la tengo!), es casi imposible recordar qué navegadores se oponen a cuáles herramientas. Aquí es donde el sitio web caniuse es muy útil. Este sitio web te proporciona un resumen de qué herramientas HTML, CSS, SVG, etcétera son compatibles con cuáles versiones de qué navegadores.
Además, si quieres usar una nueva herramienta pero los navegadores más antiguos no son compatibles con ella, puedes usar la biblioteca JavaScript Modernizr. Como lo explican en su sitio web:
"Aprovechar nuevas y geniales tecnologías web es muy divertido, hasta que tienes que dar soporte a navegadores atrasados. Modernizr te permite escribir JavaScript y CSS condicional con facilidad para gestionar cada situación, ya sea que un navegador sea compatible con una herramienta o no".
Si el navegador de un usuario no es compatible con una función en particular, Modernizr te permite especificar también una función de respaldo. Esto es muy similar al complemento SVGeezy descrito anteriormente.
Pruebas entre múltiples navegadores
Además de planear el soporte para navegadores y funciones de respaldos al construir tu sitio, también es importante probarlo en navegadores diferentes. Browserstack es una manera eficiente de hacer esto. Éste te permite enviar un URL y luego echar un vistazo a la manera en la que el sitio funciona en diferentes navegadores. La única desventaja es que involucra una tarifa de suscripción. Sin embargo, esto es posiblemente más barato que tener un grupo de máquinas y dispositivos reales disponibles para hacer pruebas. También hay disponible una versión de prueba gratuita para que puedas revisar y ver qué opinas.
Cuando se trata de los misterios sobre cómo hacer que las cosas funcionen en IE, otra útil herramienta de pruebas para navegadores es el sitio web Modern.IE. Como su nombre sugiere, solamente es para IE. Pero es gratuito y aún es un recurso muy útil.
Antes de echar un vistazo a tu sitio web en Browserstack o ModernIE, es importante validar tu código para eliminar cualquier error de sintaxis.
Validando HTML, CSS y JavaScript
Un validador es una aplicación web gratuita que revisa tu código en base a los estándares actuales. Los estándares son importantes para garantizar que tu sitio web funcione de manera predecible a través de diferentes navegadores y dispositivos.
También existen diversas herramientas disponibles que te ayudarán a verificar tu sintaxis de JavaScript. Closure Compiler en realidad es una herramienta para comprimir tu JavaScript (que quizá también quieras hacer si el tamaño de tu archivo es masivo), pero también es útil para revisar errores de sintaxis. ¡Por ejemplo, esos molestos puntos y comas faltantes que nos engañan a todos!. Si copias y pegas tu código y presionas Compile (Compilar), todos los errores serán resaltados en la pestaña Errors (Errores). Otro sitio útil para revisar el código es JSHint.
Pruebas de velocidad de descarga
La velocidad de la página es importante. No solamente los visitantes se alejarán si tu sitio web tarda mucho tiempo en cargar, posiblemente Google tomará esto en cuenta al ordenar los resultados de las búsquedas.
Existen varias herramientas que te permitirán verificar esto, entre ellas están:
Estas herramientas también vienen con sugerencias sobre mejoras de desempeño que puedes hacer. Por ejemplo, una mejora común que puedes llevar a cabo es comprimir más tus imágenes. Puedes usar estas herramientas en conexión con la pestaña Network en las Herramientas para Desarrolladores de Google Chrome (ver arriba) para investigar posibles problemas.
Conclusión
Muy bien, ¡eso es todo!. Como dije al principio de este tutorial ¡fue una visita guiada!. Ojalá después de esta serie de tutoriales estés equipado para lograr tus propias creaciones con Google Maps. ¡Que te diviertas!.
Créditos de las imágenes
Los créditos para la mayoría de las imágenes (por ejemplo, las fotos del festival) pueden encontrarse al final de los tutoriales anteriores 1 y 3. Estas son las nuevas adiciones para este tutorial:
