Download - Jug010 120320-templates
![Page 1: Jug010 120320-templates](https://reader033.vdocuments.pub/reader033/viewer/2022060116/5582feced8b42a56468b45a1/html5/thumbnails/1.jpg)
20 maart 2012
jug010
thema: templates
![Page 2: Jug010 120320-templates](https://reader033.vdocuments.pub/reader033/viewer/2022060116/5582feced8b42a56468b45a1/html5/thumbnails/2.jpg)
Joomla! nieuws• Security-update Joomla! 2.5.3
• Paul Orwig president OSM (Open Source Matters)
• Joomla! geaccepteerd voor GSOC (Google Summer Of Code)
• voortgang jug010-website
![Page 3: Jug010 120320-templates](https://reader033.vdocuments.pub/reader033/viewer/2022060116/5582feced8b42a56468b45a1/html5/thumbnails/3.jpg)
Joomlagenda• Joomla! 2.5.4 is gepland voor maandag 26 maart
• Nederlandse Joomla!Dagen: za. 21 + zo.22 april, Zeist nog 1 dag korting! http://www.joomladagen.nl/2012/
• volgende jug010: maandag 23 april (the day after...) thema: veiligheid bijdragen welkom!
• J and Beyond: 18-20 mei, Bad Nauheim http://jandbeyond.org/
![Page 4: Jug010 120320-templates](https://reader033.vdocuments.pub/reader033/viewer/2022060116/5582feced8b42a56468b45a1/html5/thumbnails/4.jpg)
Joomla! Templates • Inhoudbeheersysteem (CMS): scheiden van vorm en inhoud.• Vormgeving: door middel van templates (sjablonen)
Verschillende manieren om template te maken:
• ‘from scratch’ al dan niet met behulp van een blanco template of framework veel kennis van CSS nodig
• aanpassen bestaand template Bij grote templateclubs: eigen frameworks (Gantry, Warp, T3) enige kennis van CSS nodig
• Artisteer weinig kennis van CSS nodig
![Page 5: Jug010 120320-templates](https://reader033.vdocuments.pub/reader033/viewer/2022060116/5582feced8b42a56468b45a1/html5/thumbnails/5.jpg)
Wat is een template?
• Basis-template per site• Per menu-item andere templates mogelijk (templatebeheer)• voor website en voor beheergedeelte• in map /templates• in J! 2.5: ontdekken en installeren
Een template is een HTML-bestand met “gaten”, waar de inhoud in gezet kan worden.
![Page 6: Jug010 120320-templates](https://reader033.vdocuments.pub/reader033/viewer/2022060116/5582feced8b42a56468b45a1/html5/thumbnails/6.jpg)
Hoe werkt een template eigenlijk?
![Page 7: Jug010 120320-templates](https://reader033.vdocuments.pub/reader033/viewer/2022060116/5582feced8b42a56468b45a1/html5/thumbnails/7.jpg)
Mini-minimaal template
2 bestanden (zoals ook bij componenten, modules en plugins):
• index.php• templateDetails.xml
De “gaten” met inhoud: <jdoc>-tags:
• <jdoc:include type=”component” />• <jdoc:include type=”head” />• <jdoc:include type=”modules” name=”modulepositienaam” />• <jdoc:include type=”module” name =”modulenaam” />• <jdoc:include type=”message” />
![Page 8: Jug010 120320-templates](https://reader033.vdocuments.pub/reader033/viewer/2022060116/5582feced8b42a56468b45a1/html5/thumbnails/8.jpg)
Extra bestanden/mappen voor een template
• css/template.css• images/• template_thumbnail.png• favicon.ico
en nog meer...
/templates/beez_20: met deze css-map:
![Page 9: Jug010 120320-templates](https://reader033.vdocuments.pub/reader033/viewer/2022060116/5582feced8b42a56468b45a1/html5/thumbnails/9.jpg)
Blanco 2.5 template• Anja Hage:
http://www.web-effect.nl/joomla-cursus/tutorials/joomla-template-tutorial
• 2-koloms en 3-koloms blanco template voor Joomla! 2.5• met leerzaam commentaar!
![Page 10: Jug010 120320-templates](https://reader033.vdocuments.pub/reader033/viewer/2022060116/5582feced8b42a56468b45a1/html5/thumbnails/10.jpg)
Gedeelte van haar index.php (3-koloms):
![Page 11: Jug010 120320-templates](https://reader033.vdocuments.pub/reader033/viewer/2022060116/5582feced8b42a56468b45a1/html5/thumbnails/11.jpg)
meer “gaten” voor inhoud
![Page 12: Jug010 120320-templates](https://reader033.vdocuments.pub/reader033/viewer/2022060116/5582feced8b42a56468b45a1/html5/thumbnails/12.jpg)
HTML & CSS
• XHTML en CSS2.1• HTML5 en CSS3 (zie ook: Beez5-template)• W3C, validatie• overheidsrichtlijnen• SEO, source ordered design• mobiel en ook grote schermen (responsive webdesign)
![Page 13: Jug010 120320-templates](https://reader033.vdocuments.pub/reader033/viewer/2022060116/5582feced8b42a56468b45a1/html5/thumbnails/13.jpg)
Bestaande templates aanpassen
• Firebug
Template-frameworks van clubs
• Gantry (RocketTheme)• Warp (YooTheme)• T3 (JoomlArt)• Zen (JoomlaBamboo)
Artisteer, Construct etc.
• Artisteer is meer kant en klaar (maar lastig buiten Artisteer te veranderen)
• Construct is meer een verzameling tools met een blanco template.
• responsive blanco template: Twitter Bootstrap http://bootstrap.fastnetwebdesign.co.uk/
![Page 14: Jug010 120320-templates](https://reader033.vdocuments.pub/reader033/viewer/2022060116/5582feced8b42a56468b45a1/html5/thumbnails/14.jpg)
Boekenvoor 1.5:
voor 2.5:
![Page 15: Jug010 120320-templates](https://reader033.vdocuments.pub/reader033/viewer/2022060116/5582feced8b42a56468b45a1/html5/thumbnails/15.jpg)
Video
Div. documentatie en tutorials• algemeen 1.5: http://help.joomlacommunity.eu/joomla-15/18-tem-
plates-15/2097-tutorial-joomla-templates-begrijpen.html• div. 1.5: http://help.joomlacommunity.eu/component/content/cate-
gory/18.html
![Page 16: Jug010 120320-templates](https://reader033.vdocuments.pub/reader033/viewer/2022060116/5582feced8b42a56468b45a1/html5/thumbnails/16.jpg)
![Page 17: Jug010 120320-templates](https://reader033.vdocuments.pub/reader033/viewer/2022060116/5582feced8b42a56468b45a1/html5/thumbnails/17.jpg)
template overrides
• typisch Joomla (sinds 1.5)• Hoe werkt dat? Wat kun je ermee? • zie voor artikel en links:
http://www.joomlacommunity.eu/webdesigner18
![Page 18: Jug010 120320-templates](https://reader033.vdocuments.pub/reader033/viewer/2022060116/5582feced8b42a56468b45a1/html5/thumbnails/18.jpg)
template toewijzen aan menuitems
• templatebeheer• template toewijzen aan menu-item• variaties op een template (bijvoorbeeld: verschillende kleuren bij
verschillende menu-items) moest altijd door template te kopiëren Maar nu kan dat met template stijlen!
![Page 19: Jug010 120320-templates](https://reader033.vdocuments.pub/reader033/viewer/2022060116/5582feced8b42a56468b45a1/html5/thumbnails/19.jpg)
template stijlen
• kun je nu aan menu-items toewijzen
• tutorial: http://www.joomlacommunity.eu/nieuws/joomla-algemeen/729-het-creeren-van-stijlen-in-een-joomla-template.html
![Page 20: Jug010 120320-templates](https://reader033.vdocuments.pub/reader033/viewer/2022060116/5582feced8b42a56468b45a1/html5/thumbnails/20.jpg)
![Page 21: Jug010 120320-templates](https://reader033.vdocuments.pub/reader033/viewer/2022060116/5582feced8b42a56468b45a1/html5/thumbnails/21.jpg)
Responsive webdesign
• ontwerpen voor mobiel. Waar gaat het wwweb heen?• maar hoe moet het dan met juist die hele grote schermen?• oplossing: responsive webdesign. @media• paar praktische voorbeelden (waaronder de site van de
Joomla!Dagen) - Sander geeft er een presentatie over!• Twitter Bootstrap blanco template• boekje, artikelen, sites, ontwikkelingen