Overzicht webdesign Aart Jan Bergshoeff.

Presentatie over: "Overzicht webdesign Aart Jan Bergshoeff."— Transcript van de presentatie:

1 Overzicht webdesign Aart Jan Bergshoeff

2 Internet Wereldwijd netwerk van computers
IDEA Soest | Overzicht webdesign Internet Wereldwijd netwerk van computers Normaal netwerk gaat via ethernet Wereldwijd kan het via telefoon- of tvkabel Je hebt dan een modem nodig: modulator-demodulator De “taal” of protocol is http: Hyper Text Transfer Protocol Internet Internet (het world wide web) is een wereldwijd netwerk van computers. Als je twee computers naast elkaar heb staan wil je al gauw dat er gegevens van de ene naar de andere overgezet kunnen worden. Om dat te doen worden de computers via de ethernetkaart (ofwel netwerkkaart) met een ethernetkabel verbonden met behulp van een standaard “protocol”. In het ideale geval zijn alle computers op die manier verbonden (want razendsnel!), maar helaas liggen er geen ethernetkabels tussen alle huizen. Maar er liggen wel overal telefoondraden of tv-kabels! Via deze draden kan je toegang krijgen met het wereldwijde internet: alle aangesloten computers zitten dan in een groot netwerk. De modem (modulator-demodulator) vertaalt (codeert en decodeert) het telefoon- of kabelsignaal naar voor de computer bruikbare gegevens. Via het HyperText Transfer Protocol (http) heb je dan contact met alle aangesloten computers ter wereld.

3 Wat is een Homepage De eerste pagina van een website
IDEA Soest | Overzicht webdesign Wat is een Homepage De eerste pagina van een website Heet altijd index.htm (of index.html) Met links naar andere pagina’s Met bestanden zoals plaatjes, geluid etc. Elk bestand en elke pagina heeft een webadres Wat is een Homepage De homepage is de eerste pagina van een website, de openingspagina dus. Het bestand met de betreffende HTML-code van deze pagina heet altijd index.htm (of index.html) en staat op een webserver. De HTML code (Hyper Text Markup language) wordt ingelezen en vertaald door de web-browser (meestal Explorer). In de html kunnen links worden opgenomen naar andere pagina’s (ofwel naar andere html-bestanden) en er kunnen bestanden in de pagina opgenomen zoals afbeeldingen, audio, video etc. Die bestanden kunnen overal op internet staan. Het webadres van het plaatje of pagina moet je dan volledig overnemen ( etc). Maar meestal zet je de gebruikte bestanden op je eigen server. Elke pagina bestaat dus uit een apart html-bestand, en de bijbehorende plaatjes staan erbij als aparte bestanden (meestal in een apart mapje bijv. /ima).

4 Server, hostingprovider
IDEA Soest | Overzicht webdesign Server, hostingprovider Computer die 24 uur per dag aanstaat Altijd verbonden met internet Hoge uploadsnelheid Server-software geïnstalleerd Vast ip-nummer Jouw website staat te gast op zo’n computer Voorbeeld van een hostingprovider: Server, hostingprovider Een webserver is een computer die 24 uur per dag aanstaat en verbonden is met internet. Bedrijven die servers hebben staan waar jij je site op mag “hosten” noemen zich een hosting-provider. Jouw site staat dus te gast op hun server. Een voorbeeld van zo’n provider is of Je zou zelf ook een server thuis neer kunnen zetten. Die moet dan 24 uur per dag aanstaan, een vast ip-nummer hebben, zg. Apache-software geinstalleerd hebben en een snelle upload-verbinding hebben. Heb je dat niet, dan kun je voor weinig geld je site bij een provider neerzetten. Kijk op

5 IDEA Soest | Overzicht webdesign
Accessprovider Verzorgt de toegang tot internet, bij bedrijven en particulieren De bekende namen: xs4all, planet, zonnet, wanadoo, demon etc Bieden meestal ook gratis een homepage aan (hosting) Adsl, kabel, satelliet, analoge telefoon, isdn Access(toegang)-provider Een access provider verzorgt de toegang tot internet. xs4all, planet, zonnet, wanadoo et cetera. Deze providers bieden je meestal bij het abonnement ook gratis een aantal Megabyte op hun server aan waar jij een homepage neer kan zetten. In de online help van de providers vindt je vaak uitgebreide hulp.

