De belangrijkste punten van bonushoofdstuk 2. Nieuwe websites moeten toegankelijk zijn van breedbeeld pc tot smartphone.

Maat: px
Weergave met pagina beginnen:

Download "De belangrijkste punten van bonushoofdstuk 2. Nieuwe websites moeten toegankelijk zijn van breedbeeld pc tot smartphone."

Transcriptie

1 2 Een website bouwen De belangrijkste punten van bonushoofdstuk 2 XX Nieuwe websites moeten toegankelijk zijn van breedbeeld pc tot smartphone. XX Het sleutelwoord voor brede toegankelijkheid is zichzelf aanpassend webontwerp (Engels: responsive web design). XX Een raamwerk vergemakkelijkt het opzetten van flexibele en uitbreidbare websites. XX U kunt een pagina structuur geven en verfraaien door middel van stijlbladen. XX Een login-module maakt het mogelijk de toegang toet uw website, of delen daarvan, te reguleren.

2 wat leert u in dit hoofdstuk? We leggen de basis voor een websiteraamwerk. Met CSS kuen we onze pagina een flexibele structuur geven. We gebruiken CSS3 en mediaquery s om zichzelf aanpassende sites te maken. We maken een template voor een pagina volgens een vloeiend rasterontwerp, dat zorgt voor een pagina volgens de principes van zichzelf aanpassend webontwerp. We maken een loginmodule met database tabellen waarin gebruikersgegevens met versleutelde wachtwoorden staan en autorisatie gegeven kan worden volgens de rol die een gebruiker kan hebben. We beperken ons in dit hoofdstuk tot browser-server communicatie zonder Ajax.

3 PHP EN MYSQL de basis 2.1 Bouwtechniek voor een website Een jaar of vijf geleden was de wereld een stuk simpeler wat websitebouwen betreft. U maakte de structuur in HTML, hier en daar mocht er een plaatje in en u gaf het geheel een kleurtje met CSS. Bij het maken van de structuur was het de voornaamste vraag of u dit zou opzetten met behulp van frames, met tabellen of met CSS. Frames zijn totaal uit de mode: in HTML 5 kunt u ze niet eens meer gebruiken. Het gebruik van tabellen werd altijd al minachtend bekeken, hoewel dat eigenlijk ontzettend handig was, omdat tabellen zich netjes voegen naar hun omgeving en keurig schalen als dat nodig is. Hoe moeten we een website dan vormgeven? Met behulp van CSS. Destijds was CSS nogal lastig omdat elke browser verschillende ideeën had over hoe met de CSS om te gaan. Dat leidde weer tot JavaScript-pakketten die daar oplossingen voor boden, maar die hadden ook problemen met de browsercompatibiliteit. Een gevolg was vaak dat websites alleen goed te zien waren in Internet Explorer (IE), of juist niet, omdat IE veel afwijkingen heeft ten opzichte van andere browsers. Inmiddels zijn er snellere browsers die latere versies van CSS begrijpen (CSS3) en er zijn goede JavaScript-bibliotheken zoals jquery, die dynamische CSS-functies bieden en die vaak verschillen tussen browsers weten op te lossen. Er is steeds meer functionaliteit voor HTML 5 en er zijn steeds meer browsers die HTML 5 ondersteunen. Alleen als uw klant Internet Explorer 6 (IE6) gebruikt, zou u nog wel een probleem kuen hebben, maar voor sommige functies zijn er pakketten om dat te omzeilen. HTML 5 HTML 5 biedt een aantal interessante nieuwe functie, zoals canvas, waarop u kunt tekenen, video- en audio-elementen, waardoor u geen Flash meer nodig hebt om deze media af te spelen, nieuwe structurele elementen, nieuwe formulier elementen, locale opslag en meer. Kunt u nu HTML 5 gaan gebruiken? Helaas is er nog geen browser die HTML 5 compleet ondersteunt, en oudere browsers zoals het toch nog veel gebruikte IE6 doen dat helemaal niet. De specificatie is eigenlijk ook nog in ontwikkeling. Voor mobiele toepassingen is HTML 5 echter zeker aan te bevelen. We kiezen voor onze voorbeelden in dit hoofdstuk een middenweg: we gebruiken redelijk modern CSS dat misschien door IE6 niet altijd begrepen wordt, maar HTML 5 laten we niet zien, alhoewel alles wat we maken wel gewoon werkt in HTML 5 (behalve die frames dan, maar die gebruiken we niet). Andere zaken die u misschien graag zou willen weten, is hoe een link te maken naar Facebook, Twitter en andere sociale media sites. Op het web zijn genoeg uitgebreide voorbeelden te vinden, mocht u sociale media in uw website willen gebruiken. 28

4 2 Een website bouwen Een raamwerk voor een webpagina Stelt u zich voor dat u een site maakt van een pagina of tien voor een vereniging of zo. Net als alles klaar is, zegt de voorzitter dat de kleur anders moet. Als u alle tien pagina s veranderd hebt, dan komt de secretaris met een andere kopregel, daarna wil iemand een ander logo en vervolgens moeten er nieuwe menuopties bij. Ziet u de bui hangen? Als u de veranderingen hebt aangebracht, dan zegt de peingmeester dat de site er niet uitziet op zijn smartphone. Wat te doen? U zou kuen overwegen om een pc-versie van uw site te maken, en ook een tablet- en een smartphoneversie. Er zijn genoeg websites die deze aanpak volgen, maar met de vervagende grenzen tussen pc, laptop, netbook, tablet en smartphone zijn de resultaten vaak niet ideaal. Mocht u in het bezit zijn van een tablet zoals een ipad, dan hebt u vast meer dan eens een mobiele site voor uw neus gekregen met hele brede regels en weinig tekst, terwijl een gewone versie veel hanteerbaarder zou zijn geweest. We willen niet in deze kuil vallen, daarom kiezen we er voor om de laatste mode te volgen: responsive web design, ofwel zichzelf aanpassend webontwerp. Een ander probleem is dat sommige veel gebruikte technologieën, met name Flash, op veel mobiele apparaten, met name die van Apple, niet te zien zijn. Voor sommige functionaliteit kunt u vervanging vinden met HTML5. We verwachten in de eerstkomende jaren een stortvloed aan nieuwe hulpmiddelen om u te helpen mooie sites te maken die overal en op elk apparaat toegankelijk zijn. Responsive web design Met de principes van zichzelf aanpassend webontwerp is het mogelijk een website te maken die op alle apparaten leesbaar en bruikbaar blijft. Zichzelf aanpassend webontwerp bestaat uit drie onderdelen: - Flexibele, raster-gebaseerde layout. - Flexibele afbeeldingen en media - Mediaquery s, een module uit de CSS3-specificatie. Een heel leesbaar en kort boek van de bedenker van de term is Responsive Web Design, door Ethan Marcotte. Het valt buiten het bestek van dit boek om diep in te gaan op CSS, hoe u browserincompatibiliteit moet oplossen en hoe u uw pagina zo kunt structureren dat die er zowel op uw 25inch pc-scherm als op uw iphone goed uitziet. Toch willen we u niet helemaal in de kou laten staan en daarom hebben we een schetsmatige voorbeeldsite gemaakt die er op al deze formaten leesbaar blijft uit zien. 29

5 PHP EN MYSQL de basis Standaard opmaak voor een website Veel websites hebben een structuur waarbij bovenaan een logo, baer, of kopregel staat, Er is een lijst van menuopties, tegenwoordig vaak als tabs bovenin uitgevoerd, ook wel de navigatiebalk genoemd. Daarnaast of daaronder ziet u de werkelijke inhoud van de site. Schematisch ziet het er ongeveer uit als in afbeelding 2.1. De code voor dit voorbeeld is beschikbaar bij de broncode voor dit boek en we zullen er in het vervolg van dit hoofdstuk belangrijke stukken van laten zien. Afbeelding 2.1 Standaard websitestructuur. Ontwerp n n n n n n Er is een topgebied waar meestal een site- of bedrijslogo wordt getoond. Er is een navigatiebalk waar alle navigatieopties te zien zijn, vaak als tabs bovenin. Het inhoudsgebied bevat de eigenlijke inhoud van de site, aangepast aan de navigatieopties die de gebruiker gekozen heeft in het menugebied. Soms is er een extra navigatiebalk in de linker kolom van de pagina. Soms is er extra informatie, zoals nieuwtjes, of een geschiedenis van blog-entries in een rechter kolom. Soms is er een smalle strook onderaan de pagina die copyrightinformatie geeft, een naam, of een websitelink of iets dergelijks. 30

