Back to site
Since 2004, our University project has become the Internet's most widespread web hosting directory. Here we like to talk a lot about web development, networking and server security. It is, after all, our expertise. To make things better we've launched this science section with the free access to educational resources and important scientific material translated to different languages.

Mobilni dizajn


Arhiva za mobilni Web site dizajn

SkyTech zaludjenici: MobileESP uključujući HTML5 Okvire za mobilnu listu

Ovo je prilično kul!

Nedavno smo naišli na ovaj unos velikih HTML5 okvira korisnih za razvoj mobilnih aplikacija - i primetili smo da je MobileESP napravio rez!

http://skytechgeek.com/2011/11/html5-frameworks-and-useful-apps-for-mobile-web-development/

Svi projekti izgledaju sjajno - malo koji su bili novi za mene. U slobodno vreme ja polako radim na svom putu kroz njih.. Definitivno pregledajte listu kada imate nekoliko trenutaka i proverite ih. Dozvolite nam da znamo šta mislite o njima!

Smanjite svoj MobileESP!

Zdravo, narode -

Kao što se možda sećate, MobileESP kod pisan je pre svega, tako da je lako za vas da ga pročitate i prilagodite. Iako povratne informacije od ljudi po pitanju izveštavanja koji kod izvršava brzo i efikasno na proizvodnim serverima, postoji nešto što možete da uradite i da pomognete da se procesuiranje ubrza malo više: to umanjite!

Proces smanjenja koda u najmanju ruku uklanja bele prostore, kao što su razmaci, tabulatori, i prekide linija. Zavisno od drugih opcija koje odaberete, on takođe može da ukloni i komentare i skrati način i imena promenljivih (takođe naziva "zbrke", jer to takođe kod čini težim za čitanje). Dakle, u zavisnosti od nivoa smanjivanja koji ste izabrali, možete uživati značajna smanjenja!

Brooke D. ljubazno je napisala da podelim na mreži njen omiljeni PHP alat za smanjivanje, stvoren od starne Web hosting kompanije, CustomHost.  Brook izveštava da ona uživa u oko 50% smanjenja veličine fajla do samo 16 kb bez ikakvih problema u performansama. Proverite ovo na:

http://customhost.com.ua/php-minify/

 Da li Vi imate omiljeni onlajn JavaScript alat za smanjivanje? Molimo Vas da nas obavestite!

Ažurirano: Bolja podrška za Tablete & WP7

Zdravo, narode!

Ovo je samo kratka poruka da Vas obavestim da sam ažurirao MobileESP kod da pruži bolju podršku za tablete.

Takođe sam napravio ispravku u vezi sa Windows Phone 7, čiji Internet Explorer 7- bazirani pretraživač nije sjajan. To definitivno nije u istoj ligi kao iPhone i Android uprkos početnom optimizmu. Nadamo se, kada IE 9-bazirana ispravka bude na uređajima krajem 2011, da će on na kraju ispuniti očekivanja.

Evo vam spisak ispravki za ovaj reviziju:

  • Samo za PHP i Javu: Dodata je uskladištena promenljiva ‘isTierTablet‘.
  • Sve: Dodat je nova funkcija DetectTierTablet(). Ovo će se otkriti na uredjajima sa većim ekranima (minimum 8 inča) sa HTML 5 podrškom. Ovi veći tableti treba da budu u mogućnosti da dele isti poseban dizajn web sajta, ako odlučite da uradite nešto posebno za njih.
  • Sve: Dodata je nova funkcija DetectBlackBerryTablet() . Ovo će otkriti BlackBerry Playbook.
  • Sve: Dodata je nova funkcija DetectAndroidTablet(). Ovo bi trebalo da bude najmanje 8" i pokretanje Honeycomb ili novijih treba uzeti u obzir. Upravo sada, jedino Useragent koji možemo naći je Motorola Xoom. Kada se drugi tableti budu lansirali (posebno Samsung i LG tablete), mi ćemo ovo ažurirati.
  • Sve: DetectAndroid() funkcija je modifikovana da isljuči tablete bazirane na Android platformi. Hoćeš da pokažeš Motorola Xoom istu verziju svog sajta, kao što bi iPad (bilo specijalno formatiranu ili vaš redovni sajt). Možda ne želite da pokažete Xoom mali ekran, iPhone / Nexus One - optimizovanu stranicu.
    • Ovo je naš trenutni stav da 7" tabletima verovatno treba da, poput originalnog Galaxy Tab, biti data Web stranica koja je optimizovana za iPhone / Nexus One, ako je na raspolaganju, pre nego iPad stranica. Ovo mišljenje je zbog veličine ekrana. U režimu portreta, tablet jednostavno nije dovoljno širok.
  • Sve: Od Windows Phone 7 do iPhone ranga do bogatog CSS ranga. Žao nam je, Microsoft, ali IE 7 jednostavno nije dovoljno dobar.

