Drupal front-end

Marek Sotak a Bohdan Ganicky
Představení
Marek Sotak                           Bohdan Ganicky
Developer, designer                   Front-end developer...
Šablonování – theming – Drupal 6
Šablona = prezentační vrstva oddělená od kódu
  Nemusíme zasahovat do modulů, když chceme...
Anatomie šablony
Generování stránky – suggestions + preprocess
theme('hook', $arguments)
theme_breadcrumb, skolavafrice_links,...
Definováno v hook_theme()
  function search_theme() {
 ...
hook = funkce – suggestions
nazevSablony_hook($arguments)
  skolavafrice_breadcrumbs($arguments)
engineName_hook($argument...
hook = template – suggestions
Převést $arguments → $variables
Hledání render funkce (theme_render_template)
Hledání funkce...
hook = template – suggestions
template_preprocess
template_preprocess_hook
moduleName_preprocess
moduleName_preprocess_hoo...
hook = template – suggestions
engineName_preprocess
engineName_preprocess_hook
themeName_preprocess
themeName_preprocess_h...
hook = template – suggestions
theme_render_template


Poskládat .tpl.php


navrh.tpl.php
nebo fallback
hook.tpl.php
Sub-theming – šablony v šabloně
Stačí .info soubor s hodnotou
  base theme = ninesixty
Můžou sdílet některé soubory z hlav...
Sub-theming – jak na to
Vytvořte novou složku v sites/*/themes s názvem vaší
 šablony – eg. sites/all/themes/skolavafrice
...
Užitečné tipy
DrupalContrib.org
  http://drupalcontrib.org
admin/settings/performance
  Optimalizace css + js souborů
Base...
Užitečné tipy
Themer module
   http://drupal.org/project/devel_themer




Firebug – firefox extension - http://getfirebug....
Odkazy
Theming handbook d.o - Drupal 6
   http://drupal.org/theme-guide
Drupal 6.x → 7.x guide
   http://drupal.org/update...
Drupal a JavaScript




             jQuery
jQuery?
Javascriptová knihovna (nejpopulárnější)
Abstrakce JS do srozumitelného API
Řeší rozdíly implementace JS v různých...
Ukázka
<ul>
  <li>Joomla</li>
  <li>Drupal</li>
  <li>Wordpress</li>
</ul>
<ul>
  <li>Prototype</li>
  <li>jQuery</li>
  <...
Ukázka
<ul>
  <li class=”odd”>Joomla</li>
  <li>Drupal</li>
  <li class=”odd”>Wordpress</li>
</ul>
<ul>
  <li class=”odd”>...
Před
var lists = document.getElementsByTagName('ul');
for (var i = 0; i < lists.length; i++) {
      var items = lists[i]....
Po



     $('ul li:nth-child(odd)').addClass('odd');
                       demo
Základní koncept

   Něco najdi...



    $('ul li:nth-child(odd)').addClass('odd');




                                 ...
Základní koncept

    CSS selektor
      (CSS3)


    $('ul li:nth-child(odd)').addClass('odd');




                     ...
$ == jQuery



    $('ul li:nth-child(odd)').addClass('odd');
$ == jQuery



  jQuery('ul li:nth-child(odd)').addClass('odd');
CSS selektory...
Všechny pokročilé selektory včetně CSS3
$('div p'), $('div > p')
$('div ~ p'), $('div + p')
$('div p:firs...
+ filtry
$(“li:odd”), $(“li:even”)
$(“li:first”), $(“li:last”)
$(“input:checked”), $(“input:not(:checked)”)
$(“div:contain...
Řetězení metod



$('ul li:nth-child(odd)').addClass('odd').append(“I'm
  odd”).fadeOut(“slow”);
                        d...
jQuery API
●   http://api.jquery.com
●   http://www.futurecolors.ru/jquery/
Rozšíření pro jQuery - plugins
stěžejní vlastnost jQuery → http://plugins.jquery.com

  $.fn.showLinkTarget = function() {...
$(document).ready();
Událost → nastane 1x běhěm načtení dokumentu
V daný moment máme k dispozici celý DOM a
  můžeme s ním...
Progressive enhancement
3 vrstvy
Obsah (html) → prezentace (css) → chování (js)
Jedna nezávislá na druhé → pokud možno co ...
Verze jQuery
Drupal 5.x → jQuery 1.0.x ( → 1.0.4)
Drupal 6.x → jQuery 1.2.x ( → 1.2.6)
Drupal 7.x → snad jQuery 1.4.x
 htt...
Modul “jQuery update”
http://drupal.org/project/jquery_update
Drupal 5.x → jQuery 1.2.6
Drupal 6.x → jQuery 1.3.2 (dev ver...
Jak začít?
Čeho chci dosáhnout?
Neudělal to už někdo za mě? (viz plugins)
Neexistuje dokonce řešení ve formě Drupal modulu...
page.tpl.php



           <?php print $scripts; ?>
Soubor .info
●   Drupal automaticky vezme soubor script.js v
    kořenovém adresáři tématu.
●   Pokud chceme použít jiný n...
Soubor .info
●   Drupal automaticky vezme soubor script.js v
    kořenovém adresáři tématu.
●   Pokud chceme použít jiný n...
Automatické změny v HTML
<html class=”js” ...>
<script type=”text/javascript” src=”jquery.js”>
<script type=”text/javascri...
<html class=”js” ...>
Opomíjená třída
Důležité pro stylování prvků s nimiž nějak
 manipulujeme přes JS/jQuery
Místo v .js:...
function fancyLogin() {
    var $login_block = $('#block-user-0');
    var $target = $('.top-navigation .item-list .first'...
Nástroje
Firebug pro Firefox: http://getfirebug.com/
Developer Tools v Google Chrome
IE8 Developer Tools
http://jsbin.com/...
Odkazy
http://jquery.com
http://api.jquery.com
http://www.futurecolors.ru/jquery/
Knihy
jQuery for Designers
jQuery Enlightenment
jQuery in Action
Learning jQuery
Drupal 6 JavaScript and jQuery
Otázky?
Děkujeme za pozornost!
Credits
Slide 4 by Medical Student on flickr
Slide 44 - http://web.mac.com/moistproduction/flash/index.html
Slide 60 by po...
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Drupal Front-end
Upcoming SlideShare
Loading in...5
×

Drupal Front-end

3,628

Published on

Presentation held at Drupalcamp Bratislava 2010.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,628
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
61
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Drupal Front-end

  1. 1. Drupal front-end Marek Sotak a Bohdan Ganicky
  2. 2. Představení Marek Sotak Bohdan Ganicky Developer, designer Front-end developer co-founder of atomic ant ltd web Part of the atomic ant team since design company based in London, 2009. Responsible for magic things. Prague and Denmark, operates internationaly. Creator of RootCandy admin theme http://drupal.org/project/rootcandy @sotak – @bganicky – http://twitter.com/sotak http://twitter.com/bganicky
  3. 3. Šablonování – theming – Drupal 6 Šablona = prezentační vrstva oddělená od kódu Nemusíme zasahovat do modulů, když chceme přepsat výstup (mark-up) PHPTemplate engine (Smarty, xtemplate, atd...) Ukládáme do sites/*/themes/moje-sablona
  4. 4. Anatomie šablony
  5. 5. Generování stránky – suggestions + preprocess
  6. 6. theme('hook', $arguments) theme_breadcrumb, skolavafrice_links,... Definováno v hook_theme() function search_theme() { return array( 'search_theme_form' => array( 'arguments' => array('form' => NULL), 'template' => 'search-theme-form', ), ); }
  7. 7. hook = funkce – suggestions nazevSablony_hook($arguments) skolavafrice_breadcrumbs($arguments) engineName_hook($arguments) phptemplate_hook($arguments) theme_hook($aguments)
  8. 8. hook = template – suggestions Převést $arguments → $variables Hledání render funkce (theme_render_template) Hledání funkce pro zjištění připony (.tpl.php) $variables se předávají referencí
  9. 9. hook = template – suggestions template_preprocess template_preprocess_hook moduleName_preprocess moduleName_preprocess_hook engineName_engine_preprocess engineName_engine_preprocess_hook
  10. 10. hook = template – suggestions engineName_preprocess engineName_preprocess_hook themeName_preprocess themeName_preprocess_hook Sesbírané návrhy Najdi implementované funkce (drupal_discover_template)
  11. 11. hook = template – suggestions theme_render_template Poskládat .tpl.php navrh.tpl.php nebo fallback hook.tpl.php
  12. 12. Sub-theming – šablony v šabloně Stačí .info soubor s hodnotou base theme = ninesixty Můžou sdílet některé soubory z hlavní šablony CSS, js, .tpl.php, přepsané funkce z template.php Nesdílí theme-settings.php, logo, color, některá nast. z .info
  13. 13. Sub-theming – jak na to Vytvořte novou složku v sites/*/themes s názvem vaší šablony – eg. sites/all/themes/skolavafrice Přidejte .info soubor se základními vlastnostmi – name, description,... Přidejte “base theme = ninesixty” do .info souboru Hotovo Subtheming quick and dirty - http://drupal.org/node/441088
  14. 14. Užitečné tipy DrupalContrib.org http://drupalcontrib.org admin/settings/performance Optimalizace css + js souborů Base themes Zen, Ninesixty, Genesis,... http://drupal.org/project/Themes
  15. 15. Užitečné tipy Themer module http://drupal.org/project/devel_themer Firebug – firefox extension - http://getfirebug.com/
  16. 16. Odkazy Theming handbook d.o - Drupal 6 http://drupal.org/theme-guide Drupal 6.x → 7.x guide http://drupal.org/update/theme/6/7 Mailing list http://drupal.org/mailing-lists Theme garden - http://themegarden.org IRC #drupal-themes
  17. 17. Drupal a JavaScript jQuery
  18. 18. jQuery? Javascriptová knihovna (nejpopulárnější) Abstrakce JS do srozumitelného API Řeší rozdíly implementace JS v různých prohlížečích Přidává vlastní funkcionalitu (např. animace) Usnadňuje nám práci
  19. 19. Ukázka <ul> <li>Joomla</li> <li>Drupal</li> <li>Wordpress</li> </ul> <ul> <li>Prototype</li> <li>jQuery</li> <li>Dojo</li> </ul>
  20. 20. Ukázka <ul> <li class=”odd”>Joomla</li> <li>Drupal</li> <li class=”odd”>Wordpress</li> </ul> <ul> <li class=”odd”>Prototype</li> <li>jQuery</li> <li class=”odd”>Dojo</li> </ul>
  21. 21. Před var lists = document.getElementsByTagName('ul'); for (var i = 0; i < lists.length; i++) { var items = lists[i].getElementsByTagName('li'); for (var j = 1; j < items.length; j += 2) { if (!/(^|s)odd(s| $)/.test(items[i].className)) { rows[i].className += ' odd'; } } }
  22. 22. Po $('ul li:nth-child(odd)').addClass('odd'); demo
  23. 23. Základní koncept Něco najdi... $('ul li:nth-child(odd)').addClass('odd'); ...něco s tím udělej.
  24. 24. Základní koncept CSS selektor (CSS3) $('ul li:nth-child(odd)').addClass('odd'); jQuery metoda
  25. 25. $ == jQuery $('ul li:nth-child(odd)').addClass('odd');
  26. 26. $ == jQuery jQuery('ul li:nth-child(odd)').addClass('odd');
  27. 27. CSS selektory... Všechny pokročilé selektory včetně CSS3 $('div p'), $('div > p') $('div ~ p'), $('div + p') $('div p:first-child'), $('div p:last-child') $('div p:only-child'), $('div p:nth-child(2)') ...a mnoho dalších
  28. 28. + filtry $(“li:odd”), $(“li:even”) $(“li:first”), $(“li:last”) $(“input:checked”), $(“input:not(:checked)”) $(“div:contains('Drupal')”), $(“div:has(ul)”) $(“div:hidden”), $(“div:visible”) ...a mnoho dalších http://api.jquery.com/category/selectors/
  29. 29. Řetězení metod $('ul li:nth-child(odd)').addClass('odd').append(“I'm odd”).fadeOut(“slow”); demo
  30. 30. jQuery API ● http://api.jquery.com ● http://www.futurecolors.ru/jquery/
  31. 31. Rozšíření pro jQuery - plugins stěžejní vlastnost jQuery → http://plugins.jquery.com $.fn.showLinkTarget = function() { return this.each(function() { console.log(this.href); }); } $(“a”).showLinkTarget(); demo
  32. 32. $(document).ready(); Událost → nastane 1x běhěm načtení dokumentu V daný moment máme k dispozici celý DOM a můžeme s ním začít manipulovat Netýká se obrázků! → $(window).load(); $(document).ready(function() { alert('Dokument je připraven.'); });
  33. 33. Progressive enhancement 3 vrstvy Obsah (html) → prezentace (css) → chování (js) Jedna nezávislá na druhé → pokud možno co nejmenší třecí zóny JQuery → ideální nástroj pro PE!
  34. 34. Verze jQuery Drupal 5.x → jQuery 1.0.x ( → 1.0.4) Drupal 6.x → jQuery 1.2.x ( → 1.2.6) Drupal 7.x → snad jQuery 1.4.x http://drupal.org/node/653580
  35. 35. Modul “jQuery update” http://drupal.org/project/jquery_update Drupal 5.x → jQuery 1.2.6 Drupal 6.x → jQuery 1.3.2 (dev verze)
  36. 36. Jak začít? Čeho chci dosáhnout? Neudělal to už někdo za mě? (viz plugins) Neexistuje dokonce řešení ve formě Drupal modulu? (viz jCarousel či Lightbox2) Nic z výše uvedeného? →
  37. 37. page.tpl.php <?php print $scripts; ?>
  38. 38. Soubor .info ● Drupal automaticky vezme soubor script.js v kořenovém adresáři tématu. ● Pokud chceme použít jiný název či umístění, pak upravíme .info soubor: ... stylesheets[all][] = my_style.css scripts[] = js/my_script.js ...
  39. 39. Soubor .info ● Drupal automaticky vezme soubor script.js v kořenovém adresáři tématu. ● Pokud chceme použít jiný název či umístění, pak upravíme .info soubor: ... stylesheets[all][] = my_style.css scripts[] = js/jquery.plugin.js scripts[] = js/my_script.js ...
  40. 40. Automatické změny v HTML <html class=”js” ...> <script type=”text/javascript” src=”jquery.js”> <script type=”text/javascript” src=”drupal.js”> <script type=”text/javascript” src=”my_script.js”>
  41. 41. <html class=”js” ...> Opomíjená třída Důležité pro stylování prvků s nimiž nějak manipulujeme přes JS/jQuery Místo v .js: $(document).ready(function() { $('#something').hide(); }); ● použijeme CSS: .js #something { display: none; }
  42. 42. function fancyLogin() { var $login_block = $('#block-user-0'); var $target = $('.top-navigation .item-list .first'); var $trigger = $target.find('a').click(function() { if ($login_block.is(':visible')) { $login_block.add($overlay).fadeOut(); return false; } else { $login_block.add($overlay).fadeIn(); $('#edit-name').focus(); return false; } }); var $overlay = $('<div id="overlay">').appendTo('body').click(function() { $trigger.trigger('click'); }); $login_block.appendTo($target); } $(document).ready(fancyLogin);
  43. 43. Nástroje Firebug pro Firefox: http://getfirebug.com/ Developer Tools v Google Chrome IE8 Developer Tools http://jsbin.com/ http://james.padolsey.com/jquery/ http://www.woods.iki.fi/interactive-jquery-tester.html
  44. 44. Odkazy http://jquery.com http://api.jquery.com http://www.futurecolors.ru/jquery/
  45. 45. Knihy jQuery for Designers jQuery Enlightenment jQuery in Action Learning jQuery Drupal 6 JavaScript and jQuery
  46. 46. Otázky?
  47. 47. Děkujeme za pozornost!
  48. 48. Credits Slide 4 by Medical Student on flickr Slide 44 - http://web.mac.com/moistproduction/flash/index.html Slide 60 by poopoorama on flickr Website preview: http://skolavafrice.cz
  1. A particular slide catching your eye?

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

×