Ik krijg veel vragen over mijn cursussen jQuery Mobile en Mobiele apps maken met Dreamweaver, jQuery Mobile en PhoneGap. Zie bijvoorbeeld ook mijn eerdere blogartikel Mobiele apps zonder programmeren.

Vaak worden de vragen (vooral) gesteld door designers die redelijk wat ervaring hebben met het vormgeven van pagina’s met HTML en CSS (naast natuurlijk de typische designtools als Photoshop en Illustrator), maar nog minder ervaring hebben met programmeren en JavaScript.

Bij het ontwikkelen van een geoptimaliseerde mobiele website of een mobiele app komen globaal gesproken twee kernstromingen aan de orde:

• het visualiseren van je app, met jQuery Mobile, HTML en CSS. Als editor wordt bijvoorbeeld Dreamweaver of Visual Studio gebruikt.
• Het scripten van je app, voor als je meer wilt dan een statische webapplicatie. Hiervoor wordt JavaScript gebruikt.

JavaScript leren via YouTube

Als je nog niet zo bekend bent met JavaScript, kunnen deze YouTube-video’s je snel op weg helpen. Ze zijn allemaal Engelstalig, maar daar ontkom je niet aan als je wat verder op webdevelopment ingaat. Ik heb de video’s (mede) geselecteerd op verstaanbaarheid en audiokwaliteit, zodat het makkelijk te volgen is. De volgorde van boven naar beneden is globaal ook van ‘makkelijk’ naar ‘moeilijk’.

1. The New Boston

http://www.youtube.com/watch?v=yQaAGmHNn9s

Dit is de eerste video uit een serie. Bucky Roberts neemt je in 40 (!) lessen mee op JavaScript-safari. Veel voorbeelden, hands-on, snel resultaat en een goed leertempo. Elk filmpje duurt 5-6 minuten, zodat je er snel een kunt meepikken. Minpunten: niet meer helemaal actueel (XHTML) en er wordt nog veel inline code/eventhandlers gebruikt (zoals onMouseover en onClick), iets wat tegenwoordig niet meer als best practice wordt beschouwd. Maar als introductie in de taal (syntaxis, variabelen, statements en structuur) is het een zeer gedegen inleiding.

Het YouTube-kanaal van de complete serie staat op http://www.youtube.com/playlist?list=PL46F0A159EC02DF82

2. New Think Tank

http://www.youtube.com/watch?v=_cLvpJY2deo

In de serie video tutorials van de New Think Tank wordt globaal hetzelfde besproken als hiervoor, maar dan in afleveringen van ongeveer een half uur per film. Het tempo ligt hoger. Ook nu zijn sommige concepten verouderd (document.write() wordt momenteel liever niet meer gebruikt), maar als algemene introductie is het uitstekend.

De complete serie van acht tutorials is beschikbaar via http://www.newthinktank.com/web-design/learn-javascript/. Het aandachtsgebied is ook hier breed, uiteenlopend van functies tot cookies en event handling.

3. Think Vitamin

http://www.youtube.com/watch?v=CHh5fPs1Hvg

Werken met JavaScript in een browser betekent altijd ook werken met het DOM (Document Object Model). Deze video geeft een inleiding op de manier waarop je met JavaScript onderdelen van het DOM kunt selecteren en bewerken. Deze manier van werken is erg belangrijk als je ook met jQuery aan het werk wilt.

De serie van Think Vitamin is ook goed en gaat iets verder dan de voorgaande twee, maar is niet geheel gratis te volgen. Voor andere video’s uit deze serie moet betaald worden.

4. Google Tech Talk (1)

http://www.youtube.com/watch?v=ljNi8nS5TtQ

Deze technische video van ruim een uur gaat (diep!) in op de taal JavaScript zelf. Niet op de verschilende browserimplementaties van JavaScript (‘Hoe werkt JavaScript in Chrome en waarin verschilt dit van IE’), maar puur op de constructie van de taal zelf.