Izgleda da često zaboravljam dvotačku,} ili neku drugu glupu grešku kada uradim ove ispravke. Zato me obavezno obavestite ako primetite greške!

Mi ćemo nastaviti da pratimo scenu tableta za sledeće useve sjajnih tableta baziranih na Honeycomb, plus lansiranje baziranih na HP WebOS. Čim budemo dobili u svoje ruke neki Useragent, mi ćemo ažurirati kod.

Posebna zahvalnost Justin M., Peter V., & Marc L.! Hvala na pomoći i podršci, momci!

Najbolje prakse u pristupu Mobilnim Web Sajtovima

Dovoljno je teško dizajniranje mobilno optimizovanih sajtova. Zamislite samo vreme i novac koji treba da se izgradi fantastičan optimizovan mobilni web sajt - samo da bi se otkrilo da niko zapravo nije posetio sajt, jer sajt nije mogao da se pronadje.

Iskusni mobilni Internet korisnici su naučili da se očekuje da glavne web stranice takođe imaju mobilne verzije. Nažalost, najveći mobilni web sajtovi koriste konvencije za obezbeđivanje pristupa mobilnoj optimizovanu verziju svojih sajtova. Neki sajtovi nude "m.mycompany.com", dok drugi koriste "mycompany.com/wap" među mnogim drugim varijacijama.

Dakle, šta je najbolja praksa za podršku svih ovih različitih mobilnih web adresa? Podrška svima njima, naravno! Ne odustajte od mobilnog saobraćaja nepotrebno (ni sočnih dolara od mobilnog oglašavanja, ako vaš sajt ima podršku za oglase). Najbolji do sada - to je lako da se uradi i treba da uzme samo nekoliko minuta 'vremena učenja vašeg tima. (Dobro, možda i sat ...)

Struktura direktorijuma

U Interaktivnoj ruci, sve mobilne optimizovane web stranice se čuvaju u "m" direktorijumima. Dakle, naša mobilno optimizovana početna stranica zapravo je:

www.hand-interactive.com/m/index.htm

Virtualni Pod-Domeni & Directorijumi

Nije previše bitno gde vaš sadržaj živi, da li je to "m" direktorijum, "wap", "mobile", "foo", ili šta god. Ono što je bitno je da li korisnici mogu da nadju naš mobilni sadržaj.

Dakle, ovo je mesto gde treba da preuzmete pametan pristup i preusmeri kratku lista lako "prepoznatljivih" domena i direktorijuma kao pravi dom vašeg mobilnog sadržaja.

Preporučujemo vam da omogućite sledeće adrese i preusmerite ih na mobilne uređaje. Kliknite na linkove da biste videli da li rade na Vašem web interactivnom sajtu.

iPhone-Specifični Pod-Domeni & Direktorijumi

Postoji sve veći broj kompanija koje nude sadržaj koji je optimizovan za prikaz na iPhone (plus iPod Touch, Android, Palm WebOS, itd itd). Kao i sa generičkim mobilnim Web adresama, izgleda da postoji jedan od nekoliko pristupa Internet nazivanje koje kompanije prate.

