Html les 2.3_responsive_design
0 likes450 views
Les HTML t.b.v .1e jaar Media en Applicatieontwikkelaars
Html les 2.3_responsive_design
- 1. Les 2.3 ResponsiveDesign HTML Module 2
- 2. ResponsiveDesign HTML Module 2 Doel: webpagina’s responsivemaken
- 3. HTML Module 2 2.2 Positioneren ResponsiveDesign Responsivewebdesign is de aanpak die suggereert dat het ontwerp en de ontwikkeling moet reageren op het gedrag en de omgeving van de gebruiker op basis van schermgrootte, platform en oriëntatie. De praktijk bestaat uit een mix van flexibele roosters en lay-outs, afbeeldingen en een intelligent gebruik van CSS media queries. Als de gebruiker overschakelt van hun laptop naar iPad, moet de website automatisch naar geschikt voor resolutie, beeldgrootte en scriptingmogelijkheden. Met andere woorden, de website de technologie om automatisch beantwoorden aan de voorkeur van de gebruiker hebben. Dit zou de noodzaak van een ander ontwerp-enontwikkelingsfase voor elke nieuwe gadget op de markt te elimineren. ResponsiveDesign
- 4. HTML Module 2 2.2 Positioneren ResponsiveDesign De viewportMetatag De meta-tagsstaan altijd in de <head> sectie. Geeft aan viewportte gebruiken De breedte van de content is de schermbreedte van het device De schaal van het device= 100 procent
- 5. HTML Module 2 2.2 Positioneren ResponsiveDesign Scherm met breedte 960px Iphone6
- 6. HTML Module 2 2.2 Positioneren ResponsiveDesign htmlen CSS code Er is gebruikt gemaakt van percentages en em. Vanuit de schermbreedte van 960px en standaard font grootte.
- 7. HTML Module 2 2.2 Positioneren ResponsiveDesign Media Queries
- 8. HTML Module 2 2.2 Positioneren ResponsiveDesign Media Queries Media Queries
- 9. HTML Module 2 2.2 Positioneren ResponsiveDesign Media Queries Uitgangspunt voorbeeld Iphone6 Schermbreedte 960
- 10. HTML Module 2 2.2 Positioneren ResponsiveDesign Media Queries Voorbeeld media query laat <aside> alleen op schermbreedte brederdan 700px zien.
- 11. Opdracht 1 HTML Module 2 2.2 Positioneren Maak de voorbeelden na, maak RAR-filemet de code en schermafdrukken en uploaddeze naar de in de map opdracht 1 in natschool
- 12. Huiswerk Bekijk alle behandelde stof en werk de opdrachten verder uit. Maak van beide opdrachten een rarfile en uploaddeze naar Natschool in de map 2.3 Responsivedoe dit binnen 4 schooldagen. HTML Module 2 2.1 Forms