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
55. 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
56. 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
57. 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
75. $(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.');
});
76. 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!
79. 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? →
81. 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
...
82. 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
...
83. 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”>
84. <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; }
85. 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);
86. 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
91. 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