Drupal Front-end
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,575
On Slideshare
4,567
From Embeds
8
Number of Embeds
1

Actions

Shares
Downloads
59
Comments
0
Likes
1

Embeds 8

http://www.slideshare.net 8

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Drupal front-end Marek Sotak a Bohdan Ganicky
  • 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. Š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. Anatomie šablony
  • 5. Generování stránky – suggestions + preprocess
  • 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. hook = funkce – suggestions nazevSablony_hook($arguments) skolavafrice_breadcrumbs($arguments) engineName_hook($arguments) phptemplate_hook($arguments) theme_hook($aguments)
  • 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. hook = template – suggestions template_preprocess template_preprocess_hook moduleName_preprocess moduleName_preprocess_hook engineName_engine_preprocess engineName_engine_preprocess_hook
  • 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. hook = template – suggestions theme_render_template Poskládat .tpl.php navrh.tpl.php nebo fallback hook.tpl.php
  • 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. 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. 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. Užitečné tipy Themer module http://drupal.org/project/devel_themer Firebug – firefox extension - http://getfirebug.com/
  • 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. Drupal a JavaScript jQuery
  • 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. 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. 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. 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. Po $('ul li:nth-child(odd)').addClass('odd'); demo
  • 23. Základní koncept Něco najdi... $('ul li:nth-child(odd)').addClass('odd'); ...něco s tím udělej.
  • 24. Základní koncept CSS selektor (CSS3) $('ul li:nth-child(odd)').addClass('odd'); jQuery metoda
  • 25. $ == jQuery $('ul li:nth-child(odd)').addClass('odd');
  • 26. $ == jQuery jQuery('ul li:nth-child(odd)').addClass('odd');
  • 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. + 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. Řetězení metod $('ul li:nth-child(odd)').addClass('odd').append(“I'm odd”).fadeOut(“slow”); demo
  • 30. jQuery API ● http://api.jquery.com ● http://www.futurecolors.ru/jquery/
  • 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. $(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. 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. 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. 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. 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. page.tpl.php <?php print $scripts; ?>
  • 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. 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. 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. <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. 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. 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. Odkazy http://jquery.com http://api.jquery.com http://www.futurecolors.ru/jquery/
  • 45. Knihy jQuery for Designers jQuery Enlightenment jQuery in Action Learning jQuery Drupal 6 JavaScript and jQuery
  • 46. Otázky?
  • 47. Děkujeme za pozornost!
  • 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