Share
In deze zelfstudie gaan we een website ontwerpen voor de Mobile Safari Browser (te vinden op de iPhone en de iPod Touch). We beginnen helemaal opnieuw in Photoshop en werken stap voor stap aan een voltooid product compleet met een geanimeerde jQuery-afbeeldingschuif.
Met miljoenen iPhone-gebruikers die dagelijks het internet gebruiken, is het cruciaal dat uw bedrijf of merk mobiel kan bieden. gebruikers die de Safari-browser gebruiken, met een website die is ontworpen voor hun apparaat. In plaats van te worstelen met kleine lettertypen, moeilijk te persen koppelingen en andere bruikbaarheidsproblemen met websites die samen met een mobiele webbrowser komen, kunnen we onze bezoekers een interactieve ervaring bieden waar ze van zullen genieten.
Het is belangrijk voor ons om onze gebruikers een ervaring te bieden waar ze van zullen genieten, of we zullen onze bezoekers frustreren en mogelijk zelfs ertoe leiden dat ze onze site verlaten en nooit meer terugkomen. We zullen een site maken die focust op een paar belangrijke punten. Onze site zou:
Als u een Mac gebruikt, kunt u de iPhone SDK downloaden van Developer.Apple.com. Meld u aan voor een gratis account en download de nieuwste versie van de iPhone SDK met de iPhone-simulator. Een echte iPhone of iPod Touch is altijd de beste oplossing, maar de simulator werkt goed voor ontwikkelingsdoeleinden.
Download eerst deze cementtextuur van Flickr. Breng de afbeelding in een Photoshop-document met de afmetingen 320px (breedte) bij 480px (hoogte). Verander de achtergrondkleur in # 1D1D1D. Wijzig de laagstijl op de textuur in "Vermenigvuldigen" en voeg een wit naar zwart verloopmasker toe.
Klik met de rechtermuisknop op een laag en maak de afbeelding vlak. Kopieer en plak in een nieuw venster, zodat we dit in een herhalende afbeelding kunnen veranderen. Ga naar Filter> Overig> Offset. Stel de horizontale waarde in op +162. Gebruik de healingtool om het probleemgebied op te ruimen. Sla de afbeelding op als een jpg stel de kwaliteit in op 60%.
Open een ander Photoshop-document en stel het in op 195px (breedte) op 75px (hoogte). Maak twee lagen elk met een lijn getekend met het lijngereedschap. Scheid de lijnen met één pixel. De bovenste regel moet wit zijn, de onderkant donkergrijs. Exporteer de afbeelding zoals we in de vorige stap hebben gedaan. Beide afbeeldingen moeten worden opgeslagen onder een map met de naam "images"
Nu is het tijd om de startpagina te coderen. We gaan de basiscode toevoegen en deze vervolgens in de volgende stap stylen. Sla deze op als index.html. De volgende code geeft ons de basis html van de startpagina en een link naar een stylesheet die we zullen maken.
Lorum Ipsum Mobile Site Lorum ipsum
- Huis
- Wat betreft
- Contact
Lorem ipsum dolor
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minimus veniam, quis nostrud exercise ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lees verder…Copyright 2009
Home | Over | Contact
Laten we wat stijl toevoegen door een nieuw bestand te maken met de naam styles.css. De volgende code geeft ons stijl voor de html-code van de startpagina.
Accentsconagua
html, body, div, span, object, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, adres, code, img, small, strong, dl, dt, dd, ol, ul, li, fieldset, vorm, label margin: 0; opvulling: 0; rand: 0; overzicht: 0; tekengrootte: 100%; vertical-align: basislijn; achtergrond: transparant; / * Hoofdstijlen * / body background: # 1d1d1d url ('images / background.jpg') repeat-x; kleur: #FFF; font-family: "Arial", sans-serif; regelhoogte: 20px; lettergrootte: 13px; -webkit-tekst-formaat-aanpassen: geen; p opvulling: 10px 5px; h1 color: # b5b5b5; lettergrootte: 26px; marge: 10px 5px; h1 span color: # d5ac55; h2 color: # d5ac55; lettergrootte: 18px; font-gewicht: normaal; margin-top: 10px; padding-links: 5px; #hidden weergeven: geen; .show display: inline; #readmore height: 30px; # lees meer-knop achtergrond: # 000; kleur: # d5ac55; weergave: blok; zweven: rechts; opvulling: 5px 7px; text-align: center; tekstdecoratie: geen; breedte: 76 px; / * Menustijlen * / #menu ul border-bottom: 1px solid #FFF; hoogte: 23 px; lijststijl: geen; marge: 0 5px; #menu ul li float: links; margin-right: 30px; #menu ul li a color: #FFF; tekstdecoratie: geen; text-transform: hoofdletters; #menu ul li.selected border-bottom: 3px solid #FFF; / * Sideshow Styles * / #slideshow border: 1px solid # 786334; border-bottom: 1px solid # 22201d; margin-bottom: 20px; margin-top: 10px; #slideshow ul li height: 174px; lijststijl: geen; breedte: 316 px; #controls positie: absoluut; margin-top: -40px; lijststijl: geen; #controls li background: rgb (0,0,0); achtergrond: rgba (0,0,0,0.9); rand: 2px vast # 202020; border-bottom: 1px solid # 797979; zweven: links; text-align: center; #controls li a display: block; kleur: #FFF; hoogte: 20 px; opvulling: 7px; tekstdecoratie: geen; breedte: 20px; / * Footer Styles * / #footer background: # 000; hoogte: 40px; margin-top: 10px; #footer p # copyright float: right; breedte: 100 px; #footer p # sitemap width: 200px; #footer a color: #FFF; tekstdecoratie: geen; Bewaar de afbeelding van de Fire truck in een map genaamd "imageslider" in de map "images". Sla de afbeelding op als img1.jpg. Dit wordt het beeld weergegeven in de afbeeldingschuifregelaar.
Download de schuifregelaar Easy Slider 1.7 jQuery en kopieer de map "js" naar dezelfde map als ons index.html-bestand. Kopieer de volgende code naar uw head-tags in het index.html-bestand.
Je hebt nu een functionerende startpagina.
Om de adresbalk te verwijderen, vervangt u de body-tag door het volgende:
En voeg de volgende metatag aan uw hoofd toe om problemen met zoomen en tekstaanpassing op te lossen.
Kopieer de index.html-pagina om de pagina about te maken. Verwijder de code die specifiek is voor de jQuery-schuifregelaar. Voeg het volgende toe onder de knop meer lezen om de "zijbalk" te maken.
over mij
p 123.456.7890 e [email protected] a 123 Someplace ST
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
sociale media
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non sunt in culpa qui officia deserunt mollit anim id est laborum.
- tjilpen
- YouTube
- Screenr
- Mijn ruimte
Sla de volgende afbeelding op in de map met afbeeldingen. Noem het cat.jpg.
Vervolgens is het tijd om wat stijl toe te voegen aan de elementen in de zijbalk. We zullen dat moeten doen met wat CSS. Voeg het volgende toe aan uw styles.css-bestand.
/ * Zijbalkstijlen * / #sidebar achtergrond: -webkit-gradiënt (lineair, linksboven, linksonder, kleur-stop (0,0, # e1d9ce), kleur-stop (0,1, # e6e6e6)); kleur: # 000; margin-top: 10px; opvulling: 0px 5px 5px 5px; #sidebar p.fade background: url ('images / fade.jpg') repeat-x; #sidebar h2 color: # 000; lettergrootte: 18px; font-gewicht: normaal; opvulling: 7px 0; #sidebar img border: 1px solid #FFF; marge: 5px 10px; .contactinfo border-bottom: 3px dotted # 656565; weergave: blok; kleur: # 2f2f2f; lettertypegrootte: 20px; marge links: 10 px; .contactinfo een display: block; achtergrond: # 646363; kleur: # efaa19; zweven: rechts; tekstdecoratie: geen; # sociale links lijststijl: vierkant; opvulling: 10px 0 10px 20px; breedte: 95%; # sociale links li float: right; breedte: 33%; # sociale links li a background: # 646363; kleur: # efaa19; opvulling: 2px 4px; tekstdecoratie: geen; .helder duidelijk: beide; 
Kopieer de betreffende pagina en noem deze contact.html. Voeg de volgende code toe aan de kop van je html. Het is code om de google map te vergroten met behulp van hun API. U heeft een Google Maps API-sleutel nodig als u dit op een live server gaat gebruiken. U kunt een online service gebruiken om de code te produceren als u het niet gemakkelijk vindt om deze zelf te schrijven.
Voeg eenvoudig de volgende code toe waar u wilt dat uw kaart verschijnt.
U kunt uw menu aanpassen aan elke pagina door de klasse "selected" naar het juiste item in de lijst te verplaatsen.
Voor verder onderzoek, kijk gerust naar het Engage Interactive-artikel en de Nettuts + tutorial.
