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.

Drupal Front-end

3,942 views

Published on

Presentation held at Drupalcamp Bratislava 2010.

Published in: Technology, Business
  • Be the first to comment

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

×