Vragen als ‘wat is een object in JavaScript en hoe werken constructors en hoe verhoudt zich dit met andere OO-talen’ wordt behandeld. Het is een razend interessante video, maar ik zou je adviseren deze pas wat later te bekijken, als je al wat meer hands-on ervaring hebt met JavaScript en zelf al wat programmaatjes hebt geschreven. Daarna echter: verplichte kost! De video is (Engels) ondertiteld, hetgeen het makkelijker maakt de voorbeelden te volgen.

5. Google Tech Talk (2) – Douglas Crockford

http://www.youtube.com/watch?v=hQVTIJBZook

Ook uit de serie Google Tech Talk, een geweldige presentatie over JavaScript van Douglas Crockford. Crockford is een zeer belangrijk en invloedrijk persoon in de JavaScriptwereld en het is een genoegen hem zelf aan het woord te horen. ‘JavaScript is the worlds most misunderstood programming language’ en ‘JavaScript is the only language that people think they don’t need to learn before they start using it.’ Deze presentatie is gebaseerd op zijn boek JavaScript: The good Parts en duurt eveneens ongeveer een uur. Hij is ondertiteld.

Het is een presentatie uit 2009, dus nog vóór de ‘jQuery-explosie’ van de laatste jaren. Voor deze presentatie maakt dat echter niet uit, omdat het voornamelijk over concepten en principes gaat en minder over concrete browservoorbeelden. Erg leerzaam.

Conclusie

Soms is het lastig om als designer de overstap te maken naar mobiel webdesign, omdat hier vrijwel altijd een deel programmeren (in JavaScript) bij komt kijken. De video’s die in dit artikel werden genoemd, helpen je op weg bij het kennismaken met JavaScript. Op basis van de inhoud van de video’s kun je zelf aan het oefenen gaan. Als je ze hebt gevolgd en begrijpt (met name de eerste twee series) heb je zeker voldoende bagage om met succes de cursussen voor het maken van mobiele apps te volgen.

Peter Kassenaar.
-- 29-30 augustus 2012.

Vandaag is het Handboek (X)HTML, CSS en JavaScript verschenen. In dit handboek leert u vanaf het nulpunt hoe een website wordt opgezet en welke technieken daarbij worden gebruikt. U leert hierbij zelf de codes schrijven voor webpagina. Het boek gaat hierbij niet uit van een visuele editor, zoals Adobe Dreamweaver of Microsoft Visual Studio. In plaats daarvan gaat u zelf met de code aan de slag, zodat u maximale grip hebt op het eindresultaat. U weet na afloop van dit boek precies wat nodig is om een moderne website te ontwerpen en kunt websites van anderen doorzien.

In de inleidende hoofdstukken worden de drie technieken kort voorgesteld. In de overige hoofdstukken worden de technieken altijd geïntegreerd toegepast. Het boek werkt hierbij case/oplossingsgericht. In het hoofdstuk over formulieren wordt bijvoorbeeld de HTML-code besproken om het formulier in te stellen, maar direct ook de CSS-code om het formulier op te maken en JavaScript-code om formuliervelden te valideren.

Specificaties

• Boek, paperback, 480 pagina's.
• Geschikt voor Windows en Macintosh
• Geschikt voor opleidingen en zelfstudie.
• ISBN-13: 978-90-5940-414-4 (9789059404144)
• Prijs: EUR 29,90
• Voorbeeldhoofdstuk beschikbaar op Yindo

Van de flapekst:

"(X)HTML, CSS en JavaScript vormen de drijvende kracht achter de hedendaagse website. Niet alleen kennis van deze onderdelen, maar ook van de onderlinge interactie is van cruciaal belang om een gelikte, gebruiksvriendelijke en moderne website te ontwikkelen. In het Handboek (X)HTML, CSS & JavaScript laat internetexpert Peter Kassenaar u zien hoe u gebruikmaakt van genoemde technieken, maar vooral ook hoe u ze optimaal laat samenwerken. Het resultaat is een website die zich aan de huidige webstandaarden conformeert en in alle gangbare browsers optimaal presteert."

