Webdesign & webdevelopment met Google Chrome
Webdevelopment en design zijn onderwerpen die meerdere disciplines bevatten. Hierdoor is het vaak voor beginners moeilijk om grip te krijgen op het gebruik van HTML en CSS. Op het internet zijn veel HTML en CSS tutorials beschikbaar, maar bij deze tutorials wordt weinig tot niks gezegd over de tools die het schrijven van een webpagina veel makkelijker maken.
De tools die beschikbaar zijn, hangen vaak erg af van de browser. Op het moment heeft bijna elke browser wel een soort van development suite ingebouwd of verkrijgbaar. Voor Internet Explorer 8 heet deze “Developer Tools”, bereikbaar met de sneltoets F12. Voor Firefox is een plugin beschikbaar genaamd “Firebug” en Chrome heeft zijn onder Developer, bereikbaar met sneltoets Cntrl+Shift+I.
Zoals bij Firefox, zijn de meeste goede developer tools niet standaard meegeleverd met de browser. Gelukkig ondersteund Chrome ook extensies. De volgende development tools zijn absolute aanraders voor het ontwikkelen van een website.
Webinspector - Firebug Lite Beta
https://chrome.google.com/extensions/detail/bmagokdooijbeehmkpknfglimnifench
Firebug Lite Beta is een webinspector, net zoals de Development Tools van Chrome. Chrome zijn development tools zijn vaak log en ingewikkeld, terwijl Firebug zich bij Firefox al heeft bewezen als een intuitieve en effieciente web inspector.
De webinspector Firebug transformeert je muis eigenlijk in een aanwijs stok voor HTML en CSS. Het laat de broncode van het geselecteerde element op de webpagina zien onderaan je beeldscherm en ook de CSS properties die zijn meegegeven aan de HTML tag. Hiermee kan je snel en efficiënt elementen opzoeken en veranderen in je CSS.
Om snel dingen aan de CSS of HTML aan te passen, kan je met Firebug ook de CSS en HTML live editen. Hierdoor hoef je geen bestanden te veranderen en wordt de website live geupdate. Let hierbij wel op dat je het niet gaat gebruiken voor het schrijven van websites, de updates worden niet opgeslagen.
Website toolkit – Pendule
https://chrome.google.com/extensions/detail/gbkffbkamcejhkcaocmkdeiiccpmjfdi
Pendule is voor Chrome aan het worden, wat de Webdeveloper Toolbar voor Firefox is. Pendule mist een aantal functies, zoals Cookie management en andere dingen, die Webdeveloper heeft, maar heeft daarnaast functies die wij nog niet in andere pakketten zijn tegengekomen.
Pendule laat je CSS onafhankelijk updaten, forms aanpassen, geeft informatie over afbeeldingen en geeft meerdere opties je website te valideren. Naast dit alles heeft het een aantal andere tools. Met name de color picker, display ruler en topographic view hebben vele toepassingen.
De color picker laat je een color picken en zorgt dat de hex waarde (de kleurwaarde in hex, bijvoorbeeld #000000) gelijk geplakt kan worden.
De display ruler laat je een vak tekenen en geeft daarbij automatisch de dimensies weer op de website. Hierdoor kan je makkelijk uitrekenen of de uitlijning of de grote van een box wel klopt.
De topographic view geeft een beter idee over de margin’s en padding’s die worden gebruikt, maar ook hoe de website eigenlijk ingedeeld is. Hierdoor is het makkelijker om te kijken of er wel een structuur in je site zit. Die valt niet goed te zien als plaatjes en kleuren worden gebruikt.
Internet Explorer in Chrome - IE Tab
https://chrome.google.com/extensions/detail/hehijbfgiekmjfkfjpbkbammjbdenadd
De IE Tab extensie voor Chrome doet eigenlijk precies wat het zegt: het laat je toe om een extra tab in Chrome te laden waarin Internet Explorer zit. Hierdoor kan jouw website getest worden in Internet Explorer testen zonder dat er extra ruimte wordt ingenomen door een extra browser in je taakbalk.
Afbeelding website - Webpage Screenshot
https://chrome.google.com/extensions/detail/ckibcdccnfeookdmbahgiakhnjcddpki
De webpage screenshot extensie van Chrome laat je vanuit de browser screenshots maken en opslaan zonder dat daar een ander programma, zoals Paint of Photoshop, voor nodig is. Hierdoor kan je snel een voorstel voor een design met een klant of opdrachtgever delen.