6 IDEA Soest | Overzicht webdesign
Domeinnaam, ip-nr. Elk op internet aangesloten apparaat heeft een publiek ip-nummer (computer, modem, printer) Domeinnaam ( wordt door DNS-servers vertaald naar ip-nummer Check of je domeinnam vrij is Kost ong 20 euro per jaar Voor 40 tot 60 euro heb je ook webspace en Domeinnamen, ip-nummers Elke aangesloten computer heeft een publiek ip-nummer, bijv In theorie kun je door het intikken van dat nummer in je browser contact maken met die server, en zien wat daar op staat. Normaliter wordt dat nummer niet “kaal” gebruikt, maar vertaald naar een domeinnaam, bijv De DNS-servers (dynamic name server) vertalen de ingetikte domeinnamen naar de originele ip-nummers. Kijk hier of je gewenste domeinnaam nog vrij is. Een domeinnaam kun je registreren bij vrijwel elke provider en kost ongeveer 20 euro per jaar. Voor ongeveer het dubbele krijg je ook nog webspace en adressen.

7 File Transfer Protocol
IDEA Soest | Overzicht webdesign File Transfer Protocol ftp: upload jouw files naar een webserver Kan gewoon in Dreamweaver Kan ook met losse ftp-programma’s zoals WS_FTP Je hebt nodig: Servernaam: bijv. Login en password Werkt het niet: check de firewalls FTP: file transfer protocol Via dit protocol kun je “uploaden”: jouw files op de webserver zetten. Ik laat nu een voorbeeld zien van het maken van een homepage in Dreamweaver die vervolgens online wordt gezet. (Een ander bekend losstaand ftp-programma voor pc is WS-FTP. Start Dreamweaver. Ga in het menu naar Site > site files. Je ziet nu de files die lokaal zijn (rechts) en die op de webserver (linkerkant). Voor opties klik je met rechts en/of op de driehoekjes. Maak een site aan: Site > edit sites en klik new. Kies basic als u geholpen wil worden met een “wizard”of advanced om alles in 1 scherm te doen. Geef een naam, kies de local root (waar staat de site) en laat de opties aangevinkt. Bij remote kies je ftp en vul je de gegevens in (zie de opdrachten beneden) Vragen/opdrachten:  Via welke provider heb je thuis internet? Biedt deze provider ruimte aan voor een eigen homepage? Kijk in je contract of in de online help.  Wat is het webadres van je homepage? bijv.  Wat is de servernaam waar je de site mag uploaden (ftp.home.zonnet.nl)  Zoek uit wat je login en paswoord voor deze serveris (kan afwijken van de login en pass voor internettoegang en de login en pass van je )  Met bovenstaande gegevens kun je thuis de ftp-verbinding maken via Dreamweaver of via een ftp-programma zoals WS-FTP.

8 Zoeken, downloaden Zoek via Google eens op afbeeldingen
IDEA Soest | Overzicht webdesign Zoeken, downloaden Zoek via Google eens op afbeeldingen Rechtsklik (PC) of ctrl-klik (mac) om een afbeelding lokaal te bewaren. Download een hele pagina of hele site via je browser SEO, search engine optimization Hoog in de ranking komen: Links naar jou toe van grote sites, keywords in de pagina’s opnemen, veel bezoekers trekken, geen frames en geen flash Zoek binnen een lange pag met Ctrl-F Google, zoekmachine Een zoekmachine (search engine) zoals Google zoekt dagelijks het hele internet af en indexeert alle nieuwe pagina’s die het vindt, zodat die gevonden kunnen worden als er met bepaalde zoektermen gezocht wordt. Tip: zoek binnen een lange pagina met Ctrl-F (Apple-F). Je website moet goed gevonden kunnen worden en goed geindexeerd kunnen worden. Dit begint een echte wetenschap te worden: SEO, search engine optimization.

9 Flash: voordelen Cross browser, cross platform
IDEA Soest | Overzicht webdesign Flash: voordelen Cross browser, cross platform Met geluid (en nu ook video), goed en snel Snelle vloeiende animaties » Werkt ook goed via trage modem Oneindig scalable (vector) Totale controle over typografie, mooi en flitsend » Interactieve presentaties » Vector, dus scalable en snel, animatie, compact, met ingebouwde geluidscompressie Ook: Shockwave (macromedia director .dcr) grote plugin 1 Mb (flash is 80 Kb) , vooral voor cdroms en uitgebreidere spelletjes met meer interactie flash site interface: blitzds.com flash tekenfilms: Prachtig Flash-voorbeeld: educatieve filmpjes in een forum-achtige site, science and health explained to kids, interactieve flashanimaties. Doe bijv. "internet" Documentaire annex lesmateriaal in Flash, schitterend, effectief, let op alle interactie en vormgeving. Lineair verhaal maar toch interactief Bekijk de documentaire. Concurrent van Flash: Adobe LiveMotion, met SVG

10 Flash: nadelen Je weet niet of de bezoeker de (juiste) plugin heeft
IDEA Soest | Overzicht webdesign Flash: nadelen Je weet niet of de bezoeker de (juiste) plugin heeft Wachten voordat je kan beginnen Shockwave of Flash? Nog meer plugins Browser-backbutton en bookmark werkt niet Toegankelijkheid: letters kun je niet vergroten, spraakondersteuning ontbreekt Google (e.a.) vindt je niet of doorzoekt je niet Tip: gebruik stukjes Flash binnen HTML

11 Browsers Explorer 4 , 5 en 6 (Microsoft), voor PC en Mac
IDEA Soest | Overzicht webdesign Browsers Explorer 4 , 5 en 6 (Microsoft), voor PC en Mac Netscape 4, 5, 6.2 en 7, voor PC en Mac Opera (goede browser, mooie scale-functie) Lynx (text-only), Mozilla, Firefox, Safari Cijfers over internetgebruik Webstandaarden: regels voor HTML/CSS: w3.org Download van tucows of versiontracker Virtual PC: PC-emulator op de Mac In een browser wordt de HTML-code ingelezen en visueel vertaald naar je beeldscherm. De regels voor HTML staan op De enige browser die daar volledig aan voldeed was Netscape 6, maar dat was geen succes. Vooral Internet Explorer had zijn eigen interpretaties van de regels, waar iedereen al aan gewend was, en niet meer zonder kon. Cijfers over internetusers Windows emulatie voor de Mac: SoftWindows, Virtual PC Dit werkt uitstekend Mac emulatie voor windows: Dit werkt voor zover ik weet niet of nauwelijks.

12 Plug-ins Flash, altijd de nieuwste (Macromedia)
IDEA Soest | Overzicht webdesign Plug-ins Flash, altijd de nieuwste (Macromedia) Shockwave, nieuwste (Macromedia) Quicktime 6 (Apple) Windows Media Player 9 (Microsoft) RealOne player (real.com, zoek de gratis versie) Acrobat Reader Javascript /Java Plug-ins Plugins zijn extensies in je browser of je systeem om extra dingen mogelijk te maken die HTML niet kan. Dat wil meetsal zeggen: ze kunnen bestandsformaten lezen die een browser niet standaard ondersteunt. (een browser kan WEL bijv. .html, .gif, .jpg lezen, maar bijvoorbeeld GEEN .pdf, .mov, .swf, rm (resp.acrobat, quicktime, flash, real media) Javascript zit altijd ingebouwd in de browser en is erg belangrijk. Java niet per se, want bijvoorbeeld niet in Explorer 6. Alle bovenstaande plugins zijn zowel voor Mac als Pc verkrijgbaar en spelen dezelfde bestandsformaten af.

13 WYSIWYG editors What You See Is What You Get
IDEA Soest | Overzicht webdesign WYSIWYG editors What You See Is What You Get Browser en editor tegelijk Dreamweaver (Macromedia) Frontpage (Microsoft) Golive (Adobe) Met CSS CSS: Cascading Style Sheets Verbetert typografie en plaatsing objecten in HTML CSS werkt niet of slecht in oude browsers (IE4, NS5) Wysiwig: What You See Is What You Get. Deze HTML_editors zijn browser en editor tegelijk: je ziet in plaats van de code direct de site en kunt ‘m direct wijzigen. Het werkt helaas niet altijd vlekkeloos. Wel kan het zo mogelijk DHTML, javascript, css, database-koppeling

14 HTML export, en PDF O.a. MS Word of Filemaker Adobe Acrobat PDF
IDEA Soest | Overzicht webdesign HTML export, en PDF O.a. MS Word of Filemaker Adobe Acrobat PDF Link naar een pdf Adobe Acrobat: PDF Portable Document Format. Om dit te maken heb je de printerdriver: pdf-writer nodig, of de Acrobat Distiller, of gewoon OSX, daar zit het in het systeem ingebakken. Om dit formaat te lezen volstaat de gratis Acrobat Reader (Adobe.com). De pdf wordt al naar gelang gebuikersinstellingen getoond in de browser of apart in de Acrobat Reader. Editen kan in Illustrator of de uitgebreidere versies van Acrobat (Distiller) Getting Started Guide.pdf