Html les 2.3_responsive_design

12
Les 2.3 Responsive Design HTML Module 2

description

Les HTML t.b.v .1e jaar Media en Applicatieontwikkelaars

Transcript of Html les 2.3_responsive_design

Page 1: Html les 2.3_responsive_design

Les 2.3Responsive Design

HTMLModule 2

Page 3: Html les 2.3_responsive_design

HTMLModule 22.2 Positioneren

Responsive Design

Responsive webdesign 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 scripting mogelijkheden. 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-en ontwikkelingsfase voor elke nieuwe gadget op de markt te elimineren.

Responsive Design

Page 4: Html les 2.3_responsive_design

HTMLModule 22.2 Positioneren

Responsive Design

De viewport Metatag

De meta-tags staan altijd in de <head> sectie.

Geeft aan viewport te gebruiken

De breedte van de content is de schermbreedte van het device

De schaal van het device = 100 procent

Page 5: Html les 2.3_responsive_design

HTMLModule 22.2 Positioneren

Responsive Design

Scherm met breedte 960px Iphone 6

Page 6: Html les 2.3_responsive_design

HTMLModule 22.2 Positioneren

Responsive Design

html en CSS code

Er is gebruikt gemaakt van percentages en em.Vanuit de schermbreedte van 960px en standaard font grootte.

Page 7: Html les 2.3_responsive_design

HTMLModule 22.2 Positioneren

Responsive Design

Media Queries

Page 8: Html les 2.3_responsive_design

HTMLModule 22.2 Positioneren

Responsive DesignMedia QueriesMedia Queries

Page 9: Html les 2.3_responsive_design

HTMLModule 22.2 Positioneren

Responsive DesignMedia Queries

Uitgangspunt voorbeeld

Iphone 6 Schermbreedte 960

Page 10: Html les 2.3_responsive_design

HTMLModule 22.2 Positioneren

Responsive DesignMedia QueriesVoorbeeld media query laat <aside>

alleen op schermbreedte brederdan 700px zien.

Page 11: Html les 2.3_responsive_design

Opdracht 1HTMLModule 22.2 Positioneren

Maak de voorbeelden na, maak RAR-file met de code en schermafdrukken en upload deze naar de in de map opdracht 1 in natschool

Page 12: Html les 2.3_responsive_design

HuiswerkBekijk alle behandelde stof en werk de opdrachten verderuit. Maak van beide opdrachten een rar file en upload deze naar Natschool in de map 2.3 Responsive doe dit binnen 4 schooldagen.

HTMLModule 22.1 Forms