Jug010 120320-templates

1,316
-1

Published on

Joomla! Users Group Rotterdam (jug010), March 20, 2012. Theme: Templates. In Dutch.

Published in: Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,316
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Jug010 120320-templates

  1. 1. jug010thema: templates 20 maart 2012
  2. 2. 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
  3. 3. 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/
  4. 4. 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
  5. 5. 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.
  6. 6. Hoe werkt een template eigenlijk?
  7. 7. Mini-minimaal template2 bestanden (zoals ook bij componenten, modules en plugins):• index.php• templateDetails.xmlDe “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” />
  8. 8. Extra bestanden/mappen voor een template• css/template.css• images/• template_thumbnail.png• favicon.icoen nog meer.../templates/beez_20: met deze css-map:
  9. 9. 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!
  10. 10. Gedeelte van haar index.php (3-koloms):
  11. 11. meer “gaten”voor inhoud
  12. 12. 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)
  13. 13. Bestaande templates aanpassen• FirebugTemplate-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/
  14. 14. Boekenvoor 1.5: voor 2.5:
  15. 15. VideoDiv. 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
  16. 16. template overrides• typisch Joomla (sinds 1.5)• Hoe werkt dat? Wat kun je ermee?• zie voor artikel en links: http://www.joomlacommunity.eu/webdesigner18
  17. 17. 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!
  18. 18. 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
  19. 19. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×