Ser desenvolupador web en el món actual suposa donar suport a una gran quantitat de dispositius i plataformes, que a vegades poden resultar ser una tasca desalentadora. Fins i tot amb el codi més ben dissenyat que s'adhereix als estàndards web més recents, encara podeu trobar que algunes parts del vostre lloc web no es veuen o actuen de la manera que vulgueu en determinats dispositius o resolucions. Davant el repte de donar suport a una àmplia gamma d'escenaris, tenir les eines de simulació adequades a la vostra disposició pot ser molt valuosa.
Si sou un dels molts programadors que utilitza una Mac, el conjunt d'eines de desenvolupadors de Safari sempre ha estat útil. Amb l'alliberament de Safari 9, l'amplitud d'aquesta funcionalitat s'ha ampliat considerablement, principalment a causa del mode de disseny de resposta, que us permetrà obtenir una vista prèvia del rendiment del vostre lloc en diverses resolucions de pantalla, així com en diferents versions d'iPad, iPhone i iPod touch.
Aquest tutorial detalla com activar el mode de disseny de resposta, així com com utilitzar-lo per a les necessitats de desenvolupament.
Preferències de Safari
En primer lloc, obre el navegador Safari.
Fer clic a Safari al menú del navegador, situat a la part superior de la pantalla. Quan aparegui el menú desplegable, seleccioneu el Preferències opció en cercle en l'exemple que es mostra.
Nota: Podeu utilitzar la següent drecera de teclat en comptes de l'element del menú esmentat anteriorment: COMMAND + COMMA (,)
02 de 05Mostra el menú Desenvolupar
S'hauria de mostrar el diàleg Preferències de Safari, superposant la finestra del vostre navegador. Primer, feu clic a la icona Avançat icona representada per un engranatge i situada a l'extrem superior dret de la finestra.
Les preferències avançades del navegador ara han de ser visibles. A la part inferior hi ha una opció acompanyada d'una casella de selecció, etiquetada Mostra el menú Desenvolupar a la barra de menú i heu cercat en l'exemple anterior. Feu clic a la casella de selecció una vegada per activar aquest menú.
03 de 05Introduïu el mode de disseny de resposta
Ara, una nova opció hauria d'estar disponible al menú Safari, ubicat a la part superior de la pantalla, etiquetat Desenvolupar. Feu clic en aquesta opció.
Quan aparegui el menú desplegable, seleccioneu Introduïu el mode de disseny de respostacerclejat en l'exemple que es mostra.
Nota: Podeu utilitzar la següent drecera de teclat en comptes de l'element del menú esmentat anteriorment:OPCIÓ + COMMAND + R
04 de 05Mode de disseny sensitiu
La pàgina web activa s'hauria d'mostrar ara en mode de disseny sensible, com es mostra a l'exemple anterior. Si seleccioneu un dels dispositius iOS que apareixen, com ara l'iPhone 6 o una de les resolucions de pantalla designades disponibles, com ara 800 x 600, podeu veure de seguida com es renderitzarà la pàgina en aquest dispositiu o en la resolució de la pantalla.
A més dels dispositius i resolucions que es mostren, també podeu indicar a Safari que simuli un agent d'usuari diferent, com un d'un navegador diferent, fent clic al menú desplegable que es mostra directament a sobre de les icones de resolució.
05 de 05Desenvolupar Menú: Altres opcions
A més del mode de disseny sensitiu, el menú Desenvolupament de Safari 9 ofereix moltes altres opcions útils, algunes de les quals es detallen a continuació.
- Pàgina oberta amb: Us permet obrir la pàgina web activa en qualsevol altre navegador instal·lat actualment a la vostra Mac.
- Agent d'usuari: Si canvieu l'agent d'usuari, els servidors web identifiquen el vostre navegador com una altra cosa que Safari 9.
- Connecteu l'inspector web: L'inspector web de Safari 9 mostra tots els recursos d'una pàgina web, proporcionant la possibilitat de detectar la informació CSS, les mètriques i l'estructura de DOM, així com el codi font natiu.
- Mostra consola d'errors: Una de les opcions més utilitzades al menú Desenvolupament, aquesta consola mostra errors i advertències JavaScript, HTML i XML.
- Mostra la font de la pàgina: Us permet veure i cercar el codi font de la pàgina web activa.
- Mostra els recursos de la pàgina: Si seleccioneu aquesta opció, es mostrarà documents, scripts, CSS i altres recursos des de la pàgina actual.
- Mostra l'editor de fragments: Proporciona la capacitat d'editar i executar fragments de codi, a diferència d'una pàgina completa. Aquesta característica és molt útil des d'una perspectiva de prova.
- Mostra el creador d'extensió: Us permet crear les vostres pròpies extensions de Safari empaquetant el vostre codi en conseqüència i afegint metadades.
- Inici de la cronologia de gravació: Registra una sèrie d'elements, incloses les sol·licituds de xarxa, l'execució de JavaScript, la representació de pàgines i altres esdeveniments per a un període definit per l'usuari, tot visible des del WebKit Inspector.
- Cistelles buides: En fer clic en aquesta opció, esborrarà tota la memòria cau emmagatzemada a Safari, no només els fitxers de memòria cau del lloc web estàndard.
- Desactiva les memòries cau: Amb la desactivació de la memòria cau, els recursos es baixen d'un lloc web cada vegada que es fa una sol·licitud d'accés en lloc d'utilitzar la memòria cau local.
- Permet JavaScript des del camp de cerca intel·ligent: Desactivat per defecte per motius de seguretat, aquesta característica us permet escriure URL que contingui JavaScript a la barra d'adreces de Safari.
- Tracte els certificats SHA-1 com a insegurs: Breu per l'algorisme de Hash Secure, la funció hash SHA-1 ha demostrat ser menys segura del que es pensava originalment, per tant, l'addició d'aquesta opció al Safari 9.