Beknopte inhoudsopgave

Tot de behandelde onderwerpen behoren:

• Beginnen met HTML
• Kennismaken met CSS
• JavaScript in een notendop
• Koppelingen maken
• Werken met HTML-lijsten
• Verschillende mediatypen op de site gebruiken
• Werken met HTML-tabellen
• Pagina's opmaken met CSS-lagen
• Werken met formulieren
• Technieken met JavaScript
• De site publiceren op het web

Oefenbestanden

In het boek staan tal van oefeningen om zelf met HTML, CSS en JavaScript aan de slag te gaan en direct uw eigen website op te zetten voor school, vereniging, onderneming of hobby. Het is typisch een boek om naast het toetsenbord te leggen en zelf mee oefenen.

HtmlCssJavaScriptOefenbestanden.zip (1,0 MB)

De oefenbestanden zijn te downloaden als één groot zip-bestand. Hierin staan de oefenbestanden gerangschikt in afzonderlijke zip-bestandjes per hoofdstuk.

Hebt u het boek gelezen en hebt u er opmerkingen over ter verbetering van een eventuele volgende druk? Of wilt u andere lezers laten delen in uw ervaringen? Laat dan een bericht achter onder dit artikel.

Bestellen

• Bestellen bij computerboek.nl
• Bestellen bij bol.com

Peter Kassenaar
-- 29 juni 2009

