Ser un desarrollador web en el mundo de hoy significa soportar una gran cantidad de dispositivos y plataformas, que a veces pueden resultar una tarea desalentadora. Incluso con el código mejor diseñado que se adhiere a los últimos estándares web, aún puede encontrar que partes de su sitio web no se vean o actúen de la manera que usted quiere en ciertos dispositivos o resoluciones. Al enfrentar el desafío de soportar una amplia gama de escenarios, tener las herramientas de simulación adecuadas a su disposición puede ser invaluable.
Si eres uno de los muchos programadores que usan una Mac, el conjunto de herramientas para desarrolladores de Safari siempre ha sido útil. Con el lanzamiento de Safari 9, la amplitud de esta funcionalidad se ha ampliado considerablemente, principalmente debido al modo de diseño responsivo, que le permite obtener una vista previa de cómo se representará su sitio en varias resoluciones de pantalla, así como en diferentes versiones de iPad, iPhone y iPod touch.
Este tutorial detalla cómo activar el modo de diseño responsivo y cómo utilizarlo para sus necesidades de desarrollo.
Preferencias de Safari
Primero, abre tu navegador Safari.
Haga clic en Safari En el menú del navegador, ubicado en la parte superior de la pantalla. Cuando aparezca el menú desplegable, seleccione Preferencias Opción circulada en el ejemplo mostrado.
Nota: Puede utilizar el siguiente método abreviado de teclado en lugar del elemento de menú mencionado anteriormente: COMANDO + COMMA (,)
02 de 05Mostrar menú de desarrollo
El cuadro de diálogo Preferencias de Safari debería aparecer ahora, superponiendo la ventana de su navegador. Primero, haga clic en Avanzado Icono representado por un engranaje y ubicado en la esquina superior derecha de la ventana.
Las preferencias avanzadas del navegador ahora deberían estar visibles. En la parte inferior hay una opción acompañada de una casilla de verificación, etiquetada Mostrar el menú de desarrollo en la barra de menú y circulado en el ejemplo anterior. Haga clic en la casilla de verificación una vez para activar este menú.
03 de 05Entrar en modo de diseño responsivo
Ahora debería estar disponible una nueva opción en su menú de Safari, ubicado en la parte superior de la pantalla, etiquetado como Desarrollar. Haga clic en esta opción.
Cuando aparezca el menú desplegable, seleccione Entrar en modo de diseño responsivocirculado en el ejemplo mostrado.
Nota: Puede utilizar el siguiente método abreviado de teclado en lugar del elemento de menú mencionado anteriormente:OPCION + COMANDO + R
04 de 05Modo de diseño responsivo
La página web activa ahora debe mostrarse en el modo de diseño responsivo, como se muestra en el ejemplo anterior. Al seleccionar uno de los dispositivos iOS enumerados, como el iPhone 6, o una de las resoluciones de pantalla designadas disponibles, como 800 x 600, puede ver inmediatamente cómo se representará la página en ese dispositivo o en esa resolución de pantalla.
Además de los dispositivos y las resoluciones mostradas, también puede indicar a Safari que simule un agente de usuario diferente, como uno de un navegador diferente, haciendo clic en el menú desplegable que se muestra directamente sobre los iconos de resolución.
05 de 05Menú de desarrollo: Otras opciones
Además del modo de diseño responsivo, el menú de desarrollo de Safari 9 ofrece muchas otras opciones útiles, algunas de las cuales se enumeran a continuación.
- Abrir página con: Le permite abrir la página web activa en cualquier otro navegador actualmente instalado en su Mac.
- Agente de usuario: Cambiar el agente de usuario hace que los servidores web identifiquen su navegador como algo distinto a Safari 9.
- Connect Web Inspector: El Inspector web de Safari 9 muestra todos los recursos de una página web, brindando la capacidad de examinar la información de CSS, las métricas y la estructura del DOM, así como su código fuente nativo.
- Mostrar consola de errores: Una de las opciones más utilizadas en el menú Desarrollar, esta consola muestra errores y advertencias de JavaScript, HTML y XML.
- Mostrar fuente de página: Le permite ver y buscar el código fuente de la página web activa.
- Mostrar recursos de la página: Al seleccionar esta opción, se muestran documentos, scripts, CSS y otros recursos de la página actual.
- Mostrar editor de fragmentos: Proporciona la capacidad de editar y ejecutar fragmentos de código, en lugar de una página completa. Esta característica es muy útil desde una perspectiva de prueba.
- Mostrar generador de extensiones: Le permite crear sus propias extensiones de Safari empaquetando su código en consecuencia y agregando metadatos.
- Iniciar la grabación de la línea de tiempo: Registra una cantidad de elementos que incluyen solicitudes de red, ejecución de JavaScript, representación de páginas y otros eventos durante un período definido por el usuario, todos visibles en el inspector de WebKit.
- Cachés vacíos: Al hacer clic en esta opción, se eliminan todos los cachés almacenados en Safari, no solo los archivos de caché de sitios web estándar.
- Desactivar cachés: Con el almacenamiento en caché deshabilitado, los recursos se descargan de un sitio web cada vez que se realiza una solicitud de acceso en lugar de utilizar el caché local.
- Permitir JavaScript desde el campo de búsqueda inteligente: Deshabilitada de forma predeterminada por razones de seguridad, esta función le permite ingresar direcciones URL que contienen JavaScript en la barra de direcciones de Safari.
- Tratar los certificados SHA-1 como inseguros: Como abreviatura del algoritmo de hash seguro, se ha demostrado que la función de hash SHA-1 es menos segura de lo que se pensaba originalmente, de ahí que se agregue esta opción en Safari 9.
