Data optimaliseren voor tablet en mobiel
-
Upload
rene-kreijveld -
Category
Self Improvement
-
view
618 -
download
0
description
Transcript of Data optimaliseren voor tablet en mobiel
R.Kreijveld
Data op1maliseren voortablet en mobiel
Sunday, April 21, 13
R.Kreijveld
René Kreijveld• Joomla webdeveloper sinds 2004.
• Specialisa1es: [responsive] templates, complexe RSForm!Pro formulieren, Joomla hos1ng, Integra1e in bedrijfsomgevingen.
• TwiLer: @renekreijveldSkype: renekreijveld
Sunday, April 21, 13
R.Kreijveld
Responsive templates•Wie hier aanwezig maakt ze al?
• Op welk CSS framework gebaseerd?
• ZelVouw of inkoop [commercieel] template?
Sunday, April 21, 13
R.Kreijveld
CSS Frameworks (1)• Twi$er Bootstrap“Sleek, intui+ve, and powerful front-‐end framework for faster and easier web development.”hLp://twiLer.github.io/bootstrap/
• Founda2on Zurb“The most advanced responsive front-‐end framework in the world.”hLp://founda1on.zurb.com/
Sunday, April 21, 13
R.Kreijveld
CSS Frameworks (2)• HTML Boilerplate
• Responsive Grid System
• Titan Framework
• Groundwork CSS
• Base
• hLps://www.google.nl/search?q=css+responsive+frameworks
Sunday, April 21, 13
R.Kreijveld
Media Queries (1)• Veel meer toegepast in CSS3
• Toepassen CSS-‐regels bij bepaalde schermresolu1es:
Sunday, April 21, 13
R.Kreijveld
Media Queries (2)• Vaak speciale CSS-‐classes aanwezig om content te verbergen bij een bepaalde resolu1e.
• TwiLer Bootstrap werkt met Responsive U1lity Classes: hLp://twiLer.github.io/bootstrap/scaffolding.html#responsive
• Founda1on Zurb werkt met Visibility Classes: hLp://founda1on.zurb.com/docs/components/visibility.html
Sunday, April 21, 13
R.Kreijveld
Die speciale CSS-‐classes• Voordeel: gemakkelijk content verbergen op bepaalde apparaten (lees: resolu1es)Toepassing: template code of bijvoorbeeld Module class achtervoegsel.
• Nadeel: content wordt alleen visueel verborgen, wordt nog steeds gedownload naar apparaat,dus onnodig bandbreedte verbruik!
Sunday, April 21, 13
R.Kreijveld
Nadeel Media Queries•Media Queries kijken vooral naar de resolu1e van het beelscherm.
•Moderne iPhone en iPad hebben hele hoge resolu1es.
• iPhone: hLp://www.apple.com/iphone/specs.html1136 x 640 pixels
• iPad: hLp://www.apple.com/ipad/specs/2048 x 1536 pixels
Sunday, April 21, 13
R.Kreijveld
ConclusieMedia Queries:Als je bandbreedte wil besparen,
door bepaalde content te verbergen op tablet/mobieldan is de schermresolu1e niet leidend,maar naar de browser en het apparaat.
Sunday, April 21, 13
R.Kreijveld
de User Agent• De User Agent string in HTTP is een lijst van produkt tokens met op1onele commentarenhLp://en.wikipedia.org/wiki/User_agent
• De User Agent string is een unieke defini1e van browser met besturingssysteem.
• De user agent kan client side (bijvoorbeeld Javascript) en server side (bijvoorbeeld PHP) worden vastgesteld.
Sunday, April 21, 13
R.Kreijveld
Demo• Demo met User Agent detec1e in Joomla
• Gebruikte tools (allen FireFox plugins)
•Web Developer Toolbar
• User Agent Switcher
Sunday, April 21, 13
R.Kreijveld
AVGM.nl• Responsive Website atle1ekvereniging, gebaseerd op TwiLer Bootstrap
• Aparte layouts voor desktop, tablet en mobiel
• hLp://www.avgm.nl/
Sunday, April 21, 13
R.Kreijveld
Mobile Detect• PHP library waarmee User Agent kan worden uitgelezen.hLps://github.com/serbanghita/Mobile-‐Detect
• Detecteert onder andere:-‐ Is het apparaat een desktop, mobiel, tablet?-‐ Draait het apparaat op iOS of Android?
• Regelma1g updates omdat nieuwe User Agents bedacht worden.
Sunday, April 21, 13
R.Kreijveld
Mobile Detect gebruik
Sunday, April 21, 13
R.Kreijveld
En andere extensies?• Bij het laden van Mobile_Detect.php in template code is de test beschikbaar in de template.(tenzij je een sessie variabele zet)
• Het is handig als je overal (templates, componenten, modules, plugins) weet wat voor apparaat je website bezoekt.
Sunday, April 21, 13
R.Kreijveld
User Agent Detector• System Plugin: hLps://github.com/renekreijveld/UserAgentDetector
• Beschikbaar voor Joomla 2.5 en 3.0
Sunday, April 21, 13
R.Kreijveld
Zoekmachine-‐op1malisa1e• Zoekmachines indexeren je website door een spiderbot langs te sturen.
• Googlebot, Bing, Yahoo Slurp, Msnbot, ...
• Spiderbots zijn dus ook website bezoekers.
• Elke spiderbot heet een unieke User Agent!
• Spiderbots zijn herkenbaar voor Mobile Detect.
Sunday, April 21, 13
R.Kreijveld
Template setup
Sunday, April 21, 13
R.Kreijveld
Demo bot detec1e• hLp://www.avgm.nl
• hLp://www.publicanda.nl
Sunday, April 21, 13
R.Kreijveld
Vragen ?
Sunday, April 21, 13
R.Kreijveld
Handig• Firefox Wevdeveloper Toolbar: hLps://addons.mozilla.org/nl/firefox/addon/web-‐developer/
• Firefox User Agent Switcher: hLps://addons.mozilla.org/nl/firefox/addon/user-‐agent-‐switcher/
• Lijst van user agents: hLp://techpaLerns.com/forums/about304.html
Sunday, April 21, 13