6 2 Een website bouwen Het hierboven geschetste ontwerp is prima voor een pc. Op een ipad in landschapsoriëntatie ziet het er ook nog goed uit, maar met een ipad in portretmodus of op een smartphone wordt het allemaal erg klein, we voegen daarom nog een paar regels toe: Aanvulling ontwerp voor mobiele browserschermen n n n n Er mogen geen schuifbalken verschijnen voor kleinere schermen. De tekst moet zich vloeiend voegen in een kleiner scherm, evenals afbeeldingen. Voor een breedte van 790 pixels (ipad portretmodus) of smaller, worden blokken tekst niet naast elkaar maar onder elkaar geplaatst. Voor 480 pixels brede schermen, of smaller, worden de menuopties onder elkaar geplaatst in plaats van naast elkaar. Deze regels in aanmerking genomen, ziet onze voorbeeldpagina er op een ipad of een iphone in portretmodus zo uit: Afbeelding 2.2 Websitestructuur aangepast voor kleine schermen. Hopelijk is het duidelijk dat de webpagina zich netjes aanpast aan kleine schermen en dat de tekst leesbaar blijft. Ook zonder tablet of smartphone kunt u dit zelf uitproberen, door het scherm van uw browser kleiner te maken (sleep met uw linker muisknop een van de hoeken). Of, als u in Firefox de gereedschappen voor webontwikkelaars heeft geïnstalleerd, dan is er een optie Resize te zien die het scherm kan vergroten of verkleinen volgens door u op te geven afmetingen. 31

7 PHP EN MYSQL de basis We gaan in de volgende paragraaf iets dieper in op de bijbehorende HTML en CSS van deze pagina. 2.2 Een zichzelf aanpassende webpagina met CSS3 Het nu volgende voorbeeld kunt u vinden in debasis/bonushoofdstuk02/responsivevb. We begien met de HTML-code van de pagina waarvan u al afbeeldingen hebt gezien (2.1 en 2.2): lampjes.html C <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title>weblampjes</title> <link href="lampjesx.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="page"> <div class="container section"> <div class="headsection"> <h1 class="pagehead">weblampjes!</h1> <ul class="nav"> <li><a href="#">home</a></li> <li>...</li> </ul> </div> <div class="main"> <div class="article"> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit.... </p> </div><!-- /end.article --> </div><!-- /end.main --> <div class="other"> <div class="entries"> <p> In molestie magna... </p> 32

8 2 Een website bouwen </div> <!-- /end.entries --> </div><!-- /end.other --> <div id="footer"> <h4>voettekst</h4> </div> </div><!-- /end.container.section --> </div><!-- /end #page --> </body> </html> Misschien zou het mogelijk zijn geweest met iets minder div-tags toe te kuen, maar zoals het nu is, kunt u de pagina flexibeler uitbreiden met afbeeldingen of video of met andere soorten tekst. Later gaan we de HTML veranderen in een PHP-template, zodat we er onze eigen inhoud in kuen zetten. Zelfs als we geen CSS toepassen, dan blijft de tekst leesbaar en de links bruikbaar, want dan ziet het scherm er zo uit: Weblampjes! Home... Contact Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sem enim, dignissim vitae lobortis nec, condimentum... mi nibh porta velit, quis viverra libero dui et lorem. Vestibulum urna neque, congue nec cursus et, venenatis ut ligula. In molestie magna nec dui elementum quis tempor lectus malesuada. Integer aliquam quam eget sapien eleifend non tristique mauris euismod. Voettekst Vloeiende rasteropmaak met CSS Zoals gezegd, gaan we gebruikmaken van vloeiende rasteropmaak met behulp van CSS3 mediaquery s. 33

9 PHP EN MYSQL de basis Vloeiende rasteropmaak Vloeiende rasteropmaak (Engels: fluid grid layout) is een principe waar het ontwerp van een website op een raster wordt gelegd en in kolommen opgedeeld. Door de opmaak in percentages in plaats van pixelwaarden te definiëren kan het ontwerp vloeiend schalen bij wisselende schermgrootte. Een handig stukje gereedschap voor het berekenen van de percentages is hier te vinden: Een belangrijke HTML-instructie om op een mobiel apparaat een vloeiend raster te kuen laten zien vindt u in de head-sectie van het document: C <meta content="width=device-width, initial-scale=1.0" name="viewport"> Deze instructie zegt dat de browser als breedte van het scherm de breedte van het apparaat moet nemen. Dat klinkt als het intrappen van een open deur, maar dat is het blijkbaar niet, want veel mobiele browsers doen net of het scherm veel breder is, zodat u moet schuiven om alles te zien te krijgen. Er zijn dan weliswaar geen schuifbalken, maar het kan mooier als de site zich vloeiend aanpast. Om geen last te hebben van browserverschillen in standaard opmaak voegen we in onze CSS-code een paar lange regels toe die voor een hele reeks elementen de margin, padding en border op 0 zetten en nog een paar dingen. Deze CSS code is hier te verkrijgen: We laten eerst een stukje CSS zien uit lampjes.css dat de afmetingen voor een groter scherm definieert: C /* #page is eerst fixed om de pagina niet te breed * te laten worden op een breed scherm */ #page { margin: 1em auto; width: 960px;.container { margin: 0 auto 3em; width: 93.75%; /* 900px / 960px */.container.main { float: left; width: %; /* 566px / 900px */.container.other { float: right; width: %; /* 330px / 900px */ 34

