1 / 83

webmaster

webmaster. syntra. Laurent Goossens. docent.laurent.goossens@gmail.com 35 10 jaar internetervaring iLibris ISP (hosting) docent webmaster CVO-Birm Antwerpen docent webmaster Syntra jullie zien eindigen met een certificaat webmaster!. Opleiding WebMaster.

iram
Download Presentation

webmaster

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. webmaster syntra

  2. Laurent Goossens • docent.laurent.goossens@gmail.com • 35 • 10 jaar internetervaring • iLibris ISP (hosting) • docent webmaster CVO-Birm Antwerpen • docent webmaster Syntra • jullie zien eindigen met een certificaat webmaster!

  3. Opleiding WebMaster “ je leert er de basistechnieken voor het ontwikkelen, het beheren en het onderhouden van een professionele website” • Basisbgrippen webmaster • Bouwstenen ontwikkeling • Tools beheer en onderhoud • .: Creativiteit :.

  4. Opleiding WebMaster Basisbgrippen webmaster • Internet (algemeen, werking) • Websites (opbouw, werking, talen) • Hosting (webspace - dns)

  5. Opleiding WebMaster Bouwstenen ontwikkeling • Html taal : opbouw webpagina • Css taal : verfraaiing webpagina • Javascript en Forms (interactie) • Multimedia content invoegen • Dynamische content genereren

  6. Opleiding WebMaster Tools beheer en onderhoud • Dreamweaver • Firebug • XHTML en CSS validators • Referentiebronnen • Photoshop • Flash • Zoekmachines • FileZilla • LAMP-stack (apache – mysql - php) • CMS paketten • Code libraries (scriptalicious, jquery, wysiwyg)

  7. Cursus • Verdeling • 75 uren • 25 weken • aan 3 uur/week les • plus (+) oefeningen thuis • Min (-) weken eindwerk evaluatie

  8. Cursus • Opbouw • Hoofdstukken • Tussen delen oefeningen en vragen • Oefeningen meenemen van/naar thuis • usb-stick, • email: webmail • Oef thuis maken • Oefenen, oefenen!

  9. Cursus • Evaluatie • Projectoef • Tussentijdse Evaluatie (dec-jan) • Vastgelegd packet – vaste evaluatie criteria – minimale verreisten • Afhankelijk van verloop meer stof/dieper in stof/meer oef • Eindwerk (website+ bespreking - aanwezigheid)

  10. Cursus • Voorstelling cursisten • Naam • Beroep • Voorkennis internet / grafisch / websites / html • Richting met kennis cursus

  11. Internet • Client server model

  12. Internet • Browsers • Firefox (mac en pc) • Internet explorer (pc) • Chrome (mac en pc) • Safari (mac) + pc versie • Webservers • Apache : Unix OS • IIS Microsoft windows OS • Request / Response

  13. Internet • Http : hyper text transfer protocol • Basis taal van het internet = Html = tekst! (view source) : hyper text markup language • http = de manier hoe de informatie over de draad gaat • html is bepaald de manier waarop het vertoond word (in browser)

  14. Internet • Bestand/File opgebouwd in taal html wordt opgevraagd door de browser en geleverd door een webserver • De teruggezonden code wordt geïnterpreteerd door de browser en getoond aan de surfer. • Webpagina’s vraag – antwoord • Website = verzameling van webpagina’s in een folder op een webserver

  15. Internet • Html : bouwstenen • Html aangevuld met • css : stijl • Javascript : manipulaties • Dynamische talen genereren html • php • asp, aspx (asp.net)

  16. Internet • Uploaden / Downloaden (tijdelijke directory) • Ftp bestanden uploaden • Webtraffic : meetbaar • Browser cache (shortcut: F5 / ctr+ F5)

  17. Website • Html : tekst juist opgebouwd vormen tags (objecten) • Opbouw object : syntax <tag>inhoud</tag> of <tag/>

  18. Website • Basis architectuur html pagina : minimale code <html> <head></head> <body> PAGINA INHOUD HIER </body> </html>

  19. Website • Texteditor : notepad • Opslaan als .html • folder options • “hide know extensions “ … UITvinken

  20. Website Oefening • Oef : eerste html pagina • <title>mijn title</title> : binnen head-tags: wordt NIET gerenderd (wel vertoond in de titlebalk) • <h1>Hello World!</h1> : binnen de body tags: wordt WéL gerenderd • Save as first.html in folder website_1 op desktop

  21. Website • Copy first.html naar second.html én naar third.html • shortcut: flag+E • Select bestand ctr+C  3 maal ctr+V  bestanden hernoemen • Files (bestanden)verbonden door links

  22. Website • Webpagina’s onderling verbonden door links • Interactief object (handje, kleur) • Oef : eerste links • Oef navigatie pagina : navigatie.html

  23. Website • Objecten en attributen • <a>link tekst</a> • <a href=”second.html”> second page </a> • <a href=”http://www.google.be “> search googl</a> • <a href=”http://www.google.be “ target=”_blank”> search google </a>

  24. Website • Oef thuis : previous / next links + home link • Oef thuis : gegevens hosting verzamelen (telenet, belgacom, ...) - hostname - username - password

  25. Website <html> <head> <title>de titel</title> </head> <body> de inhoud </body> </html>

  26. <html></html> • Definieert een html pagina • Bevat alle markup: • Markup tags met inhoud • <object> : openingtag • </object> : closingtag • Vb : • <a>link</a> • <h1>hoofding</h1> • Markup tags zonder inhoud • <object/> • Vb : • <hr/> • <br/> • <img/>

  27. <head></head> • Wordt niet gerenderd • Dus niet zichtbaar in de browser • Bevat metadata, css data, javascripts • Vb : <title>de titel</title>  vertoond in de crome (os gebonden)

  28. <body></body> • Wordt wel gerenderd • Zichtbaar in de browser • Beval alle te renderen markup (te vertonen opmaak) • Markup draagt info : hoofding, paragraaf, … OF • Markup bouwt pagina op : tabel, lijntjes, prenten, …

  29. Oef thuis vorige week • 3 pagina’s met elkaar gelinkt: • Previous – next – home •  zie usb stick

  30. first.html • <html> • <head> • <title>First</title> • </head> • <body> • <h1>First page</h1> • <a href="second.html">next</a> • </body> • </html>

  31. second.html • <html> • <head> • <title>Second</title> • </head> • <body> • <h1>Second page</h1> • <a href="first.html">previous</a> • - • <a href="third.html">next</a> • </body> • </html>

  32. third.html • <html> • <head> • <title>Third</title> • </head> • <body> • <h1>Third page</h1> • <a href="second.html">previous</a> • - • <a href="first.html">home</a> • </body> • </html>

  33. Tags en attributen • Attribuen  naam="waarde“ • Worden toegeveogd aan start tag : <a> • Specifieren eigenschappen van dat object • geen, één of meerdere mogelijk • Sommige verplicht :  noodzakelijk voor werking vb: <a href="adres“> • Sommige optioneel :  helpen de opmaak  vb: <body bgcolor="red">

  34. Default attributen • objecten (tags) hebben default values •  Indien niet specifiek gezet : valt de waaarde terug op de default (onzichtbaar) • Vb : • border op een tabel: <table> == <table border= " 0" ></table> Target bij link: <a href= "adres" ></a> == <a href= "adres" target=“_self”></a>

  35. Links • href=“de gelinkte pagina“ • Relatief pad : link naar pagina binnen website • href= “pagina.html “ : gelinkte pagina staat er naast • href= “pages/pagina.html “ : gelinkte pagina staat in een diepere map : pages • href= “../index.html “ : gelinkte pagina staat een niveau hoger • href= “/pad/pad/pad/pagina.html “ : beginnen van het hoogste niveau dieper en dieper in pad tot aan pagina • Absoluut pad : link naar pagina van andere website • Href=“http://www.google.be“ • Href=“http://www.w3schools.com/tags/tag_body.asp“

  36. Links • target= "_self"   opent pagina in zelfde tab/window • target= "_blank"   opent pagina in nieuwe tab/window • (_parent, _top, framename)

  37. href= “http://www.google.be" • Geen pagina? • Default behavior webserver • Zoek naar een default page in de webroot van je website (/) • index.html, index.htm, default.html, dfault.htm, index.php, default.asp, default.aspx, index.asp, …

  38. Oef default page • Onze oef • Alle pagingas in folder « pages» • Links aanpassen? • index.html aanmaken (op basis van /assets/basis.html) in webroot • Link naar first.html

  39. Surfer - webserver • Client server model • Vraag – antwoord • Hoe vinden de machines mekaar • IP address : 123.456.7.33 • Webserver IP • Effectief adres op het internet waar een machine aangangt (client en server) • Client-IP vraagt pagina op bij Server-IP • Server-IP anwoord met pagina aan Client-IP

  40. http://123.345.7.33/index.html • Onmenselijk, onnaturlijk • Domeinnaam «google.be», «hotmail.com» • Domainname resolvement • Domain Name Server : DNS • Typen iets menselijk in browser • Vraag om te resolven wordt gesteld aan dns server • Dns server antwoord met ip • Effctieve vraag vertrekt naar webserver

  41. DNS niveaus • Tijd besparen • Vraag op verschillende niveaus gesteld • Eigen os • Access providers dnssen • Andere wereldwijde dnssen • Caches op alle nieveaus • Uiteindelijk slechts één DNS dat het adres permanent bewaart, publiceert bewaart

  42. DNS caches • Eigen pc : • Vlaggetje + R • cmd • ipconfig /flushdns • Access providers • +/- elke 2 uur • Atomatisch – niet te mnipuleren • Alles dnssen wereld (tot 48 uur) • Authoritive: • permanent • Editeerbaar • Zonefile • dnsrecords

  43. Dnsrecords Authoritive nameservers : zij onthouden permanent • ns1.namserver.be • ns2.namserver.be • Zonefile • Default record : google.be • Subdomains : • www.google.be -> A -> 123.435.662.3 = standaard subdomein voor website • ftp.google.be -> A -> 123.435.6.556 • Veelgebruikt subdomein voor FTP • Mx-Record : inkomende mailserver • pop.google.be -> A -> 143.44.3.111

  44. doman.tld • Top level domain • google.be : .be • Dns.be : België • Erid.eu : europa • één orgaan • Unieke namen! • Huur domein • Koppelen aan eigenaar (+ admin-tech) • Kopelen aan authoritive nameserver(s) • Generische (.com, .net, org, …) • http://whois.domaintools.com/hotmail.com

  45. Registrar - registrant • Eigenaar = registrant = liscensee • Persoon • Organisatie • Admin – tech • Registrar – agent : firma waar wij gaan « huren » • volgende week hosting  meer!

  46. Provider • Access provider : telenet, skynet, … • Internet Service Provider ISP: hosting • Mini hosting • Hostname (+usr +passwd) • http-address • later vervangen door eigen domeinnaam • FTP • http://filezilla-project.org/ • Install, connect, upload • Local -> remote • Online! : surf!

  47. New tags • <br/> • Break = new line • <p>paragraaf</p> • <hr/> • Horizontal rule • <font>

  48. index.html My website ----------------------------------------------------- First Second Third Search Google Webmaster pagina syntra ----------------------------------------------------- Deze website zal gaande weg groeien ….. Deze website zal gaande weg groeien ….. Deze website zal gaande weg groeien ….. Deze website zal gaande weg groeien ….. Deze website zal gaande weg groeien …..

  49. <html> • <head> • <title>mijn website</title> • </head> • <body> <h1>My Website</h1> <hr/> <a href="pages/second.html"> eerste pagina</a> • <br/> <a href="pages/third.html"> tweede pagina</a> • <br/> <a href="pages/first.html"> derde pagina</a> • <br/> <a href="http://www.google.be" target="_blank"> search google</a> • <br/> <a href="http://www.syntra-mvl.be/opleiding/Webmaster-186" target="_blank"> • webmaster opleiding syntra • </a> • <br/> • <hr/> <p>hallooo dan mijn eerste pagina, of is het nu de vijfde weet ik veel...maakt zelfs • niet uit , tis maar paragraafvulling hallooo dan mijn eerste pagina, of is het nu de vijfde weet • ik veel...maakt zelfs niet uit , tis maar paragraafvulling hallooo dan mijn eerste pagina, of is • het nu de vijfde weet ik veel...maakt zelfs niet uit , tis maar paragraafvulling hallooo dan • mijn eerste pagina, of is het nu de vijfde weet ik veel...maakt zelfs niet uit , tis maar • paragraafvulling</p> • </body> • </html>

  50. Object – standaard gedrag • Object vult gehele breedte parent object • <hr/> • <br/> • <p></p> • <h1></h1> • <body></body> • Object omsluit de inhoud • <a></a>

More Related