Front end development - Les 01

Post on 12-Jul-2015

1.667 views 5 download

Transcript of Front end development - Les 01

Les 01: De wondere wereld van het Internet.

2

Wie ben ik?

Jeroen Hulscher (25), Rijswijk

Oud CMD-student, afgestudeerd in 2007.Multimedia Engineering (huidige FED) , sinds vorig jaar part-time docent

Werkzaam sinds januari 2007 bij Tam Tam in DelftLead Front-end developer & Adviseur Nieuwe Media

Front-end development

3

Agenda van vandaag

Korte kennismaking

Kennismaking met FED @ HRO

Geschiedenisles

Quiz

Installatie-ronde

Front-end development

4

Wat is Front-end Development?

Front-end development

5

10 geboden (of nouja…9)

Theorie- en Praktijkdeel.

Praktijkdeel is de start van het “huiswerk” + verdiepingsslag.

Inleveren huiswerk 24 uur voor aanvang van de les.

Altijd op je studentspace inclusief aanpak en broncode.

Altijd de lesstof lezen voor aanvang van de volgende les (4 uur in theorie)

Beoordeling op basis van een deel van je huiswerk (!)

Twee keer afwezig in een kwartaal = vak niet gehaald.

Laptops alleen tijdens praktijkdeel open.

Werk kopieren is niet toegestaan (duh...)

Front-end development

6

Literatuur

Front-end development

7

Agenda van vandaag

Korte kennismaking

Kennismaking met FED @ HRO

Geschiedenisles

Quiz

Installatie-ronde

Front-end development

8

“Where shall I begin, please your Majesty?”

“Begin at the beginning”, the King said gravely, “and go on till you come to the end: then stop.”

~ Alice’s Adventures in Wonderland; Lewis Caroll

Front-end development

9

Sputnik 1, 1957‘s Werelds eerste satteliet

Front-end development

10

ARPA Inc., 1967Creatie van “ARPANet”

Front-end development

11

CERN, 1991Tim Berners Lee schrijft over de “hyperlink” en “World Wide Web”

Front-end development

12

<a href=”http://www.google.com”>Google</a>

Front-end development

14

Internet voor de massa

Front-end development

15

Browser wars

Front-end development

16

Browser wars

Front-end development

17

Browser wars

Front-end development

18

Browser statistieken

68% marketshare(IE6, IE7, IE8)

23%(FF2, FF3)

Safari 3,6%, Chrome 2,1%, Opera 2%, Netscape 0.6%, Overige browsers 0.4%

Front-end development

19

Browser bugs

Firefox 3 Internet Explorer 6

Front-end development

Front-end development

20

Standaarden voor het Internet (tried since 1994)

21

Hoe werkt dat dan?

Front-end development

Mag ik www.google.nl?

Oh, je bedoelt 92.148.10.104, alsjeblieft!Jij (client) Internet (server)

22

Hoe werkt dat dan?

Front-end development

Client checkt altijd eerst voor index.html

dus

docent.cmd.hro.nl/huljlis eigenlijk

docent.cmd.hro.nl/huljl/index.html

23

Agenda van vandaag

Korte kennismaking

Kennismaking met FED @ HRO

Geschiedenisles

Quiz

Installatie-ronde

Front-end development

24

Quiz

Front-end development

(X)HTML

DNS

CSS

URI

FTP

PHP

Adobe Flash

PHP

A List Apart

W3C validator

Web standards

Javascript

<h2>

<p>

25

Agenda van vandaag

Korte kennismaking

Kennismaking met FED @ HRO

Geschiedenisles

Quiz

Installatie-ronde

Front-end development

26

To-do-list

Connectie met Eduroam maken

links op: docent.cmd.hro.nl/huljl/herfst01.html

Aptana Studio downloaden

Firefox 3 downloaden

Web Developer Toolbar add-on toevoegen

Firebug add-on toevoegen

FireFTP add-on toevoegen

FTP connectie met studentenserver maken

Huiswerk in de loop van de week op de FTP zetten

Front-end development

27

Front-end development

FTP instellingen

28

Front-end development

Huiswerk

Hoofdstuk 1 + 2 van CSS & HTML Web Design lezen

Opera Curriculum stukken lezen

Modulewijzer lezen (zijmenu op de website)

Tekstbrij op docent.cmd.hro.nl/huljl/herfst01.html “opmaken”

Huiswerk op studentenserver plaatsen als volgt:

Lukt het niet (24 u voor volgende les)

email jeroen@tamtam.nl

bel 06 15 88 02 65

Lukt het niet, en niet gemaild/gebeld is Cola Light (of liever Zero) halen voor mij

public.www jaar1 herfst fed week1 index.html

29

Front-end development

30

Front-end development

31

Front-end development