Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Templates maken met helix framework Joomla User Group Utrecht 10 november 2014

3,794 views

Published on

Templates maken met het Helix II Framework van Joomshaper. Hoe werkt het, wat kun je ermee, hoe zet je de basistemplate naar je hand?

Published in: Technology
  • Be the first to comment

Templates maken met helix framework Joomla User Group Utrecht 10 november 2014

  1. 1. Templates maken met het Helix Framework voor Joomla 3 ma 10 nov 2014 | zpot De Meern ERIC TIGGELER | JOOMLA USER GROUP UTRECHT
  2. 2. Eric Tiggeler Tekstschrijver Schrijfboeken Boeken over Joomla: www.joomla.erictiggeler.nl
  3. 3. Programma • Wat zijn frameworks? Hoe helpen ze je bij het maken van templates • Voor- en nadelen Wel of niet gebruiken • Frameworks in detail: Helix De praktijktest: wat kan je er allemaal mee? • Andere frameworks Een korte vergelijking
  4. 4. Template nodig, wat dan? 1. Standaardtemplate Protostar aanpassen Logo, header, kleuren aanpassen (hoofdstuk 4, Tips en tools voor Joomla 3)
  5. 5. Template nodig, wat dan? 2. Bestaande template aanpassen Bijvoorbeeld Favourite van FavThemes.com (hoofdstuk 7, Tips en tools voor Joomla 3)
  6. 6. Template nodig, wat dan? 3. Vanaf nul een template bouwen Basis in HTML en CSS + Joomla-codes + Bootstrap = eigen template (uit: hoofdstuk 7 Tips en tools voor Joomla 3)
  7. 7. Template nodig, wat dan? 4. … een framework gebruiken Afbeelding: /www.joomlart.com/blog/t3-framework/the-pros-and-cons-of-competing-joomla-template-frameworks
  8. 8. Erg veel frameworks voor Joomla • T3 (joomlart.com) • Warp (yootheme.com) • Gantry (gantry-framework.org) • Gavern (gavick.com) • Helix II (joomshaper.com) • Wright (joomlashack.com) • Bootstruct (construct-framework.com) • JV framework (joomlavi.com) • … en meer
  9. 9. Wat zijn template frameworks?
  10. 10. … en wat kun je ermee als niet-codeklopper?
  11. 11. Wat is een framework? • Eigenlijk een gewone template … … maar dan wel heel uitgebreid • Basisvormgeving vaak kaal … … maar via template-interface in de backend toegang tot ingebouwde opties Je kunt de basistemplate van het framework direct gebruiken, maar hij is bedoeld om zelf op maat te maken.
  12. 12. Voordelen van frameworks • Niet vanaf nul beginnen Je hoeft het wiel niet opnieuw uit te vinden • Geavanceerde extra’s ingebouwd Responsive lay-out, megamenu, … • Basistemplate eenvoudig aan te passen Geen codekennis nodig, vele tientallen ingebouwde opties • Gebaseerd op bestaande codebibliotheken Vaak Bootstrap als basis • Gratis te gebruiken Geen verplichte zichtbare copyrightregels
  13. 13. Nadelen zijn er ook … • Er zijn er zoveel Welke werkt het beste, welke levert beste resultaten, welke blijft bestaan? • Gecompliceerd Template + scripts + extensies • Een systeem binnen een systeem Elk framework heeft eigen logica, eigen interface
  14. 14. Nadelen zijn er ook … • Documentatie versnipperd Weinig stap-voor-stap tutorials. Hoe wijk je af van de ingebouwde mogelijkheden? • Ermee leren werken vergt tijd Wat handiger en sneller is voor een templateontwikkelaar, is dat niet voor wie af en toe een template maakt (denk aan LESS)
  15. 15. Toch werk ik veel met …
  16. 16. Waarom gekozen voor Helix?
  17. 17. Voordelen van Helix • Erg veel ingebouwde opties Template is vergaand aan te passen zonder een regel code • Visuele ‘layout builder’ O.a. moduleposities toevoegen en verplaatsen door te slepen • Kleuren per layoutblok aanpasbaar Achtergrond, tekst, links • Responsive Inclusief responsive lay-out en menu
  18. 18. Voordelen van Helix • Powered by Bootstrap (versie 2, net als Joomla 3) • Bevat veel extra’s: megamenu en ‘shortcodes’ voor o.a. accordion • Css aan te passen: toevoegen in één bestand custom.css • Ondersteunt Google Fonts en Google Analytics • Claim: goede, moderne code, ‘lichtgewicht’
  19. 19. Wie zit erachter?
  20. 20. Joomshaper, Bangladesh
  21. 21. Joomshaper maakt templates en extensies
  22. 22. … en het Helix-II-framework http://www.joomshaper.com/joomla-templates/ helix-ii
  23. 23. (gratis) templates gebaseerd op Helix • Radon: strak, clean, corporate • Xeon: ‘one page template’, voor sites met alle content op een pagina
  24. 24. Gebouwd met Helix Voorbeelden: wat heb ik ermee gemaakt?
  25. 25. joomla.erictiggeler.nl
  26. 26. joomla.erictiggeler.nl • Responsive
  27. 27. schrijfgids.nl
  28. 28. Helix: de praktijktest
  29. 29. Wat heb je nodig om met Helix te beginnen? • Voor bestaande site: alleen template + system plugin • Voor een complete Joomla-demosite (met template en plugin): Quickstart Pack
  30. 30. Zo ziet site eruit na installatie van het Quickstart Pack
  31. 31. Hoe kun je de basistemplate aanpassen? • Zoals bij elke template: • Templates > Stijlen > [helix] - Standaard
  32. 32. Welke aanpassingen zijn allemaal mogelijk zonder aan de code te komen? Van logo tot lay-out
  33. 33. Voorbeeld 1: logo vervangen • Tab Basic > Logo • Upload eigen logo • Resultaat:
  34. 34. Voorbeeld 2: footer aanpassen • Geen overbodige logo’s en copyrights • Tab Basic > Footer settings, Brand Info: • Kies bij alles voor Hide • Resultaat:
  35. 35. Voorbeeld 3: Google Fonts • Selecteer eerst je favoriete fonts op http://www.google.com/fonts
  36. 36. Voorbeeld 3: Google Fonts • Tab Fonts > Body Font, Header Font • Vul in: Google fontnaam en selectors zoals body, h1, h2
  37. 37. Google Fonts Het resultaat:
  38. 38. Voorbeeld 4: homepage in afwijkende lay-out • Tab Advanced > Component Area: • Kies Hide from frontpage Gewone pagina Homepage: alleen modules
  39. 39. Voorbeeld 5: globale kleuraanpassingen • Tab Presets: drie kleurenschema’s
  40. 40. Voorbeeld 6: lay-out en kleuren aanpassen Het geheime wapen van Helix: Layout Builder (tab Layout)
  41. 41. Layout Builder • Van onder naar boven vind je alle templateblokken en moduleposities • Blokken (divs): Header, Feature, Users, enz. • Moduleposities: logo, menu, enz.
  42. 42. Layout Builder Blokken in de Layout Builder = de code van de template = wat je ziet aan de voorkant van de site: <div id="sp-feature" class="span12">
  43. 43. Wat kun je met de Layout Builder? Eenvoudig moduleposities verslepen 1 2 3
  44. 44. 1 Moduleposities verslepen Het resultaat:
  45. 45. 2 Secties (paginablokken) verslepen Bijvoorbeeld de menubalk (Header)
  46. 46. 3 Breedte van moduleposities aanpassen • Helix gebruikt Bootstrap-grid: 12 kolommen • Bepaalt hoe breed ‘contentblokken’ zijn • Som van de blokken naast elkaar: altijd 12 Over Bootstrap 2.3.2: getbootstrap.com/2.3.2/scaffolding.html
  47. 47. Breedte van moduleposities aanpassen • Per modulepositie kun je een Bootstrapbreedte toewijzen: span1 t/m span12 • Verander de span-breedte bijvoorbeeld om logo breder te maken en zoekvak smaller
  48. 48. Breedte van modulepositiess aanpassen • span3 – span6 – span3 • span4 – span5 – span3
  49. 49. 4 Extra kolommen (moduleposities) toevoegen • Klik op ‘Add new column’ • Kies type ‘Module’ en geef positienaam op:
  50. 50. Ook mogelijk: extra rijen voor moduleposities toevoegen Nieuwe rij In de lay-out • Meer over nieuwe moduleposities maken www.joomshaper.com/documentation/helix/creating-module-positions
  51. 51. 5 Kleuren aanpassen via Layout Builder • Klik in de Layout Builder op het tandwieltje • Pas de kleuren van het blok aan:
  52. 52. Kleuren aanpassen via Layout builder • Je kunt veranderen: • Achtergrondkleur • Tekstkleur • Linkkleur (en hoverkleur) • Bovendien de ruimte rondom: margin en padding
  53. 53. Kleuren aanpassen via Layout Builder • Een voorbeeld van het resultaat: donkergrijze achtergrond, groene links in het blok Header
  54. 54. Kleuren aanpassen via Layout Builder • Voorbeeld: groene kleur Background in het blok Feature
  55. 55. Het effect: paginakleuren wijzigen • Snel effect op de paginavormgeving door blok voor blok de kleuren aan te passen
  56. 56. 6 Responsive weergave aanpassen • Welke pagina-onderdelen zijn wel en niet zichtbaar op desktop, tablet en phone? • Per sectie en module kun je de zichtbaarheid bij responsive weergave aanpassen
  57. 57. Responsive weergave aanpassen: voorbeeld • Bijvoorbeeld het blok Feature: zichtbaar op desktop, niet op kleiner scherm
  58. 58. Responsive weergave aanpassen: voorbeeld • Bijvoorbeeld het blok Feature: zichtbaar op desktop, niet op kleiner scherm Desktop Tablet
  59. 59. Samenvattend Met de Layout Builder kun je: 1. Moduleposities verplaatsen (verslepen) 2. Secties (paginablokken) verslepen: hoger/lager 3. Relatieve breedte moduleposities aanpassen 4. Nieuwe moduleposities maken: in nieuwe kolom of rij 5. Kleuren bepalen van alle vaste paginablokken: achtergrond, tekst, links (en margin en padding van die blokken wijzigen) 6. Responsive weergave bepalen
  60. 60. Leuk voor codehaters Al die lay-outwijzigingen zijn mogelijk … … zonder een regel code te wijzigen
  61. 61. En hoe doe je dan aanpassingen op detailniveau? Niet alles kun je aanpassen met de ingebouwde opties
  62. 62. Layout Builder bepaalt alleen de kleuren van de ‘vaste layout’ • Hoe verander je kleuren van modules?
  63. 63. Modulekleuren aanpassen • Via module class suffix • Standaard:
  64. 64. Modulekleuren aanpassen • Met aangepast suffix: Voor beschikbare suffixen: zie Features > Module Variations op de Helix II demosite
  65. 65. Andere aanpassingen: via CSS • Niet alles is te wijzigen via de ingebouwde opties • Bijvoorbeeld: centrale pagina met achtergrondfoto of -kleur
  66. 66. Andere aanpassingen: via CSS • De gekleurde pagina-achtergrond kun je toewijzen via de Layout Builder
  67. 67. Andere aanpassingen: via CSS • Ontdek via de browsertools (Inspecteer element) hoe je de paginakleur wijzigt
  68. 68. Andere aanpassingen: via CSS • Ga naar Templates > [naam template] > Details and files • Maak een bestand custom.css
  69. 69. Andere aanpassingen: via CSS • Voer de benodigde code in en sla custom.css op • Het resultaat:
  70. 70. Helix: nog meer extra’s
  71. 71. Meegeleverde extensie: megamenu
  72. 72. Onderdeel van standaard- Joomla-menu’s
  73. 73. Meegeleverde extra’s: shortcodes
  74. 74. Shortcodes Je maakt shortcodes met de knop (plugin) in de artikel-tekstverwerker:
  75. 75. Shortcodes Bijvoorbeeld: accordion invoegen in artikel
  76. 76. En de andere frameworks?
  77. 77. En de andere? Er zijn veel template frameworks. Ze bieden allemaal vergelijkbare features. Een snelle blik op twee daarvan: Warp T3
  78. 78. Warp Met de Customizer kun je kleuren en marges aanpassen:
  79. 79. Warp Met de Customizer kun je kleuren en marges aanpassen:
  80. 80. Warp Responsive, met een off-canvas menu
  81. 81. Warp • Lay-out aanpassen is veel minder intuïtief • Geen visuele layout-builder
  82. 82. T3 • Eerste indruk: mooi, maar complex • Ook hier een ingebouwde customizer: ThemeMagic
  83. 83. T3 • Updaten lijkt erg ingewikkeld • Alleen al om te updaten heb je een uitgebreide component nodig http://www.joomlart.com/documentation/wiki-ja-extension-manager/how-to
  84. 84. Framework-template hergebruiken in andere site • Moeilijk om informatie te vinden over hoe je je eigen template maakt (en hergebruikt), alleen over aanpassingen • Joomshaper geeft aanwijzingen: www.joomshaper.com/forums/how-to-package- template#reply-26818
  85. 85. Tot slot • Kijk eens rond op de demosites van de verschillende frameworks • Kies een framework dat bij jouw wensenlijstje past. • Probeer het uit: staat de manier van werken je aan?
  86. 86. Tot slot Happy frameworking!
  87. 87. Extra Hoe installeer je de Helix-template zonder voorbeeldinhoud? • Installeren template en plugin • Inschakelen • Een kopie van de template maken
  88. 88. 1 Installeren 1. Installeer Helix blank template 2. Installeer Helix System Plugin 3. Optioneel: installeer Shortcode Generator
  89. 89. 2 Inschakelen • Activeer beide plugins
  90. 90. 3 Kopiëren template • Noem de kopie bijvoorbeeld helixdemo
  91. 91. 3a Kopiëren template Na het kopiëren moet je nog een taalbestand handmatig kopiëren: 1. Ga naar [webadres]/helixdemo/language/en-GB 2. Zoek naar bestand en-GB.tpl_shaper_helix_ii.ini 3. Kopieer het bestand en hernoem het tot en-GB.tpl_helixdemo.ini
  92. 92. 3b Kopiëren template Tot slot een bestand hernoemen 1. Ga naar [webadres]/helixdemo/templates/helixde mo/layout/shaper_helix_ii.json 2. Hernoem het bestand tot helixdemo.json
  93. 93. 4 Nieuwe template als standaard instellen
  94. 94. 5 Resultaat
  95. 95. Eric Tiggeler Deze presentatie: www.slideshare.net www.joomla.erictiggeler.nl

×