Hier staat de lesbrief waarmee je een eenvoudige image-slider leert maken.
Maak Air France responsive
Voor Air France ontwerp en bouw je een nieuwe website. Je maakt de site voor 2 verschillende schermresoluties.
Download de volledige opdracht als pdf: opdracht1 webdesign
Deze opdracht is in de les met een korte schermpresentatie toegelicht. Hieronder vind je de bijbehorende links:
- http://www.forbes.com/sites/kateharrison/2012/08/14/the-app-titude-test-is-creating-a-mobile-app-right-for-you/2/
- http://speckyboy.com/2012/02/22/tips-for-wireframing-a-usable-mobile-app-interface/
- http://sixrevisions.com/user-interface/website-wireframing/
- http://konigi.com/tools/omnigraffle-wireframe-stencils
Responsive
Gratis en toch voor niks, http://www.delicious.com/stacks/view/Fdz7caHelaas is die koppeling niet meer actueel. In de plaats daarvan een verwijzing naar de het artikel waar ik voor het eerst las over responsive webtechnieken. Mijns inziens een klassieker: http://alistapart.com/article/responsive-web-design/
Over het (responsive) web. Lezen dus.
Handgeschreven html
HTML5 Cheatsheet
Opdracht periode 3 | klas MV42c
De indeling van een krantensite vernieuwen.
Klas MV42C
periode 3 opdracht 1
tijdsduur: 4 weken
Voor deze opdracht neem je een van de onderstaande sites als uitgangspunt.
- nu.nl
- nrc.nl
- telegraaf.nl
Je gaat de voorpagina van een van deze sites opnieuw indelen. Alle onderdelen die nu op de site staan moeten in jouw ontwerp ook terugkomen. Voor de beoordeling van je werk is het belangrijk dat je de onderstaande volgorde aanhoudt bij het maken van de opdracht.
Wireframe
Je maakt minimaal 2 wireframes die duideijk van elkaar verschillen. Een wireframe is een schematische weergave van de verschillende onderdelen op de site: waar komt het menu, waar staat het logo, waar staat het belangrijkste nieuws, waar de advertenties enz. Alles wat zou kunnen afleiden laat je weg: Er staat geen inhoud in. Ook pas je nog geen vormgeving toe.
Laat je wireframes beoordelen.
Ontwerp
Daarna maak je een uitgewerkt ontwerp in bijvoorbeeld photoshop of illustrator.
Laat je ontwerp beoordelen.
Beschrijvende markup
Bouw de pagina in html en css. Gebruik beschrijvende markup, bijvoorbeeld voor de belangrijkste kop <h1></h1> of voor een alinea <p></p>
Voor een overzicht van de elementen zie http://www.webmonkey.com/2010/02/html_cheatsheet/ of http://www.webmonkey.com/2010/02/html_cheatsheet/
Laat je code beoordelen
Delicious html5
delicious.com/popular/html5 voor een verzameling populaire html5 koppelingen. (vooropgesteld dat Yahoo Delicious niet alsnog sluit.. )
WordPress voor mobiel
Ontwerpen voor mobiel is meer dan even je CSS aanpassen en klaar is Kees…
Carrington-mobile is een handig uitgangspunt als je de eerste mobiele versie van je Worpress site wilt maken. Content die op een klein scherm niet handig of in verband met lagere downloadsnelheden zelfs irritant is, wordt uit de reguliere site gestript.
Al met al worden daarmee de laadtijden weer acceptabel en heb je een interface die geschikt is voor een klein scherm.
Sketchpad
Tekenen in je browser! http://mugtug.com/sketchpad/