01 de 06
Activar e usar o modo de deseño receptivo en Safari 9
Sendo un desenvolvedor web no mundo actual significa apoiar un conxunto de dispositivos e plataformas, que ás veces pode resultar ser unha tarefa desalentadora. Incluso co código máis ben deseñado que se adhire aos estándares web máis recentes, aínda podes atopar que as partes do teu sitio web non poden verse ou actuar de maneira que o desexes en determinados dispositivos ou resolucións. Cando se enfronta ao reto de apoiar unha ampla gama de escenarios, ter as ferramentas de simulación axeitadas á súa disposición pode ser inestimable.
Se es un dos moitos programadores que usa unha Mac, o conxunto de ferramentas para desenvolvedores de Safari sempre foi útil. Co lanzamento de Safari 9 a amplitude desta funcionalidade expandiuse considerablemente, principalmente debido ao Modo de Deseño Responsivo_ que lle permite ver como o seu sitio renderáse en varias resolucións de pantalla e en diferentes construcións de iPad, iPhone e iPod touch.
Este tutorial detalla como activar o modo de Deseño Responsivo, así como como usalo para as necesidades de desenvolvemento.
En primeiro lugar, abra o navegador Safari.
02 de 06
Preferencias de Safari
Fai clic en Safari no menú do navegador, situado na parte superior da pantalla. Cando apareza o menú despregable, seleccione a opción Preferencias_ cercada no exemplo anterior.
Teña en conta que pode empregar o seguinte atallo de teclado en lugar do elemento de menú mencionado anteriormente: COMMAND + COMMA (,)
03 de 06
Mostrar o menú Desenvolver
O diálogo Preferencias de Safari agora debería mostrarse, superpondo a xanela do seu navegador. Primeiro, fai clic no ícone Avanzado_ representado por un engranaje e situado na esquina superior dereita da xanela.
As Preferencias Avanzadas do navegador agora deberían estar visibles. Na parte inferior hai unha opción acompañada dunha caixa de verificación, marcada como menú Mostrar desenvolvemento na barra de menús e en círculo no exemplo anterior. Fai clic sobre a caixa de verificación unha vez para activar este menú.
04 de 06
Introduza o modo de Deseño Responsivo
Unha nova opción agora debería estar dispoñible no menú Safari, situado na parte superior da pantalla, marcado como Desenvolvemento . Faga clic nesta opción. Cando apareza o menú despregable, seleccione Introduza o Modo de Deseño Responsivo _ cercado no exemplo anterior.
Ten en conta que pode empregar o seguinte atallo de teclado en lugar do elemento de menú mencionado anteriormente: OPTION + COMMAND + R
05 de 06
Modo de deseño receptivo
A páxina web activa agora debería mostrarse en modo de deseño sensible, como se mostra no exemplo anterior. Ao seleccionar un dos dispositivos iOS enumerados, como o iPhone 6 ou unha das resolucións de pantalla designadas dispoñibles, como 800 x 600, pode ver de inmediato a forma na que a páxina renderase nese dispositivo ou na resolución de visualización.
Ademais dos dispositivos e resolucións que se mostran, tamén pode instruír a Safari para que simule un axente de usuario diferente, como o dun navegador diferente, premendo no menú despregábel que se mostra directamente sobre os íconos de resolución.
06 de 06
Desenvolver Menú: Outras opcións
Ademais do Modo de Deseño Responsivo, o menú Desenvolvemento de Safari 9 ofrece moitas outras opcións útiles, algunhas que se detallan a continuación.
- Abrir páxina con: Permítelle abrir a páxina web activa en calquera outro navegador instalado actualmente no seu Mac.
- Axente do usuario : o cambio do axente do usuario provoca que os servidores web identifiquen o seu navegador como algo distinto do Safari 9.
- Connect Web Inspector: o inspector web de Safari 9 mostra todos os recursos dunha páxina web, proporcionando a capacidade de detectar informacións CSS, métricas e estrutura DOM, así como o seu código fonte nativo.
- Mostrar Consola de Erro: Unha das opcións máis utilizadas no menú Desenvolver, esta consola mostra erros e avisos JavaScript, HTML e XML.
- Mostrar a páxina fonte: permítelle ver e buscar o código fonte da páxina web activa.
- Mostrar os recursos da páxina: Ao seleccionar esta opción amósanse documentos, scripts, CSS e outros recursos desde a páxina actual.
- Mostrar editor de fragmentos: fornece a capacidade de editar e executar fragmentos de código, en oposición a unha páxina completa. Esta característica é moi útil desde unha perspectiva de proba.
- Mostrar o build de extensións: permítelle crear as túas propias extensións de Safari engadindo o seu código de acordo e engadindo metadatos.
- Iniciar a gravación da liña de tempo: rexistra unha serie de elementos que inclúen solicitudes de rede, execución de JavaScript, renderización de páxina e outros eventos para un período definido polo usuario_ todo o que se pode ver no inspector de WebKit.
- Cachas baleiras: Ao premer nesta opción elimínase toda a caché almacenada dentro de Safari, non só os ficheiros estándar de caché do sitio web.
- Desactivar as caché: coa caché desactivada, os recursos descargaranse dun sitio web cada vez que se realiza unha solicitude de acceso fronte á utilización da caché local.
- Permitir JavaScript desde o campo de busca intelixente: desactivado por defecto por motivos de seguridade, esta función permítelle ingresar URLs que conteñan javascript: na barra de enderezos de Safari.
- Trata os certificados SHA-1 como inseguros: abreviado para o algoritmo de Hash seguro, a función SHA-1 hash ten probado ser menos segura do que se pensaba orixinalmente [de aí a adición desta opción no Safari 9.
Lectura relacionada
Se descubriu este útil tutorial, asegúrese de ver os nosos outros tutoriais de Safari 9.