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:

Responsive

Gratis en toch voor niks, http://www.delicious.com/stacks/view/Fdz7ca
Helaas 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.

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

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.

Apple versus Adobe

New iPhone Developer Agreement Bans the Use of Adobe’s Flash-to-iPhone Compiler
http://daringfireball.net/2010/04/iphone_agreement_bans_flash_compiler

Apple tackelt Adobe in strijd om iPhone-apps
volkskrant.nl/multimedia/article1367859.ece/Apple_tackelt_Adobe_in_strijd_om_iPhone-apps

A Change at Apple Causes Trouble for Adobe
bits.blogs.nytimes.com/2010/04/08/a-change-at-apple-causes-trouble-for-adobe/?ref=technology