Presentation held at Drupalcamp Bratislava 2010.

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

8. Anatomie šablony

48. Generování stránky – suggestions + preprocess

49. 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',
),
);
}

50. hook = funkce – suggestions
nazevSablony_hook($arguments)
skolavafrice_breadcrumbs($arguments)
engineName_hook($arguments)
phptemplate_hook($arguments)
theme_hook($aguments)

51. 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í

52. hook = template – suggestions
template_preprocess
template_preprocess_hook
moduleName_preprocess
moduleName_preprocess_hook
engineName_engine_preprocess
engineName_engine_preprocess_hook

53. hook = template – suggestions
engineName_preprocess
engineName_preprocess_hook
themeName_preprocess
themeName_preprocess_hook
Sesbírané návrhy
Najdi implementované funkce
(drupal_discover_template)

54. hook = template – suggestions
theme_render_template
Poskládat .tpl.php
navrh.tpl.php
nebo fallback
hook.tpl.php

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

58. Užitečné tipy
Themer module
http://drupal.org/project/devel_themer
Firebug – firefox extension - http://getfirebug.com/

59. 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

60. Drupal a JavaScript
jQuery

61. 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

62. Ukázka
<ul>
<li>Joomla</li>
<li>Drupal</li>
<li>Wordpress</li>
</ul>
<ul>
<li>Prototype</li>
<li>jQuery</li>
<li>Dojo</li>
</ul>

63. 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>

64. 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';
}
}
}

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

66. Základní koncept
Něco najdi...
$('ul li:nth-child(odd)').addClass('odd');
...něco s tím
udělej.

67. Základní koncept
CSS selektor
(CSS3)
$('ul li:nth-child(odd)').addClass('odd');
jQuery metoda

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

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

70. 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

71. + 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/

72. Řetězení metod
$('ul li:nth-child(odd)').addClass('odd').append(“I'm
odd”).fadeOut(“slow”);
demo

73. jQuery API
● http://api.jquery.com
● http://www.futurecolors.ru/jquery/

74. 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

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!

77. 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

78. 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)

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? →

80. page.tpl.php
<?php print $scripts; ?>

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

87. Odkazy
http://jquery.com
http://api.jquery.com
http://www.futurecolors.ru/jquery/

88. Knihy
jQuery for Designers
jQuery Enlightenment
jQuery in Action
Learning jQuery
Drupal 6 JavaScript and jQuery

89. Otázky?

90. Děkujeme za pozornost!

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