Liderii învață să construiască site-uri web pentru iPhone

Așa cum a promis, vom din timp în timp pentru a partaja de învățare. Școala Engage interactivă. dedicat tot ceea ce te cunosc pe Internet, este: Pentru a afla cum de a crea un site care se concentrează în special pe iPhone.

La fel ca orice alt browser web, Safari are nevoie de toate cod html standard la partea de sus și de jos a paginii, și totuși nu ar fi rău pentru a adăuga un cuplu de cuvinte cheie pentru care Google va fi în măsură să monitorizeze conținutul site-ului. În plus, există unele speciale meta-tag-uri iPhone, cu care va fi capabil de a gestiona furnizarea de conținut. Am un exemplu de modul în care acest cod ar trebui să arate ca în domeniul de aplicare al „capului“.

Dacă te uiți la liniile de 3,4 și 6, veți observa că nu au mai întâlnit un astfel de text.

Înainte să trecem la j # 097; vascript și CSS, ar trebui să fie plasat peste ID-urile de conținut și setați stilurile prestabilite, astfel încât nu a putut vedea totul dintr-o dată, înainte de site-ul pentru a încărca complet.

În primul rând, avem nevoie de shell-ul, care este întregul conținut al paginii. Acest lucru este foarte important, deoarece j # 097; vascript se va schimba clase acest shell care va afecta numărul de elemente din interiorul acestuia.

În continuare, am adăuga un logo. Aceasta, desigur, opțional, dar aici este un exemplu de conținut, care este întotdeauna vizibil, indiferent de orientarea pe care doriți.

Parametrii „display: none“ va fi expus la aceste zone și „display: block“, în scopul de a evita posibilele confuzii mai mult decat o culoare de fundal / imagine și dimensiune. Lăsați totul la conținutul în regiune.

Aceste stiluri set pur și simplu, culoarea și dimensiunea fontului pentru mai multe elemente, precum și stilul de logo-ul și o pagină de coajă. Ai deja observat, probabil, că am folosit fontul Helvetica. Acest font este prezent în iPhone, și cred că este remarcabil, și, prin urmare, aplicat. Nu mai nu Arial!

Prin utilizarea „overflow: auto“ la „#page_wrapper“ Am subliniat faptul că nici unul dintre elementul flotant nu preaplin div său conține. Aceasta este cea mai bună alternativă la tag-ul "
“.

CSS următorul cod va controla care blocurile sunt afișate și care sunt ascunse, care vor fi controlate de j # 097; vascript, la care vom ajunge în curând.

Pentru a începe cu, ar trebui să ne implicit pentru a ascunde ceva acolo. Acest lucru va asigura că ne-am nu apare conținut diferit, care este apoi brusc dispare atunci când se încarcă pagina.

Mai mult, lățimea va fi specificată blocuri. Dacă sunteți în curs de dezvoltare un site web care va fi întinsă pentru a se potrivi pe ecran, veți dori, probabil, să specificați înălțimea și mai mult.

În cele din urmă, bitul inteligent (de fapt, nu atât de inteligent). El arată pur și simplu blocuri dacă „#page_wrapper“ clasa corectă. Aceste clase sunt indicate de j # 097; vascript. Ar fi posibil să se facă toate acestea prin j # 097; vascript, dacă am făcut site-ul Engage cu unele trucuri în locurile potrivite, în cazul în care clasele a trebuit să lega stiluri specifice.

- Solemnă final: Determinarea orientării (și un alt truc util)

Asta e ceva foarte inteligent! Dar trebuie să recunosc, nu tot a fost scris de mine, unele părți au fost luate din diferite exemple din rețea. Am adus o mică listă de resurse utilizate la sfârșitul articolului. Conceptul, cu toate acestea, este deținută în întregime de Engage Interactive.

Prima linie inițializează o schimbare a orientării. Fără ea, orientarea va fi stabilită la pornire, cu excepția faptului că, atunci când aceasta este prima dată când va fi schimbat.

Aceasta este o caracteristică care face modificări paginii, care vă permite să afișați conținut diferit. Să ne uităm la ea pas cu pas:

Deftly, nu-i așa?

Aici am folosit, de asemenea, un alt mic truc, care este de a finaliza programul utilizează un ecran mare și frumos pentru iPhone.

j # 097; vascript de așteptare pentru o descărcare completă a paginii și apoi ne mută la elementul numit. În acest caz, „page_wrapper“. Aceasta ascunde imediat bara de locație, în schimb am făcut manual. Acest lucru este foarte util dacă faci o pagină care întinsă cu precizie pe ecranul iPhone.

Faceți clic dreapta și salvați fișierul:

* Dintr-o dată în arhivă: source.zip - source.zip [6,11 Kb] (Count: 113)

Deci, toate acestea au fost partea tehnică a procesului de creare a site-ului, închis pentru iPhone, etc, puteți continua să creeze propria sa. Am colectat, de asemenea, unele link-uri utile catre sursele pe care le-ar putea fi de ajutor.

- Lucrurile care merită să ne amintim

Înainte de a merge la propriul dvs. site-ul pentru iPhone, v-ar fi merită să ne amintim câteva lucruri:

Apple a oferit cu amabilitate toate informațiile necesare pentru persoanele pe care le pot utiliza în condiții de siguranță atunci când începe de transport maritim pentru iPhone aplicatii web. Am selectat cele mai importante pagini, ascunse sub mai multe straturi de informații și sfaturi (dar pentru a le va trebui să se înregistreze) utile:

Cel puțin, aceste referințe au fost disponibile la momentul scrierii, dar am observat că Apple pare să actualizeze informațiile la intervale de o săptămână. Deci, dacă ai găsi ceva interesant astăzi, săptămâna viitoare s-ar putea să dispară în mod misterios. Ei au un motor de căutare mare pe site-ul, astfel încât să puteți găsi cu ușurință ceea ce aveți nevoie.

- Și da, cum aș putea să uit!

Acest script mic va determina iPhone sau iPod Touch și vă mutați la orice pagină necesară.