(PS: in aanvulling op het bloggen ben ik sinds kort ook actief op Twitter, voor korte berichten en handige links. Je kunt me volgen via http://twitter.com/PeterKassenaar (@PeterKassenaar is mijn Twitternaam). 

Binnenkort verschijnt mijn nieuwe boek 'Handboek (X)HTML, CSS en JavaScript'. Dit boek is geschikt voor iedereen die zelf webpagina's wil maken, maar hierbij niet afhankelijk wil zijn van een visuele editor zoals Adobe Dreamweaver of Microsoft Expression Web. In het boek worden de drie standaarden waarop elke webpagina is gebaseerd van de grond af, op geïntegreerde wijze besproken.

Speciaal voor deze uitgave heb ik voor computerboek.nl een aantal columns geschreven die losjes over HTML, CSS en JavaScript gaan. De eerste column (W3C, opchieten) lees je hier. Deze tekst is ook verschenen op de site van computerboek.nl.

De verwachte verschijningsdatum van het boek is 26-06-2009 en de verwachte prijs is EUR 29,90 (480 pagina's). Zodra het boek beschikbaar is zal ik dat op deze site aankondigen en kun je de oefenbestanden downloaden.

"Lange tijd werd JavaScript beschouwd als het lelijke eendje in de webdesign-wereld. Goed, het was een programmeertaal, maar dan toch eerder speeltje binnen de browser dan een gereedschap voor serieuze toepassingen. Typische JavaScript-taken waren bijvoorbeeld het tonen van al dan niet overbodige waarschuwingsvenstertjes ('Welkom op mijn website, gast!'), het valideren van formulier-velden en het tonen van een scrollende boodschap of klokje in de statusbalk van de browser. Tot zover JavaScript.

Tenminste, tot voor kort.

JavaScript werd medio 1995 onder de naam Mocha en later LiveScript ontwikkeld door Brendan Eich, destijds een medewerker van browserfabrikant Netscape. In Netscape Navigator 2.0 werd de eerste versie van JavaScript aan de wereld getoond. De naam van de programmeertaal werd met het voorvoegsel 'Java' getooid omdat dit uit marketingoverwegingen beter aansloot bij het juist door Sun gelanceerde programmeerplatform Java. Hoewel JavaScript voor de hiervoor genoemde taken goed te gebruiken was, had de scripttaal onder programmeurs geen goede naam. Er werd gebruik gemaakt van een complex en inconsistent programmeermodel (het Document Object Model, DOM), dat van browser tot browser verschilde, er waren geen goede tools voor het opsporen van fouten (debugging) en de manier waarop met objecten en variabelen werd omgegaan was anders dan in andere programmeertalen. Goed, als het echt niet anders kon dan wilde de webontwikkelaar wel een paar regels JavaScript schrijven, maar als het even kan werd het gebruik ervan vermeden.

Totdat vier letters voor een omslag zorgden.

Deze vier letters zijn natuurlijk 'AJAX'. Dit staat voor Asynchroon JavaScript and XML. Opeens bleek een functie die al langere tijd binnen JavaScript bestond om asynchroon verzoeken te doen aan de webserver (voor de kenners: het object XMLHttpRequest) enorm handig om delen van een pagina opnieuw te laden. Hierbij is het niet meer nodig de hele pagina te verversen. Dit zorgt voor een veel betere gebruikerservaring bij de bezoeker - want die hoeft immers niet meer vooruit en achteruit te bladeren door een website. Ook bleken op deze manier in combinatie met het eerder verfoeide DOM interactief complete onderdelen aan een pagina te kunnen worden toegevoegd, te worden geanimeerd, of uit de pagina worden verwijderd.

Ineens bleek JavaScript in moderne webtoepassingen steeds belangrijker, om niet te zeggen onmisbaar. Op welke manier zouden anders websites als Gmail, Flickr, FaceBook, Google maps en talloze anderen goed moeten werken? Dat zou onmogelijk zijn. Bijkomend voordeel - en in grote mate bepalend voor het huidige succes - is dat JavaScript door alle moderne browsers op dezelfde wijze wordt verwerkt. Hierdoor was het voor grote bedrijven als Google en Yahoo mogelijk standaardbibliotheken met animaties, invulvensters, validaties en meer te ontwikkelen die in alle browsers gelijk functioneren. Webontwikkelaars omarmden deze en andere, door kleine partijen als jQuery en MooTools ontwikkelde bibliotheken met grote vreugde.

Het balletje was gaan rollen. Tegenwoordig kan elke webdesigner met een paar klikken een complete JavaScript-functiebibliotheek downloaden en met enkele regels code aan zijn pagina toevoegen en aanroepen. Dit verbetert de standaardisatie van de site en verminderd de afhankelijkheid van externe plug-ins als QuickTime, Flash of Silverlight.

Grappig hierbij om te zien is dat het - ondanks de naam Asynchroon JavaScript en XML - helemaal niet nodig is te werken met XML, dat een aanroep niet asynchroon hoeft te zijn, en dat het gebruik van JavaScript tegenwoordig bijna tot een minimum beperkt is.

Brendan Eich kan trots zijn. Ruim 15 jaar na de geboorte van JavaScript is het voormalige lelijke eendje uitgegroeid tot een sierlijke zwaan die onmisbaar is in modern webdesign."

Peter Kassenaar
-- 24 juni 2009

Binnenkort verschijnt mijn nieuwe boek 'Handboek (X)HTML, CSS en JavaScript'. Dit boek is geschikt voor iedereen die zelf webpagina's wil maken, maar hierbij niet afhankelijk wil zijn van een visuele editor zoals Adobe Dreamweaver of Microsoft Expression Web. In het boek worden de drie standaarden waarop elke webpagina is gebaseerd van de grond af, op geïntegreerde wijze besproken.

Speciaal voor deze uitgave heb ik voor computerboek.nl een aantal columns geschreven die losjes over HTML, CSS en JavaScript gaan. Ze zijn ook verschenen op de site van computerboek.nl

De verwachte verschijningsdatum van het boek is 26-06-2009 en de verwachte prijs is EUR 29,90 (480 pagina's). Zodra het boek beschikbaar is zal ik dat op deze site aankondigen en kun je de oefenbestanden downloaden. Maar eerst even opwarmen met de columns…

"Wie al wat langer meeloopt in de webdesignwereld kan zich de eerste 'browser war' uit de jaren 1996-2000 nog wel herinneren. De browsers Netscape Navigator en Microsoft Internet Explorer vochten een bittere strijd uit om de gunst van de eindgebruiker. Ze deden dit onder meer door in elke nieuwe versie van hun browser nieuwe mogelijkheden en nieuwe HTML-tags te introduceren en te proberen deze tot standaard te verheffen. Kent iemand nog tags als <marquee>, <blink>, <layer>, <spacer> en <multicol>?. Hetzelfde gebeurde op het gebied van CSS-ondersteuning en JavaScript-versies. Tot op de dag van vandaag gebruikt Microsoft een (iets) andere manier van JavaScript-verwerking die ze hardnekkig JScript blijven noemen.

Omdat webdesigners deze tags en technieken naar eigen goeddunken gebruikten, leidde dit er toe dat er talloze sites waren die er goed uitzagen in Internet Explorer, maar in Netscape Navigator onleesbaar waren, of andersom. Iedereen kent nog wel knoppen en teksten als 'Deze site is geoptimaliseerd voor [vul een browsernaam in]'.

De aanwezigheid van zoveel 'standaarden' is voor iedereen vervelend. Voor thuisgebruikers, omdat de site die ze bezoeken mogelijk niet goed wordt weergeven in de browser die zij gebruiken. Maar ook voor ontwerpers, omdat zij bij het ontwerp van hun site rekening moeten houden met allerlei verschillende browserversies en zogenaamde standaarden.

Het World Wide Web Consortium (W3C), onder leiding van webuitvinder Tim Berners-Lee zag deze ontwikkelingen op het browserfront met lede ogen aan. W3C tracht de ontwikkelingen op webgebied in goede banen te leiden door richtlijnen en standaarden te publiceren waar - als het goed is - elke browserfabrikant zich aan houdt. Om de browser war in goede banen te leiden werden de standaarden HTML 3.2 en HTML 4.01 (1997-1999) en CSS level 1 en level 2 (1996-1998) opgesteld.

En toen gebeurde er een hele tijd niets.

De browser war werd overtuigend gewonnen door Internet Explorer. Niet in de laatste plaats omdat Microsoft het onmiskenbare voordeel had dat ze de browser met elke computer met Windows konden meeleveren maar ook omdat - eerlijk is eerlijk - technisch gezien Internet Explorer in die jaren een veel beter product was dan het topzware en onstabiele Netscape Navigator. Voor gebruikers en webdesigners is het leven nu een stuk aangenamer, omdat de standaarden bekend zijn en alle browsers zich hier binnen redelijke grenzen goed aan houden.

Maar het web veranderd voortdurend. De strijd tussen browsers is nieuw leven ingeblazen door de lancering van Mozilla Firefox. Deze browser knabbelt voortdurend procentjes af van het marktaandeel van Internet Explorer. Van een comfortabele 90% zakt het aandeel Microsoft-browsers nu naar waarden tussen de 60% en 70%. In het kielzog van Firefox zagen ook andere grote partijen weer brood in het lanceren van een eigen browser. Apple ontwikkelde Safari, Google kwam een half jaartje geleden met Google Chrome op de proppen.

En wat doet W3C? Het is al jaren angstig stil uit deze hoek. Jazeker, er zijn tal van aanbevelingsrapportages, werkgroepen en activiteitencommissies en die zich buigen over vraagstukken over hoe de nieuwe ontwikkelingen als AJAX, Flash, Silverlight en meer nu gestandaardiseerd kunnen worden. Al bijna tien jaar wordt gewerkt aan de opvolger van HTML 4.01. Toch wordt HTML 5 - volgens de meest gunstige schatting - pas in de jaren 2010-2012 verwacht, terwijl een uitloop naar 2015 of nog later niet ondenkbaar is.

Browserfabrikanten wachten hier natuurlijk niet op en proberen elkaar nu al telkens de loef af te steken met nog snellere scores op JavaScript-taken, betere ondersteuning van de ACID-compatibiliteitstest en het steeds sneller laden van pagina's. Het verst hierin gaat Apple, dat begin juni bij het uitbrengen van Safari 4 voor Windows en Macintosh op hun conferentie voor programmeurs in San Fransisco (WWDC) aankondigde dat Safari 'de beste ondersteuning biedt voor nieuwe elementen uit de HTML 5-standaard'. Een standaard die op zijn vroegst pas over een aantal jaar bekend wordt!

W3C zou er goed aan doen haast te maken met het standaardiseringproces en snel duidelijkheid te scheppen over de nieuwe elementen in HTML 5 en de wijze waarop deze door webdesigners en browserfabrikanten verwerkt moeten worden. Anders staan we aan de vooravond van een nieuwe golf websites die is 'geoptimaliseerd voor [vul browsernaam in]'. Hier is niemand mee gediend."

Peter Kassenaar
-- 16 juni 2009

Een van de toepassingen die al bijna zou oud is als het web zelf, is het klikken met de rechtermuisknop op een pagina om een contextmenu te openen. In het contextmenu kan vervolgens worden gekozen voor het afdrukken van de pagina, het opslaan ervan en meer. Als je met de rechtermuisknop op een afbeelding klikt, verschijnt in het contextmenu ook de optie Afbeelding opslaan als…, of Save image as… in Engelstalige browsers. Zo zijn snel afbeeldingen vanaf het web op te slaan op je eigen computer. Vrijwel elke internetter kent deze techniek.

Rechtermuisknop uitschakelen

En al sinds ik mijn eerste trainingen gaf op dit gebied (flashback: 1997, de cursus 'internetspecialist/webmaster' voor Computerij Opleidingen destijds) krijg ik de vraag van cursisten 'Hoe kan ik de rechtermuisknop uitschakelen?'. Ook lezers stellen deze vraag in allerlei varianten: 'hoe kan ik de pagina beveiligen', 'hoe kan ik voorkomen dat bezoekers mijn foto's downloaden' en meer. Ik had gedacht dat deze vraag in de loop der jaren wel zou overwaaien, maar hij komt toch telkens weer terug. Ook afgelopen maand had ik weer een paar mailtjes waarin deze vraag werd gesteld.

En mijn korte antwoord is altijd : dat kan niet.

Als je er voor kiest om een afbeelding openbaar te maken op het wereldwijde internet, moet je er rekening mee houden dat iedereen met die afbeelding aan de haal kan gaan, of je dat nu leuk vind of niet. Als je dat niet wilt, moet je je foto niet op internet zetten. Zo simpel is het in feite.

Welke 'beveiligingstechniek' je ook bedenkt of gebruikt, op het moment dat een bezoeker een afbeelding op zijn beeldscherm heeft staan kan hij hem opslaan en verder gebruiken. Al is het maar door met PrintScreen een schermafdruk te maken en deze in Photoshop bij te knippen en op te poetsen.

Je kunt hooguit proberen een barrière op te werpen, door expliciet te laten weten dat je liever niet ziet dat bezoekers de afbeelding opslaan.

Het lange antwoord is dan ook: gebruik een script dat in zoveel mogelijk browsers actief is en waarbij een JavaScript-venstertje wordt geopend waarin een boodschap wordt getoond. Het script tref je hieronder aan om te downloaden, de toepassing en werking ervan kun je in de video bekijken (06:48 min.).

Peter Kassenaar
-- 27 april 2008

rechtermuisknop.zip (87,90 kb)