10 2 Een website bouwen height: 100%; Zo als u ziet komt er nergens een vaste pixelwaarde voor, met uitzondering van de oorspronkelijke paginabreedte. Alles is gedefinieerd via percentages van de breedte van het omvattende blok. Verder zijn kantlijn- en opvulwaarden (margin en padding) uitgedrukt in em, waarbij 1em de grootte is van het huidige lettertype. Dat betekent dat mobiele browsers, die een kleiner lettertype gebruiken, automatisch ook kleinere kantlijnen en lettergroottes zullen gebruiken. De merkwaardige percentages zijn ontstaan door het paginaontwerp in kolommen in te delen en er dan berekeningen op toe te passen. Ik moet bekeen dat ik er uit luiheid wat mee heb gesjoemeld, dus misschien klopt het niet allemaal precies. Meer details over vloeiende rasters kunt u hier lezen: com/articles/fluidgrids/ CSS3 mediaquery s We hebben nu de basis gelegd voor een vloeiend raster, maar als onze pagina op een smartphonescherm wordt getoond, dan is een 2- of 3-kolomsopmaak niet erg prettig om te lezen. We willen in dat geval dat alle kolommen onder elkaar worden getoond. Via een CSS3 mediaquery weet de browser dat het de opmaak moet aanpassen aan de kleinere schermbreedte. Bijvoorbeeld, als de pagina smaller wordt dan 960 pixels in onze voorbeeldpagina lampjes.html, dan willen we ook aan de paginabreedte een percentage toekeen. Dat ziet er zo uit: screen and (max-width: 960px) { #page { width: 90%; Mocht het scherm nog smaller worden, voor tablet pc s in portretmodus bijvoorbeeld, dan kuen we de kolommen onder elkaar zetten: screen and (max-width: 790px) { /*.main,.container,.other, #footer { border: 0; */.container.main { width: auto; float: none;.container.other { 35

11 PHP EN MYSQL de basis width: auto; float: none; Voor smartphones, zowel in portret- als in landschapstand, maken we nog een verdere aanpassing: screen and (max-width: 480px) {.nav { margin: -0.9em -0.7em 0 0; font-size: 1em;.nav li { display: block; border-bottom: 1px solid white; Behalve de kolommen, zijn nu ook de menuopties onder elkaar in plaats van naast elkaar gezet. De belangrijkste aspecten van dit stijlblad hebben we nu behandeld. We willen het resultaat van onze noeste arbeid natuurlijk voor onze echte sites gaan gebruiken, daarom gaan we ons in de volgende paragraaf richten op het maken van een template op basis van het bestand lampjes.html en het stijlblad lampjes.css. We gaan ook het geheel in een MVC-structuur plaatsen. We maken ons template door een proces van refactoring, zodat het eerste resultaat er net zo uit zal zien als het voorbeeld in afbeelding 2.1, maar dan opgebouwd via templates. 2.3 Een websitespecifiek raamwerk In het boek hebt u reeds keisgemaakt met het raamwerkje fw. Hierin zijn een aantal zaken opgenomen die algemeen toepasbaar zijn bij het bouwen van websites. Het is verleidelijk om hier een aantal dingen aan toe te voegen die we graag zouden willen hergebruiken bij het bouwen van verschillende pagina s van onze site of van verschillende sites met een vergelijkbare structuur. Uiteindelijk hebben we na enig heen en weer geschuif hier niet voor gekozen en we hebben besloten om een sitespecifiek, of zo u wilt, een domeinspecifiek raamwerk te maken. 36

12 2 Een website bouwen Inhoud van een sitespecifiek raamwerk In hoofdstuk 10 hebben we de map waar ons raamwerkje fw in stond als sub-map van de map hoofdstuk10 geplaatst. Het is niet handig om dit voor elk hoofdstuk opnieuw te moeten doen, daarom gaan we het raamwerk fw meteen in de map debasis plaatsen. Include paden Door deze verhuizing moet u ook config.inc aanpassen, anders werkt het automatisch laden van klassen niet meer. Misschien zou het beter zijn paden toe te voegen in een.htaccess-bestand voor Apache, maar dat maakt het uploaden naar uw site bij een webhoster weer ingewikkelder. Voor een prototype is onze aanpak voldoende. We nemen de volgende stappen: Kopieer de map fw met ons privéraamwerkje naar de map debasis. Kopieer config.inc naar de map bonushoofdstuk02 en pas de inhoud aan door de volgende twee regels aan het begin te plaatsen: C $docroot = "../"; set_include_path($docroot.path_separator.get_include_path()); Hiermee passen we het pad aan waar PHP gaat zoeken naar de opgegeven bestandsnamen en daar maakt de autoloader voor klassen weer gebruik van. Maak een mappenstructuur voor het sitespecifieke raamwerk, als volgt: C debasis - wl (het domein-specifieke raamwerk weblampjes) -- site (het site-specifieke gedeelte) -- table (een gedeelte voor tabel-specifieke klassen) Deze mappenstructuur met de top map wl (afkorting van weblampjes), lijkt op de mappenstructuur voor fw, maar er is een extra onderverdeling in twee mappen: site en table. De map site is er voor site gerelateerde zaken en in de map table gaan we straks klassen neerzetten die specifiek voor het afhandelen van query s op een bepaalde tabel of groep van tabellen zijn. U voelt al aankomen dat het sitegerelateerde raamwerk wl gaat heten, een afkorting van Weblampjes. Het raamwerk fw passen we iets aan door er een map form aan toe te voegen, waar straks formulier-gerelateerde klassen komen te staan. De structuur is nu zo: 37

13 PHP EN MYSQL de basis C debasis - fw -- db (algemene databaseklassen) -- form (formulier-gerelateerde klassen) -- tmpl (template-gerelateerde klassen) MaPPENSTRucTuuR voor DE RaaMwERkEN Het is uw goed recht om het niet eens te zijn met onze mappenstructuur. We hebben een aantal keren heen en weer geschoven met de verschillende bestanden en ook onze naamgevingsconventie hebben we een aantal keren gewijzigd voordat het in het boek terecht kwam zoals het nu is. We hopen dat u mee wil denken met deze structuur, omdat dit het terugvinden van bestanden en het begrijpen van de opbouw van onze site vergemakkelijkt. De template fluidgrid en aanverwante bestanden moeten onderdeel gaan uitmaken van wl, omdat we het template wel graag willen kuen hergebruiken maar het naar onze mening te sitespecifiek is voor het raamwerk fw. Daarom maken we een submap fluidgrid voor de map site die als basis dient voor alle verdere bestanden in deze component. Bien deze map fluidgrid gaan we onze MVC-structuur realiseren, maar voorlopig is er alleen een view, die uit de mappen css, tmpl en view bestaat. In de map css komen de stijlbladen, in de map tmpl komt een speciale template-klasse voor het template fluidgrid en in de map view komen de templates. Kijk naar afbeelding 2.3 om onze uitbreiding van de structuur te zien: Afbeelding 2.3 Structuur voor fluidgrid component De bestanden bien de mappenstructuur onder de map fluidgrid vormen de component fluidgrid voor de site weblampjes. We hebben standaard naamgeving toegepast, dus er is een map view, waarin de hoofdtemplate index.inc heet. Verder is er een map css. Hoewel de stijlbladen eigenlijk bij de view horen, zetten we ze voor de duidelijkheid toch maar apart. Het hoofd stijlblad heet style.css. 38

14 2 Een website bouwen Dit zijn onze volgende stappen in het proces van het maken van de component fluidgrid: We maken een speciale klasse FluidGridTemplate, die een aantal standaardwaarden voor het hoofdtemplate voor de component fluidgrid maakt. We zullen zo zien hoe deze klasse eruit ziet. We plaatsen in de map view het bestand lampjes.html en hernoemen het naar index.inc. We gaan hierna dit bestand bewerken tot een template. Plaats het bestand lampjes.css in de map css, en hernoem het naar style.css Het template fluidgrid.inc en de klasse FluidGridTemplate We maken vervolgens een template van index.inc in wl/site/fluidgrid/view door alle tekst die geen HTML is eruit te strippen en te vervangen door een PHP-statement van de vorm: <?=$myvar?>, zoals we al eerder gezien hebben en wat een verkorte schrijfwijze is voor: <?php echo $myvar;?>. Het template ziet er dan zo uit: C <!DOCTYPE html> <html> <head> <meta content="width=device-width, initial-scale=1.0" name="viewport"> <title>weblampjes</title> <link href="<?=$style?>" rel="stylesheet" type="text/css" /> <?=$links?> </head> <body> <div id="page"> <div class="container section"> <div class="headsection"> <h1 class="pagehead"><?=$pagehead?></h1> <?=$menu?> </div> <div class="main"> <div class="article"> <?=$article?> </div><!-- /end.article --> </div><!-- /end.main --> <div class="other"> <div class="entries"> <?=$entries?> </div> <!-- /end.entries --> </div><!-- /end.other --> <div id="footer"> 39

15 PHP EN MYSQL de basis <h4><?=$footer?></h4> </div> </div><!-- /end.container.section --> </div><!-- /end #page --> </body> </html> Dit zal u ongetwijfeld bekend voorkomen, vergelijk deze code maar met lampjes.html. Als u deze template probeert te gebruiken zoals we dat in het vorige hoofdstuk hebben geleerd, dan zult u vooral veel foutboodschappen op uw scherm zien verschijnen over variabelen die niet gedefinieerd zijn, zoiets als deze: Notice: Undefined variable: menu in C:\xampp\htdocs\debasis\bonushoofdstuk02\ cntrl_fluidgrid.php on line 5 Bij het ontwikkelproces is dat nogal onhandig en bovendien wilt u misschien sommige waarden leeg kuen laten, zonder dat u dit expliciet moet opgeven. Daarom hebben we een klasse gemaakt, die een sub-klasse van de klasse Template is en die specifiek alles af weet van het fluidgrid.inc template: FluidGridTemplate. Hier is de PHP-code voor de klasse FluidGridTemplate, die we hebben geplaatst in wl/ site/fluidgrid/tmpl: C <?php /* FluidGridTemplate is een subklasse van Template om de specifieke * fluid grid template van standaardwaarden te voorzien. * */ namespace wl\site\fluidgrid\tmpl; class FluidGridTemplate extends \fw\tmpl\template { public function construct($file = null) { parent:: construct('wl/site/fluidgrid/view/index.inc'); // zet standaard waarden $this->set('style', '../wl/site/fluidgrid/css/style.css'); $this->set('headsection', ''); $this->set('menu',''); $this->set('pagehead','geen waarde voor $pagehead opgegeven!'); $this->set('article',''); $this->set('entries',''); $this->set('footer','');?> 40

16 2 Een website bouwen We maken een aantal opmerkingen over de code van deze klasse: n De klasse hoort bij de namespace wl\site\fluidgrid\tmpl, zodat de autoloader hem kan terugvinden. n We hebben parent:: construct('wl/site/fluidgrid/view/index.inc'); als eerste regel in de construct()-methode opgenomen. Deze regel zorgt ervoor dat de construct()-methode in de superklasse van FluidGridTemplate (dat is Template), wordt uitgevoerd, met als parameter de naam van onze vloeiend raster template. n De construct()-methode in de klasse Template doet niets anders dan de naam van het bestand onthouden in een property, zodat bij de aanroep van de fetch() methode dit template bestand ingevoegd kan worden. Kijk eventueel terug naar de code van de klasse Template in paragraaf n Daarna geven we standaardwaarden aan alle variabelen die in de template gebruikt worden, zodat nadat deze klasse is gemaakt, u met uw eigen waarden deze waarden weer kunt overschrijven, maar als u dat niet doet dan komt er meestal een lege string te staan. n Let ook op de variabelen style en extra-style, dit zijn verwijzingen naar stijlbladen, waarvan de eerste het standaard stijlblad is dat we in de vorige paraaf, en hebben besproken. Het extra stijlblad is bedoeld om stijlinformatie te kuen aanpassen zonder het standaard stijlblad te moeten veranderen, wat niet leuk zou zijn voor andere gebruikers van dit template. Het extra stijlblad is standaard een leeg bestand, maar door de waarde naar uw eigen bestand te laten wijzen is dit flexibel aan te passen. We kuen nu een controller script (cntrl_fluidgrid.php, in de hoofdmap bonushoofdstuk02) maken dat er zo uitziet: C <?php include ('config.inc'); $tpl = new \fw\tmpl\fluidgridtemplate(); echo $tpl->fetch();?> Als u dit script uitvoert, dan ziet u: Afbeelding 2.4 Template zonder inhoud. 41

17 PHP EN MYSQL de basis Dit is het raamwerk van waaruit we webpagina s kuen maken volgens ons vloeiend rasterontwerp. Als voorbeeld gaan we de pagina vullen met de tekst die we er net hadden uitgesloopt Voeg inhoud toe met het fluidgrid.inc template Om de pagina er weer zo uit te laten zien als in afbeelding 2.1 of gevuld met andere inhoud, moeten we de variabelen in de template onze eigen waarden geven. Het voorbeeld dat we maken hoort niet bij een van de twee raamwerken, het maakt er alleen gebruik van. We moeten het voorbeeld dus ergens anders opslaan, bijvoorbeeld in debasis/bonushoofdstuk02/fluidgrid-vb. Maak ook de volgende submappen: debasis/bonushoofdstuk02/fluidgrid-vb/css en debasis/bonushoofdstuk02/ fluidgrid-vb/view. We kuen ons voorstellen dat het nog niet helemaal duidelijk is wat u moet doen. Kijk eens naar afbeelding 2.5, daarin staat schematisch aangegeven welke variabelen in de template gebruikt worden en waar ze terechtkomen: Afbeelding 2.5 Schema van het template fluidgrid Voor ieder van de variabelen $headsection, $pagehead, $menu, $article, $entries en $footer moet u een waarde aanmaken die via de set()-methode van de klasse template aan het template beschikbaar wordt gesteld. Deze waarde kan een tekststring zijn maar ook een template, zodat u een nest van templates kunt opbouwen. Laten we begien met het menu. Plaats een bestand met de naam menu.inc in de map en geef het de volgende inhoud: 42

18 2 Een website bouwen C <ul class="nav"> <li><a href="#">home</a></li> <li><a href="#">optie 1</a></li> <li><a href="#">optie 2</a></li> <li><a href="#">over ons</a></li> <li><a href="#">contact</a></li> </ul> We hebben de tekst ten opzichte van het menu in de vorige versie iets veranderd, zodat u een verschil kunt zien. Verder willen we de kleur van de menu-items veranderen en daarvoor maken we een stijlblad met de naam style.css dat we in fluidgrid-vb/css plaatsen en dat deze CSSinstructies heeft: C.nav li { background-color: blue;.nav a:link,.nav a:visited { color: #FFFFFF; De bedoeling is dat de menu-items blauw worden, maar omdat de tekst dan slecht te lezen is, maken we die wit. Nu moeten we ons controllerscript cntrl_fluidgrid.php nog aanpassen om gebruik te maken van het nieuwe menu: C <?php include ('config.inc'); $tpl = new \fw\tmpl\fluidgridtemplate(); $head = new \fw\tmpl\template('fluidgrid-vb/view/headsection.inc'); $tpl->set('headsection', $head); // maak een menu template $menu = new \fw\tmpl\template('fluidgrid-vb/view/menu.inc'); $tpl->set('menu', $menu); echo $tpl->fetch();?> U ziet: Het menu is een template, die we kuen verwerken met de gewone klasse Template. We hebben de variabele $headsection laten verwijzen naar een template, fluidgrid-vb/view/headsection.inc, dat het extra stijlblad dat we zojuist gemaakt hebben invoegt in de HTML head-sectie van het resulterende HTML-bestand. 43

19 PHP EN MYSQL de basis Voer het script cntrl_fluidgrid.php uit en als het goed is ziet u nu de pagina zoals in afbeelding 2.4 met de menuopties toegevoegd in een blauwe kleur. Tip voor het testen op een smartphone Begin met het IP-adres van uw pc op te zoeken. Op een Windows-machine kunt u dit doen door een command window te openen: ga naar het startmenu en tik cmd in het teksvak programma s zoeken. Typ daarin ipconfig. Dan ziet u ergens een regel met IPv4-adres. Dat adres, zoiets als , gebruikt u in de adresbalk van de browser op uw smartphone (of tablet) in plaats van localhost. Als het goed is ziet u dan uw pagina op uw smartphone of tablet. Oefening 2.1 Maak de pagina weer compleet Het is nuttig om goed te zien hoe het template fluidgrid in elkaar zit. U kunt het vinden in wl/ site/fluidgrid/view/index.inc. Kijk ook naar afbeelding 2.5 voor een schematisch overzicht, om te zien hoe u er eigen tekst of verdere templates aan kunt toevoegen. We laten u als oefening de pagina verder aanvullen zodat hij eruit ziet als afbeelding 2.1. Pas het controllerscript cntrl_fluidgrid.php aan door alle in het fluidgrid-template gebruikte variabelen een waarde te geven. Maak nieuwe templates waar nodig. U kunt de Lorem ipsum tekst gebruiken zoals wij dat ook gedaan hebben, maar u kunt natuurlijk ook uw eigen tekst verzien, als een begin voor uw eigen webpagina. Probeer het resultaat te tonen op uw smartphone als u er een hebt. Na dit verhaal over hoe u een website kunt bouwen die volgens MVC-principes gestructureerd is en die aanpasbaar is voor kleine schermen, zoals die op smartphones te vinden zijn, gaan we verder met een paar inhoudelijke zaken. 2.4 Een authenticatie- en autorisatiemodule Dit deel van het hoofdstuk over website bouwen gaat over het controleren en beperken van toegang tot uw website of delen daarvan. Dat is niet hetzelfde als het beveiligen van uw site tegen hackers of dieven die financiële gegevens willen stelen. Een discussie daarover hebben we al eerder gevoerd. Een voorbeeld is het regelen van de toegang tot een fotoalbum op uw site, of een weblog. Misschien wilt u wel familie en goede keissen uw foto s en schrijfsels laten zien, maar om de hele wereld mee te laten genieten vindt u waarschijnlijk te veel van het goede. We gaan daarom nuttig gebruikmaken van een database voor het bewaren en beheren 44

20 2 Een website bouwen LoREM ipsum Dit is een standaard tekst zonder betekenis die eruit ziet als Latijn. Deze tekst is handig om te gebruiken bij het ontwerpen van webpagina s of presentaties omdat het neutrale tekst is die toch een indruk geeft hoe de tekst er uit zal zien. U kunt er alles over lezen op deze pagina: nl.lipsum.com/. Waar onachtzaam gebruik van de tekst toe kan leiden ziet u in afbeelding 2.6 Afbeelding 2.6 Klein museum in Californië met uitleg over geïmporteerde planten, bijna helemaal met Lorem Ipsum tekst! van gebruikersgegevens. We laten zien hoe u de toegang tot een pagina kunt regelen met autorisaties en hoe u voor iedere gebruiker de gebruikersnaam en het wachtwoord in een tabel kunt opslaan. n Authenticatie is het proces van verifiëren of u bent wie u zegt te zijn, meestal met behulp van een gebruikersnaam/wachtwoord. n Autorisatie bepaalt welke gedeelten van de website u mag zien en welke taken u mag uitvoeren Mogelijkheden voor authenticatie en autorisatie Natuurlijk zijn er meerdere manieren om authenticatie en autorisatie te verzorgen. Een populaire methode is bijvoorbeeld om een hele map te beveiligen met behulp van de Apache-webserver. (Zie hiervoor Deze methode is echter niet erg flexibel. Het is bijvoorbeeld moeilijk om onderscheid te maken tussen verschillende soorten gebruikers en de rollen die zij vervullen bij het benaderen van een website. 45

1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien.

1. Open het programma KompoZer Het grote witte vlak is een nog lege webpagina. Deze gaan we nu van inhoud voorzien. Minicursus KompoZer In deze cursus ga je leren werken met het computerprogramma KompoZer. Stapsgewijs maak je een voorbeeldsite. Daarna kun je alles wat je geleerd hebt gebruiken om je eigen website te

Nadere informatie

Formulieren maken met Dreamweaver CS 4/CS 5

Formulieren maken met Dreamweaver CS 4/CS 5 Formulieren maken met Dreamweaver CS 4/CS 5 In deze handleiding leer je om een formulier en elementen die je binnen een formulier kunt gebruiken, te ontwerpen met Dreamweaver. Het uitgangspunt is dat dit

Nadere informatie

Een website maken met databasetoegang.

Een website maken met databasetoegang. Hoofdstuk 5 Een website maken met databasetoegang. In dit hoofdstuk gaan we het weblog dat je in hoofdstuk 4 hebt gemaakt verder uitbreiden. Een belangrijk onderdeel wordt toegevoegd aan de applicatie,

Nadere informatie

Inhoudsopgave Disclaimer... 3 Voorwoord... 4 Inleiding... 5 Het downloaden van XAMPP... 7 Het installeren van XAMPP... 8 Joomla installeren op

Inhoudsopgave Disclaimer... 3 Voorwoord... 4 Inleiding... 5 Het downloaden van XAMPP... 7 Het installeren van XAMPP... 8 Joomla installeren op 1 Inhoudsopgave Disclaimer... 3 Voorwoord... 4 Inleiding... 5 Het downloaden van XAMPP... 7 Het installeren van XAMPP.... 8 Joomla installeren op XAMPP... 15 Handige links... 16 2 Disclaimer Bij de samenstelling

Nadere informatie

Central Station. CS website

Central Station. CS website Central Station CS website Versie 1.0 18-05-2007 Inhoud Inleiding...3 1 De website...4 2 Het content management systeem...5 2.1 Inloggen in het CMS... 5 2.2 Boomstructuur... 5 2.3 Maptypen... 6 2.4 Aanmaken

Nadere informatie

Gebruikershandleiding voor: Beperkte Password protectie met JavaScript

Gebruikershandleiding voor: Beperkte Password protectie met JavaScript Gebruikershandleiding voor: Beperkte Password protectie met JavaScript URL: http://home.hccnet.nl/s.f.boukes/html-2/html-202.htm INHOUD : 1. Structuur van een beveiligde site 2. Login-formulier 3. Login

Nadere informatie

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com

Voor vragen: http://www.richard3332.nl/ of mail naar Richard3332@gmail.com Welkom bij mijn website tutorial (Deel 4) Ik ga uit van Microsoft XP voor de duidelijkheid. Ik heb dus geen idee of de programma s die ik gebruik ook op Vista werken. Notepad++ werkt zowieso op xp en Vista.

Nadere informatie

En hoe gaan ze dit allemaal terugvinden?

En hoe gaan ze dit allemaal terugvinden? En hoe gaan ze dit allemaal terugvinden? Taak 1.2.10 Thomas Muller Paul van der Linden MT1A Tutor: van Griensven Docent: van den Biggelaar Gemaakt door Thomas Muller en Paul van der Linden Pagina 1 van

Nadere informatie

Zonnepanelen Hoe krijg je de data op je website?

Zonnepanelen Hoe krijg je de data op je website? Zonnepanelen Hoe krijg je de data op je website? Beste website-bezoeker, Omdat ik al heel wat vragen kreeg over het gedeelte zonne-energie op mijn website, heb ik besloten om de werkwijze die ik gevolgd

Nadere informatie

Foto s Plaatsen op Rallykaart.nl

Foto s Plaatsen op Rallykaart.nl Foto s Plaatsen op Rallykaart.nl [Geef tekst op] 1. Inloggen Ga naar: http://www.rallykaart.nl/g2 Klik rechtsboven op Inloggen Voer de gebruikersnaam en het wachtwoord in dat u van ons hebt ontvangen en

Nadere informatie

Koppeling met een database

Koppeling met een database PHP en MySQL Koppeling met een database 11.1 Inleiding In PHP is het eenvoudig om een koppeling te maken met een database. Een database kan diverse gegevens bewaren die met PHP aangeroepen en/of bewerkt

Nadere informatie

Test Joomla op je PC 1

Test Joomla op je PC 1 1 Disclaimer Bij de samenstelling van dit ebook is de grootst mogelijke zorg besteed aan de juistheid en correctheid van de informatie die in dit ebook wordt verstrekt. De auteur van dit ebook kan op geen

Nadere informatie

Automatisering voor Financiële Dienstverleners. Werken met Queries en Merge Documenten. For more information visit our website at www.pyrrho.

Automatisering voor Financiële Dienstverleners. Werken met Queries en Merge Documenten. For more information visit our website at www.pyrrho. Automatisering voor Financiële Dienstverleners Werken met Queries en Merge Documenten For more information visit our website at www.pyrrho.com Date: Document Nr: 30 maart, 2007 UBizzMerge, Versie 4.0 Status:

Nadere informatie

Versie 0.4. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman

Versie 0.4. Documentatie Onsweb Club plugin voor KNKV verenigingen. Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman Documentatie Onsweb Club plugin voor KNKV verenigingen Versie 0.4 Laatste wijziging: 19 juli 2012 Auteurs: Marien Dongstra, Sebastian Huisman Alle rechten in dit document zijn voorbehouden. www.onsweb.nl,

Nadere informatie

design ook items uitsnijden

design ook items uitsnijden (fig1) Hulplijnen zetten Om het ontwerp netjes uit te snijden is het handig om eerst hulplijnen te zetten. (fig1) Nu is het zaak om eerst voor je zelf te bepalen wat is layout en wat is design. Al het

Nadere informatie

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B

WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN CHRIS VERMAAS & FJODOR VAN SLOOTEN 2014-201000018-1B WEBSITE-DESIGN INHOUD COLLEGE Afronding vak JQuery, mail(formulieren) en social media Testen Website-design 5-1-2015 2 AFRONDING VAK

Nadere informatie

CMS Handleiding. Opgesteld door

CMS Handleiding. Opgesteld door CMS Handleiding Opgesteld door Alleen beschikbaar voor klanten v1.2 24-01-2008 Index 1. Inloggen... 3 2. De CMS Omgeving... 5 NAVIGATIE... 5 MENU... 6 CONTENT... 6 3. Content Wijzigen... 7 DE WERKBALK...

Nadere informatie

Handleiding Wordpress

Handleiding Wordpress Handleiding Wordpress Inhoudsopgave 1. Inloggen 2. Berichten en Pagina s 3. Afbeeldingen en video s 4. Weblinks 1. Inloggen 1.1 Inloggen bij Wordpress We starten met het inloggen op je WordPress gebaseerde

Nadere informatie

Handleiding Concrete5 website. Outbound Media

Handleiding Concrete5 website. Outbound Media Handleiding Concrete5 website Outbound Media In deze handleiding behandelen we de basis benodigdheden om uw website up-to-date te kunnen houden. We behandelen: Inloggen editen (bewerken) van tekst een

Nadere informatie

Inhoud van de website invoeren met de ContentPublisher

Inhoud van de website invoeren met de ContentPublisher Inhoud van de website invoeren met de ContentPublisher De inhoud van Muismedia websites wordt ingevoerd en gewijzigd met behulp van een zogenaamd Content Management Systeem (CMS): de ContentPublisher.

Nadere informatie

3 Website opbouwen: vervolg

3 Website opbouwen: vervolg 3 Website opbouwen: vervolg 3.1 Elementen 3.1.1 Bestand Op je website kan je een bestand plaatsen (doc, pdf, ) dat door je bezoekers gedownload kan worden 3.1.2 Links. Zowel bij het typen van tekst (2.1.1)

Nadere informatie

Sparse columns in SQL server 2008

Sparse columns in SQL server 2008 Sparse columns in SQL server 2008 Object persistentie eenvoudig gemaakt Bert Dingemans, e-mail : info@dla-os.nl www : http:// 1 Content SPARSE COLUMNS IN SQL SERVER 2008... 1 OBJECT PERSISTENTIE EENVOUDIG

Nadere informatie

Howto Subversion. 1. Subversion structuur en uitleg

Howto Subversion. 1. Subversion structuur en uitleg 1. Subversion structuur en uitleg Op de Adwise VDS server staan de repositories die gebruikt kunnen worden. Een subversion repository bevat alle projecten gerelateerd aan de betreffende repository. Adwise

Nadere informatie

Project plan. Erwin Hannaart Sander Tegelaar 61849 62407

Project plan. Erwin Hannaart Sander Tegelaar 61849 62407 Project plan Erwin Hannaart Sander Tegelaar 61849 62407 I4C2 I4C1 1 Inhoudsopgave Doel en doelgroep van het project... 3 Beschrijving van het project... 4 Benodigde materialen... 5 Te verwachten resultaten,

Nadere informatie

SQL datadefinitietaal

SQL datadefinitietaal SQL datadefinitietaal We kunnen er het schema van de database mee bepalen: metadata toevoegen, wijzigen en verwijderen uit een database. Basiscommando's: CREATE : toevoegen van metagegevens DROP : verwijderen

Nadere informatie

Navigator CMS 2009. Beknopte handleiding v1.0

Navigator CMS 2009. Beknopte handleiding v1.0 Navigator CMS 2009 Beknopte handleiding v1.0 Inhoudsopgave 1. Inleiding... 3 2. Inloggen... 4 3. Menustructuur... 5 4. Document Verkenner... 6 5. Mappen beheren... 7 5.2 Map hernoemen... 7 5.3 Map verplaatsen...

Nadere informatie

Formulierbeheer Importeren bestaand (model)formulier... 2 Wat is exporteren/importeren eigenlijk?... 3 Formulier aanpassen/opbouwen...

Formulierbeheer Importeren bestaand (model)formulier... 2 Wat is exporteren/importeren eigenlijk?... 3 Formulier aanpassen/opbouwen... Formulierbeheer Importeren bestaand (model)formulier... 2 Wat is exporteren/importeren eigenlijk?... 3 Formulier aanpassen/opbouwen... 4 Bewerken formulier in formulierbeheer... 4 Bewerken formulier -

Nadere informatie

Handleiding: Whitelabel Customersite

Handleiding: Whitelabel Customersite ARGEWEB B.V. Handleiding: Whitelabel Customersite Controlportal.nl Argeweb Support 8-1-2009 Handleiding voor het gebruik maken van de Whitelabel Customersite op controlportal.nl, door Resellers van Argeweb.

Nadere informatie

Basis-theme. Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme >

Basis-theme. Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme > Basis-theme Manage Wiki > Look and Feel > Themes > Change or make a new theme > Make a New Theme > Naam invullen en de code van basis-theme kopiëren en erin plakken

Nadere informatie

MARTINA. Wist je dat..? Truckjes en weetjes in Drupal 7. 6. Artikels, lengte en aantal op frontpagina (en welkomtekst zonder lees meer )

MARTINA. Wist je dat..? Truckjes en weetjes in Drupal 7. 6. Artikels, lengte en aantal op frontpagina (en welkomtekst zonder lees meer ) MARTINA Wist je dat..? Truckjes en weetjes in Drupal 7 Inhoud: 1. Inlogknop 2. Aangepast beheerdermenu 3. Actieve pagina in de broodkruimel 4. Afbeelding op zoekknop (en geen tekst) [CSS] 5. Logo met link

Nadere informatie

Schoolwebsite.nu. Snel aan de slag met uw website. Versie 4.0

Schoolwebsite.nu. Snel aan de slag met uw website. Versie 4.0 Schoolwebsite.nu Snel aan de slag met uw website Versie 4.0 Inhoudsopgave Inhoudsopgave... 2 1 Inleiding... 3 2 Voor dat u begint... 4 3 Teksten op de website... 6 4 Groepspagina s... 8 5 De groepspagina...

Nadere informatie

PvdA websites Quick Start voor het werken met het Hippo CMS

PvdA websites Quick Start voor het werken met het Hippo CMS PvdA websites Quick Start voor het werken met het Hippo CMS Versie 2.0 Amsterdam, 16 maart 2009 2 Inhoudsopgave 1. Beginnen 5 1.1 Het CMS opstarten en afsluiten 5 1.2 De preview website bekijken 5 1.3

Nadere informatie

Pro templates. Copyright Starteenwinkel.nl

Pro templates. Copyright Starteenwinkel.nl Pro templates Copyright Starteenwinkel.nl Lees in deze handleiding over: 1. PRO templates; voor wie geschikt? 2. Aan de slag met een PRO template 3. Template Designer 4. Template Editor 5. Sliders aanpassen

Nadere informatie

DrICTVoip.dll v 2.1 Informatie en handleiding

DrICTVoip.dll v 2.1 Informatie en handleiding DrICTVoip.dll v 2.1 Informatie en handleiding Nieuw in deze versie : Koppeling voor web gebaseerde toepassingen (DrICTVoIPwebClient.exe) (zie hoofdstuk 8) 1. Inleiding Met de DrICTVoIP.DLL maakt u uw software

Nadere informatie

Handleiding NarrowCasting

Handleiding NarrowCasting Handleiding NarrowCasting http://portal.vebe-narrowcasting.nl september 2013 1 Inhoud Inloggen 3 Dia overzicht 4 Nieuwe dia toevoegen 5 Dia bewerken 9 Dia exporteren naar toonbankkaart 11 Presentatie exporteren

Nadere informatie

Handleiding teksteditor

Handleiding teksteditor In deze handleiding leggen we de werking van de teksteditor uit. De teksteditor wordt gebruikt voor het bewerken van tekst. Uw tekstpagina s bewerkt u met deze editor, maar u vindt m op vele plekken terug.

Nadere informatie

Formulieren maken met Dreamweaver CS 4

Formulieren maken met Dreamweaver CS 4 Formulieren maken met Dreamweaver CS 4 In deze handleiding leer je om een formulier en elementen die je binnen een formulier kunt gebruiken, te ontwerpen met Dreamweaver. Het uitgangspunt is dat dit zoveel

Nadere informatie

Widget Tip van de dag!

Widget Tip van de dag! Gebruikershandleiding Widget Tip van de dag! Datum Versie Naam Opmerkingen 01-12-2011 0.5 M. Bruinsma Schrijven handleiding J. van Beijnen 05-12-2011 1.0 J. van Beijnen Opmaak en kleine aanpassingen structuur

Nadere informatie

Handleiding. Beheeromgeving

Handleiding. Beheeromgeving Handleiding Beheeromgeving Kant en Klare Site Veluwelaan 80 8443 AH Heerenveen www.kantenklaresite.nl - info@kantenklaresite.nl - fax: 084-8368243 KvK 01134248 Inhoud Inloggen op de beheeromgeving...3

Nadere informatie

Formulieren en waarden posten naar een view

Formulieren en waarden posten naar een view Hoofdstuk 4 Formulieren en waarden posten naar een view Waarden posten naar een view in een Zend-project gaat heel anders dan dat je gewend bent. Om dit mechanisme te leren, kunnen we het beste een eenvoudige

Nadere informatie

4.1 4.2 5.1 5.2 6.1 6.2 6.3 6.4

4.1 4.2 5.1 5.2 6.1 6.2 6.3 6.4 Handleiding CMS Inhoud 1 Inloggen 2 Algemeen 3 Hoofdmenu 4 Pagina s 4.1 Pagina s algemeen 4.2 Pagina aanpassen 5 Items 5.1 Items algemeen 5.2 Item aanpassen 6 Editor 6.1 Editor algemeen 6.2 Afbeeldingen

Nadere informatie

Internet Explorer 7 (IE7)

Internet Explorer 7 (IE7) Internet Explorer 7 (IE7) 1. HET VENSTER Het venster van Internet Explorer 7 ziet er als volgt uit: Het venster bestaat uit volgende onderdelen: De knoppen Volgende en Vorige. Adresbalk hierin vullen we

Nadere informatie

CMS Made Simple eenvoudig uitgelegd CMS MADE SIMPLE- Eenvoudig uitgelegd

CMS Made Simple eenvoudig uitgelegd CMS MADE SIMPLE- Eenvoudig uitgelegd CMS Made Simple eenvoudig uitgelegd CMS MADE SIMPLE- Eenvoudig uitgelegd Introductie Deze handleiding heeft tot doel een eenvoudige stap voor stap handleiding te zijn voor eindgebruikers van CMS Made Simple

Nadere informatie

Trippeltrap Content Management System

Trippeltrap Content Management System Handleiding Trippeltrap Content Management System versie 2.4 Aanmelden Voordat u de tekst op uw webpagina kunt aanpassen, moet u zich eerst aanmelden. Bovenaan de pagina vindt u een link naar het intranet.

Nadere informatie

Altijd op de hoogte van de laatste ontwikkelingen.

Altijd op de hoogte van de laatste ontwikkelingen. Beheer Webredactie dashboard Het webredactie dashboard geeft u in één oogopslag een overzicht van de beheersmogelijkheden van uw website. Daarnaast blijft u via het dashboard gemakkelijk op de hoogte van

Nadere informatie

Digitale vormgeving 2014 2015. Wordpress deel 1

Digitale vormgeving 2014 2015. Wordpress deel 1 Digitale vormgeving 2014 2015 Wordpress deel 1 2 Inhoud Site in WordPress... 3 Maak een eigen site in WordPress.com.... 3 Wordpressaccount aanmaken... 4 Opdracht 1... 4 Thema kiezen... 6 Opdracht 2...

Nadere informatie

Een verticale vormgeving is makkelijker en sneller te realiseren dan een horizontale.

Een verticale vormgeving is makkelijker en sneller te realiseren dan een horizontale. Een HTML-sjabloon Denk goed na hoe je webpagina er moet uitzien. Wil je een webpagina met een horizontale vormgeving (zoals bij een schermpresentatie)? Wil je een webpagina met een verticale vormgeving

Nadere informatie

Technisch ontwerp. Projectteam 6. Project "Web Essentials" 02 april 2009. Versie 2.1.0

Technisch ontwerp. Projectteam 6. Project Web Essentials 02 april 2009. Versie 2.1.0 Projectteam 6 Faculteit Natuur en Techniek Hogeschool Utrecht Projectleider: Hans Allis, hans.allis@student.hu.nl Technisch ontwerp Project "Web Essentials" 02 april 2009 Versie 2.1.0 Teamleden: Armin

Nadere informatie

Oplossingen overzicht PHP. Oplossing KPN opgave, zonder testen van POST

Oplossingen overzicht PHP. Oplossing KPN opgave, zonder testen van POST Oplossingen overzicht PHP Oplossing KPN opgave, zonder testen van POST internetminuten in welke categorie val ik?

Nadere informatie

Inhoudsopgave. versie 0.8

Inhoudsopgave. versie 0.8 JOOMLA! INSTALLATIE HANDLEIDING versie 0.8 Inhoudsopgave Stappenplan...3 Inrichten database...4 Configuratiecentrum cpanel...4 Aanmaken van een database gebruiker...5 Aanmaken van een database...6 Gebruiker

Nadere informatie

HTML in Outlook 2007. Hoe zorgt u ervoor dat uw email goed in beeld komt?

HTML in Outlook 2007. Hoe zorgt u ervoor dat uw email goed in beeld komt? HTML in Outlook 2007 Hoe zorgt u ervoor dat uw email goed in beeld komt? HTML in Outlook 2007 Inleiding Emark Mail biedt u de mogelijkheid om kant en klare HTML nieuwsbrieven in te laden en te versturen.

Nadere informatie

De WordPress 3.5 Beginners Handleiding

De WordPress 3.5 Beginners Handleiding De WordPress 3.5 Beginners Handleiding Internetbureau Elephant april 13 Inhoud Introductie... 2 Inloggen... 3 Het dashboard... 5 Berichten en pagina's... 6 Nieuw Bericht... 6 Nieuwe Pagina... 8 Afbeeldingen,

Nadere informatie

Frontend ontwikkeling

Frontend ontwikkeling Frontend ontwikkeling Mark Jansen Edwin Vlieg PHPFreakz ledendag 10 november 2007 Frontend ontwikkeling De interface is je product richting de eindgebruiker Goede PHP code met een slechte interface geeft

Nadere informatie

WORDPRESS. op de FourBottles manier. Pagina 1

WORDPRESS. op de FourBottles manier. Pagina 1 WORDPRESS op de FourBottles manier Pagina 1 Fijn dat je voor FourBottles hebt gekozen voor het realiseren van je website. Bij een website hoort natuurlijk een Content Management Systeem (CMS). Ik maak

Nadere informatie

Min-height en min-width

Min-height en min-width Oefening 15.5 Min-height en min-width Maak op van uw een webpagina s een div die u voorziet van een geschikte waarde voor min-height en min-width. Laat zien wat er gebeurt als u het lettertype verkleint

Nadere informatie

Handleiding. HetSchoolvoorbeeld.nl. Versie 2.2 - juni 2014. Websites voor het onderwijs. Meest recente uitgave: www. hetschoolvoorbeeld.

Handleiding. HetSchoolvoorbeeld.nl. Versie 2.2 - juni 2014. Websites voor het onderwijs. Meest recente uitgave: www. hetschoolvoorbeeld. HetSchoolvoorbeeld.nl Websites voor het onderwijs Handleiding Versie 2.2 - juni 2014 Meest recente uitgave: www. hetschoolvoorbeeld.nl/handleiding Handleiding HetSchoolvoorbeeld 2.2 Pagina 1 Inhoud Inhoud

Nadere informatie

HANDLEIDING Content Management Systeem de Fertilizer 4

HANDLEIDING Content Management Systeem de Fertilizer 4 HANDLEIDING Content Management Systeem de Fertilizer 4 1 INHOUDSOPGAVE 1. INLEIDING 3 2. BEHEER 5 2.1 Site structuur 6 2.2 Afdelingen 7 2.3 Beheerders 8 2.3.1 Rechten 9 2.3.1.1 Rechten Beheer 9 3. INSTELLINGEN

Nadere informatie

De tekstverwerker. Afb. 1 de tekstverwerker

De tekstverwerker. Afb. 1 de tekstverwerker De tekstverwerker De tekstverwerker is een module die u bij het vullen van uw website veel zult gebruiken. Naast de module tekst maken onder andere de modules Aankondigingen en Events ook gebruik van de

Nadere informatie

Lined Content Management System v.2 (LCMS 2)

Lined Content Management System v.2 (LCMS 2) Lined Content Management System v.2 (LCMS 2) Inhoudsopgave Lined Content Management System v.2 (LCMS 2)...2 Wat is LCMS 2?...3 Hoe gebruik ik LCMS 2?...3 De modules...4 Instellingen...4 Gebruikers...4

Nadere informatie

HTML Editor: tabellen en hyperlinks

HTML Editor: tabellen en hyperlinks LES 19 HTML Editor: tabellen en hyperlinks In deze les leert u nog iets meer over HTML en de HTML Editor van OpenOffice.org. U leert hoe u absolute en relatieve hyperlinks maakt. We staan even stil bij

Nadere informatie

icafe Project Joeri Verdeyen Stefaan De Spiegeleer Ben Naim Tanfous

icafe Project Joeri Verdeyen Stefaan De Spiegeleer Ben Naim Tanfous icafe Project Joeri Verdeyen Stefaan De Spiegeleer Ben Naim Tanfous 2006-2007 Inhoudsopgave 1 2 1.1 Programmeertaal PHP5..................... 2 1.2 MySQL database......................... 3 1.3 Adobe Flash...........................

Nadere informatie

EBUILDER HANDLEIDING. De Ebuilder is een product van EXED internet www.exed.nl. info@exed.nl EXED CMS UITLEG

EBUILDER HANDLEIDING. De Ebuilder is een product van EXED internet www.exed.nl. info@exed.nl EXED CMS UITLEG EBUILDER HANDLEIDING De Ebuilder is een product van EXED internet www.exed.nl info@exed.nl 1 INHOUDSOPGAVE Inleiding Een korte introductie over het Ebuilder» Navigatie» Snelnavigatie Pagina s Hier vind

Nadere informatie

HRM-Reviews Reviews Handleiding voor PZ

HRM-Reviews Reviews Handleiding voor PZ HRM-Reviews Reviews Handleiding voor PZ In deze uitgebreide handleiding vindt u instructies om met Reviews in the Cloud aan de slag te gaan. U kunt deze handleiding ook downloaden (PDF). TIP: De navigatie

Nadere informatie

Handleiding bij de onderhoudsmodule van de Hermes CMS website.

Handleiding bij de onderhoudsmodule van de Hermes CMS website. Handleiding bij de onderhoudsmodule van de Hermes CMS website. Voor wie? U wilt uw bedrijf professioneel voor stellen? U wenst uw website graag zelf te onderhouden? U wenst het budget laag te houden? Wat?

Nadere informatie

GEBRUIKERSHANDLEIDING MAAKJETRAINING.NL 1

GEBRUIKERSHANDLEIDING MAAKJETRAINING.NL 1 GEBRUIKERSHANDLEIDING MAAKJETRAINING.NL 1 INHOUD 1 Inleiding 3 1.1 De drie categorieën 3 2 Inloggen op MaakJeTraining 4 2.1 Registreren op MaakJeTraining 4 2.2 Inloggen met account 5 2.3 Veranderingen

Nadere informatie

Een ASP.NET applicatie opzetten. Beginsituatie:

Een ASP.NET applicatie opzetten. Beginsituatie: Hoofdstuk 1 Een ASP.NET applicatie opzetten Beginsituatie: Windows XP Pro, Windows Vista Pro of Windows 7 Pro Visual Studio.NET moet zijn geïnstalleerd. Let hierbij op dat de Express versie niet voldoet.

Nadere informatie

MWeb 4.0. Handleiding Basis Modules Versie 1.0

MWeb 4.0. Handleiding Basis Modules Versie 1.0 MWeb 4.0 Handleiding Basis Modules Versie 1.0 Index 1. Algemeen 3 1.1. Gebruikersnamen en Wachtwoorden 3 1.2. Inloggen 3 1.3. Uitloggen 3 1.4. Belangrijk 3 2. User Manager 4 2.1. Gebruikers lijst User

Nadere informatie

styleguide POWERNATION

styleguide POWERNATION styleguide Inleiding De branding van Powernation word uitgebereid beschreven in deze styleguide. Powernation is het nieuwe bedrijf dat producten verkoopt in alle populaire categorieën van sport. Hiermee

Nadere informatie

Grafisch ontwerp. Referenties. https://developers.google.com/webmasters/mobile-sites/ http://www.bluetrainmobile.com/mobile-showcase

Grafisch ontwerp. Referenties. https://developers.google.com/webmasters/mobile-sites/ http://www.bluetrainmobile.com/mobile-showcase Mobiel Datanose Op dit moment is mobiel datanose niet goed gedaan; je krijgt gewoon de site te zien zoals je het te zien krijgt op pc's of laptops. Maar vaak heb je het probleem dat je op je mobiel moet

Nadere informatie

Handleiding. Outlook Web App 2010 - CLOUD. Versie: 22 oktober 2012. Toegang tot uw e-mailberichten via internet

Handleiding. Outlook Web App 2010 - CLOUD. Versie: 22 oktober 2012. Toegang tot uw e-mailberichten via internet Handleiding Outlook Web App 2010 - CLOUD Versie: 22 oktober 2012 Toegang tot uw e-mailberichten via internet Handleiding Multrix Outlook Web App 2010 - CLOUD Voorblad Inhoudsopgave 1 Inleiding...3 2 Inloggen...4

Nadere informatie

Wat leuk dat je wilt werken met Glogster (http://www.glogster.com)! Maar wat is het?

Wat leuk dat je wilt werken met Glogster (http://www.glogster.com)! Maar wat is het? Inhoudsopgave Inleiding! 1 TIP: Inlognamen op de basisschool! 2 Gereedschap - Graphics! 6 Gereedschap - Wall! 6 Gereedschap - Video! 8 Publiceren en/of Opslaan! 9 Inleiding Wat leuk dat je wilt werken

Nadere informatie

Toelichting op enkele knoppen: (als u de muis bij een knop houdt, verschijnt een tekst met een korte aanwijzing (tooltip) bij deze knop).

Toelichting op enkele knoppen: (als u de muis bij een knop houdt, verschijnt een tekst met een korte aanwijzing (tooltip) bij deze knop). FAQ Leerlingdossier & handelingsplannen Welke mogelijkheden biedt de online tekstverwerker in ESIS? De online tekstverwerker beschikt over veel mogelijkheden voor het bewerken van tekst. U vindt de online

Nadere informatie

Handleiding Wordpress

Handleiding Wordpress Handleiding Wordpress V 1.0 Door Inhoud Inloggen op de website... 3 Het Dashboard... 4 Berichten... 5 Berichten aanmaken... 5 Berichten bewerken... 6 Pagina's... 7 Pagina's aanmaken... 7 Pagina's bewerken...

Nadere informatie

NPS score: -77 Lorem Ipsum Donec sodales lorem in libero rhoncus, ac egestas augue rhoncus.

NPS score: -77 Lorem Ipsum Donec sodales lorem in libero rhoncus, ac egestas augue rhoncus. Pakkende titel van de infographic Subtitel of introtekst: Praesent id congue lorem, eget ultricies sapien. Quisque vel nunc id quam porttitor feugiat non et quam. Donec vulputate mauris at consectetur

Nadere informatie

Outlook Web App 2010 XS2office

Outlook Web App 2010 XS2office Handleiding Outlook Web App 2010 XS2office Toegang tot uw contacten, adressen en e-mail berichten via internet XS2office Versie: 22 juli 2014 Helpdesk: 079-363 47 47 Handleiding OWA Helpdesk: 079-363 47

Nadere informatie

Handleiding ESS na de upgrade People Inc. versie 3.5.0

Handleiding ESS na de upgrade People Inc. versie 3.5.0 Handleiding ESS na de upgrade People Inc. versie 3.5.0 I Handleiding ESS na de upgrade People Inc. versie 3.5.0 Inhoudsopgave Hoofdstuk 1 1 1.1 ESS... Iconen selecteren 1 1.2 ESS... Inlog scherm tekst

Nadere informatie

Ga naar www.basisonline.nl of selecteer in de website van de school- intranet basisonline

Ga naar www.basisonline.nl of selecteer in de website van de school- intranet basisonline Werken met de website basisonline Ga naar www.basisonline.nl of selecteer in de website van de school- intranet basisonline - login met de verkregen inlognaam en wachtwoord - je inlognaam is jouw emailadres

Nadere informatie

Object Oriented Programming

Object Oriented Programming Object Oriented Programming voor webapplicaties Door Edwin Vlieg Waarom OOP? Basis uitleg over OOP Design Patterns ActiveRecord Model View Controller Extra informatie Vragen OOP Object Oriented Programming

Nadere informatie

Handleiding Website beheersysteem

Handleiding Website beheersysteem Handleiding Website beheersysteem Inhoudsopgave 1. Inleiding...3 2. Inloggen...4 3. De startpagina...5 3.1. Startpagina menu...5 3.2. Bovenbalk...6 4. Menu en Pagina's...7 4.1. Een nieuwe pagina toevoegen...8

Nadere informatie

Handleiding Mijn Kerk

Handleiding Mijn Kerk Handleiding Mijn Kerk 1 www.deinteractievekerk.nl Algemeen Uw kerk gaat de Interactieve Kerk gebruiken. In deze handleiding willen we u op een eenvoudige manier uitleggen hoe de Interactieve Kerk precies

Nadere informatie

Handleiding. HetSchoolvoorbeeld.nl. HetSchoolvoorbeeld 2.1. Websites voor het onderwijs. Websites Social media Mediawijsheid Grafisch ontwerp

Handleiding. HetSchoolvoorbeeld.nl. HetSchoolvoorbeeld 2.1. Websites voor het onderwijs. Websites Social media Mediawijsheid Grafisch ontwerp HetSchoolvoorbeeld.nl Websites voor het onderwijs Handleiding HetSchoolvoorbeeld 2.1 Websites Social media Mediawijsheid Grafisch ontwerp Handleiding HetSchoolvoorbeeld 2.1 Pagina 1 Inhoud 1 Opbouw van

Nadere informatie

De basisknop 'alle site inhoud tonen' links in uw scherm

De basisknop 'alle site inhoud tonen' links in uw scherm 2.1 Inleiding De mogelijkheden om binnen een Sharepoint-teamsite informatie (content) te presenteren, te delen en te beheren zijn groot. De starttemplates waar uit kunt kiezen (zie 1.3) kunnen door u zelf

Nadere informatie

Introductie Werken met Office 365

Introductie Werken met Office 365 Introductie Werken met Office 365 Een introductie voor gebruikers Inhoud Inleiding... 4 Aanmelden bij Office 365... 4 Werken met Office 365 Outlook... 5 Werken met Outlook 2007/2010... 5 Werken met de

Nadere informatie

Berichten plaatsen op de ALO site

Berichten plaatsen op de ALO site Berichten plaatsen op de ALO site Ieder lid van ALO is bevoegd om berichten te plaatsen in de Babalobox en de Kalvermarkt. Zit je in een team bij ALO, dan ben je ook bevoegd om berichten/verslagen te plaatsen

Nadere informatie

Bitrix Site Manager gebruikershandleiding BureauZuid

Bitrix Site Manager gebruikershandleiding BureauZuid Bitrix Site Manager gebruikershandleiding BureauZuid Introductie Deze gebruikershandleiding geeft gedetailleerde basisinformatie over hoe te werken met Bitrix Site Manager. Deze handleiding is bedoeld

Nadere informatie

Highpotech IT. Nieuwsbrief. Een webpagina maken. heeft een zekere es- verhouding van 4:3

Highpotech IT. Nieuwsbrief. Een webpagina maken. heeft een zekere es- verhouding van 4:3 Uitgave 6 versie 2 Augustus 2010 Highpotech IT Nieuwsbrief Een webpagina maken Eerdere uitgaven Een website wordt weergegeven op een hoek waarvan de verhoudingen dicht in de Werken met Excel beeldscherm

Nadere informatie

Handleiding Plesk. Eddy De Bock

Handleiding Plesk. Eddy De Bock Handleiding Plesk Eddy De Bock 1 1 STARTPAGINA Hier krijgt u een samenvattend overzicht van de functies die Plesk u biedt. 2 GEBRUIKERS Hier kan u gebruikers aanmaken, verwijderen en beheren. Onder Gebruikersrollen

Nadere informatie

Handleiding VKKOnline

Handleiding VKKOnline Handleiding VKKOnline Welkom bij de Online cursus van de Vrij-Katholieke Kerk. Deze handleiding neemt je bij de hand om de cursus te kunnen starten. 1 Donatie Het volgen van de cursus is kosteloos. Wel

Nadere informatie

Handleiding website SVNL voor evenementenverkeersregelaars

Handleiding website SVNL voor evenementenverkeersregelaars Handleiding website SVNL voor evenementenverkeersregelaars Met deze handleiding maken wij u graag wegwijs op de website van Stichting Verkeersregelaars Nederland (SVNL). U vindt hier stap voor stap uitleg

Nadere informatie

Extra: Hoe u uw website met HTML kunt verbeteren

Extra: Hoe u uw website met HTML kunt verbeteren Extra: Hoe u uw website met HTML kunt verbeteren HTML is een afkorting van Hyper Text Markup Language. Zoals de term al zegt is het een "opmaak taal", dat wil zeggen het vertelt de browser door middel

Nadere informatie

Kies File>New>Blank Page>PHP. Je kunt eventueel nog een stylesheet koppelen. Definieer nu eerst een site! Dat betekent: Site>New Site

Kies File>New>Blank Page>PHP. Je kunt eventueel nog een stylesheet koppelen. Definieer nu eerst een site! Dat betekent: Site>New Site Kies File>New>Blank Page>PHP Je kunt eventueel nog een stylesheet koppelen. Definieer nu eerst een site! Dat betekent: Site>New Site Geef de site een passende naam. Kies ook de juiste map voor de webdocumenten.

Nadere informatie

Inhoud. Handleiding Dododent. Beste tandarts of praktijkmanager,

Inhoud. Handleiding Dododent. Beste tandarts of praktijkmanager, Handleiding Dododent Beste tandarts of praktijkmanager, Hartelijk dank voor de aanschaf van een website bij Dodoworks. Hieronder volgt een uitgebreide handleiding van het Dododent systeem waarmee de website

Nadere informatie

Websites i.s.m. Service @ School

Websites i.s.m. Service @ School Websites i.s.m. Service @ School Inhoudsopgave Introductie...3 Inloggen in het Beheer Panel...3 Aanpassen van de tekst op de pagina s...4 Nieuwe pagina maken...5 Toelichting op enkele knoppen...6 Een link

Nadere informatie

Handleiding Lay-outs bewerken voor LogiVert 5

Handleiding Lay-outs bewerken voor LogiVert 5 Hoofdstuk: Inleiding Handleiding Lay-outs bewerken voor LogiVert 5 Copyrights : 20 LogiVert BV Website : www.logivert.com V.0.3 5-5-2009 Toevoegingen aan stap voor stap V.0.2 9-4-2009 Tweede opzet V. 0.

Nadere informatie

Handleiding CMS Joomla 3.2 v1.2

Handleiding CMS Joomla 3.2 v1.2 Handleiding CMS Joomla 3.2 v1.2 Inhoudsopgave 1. Inloggen op het CMS-systeem 2. Artikelen en Categorieën beheren 2.1 Aanmaken en beheren van een artikel 2.2 Verwijderen van een artikel 2.3 Aanmaken van

Nadere informatie

Handleiding website FMS-spaarnwoude.nl

Handleiding website FMS-spaarnwoude.nl Handleiding website FMS-spaarnwoude.nl Alfred Houdijk Webmaster 27-12-2012 Inhoud Inleiding... 2 Wie kan wat op de website... 3 Foto s en filmpjes plaatsen... 4 Copyright... 4 Schrijf een artikel... 5

Nadere informatie

Handleiding Facultaire website Expression Engine

Handleiding Facultaire website Expression Engine Handleiding Facultaire website Expression Engine Inhoud 1. Opbouw 2. Inloggen 3. Home 4. Publish 5. Publish Form full item 6. Uitleg velden Publish Form Full item 7. Publish Form Half Page 8. Uitleg velden

Nadere informatie

Als je geen email-adres hebt kun je bij Google een gmail account aan maken. Als je niet weet hoe dat moet klik dan op: Gmail account aanmaken

Als je geen email-adres hebt kun je bij Google een gmail account aan maken. Als je niet weet hoe dat moet klik dan op: Gmail account aanmaken Om het online programma te kunnen gebruiken het je een account nodig. Wat heb je nodig om een account voor Photo Collage te kunnen aanmaken: Username (gebruikersnaam) Email account Password (wachtwoord

Nadere informatie