Projekt menedzselés

A segédlet lépésről-lépésre mutatja be, hogyan készítsünk honlapunknak külön webnézetet az apple ios eszközke optimalizálva. A cikkbe belecsempészik némi joomla vonatkozást is.

1. lépés: Határozzuk meg milyen eszközről jelenítődik meg az oldal, ha iphone/ipod, akkor automatikusan lépjen át egy meghatározott html-re.

Erre én egy java script megoldást preferálok, de természetesen elkészíthető .htaccess-el és php segítségével is.

.htaccess megoldás:

RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod)
RewriteCond %{REQUEST_URI} !^/m/
RewriteRule ^(.*)\.html$ /m/$1.html [L]

.htacces almappás megoldása (tedomained.hu/almappa):

Rewriteengine onq
RewriteCond %{HTTP_USER_AGENT} (iPhone|iPod)
RewriteCond %{REQUEST_URI} !/m/
RewriteRule /blog/(.*)\.html$ /al-mappa-neve/m/$1.html [L]

Java script megoldás (ez minden szerveren beállítható, iphon / ipod eszközöket átdobja az iphone-nezet.html-re. A head tagba kell betenni, ezt jeleztem is):

<head>
<script language=javascript>
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{
location.replace("iphone-nezet.html");
}
</script>
</head>

2. lépés: "Home screen ikon" létrehozása, illetve beépítése az oldalba.

A head részbe helyezzük el a következő kódot. Ez mutatja meg az ikon helyét a weben. Jelenlegi formájában az apple-touch-icon.png-t keresi a html mellett, mivel relatív hivatkozásként van megnevezve. Én ezeknek a beállítására abszolút hivatkozás szoktam használni (azaz http://www.tedomained.hu/apple-touch-icon.png).

File kiterjesztés:

.png

Felbontás:

72 dpi vagy 72ppi (ugyanaz a kettő)

Méretezés:

3. generációs eszközökig: 57 x 57

4. generáció: 114 x 114 (nagy felbontás/retina display)

Fotos megjegyzés:

A képet ne vágjuk ki, ne kerekítsük le a sarkait... Ezt megteszi helyettünk az ios rendszer.A következő effektek automatikusan hozzá adódnak a képünkhöz: lekerekített sarok, vetett árnyék, visszaverődő fény. Az alábbi példa bemutatja, hogy az elkészített példaképünk (bal oldalt lent), hogyan fog megjelenni iphon-on (jobb oldalt lent).

iphone startup icon effect

Az apple arra is ad egy lehetőséget, hogyha ezt nem szeretnénk. Egy egyszerű megoldással figyelmen kívül hagyja a rendszer. Adjuk a képünknek ezt a nevet: apple-touch-icon-precomposed.png

Az ios effektjeit tartalmazó psd letölthető az alábbi linkről, használható látványtervekhez illetve apple-touch-icon-precomposed.png-ként elmenve effektekkel együtt.

Home screen button sablon letöltése

3. lépés: "Startup screen" létrehozása, illetve beépítése az oldalba.

About Us

Partners

3D design and animation