Mi trenutno nemamo određeni iPhone sadržaj, ali ako bi imali, mi bismo to skladištili u "i" direktorijumu. Dok ne budemo uradili, mi ćemo preusmeriti sledeće pod-domene i direktorijume na redovni mobilni sadržaj direktorijum (/ m):

Rezime

Ukratko, najbolja praksa je da se podrže svi očigledni pod-domeni (kao wap.mycompany.com) i direktorijumi (kao www.mycompany.com/wap) i preusmeriti ih ka pravoj lokaciji za vaš mobilni sadržaj.

(Ovaj tekst je ponovo postavljen od originalnog izvora na Interaktivna ruka.)

Vodič serija za programere: Kako bi trebalo da podelimo svet mobilnih telefona?

Evo nekoliko brzih preporuke za podele u mobilni svet na mreži. Možete koristiti besplatan open source MobileESP detekcioni kod za mobilne uredjaje koji će vam pomoći da optimizujete svoje Web iskustva.

PREGLED

U principu, ja sam preporučujem dve verzije svake web stranice. One mogu ponuditi istu vesti, članaka i drugih sadržaja, ali UI (posebno oko rasporeda stranice, navigacija i pretraživanje) može značajno varirati između njih.

  • Jedan mobilni sajt treba da bude optimizovan za iPhone, Android, WebOS i druge uredjaje “iPhone ranga”.  Ovi uređaji mogu da prikažu bogate CSS (sa CSS-pogon rasporeda, boja, dugmad, polja za unos, itd), i upravljaju bogate JavaScript-e (kao što su klizna fioka, prikazi sličica, pametnih CSS kodom "popoups", itd.) Koristite DetectTierIphone() metod za otkrivanje istih.
  • drugi mobilni sajt je za sve ostale mobilne uređaje, uključujući i smartphone uređaje sa lošom CSS i / ili Java sposobnostima (Nokia S60, BlackBerry, Windows Mobile) i duge liste masovnih tržišnih "igranih telefona" uređaja sa malim ekranima i ograničenih pregledačima . (Mislite Motorola RAZR, LG Dare, i sve ostalo što možete dobiti danas besplatno). Koristite DetectTierRichCss() i DetectTierOtherPhones() da bi ste otkrili ovo.

BOGATI CSS UREDJAJI

Brza napomena o tome šta ja zovem "Bogat CSS uredjaj". Ako si stvarno fensi, možete da pokazujute iPhone verziju stranice bogatim CSS uređajima (kao što su Blackberry i Nokia telefoni), ali postoji ... nekoliko pitanja sa takvim plan.

Prvo, bogata CSS klasa uređaja često CSS prikazuje prihvatljivo ako ste spremni da pravite puno kompromisa u dizajnu. Plus, pošto ovi uređaji ne mogu pouzdano da koriste JavaScript (ili za neke poput BlackBerry, a ne na sve), što bi trebalo da onemogući JavaScript funkcije na ovim stranicama. Dakle, ako imate veoma ubedljiv razlog da prodjete kroz takav bol, jednostavno Vam preporučujem ove uredjaje za vaše opšte mobilno orijentisane stranice.

Gledajte na to ovako: Zašto kvariti iskustvo vašim iPhone i Android korisnicima samo da bi malo Nokia i BlackBerry korisnika mogli videti lepšu-ali-obogaljenu web stranicu?

OPTIMIZACIJA ZA IPHONE DA BI IH DRUGI UREDJAJI KORISTILI - ILI MILOSTIVO ZANEMARILI

Kao što ste možda čuli, iPhone ima neke ekstra pametne stvari ugradjene u pregledaču. Kada optimizujete svoj sajt za uredjaj "iPhone" ranga, dobra vest je da se neke od ovih funkcija mogu koristi od strane drugih uredjaja, jer većina njih dele WebKit-baziran pretraživač. Šta god da ostali uredjaji ne mogu da koriste, oni će to jednostavno tiho ignorisati i bez izazivanja greške popups. Naravno, nadam se da će drugi uredjaji uskoro pokupiti neke od ovih ne-osnovnih funkcija. Ali, u međuvremenu, ne izostavljajte ih!

