joomla! templating

Download Joomla! templating

Post on 28-Jan-2015

108 views

Category:

Documents

0 download

Embed Size (px)

DESCRIPTION

Presentation on Joomla! templating. Used during Joomla! User Group meeting in Breda, NL (JUG076).

TRANSCRIPT

  • 1. Joomla! templa tesPresentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo

2. My na m e is Jisse Re itsmaJoomla! enthousiastPHP programmerLead developer of YireoJoomla! templates-book (NL) and I like recursive jokesPresentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 3. My presenta tionPart I - Joomla! templatingPart II - Basic codePart III - Advanced designSlides: http://slideshare.net/yireo Presentation Joomla! templates - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo 4. Pa rt IJoomla! templa tingPresentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 5. Joomla! extensionsComponentsModulesPluginsTemplatesLibrariesLanguage packs Presentation Joomla! templates - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo 6. Joomla! bootstrapComponent is loadedTemplate is loadedModules are loadedComponent-output is added to templateModule-output is added to template Presentation Joomla! templates - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo 7. Installa tion (1 /2)Install a new templateInstalling ZIP-file using Extension ManagerPresentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 8. Installa tion (2 /2)Upload new template through FTP Use Discover-method in Extension ManagerPresentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 9. Templa te vs StylesTemplate: Actual files on filesystemTemplate Style: Configured set of options (parameters) Presentation Joomla! templates - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo 10. Exa mple: Beez optionsPresentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 11. Mod ule positionsPresentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 12. Mod ule positionsPresentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 13. Menu assignm entPresentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 14. Ge t sta rtedUse existing templateYOOtheme, RocketTheme, JoomlArt, JoomlaBambooBuild your own templateFrom scratch (hard-core)From existing framework Twitter Bootstrap Warp (YOOtheme), Zen (JoomlArt), Gantry (RocketTheme)Presentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 15. Pa rt IIBasic c od ePresentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 16. Templa te-filestemplateDetails.xmlfavicon.icoindex.phpindex.htmlcss/template.css error.phpless/template.csscomponent.phpimages/template_thumbnail.pngjavascript/languages/Presentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 17. templa teDe tails.xml (1 /3)Presentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 18. templa teDe tails.xml (2 /3)Presentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 19. templa teDe tails.xml (3 /3)Presentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 20. templa teDe tails.xml Pa rts++(+) Presentation Joomla! templates - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo 21. ind ex.php (1 /3)Presentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 22. ind ex.php (2 /3)Presentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 23. ind ex.php (3 /3)Presentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 24. ind ex.php Pa rtsHTML-codePHP-code-tagsPresentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 25. jdoc-tags Presentation Joomla! templates - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo 26. Pre view mod ule positionsPresentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 27. PHP-c od eBase variables$this>template,$this>language,$this>baseurlParameters$app=JFactory::getApplication();$templateparams=$app>getTemplate(true)>params;echo$templateparams>get(color)if-elseYireo Template HelperPresentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 28. Pa rt IIIA dva nced c oncepts Presentation Joomla! templates - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo 29. Templa tingTemplate overrides / output overridesHTML5 compatibilityMicrodataCode strippingCustom error.phpAdditional module-chromes Presentation Joomla! templates - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo 30. Outd a ted stuf fHTML4 coding (, , )XHTML 1.0 / XHTML 1.1Table-based designFrom PhotoShop to webdesignBox-model Presentation Joomla! templates - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo 31. Mod er n stuf fHTML5 + CSS3Responsive design, CSS frameworksFrom content to webdesign to PhotoShopGrid-modelPresentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 32. Box vs GridBox-model Ask your designer to create a PSD Convert design into boxes as good as you canGrid-model Start with a grid Determine what can go where Ask your designer to create a PSD Presentation Joomla! templates - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo 33. Wha t first?Design first?Mobile first?Wireframing?Content first?GatherContentPresentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 34. Twitter BootstrapUsed in Joomla! 3.0 backendNew standard for templates and extensionsGeneric way of defining HTML-codeStandardized CSS-code and jQuery-effectsPresentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 35. LESS & SASSUsed in Twitter BootstrapBetter syntax than CSSHierarchy, variables, patterns, quirksConvert into CSSUsing JavaScript helperUsing PHP LESS or SASS compilerPresentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 36. CSS fra m ewor ksTwitter Bootstrap960s, 1140sFoundation ZurpZASS (uses SASS)Presentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 37. In shortPart 1: Joomla! templating Discovery; Copy templates; Templates vs StylesPart 2: Basic code JDOC-tags; XML-definition; PHP-parametersPart 3: Advanced design concepts HTML5, Responsive design, Box vs Grid, CSS-frameworks (Bootstrap, 960s), jQuery effectsPresentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 38. so fa r, a ny questions?Presentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 39. som e Yireo extensions SSLRedirect (Joomla! plugin)Enforce HTTPS on specific pagesDynamic404: (Joomla! component + plugin)Replace ugly 404-page with decent error-page;Search database automatically for possible 404-matchesPresentation Joomla! templates - http://slideshare.net/yireoJisse Reitsma (jisse@yireo.com) - Twitter @yireo 40. #JUG076-templa te 15 Euro discounton any Yireo extensionuntil 31 December 2012 Presentation Joomla! templates - http://slideshare.net/yireo Jisse Reitsma (jisse@yireo.com) - Twitter @yireo