01 de 06
Activa i utilitza el mode de disseny sensible al Safari 9
El fet de ser un 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 les 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'amplada d'aquesta funcionalitat s'ha ampliat considerablement, principalment a causa del Mode de Disseny Responsive_, que us permetrà obtenir una vista prèvia de com el vostre lloc es mostrarà en diverses resolucions de pantalla, així com en diferents versions de l'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.
En primer lloc, obre el navegador Safari.
02 de 06
Preferències de Safari
Feu clic a Safari al menú del navegador, situat a la part superior de la pantalla. Quan aparegui el menú desplegable, seleccioneu l'opció Preferències_ cercada en l'exemple anterior.
Tingueu en compte que podeu utilitzar la següent drecera de teclat en lloc de l'element del menú esmentat: COMMAND + COMMA (,)
03 de 06
Mostra 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çada_ 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 verificació, etiquetada com a menú Mostra el desenvolupament a la barra de menú i amb cercles en l'exemple anterior. Feu clic a la casella de selecció una vegada per activar aquest menú.
04 de 06
Introduïu el mode de disseny de resposta
Ara, una nova opció hauria d'estar disponible al menú de Safari, ubicat a la part superior de la pantalla, anomenat Desenvolupament . Feu clic en aquesta opció. Quan aparegui el menú desplegable, seleccioneu Enter Mode de disseny sensible _ cercat en l'exemple anterior.
Tingueu en compte que podeu utilitzar la següent drecera de teclat en lloc de l'element del menú esmentat anteriorment: OPTION + COMMAND + R
05 de 06
Mode 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ó.
06 de 06
Desenvolupar Menú: Altres opcions
A més del mode de disseny sensitiu, el menú de Desenvolupament de Safari 9 ofereix moltes altres opcions útils_ algunes que s'enumeren a continuació.
- Pàgina oberta amb: permet obrir la pàgina web activa en qualsevol altre navegador instal·lat actualment a la vostra màquina.
- Agent d'usuari: canviar l'agent d'usuari fa que els servidors web identifiquin el vostre navegador com una altra cosa que Safari 9.
- Connect Web Inspector: 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.
- Mostrar consola d'errors: una de les opcions més utilitzades al menú Desenvolupament, aquesta consola mostra errors i advertiments 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 recursos de pàgina: si seleccioneu aquesta opció, es mostraran documents, scripts, CSS i altres recursos des de la pàgina actual.
- Mostra l'Editor de fragments: proporciona la possibilitat d'editar i executar fragments de codi, en lloc d'una pàgina completa. Aquesta característica és molt útil des d'una perspectiva de prova.
- Mostra el desenvolupador d'extensió: us permet crear les vostres pròpies extensions de Safari empaquetant el vostre codi en conseqüència i afegint metadades.
- Iniciar enregistrament de la línia de temps: 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_ tots els que es poden veure a l'inspector de WebKit.
- Emmagatzematge en memòria cau : si feu clic a aquesta opció, esborreu la memòria cau emmagatzemada a Safari, no només els fitxers de memòria cau del lloc web estàndard.
- Deshabilitar les memòries de caché : amb la memòria cau inhabilitada, 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 de manera predeterminada per motius de seguretat, aquesta característica us permet escriure URL que contingui JavaScript: a la barra d'adreces de Safari.
- Tracteu els certificats SHA-1 com a insegurs: abreujat per l'algorisme de Hash segur, s'ha demostrat que la funció hash SHA-1 és menys segura del que es pensava originalment. D'aquesta manera, l'addició d'aquesta opció al Safari 9.
Lectures relacionades
Si heu trobat aquest tutorial útil, assegureu-vos de consultar els nostres tutorials de Safari 9.
- Com gestionar les notificacions d'empenta del lloc web
- Com exportar una pàgina web a un fitxer PDF
- Com configurar Safari 9 Extensions per actualitzar automàticament
- Com s'utilitza la funció de llocs fixats