<HEAD> Sekcija

  • Optimizujte pogled za širine mobilnoh ekrana: <meta name=”viewport” content=”width=device-width, user-scalable=no”> (Alternativno, možete uključiti zoomiranje, ako želite. Pomaže da se osigura da je sadržaj učitan kada korisnik rotira touchscreen uredjaje.)
  • Setujte omiljenu ikonu: <link rel=”shortcut icon” type=”image/x-icon” href=”images/favicon.ico”> (Neki mobilni pretraživači skladištenje omiljenu ikonu za listu markera. Nekoristi se kod iPhone.)
  • iPhone ikona za početnu stranu: <link rel=”apple-touch-icon” href=”images/apple-touch-icon.png”> (Ikona mora da bude 57 x 57 pixela.)
  • Pokreni Web stranu u punom ekranu: <meta name=”apple-mobile-web-app-capable” content=”yes”>
  • Sadržaj je prilagodjen za mobilne uredjaje: <meta name=”HandheldFriendly” content=”true” /> (Po standardu, ne koristi se kod iPhone. Govori pretraživačima i mobilnim pretraživačima da je sadržaj optimizovan za mobilne uredjaje).

CSS Stajling

  • Polje za unos Virtuelne tastatura za optimizaciju: Kaže virtuelnoj tastaturu uredjaja da je ulaz polje za unos teksta opšte, e-mail adresa (<input type=”email” />), telefonski broj (type=”number”) ili web adresa (type=”email”). Podržano kod iPhone; drugi mobilni pretraživači ignorišu ove savete za sada i podrazumevaju čist tekst. [Pogledajte članak]
  • Polje za unos – Uključi Auto-korekciju and Auto-velika slova: Ponekad želite ove funkcije, ponekad i ne. Na primer, eksplicitno ih želite isključiti iz polja za unos email-a. Ili ih možda želite na celu lokaciju polja za pretragu. Evo kako: <input type=text autocorrect=”on” autocapitalize=”on” /> (Izgleda samo za iPhone)
  • Polje za unos – Prikazuje ‘Predlog za vodeni znak’ Tekst: Pokazuje oznaku u polju za unos ili instrukciju kao što je "Enter pretragu", koji je prikazan samo u praznom polju za unos. Evo kako: <input type=text placeholder=”Enter search” /> (Izgleda da je samo za iPhone, plus neki desktop pretraživači. Možete razmisliti fensi JavaScript tehniku za čišćenje polja za ne-iPhone uredjaje sa fokusom ako tekst u pilju za unos odgovara vrednosti čuvara mesta.) 
  • Zaobljeni uglovi: Ne koristite nespretne slike da date kutijama zaobljene uglove! Umesto toga, koristite CSS. Sve uredjaji iPhone ranga mogu koristiti "-webkit-border-radius" i srodnih CSS predloga, pa vas molimo da ih i koristite!
  • CSS3 Tasteri bez slika: Postoji više tehnika za prikazivanje prilagođenih Tastera bez upotrebe slika u pozadini. Oni izgledaju odlično za pretraživače na uredjajima iPhone ranga.
  • iPhone Animacije: Mobile CSS/JavaScript kompleti alata kao jqTouch su odlični i mogu da uključuju sjajne iPhone-specijalne animacije — koje ne rade na drugim uredjanjima. Zato budite sigurni da ste ih uključili samo za iPhone uredjaje. (Na primer, stavljanjem animacije u posebnoj CSS datoteku koju dinamički učitava samo za iPhone uređaje. Koristite DetectIphoneOrIpod() metod u MobileESP.)


Published (Last edited): 24-12-2012 , source: http://blog.mobileesp.com/?cat=6