how to collaborate with web designer
Post on 09-May-2015
2.080 Views
Preview:
DESCRIPTION
TRANSCRIPT
How to collaborate with web designer
makoto kuwatahttp://www.kuwata-lab.com/
PHP Conference Japan 2008 LightningTalk
copyright© 2008 kuwata-lab.com all rights reserved.
Agenda
‣ 1. Conventional Problems
‣ 2. Introduction to Kwartz
‣ 3. Conclusion
1. Conventional Problems
copyright© 2008 kuwata-lab.com all rights reserved.
Smarty template
<ul>{foreach from=$list item=$item} <li>{$item}</li>{/foreach}</ul> • HTML design is broken
• Designer can touch or change presentation logics
copyright© 2008 kuwata-lab.com all rights reserved.
PHP template
<ul><?php foreach ($list as $item) { ?> <li><?php echo $item; ?></li><?php } ?></ul> • HTML design may not be broken
• Designer can touch or change presentation logics
copyright© 2008 kuwata-lab.com all rights reserved.
PHPTAL template
<ul tal:repeat="item list"> <li tal:content="item">dummy</li></ul>
• HTML will not be broken!• But designer can touch or
change presentation logics
copyright© 2008 kuwata-lab.com all rights reserved.
Problems
‣ Presentation logics are embedded in template file.
• HTML design is broken
• Designer can touch or change presentation logics
(intentionally or accidentially)
• Designer can't use Dreamweaver to edit HTML
• HTML Validator is not available to check HTML
copyright© 2008 kuwata-lab.com all rights reserved.
Solution
‣ Separate all presentation logics from HTML template files
<ul>foreach ($list as $item): <li>$item</li>endforeach</li>
<ul>foreach ($list as $item): <li>$item</li>endforeach</li>
HTML Template Presentation Logic
copyright© 2008 kuwata-lab.com all rights reserved.
Prior Art
‣ CSS can separate "design" from HTML file
<ul id="list"> <li id="item">foo</li></li>
#list { font-size: 120% }#item { color: blue; }
HTML File CSS File
It must be able to separate presentation logics in the same way!
2. Introduction to Kwartz
copyright© 2008 kuwata-lab.com all rights reserved.
What is Kwartz?
‣ Designer-friendly template system
• Separates presentation logics from HTML file
• HTML design of template file are not broken at all(Dreamweaver and HTML Validator are all OK)
• Designer don't need to learn template languages(or very low cost to learn)
copyright© 2008 kuwata-lab.com all rights reserved.
HTML Template
<table> <tr id="mark:list1">
<td id="mark:item1">foo</td> </tr></table> • Elements which have id attribute
are targets to manipulate• Id attributes are removed if they
have 'mark:' prefix
table.html
copyright© 2008 kuwata-lab.com all rights reserved.
Presentation Logics
#list1 { logic: {
foreach ($list as $item) { _stag(); // start tag _cont(); // content _etag(); // end tag }
}}
#item1 { value: $item;
}
Blue: SelectorRed: PHP code
Iterate elements
Print expression value as content
table.plogic
copyright© 2008 kuwata-lab.com all rights reserved.
Compilation
<table><?php foreach ($list as $item) { ?>
<tr> <td><?php echo $item; ?></td> </tr><?php } ?></table>
• Kwartz generates PHP file• You should include or require it
kwartz-php -p table.plogic table.html
copyright© 2008 kuwata-lab.com all rights reserved.
#list1 { logic: { foreach ($list as $item) { _stag(); // start tag _cont(); // content _etag(); // end tag } }}
Iterate an element Iterate only content
Applications
#list1 { logic: { _stag(); foreach ($list as $item) { _cont(); } _etag(); }}
copyright© 2008 kuwata-lab.com all rights reserved.
#list1 { logic: { // nothing }}
#list1 { logic: { if ($list !== NULL) { _stag(); _cont(); _etag(); } }}
Remove dummy elementPrint only if condition is true
copyright© 2008 kuwata-lab.com all rights reserved.
#list1 { attrs: 'bgcolor' $color; logic: { foreach ($list as $i=>$item) { $color = $i % 2 ? 'red' : 'blue'; _stag(); _cont(); _end(); } }}
Border-colored table
copyright© 2008 kuwata-lab.com all rights reserved.
#list1 {
logic: {
_stag();
$n = 0;
foreach ($list as $item) { $n++;
if ($n > 3) {
$n = 1;
_etag();
_stag(); }
_cont();
}
if ($n > 0) {
$item = ' '; while ($n++ < 3) {
_cont();
}
}
_etag(); }
}
• You don't need to modify HTML template even when you changed presentation logics
• HTML template file and presentation logic file are separated (independendent) each other
For each three elements
copyright© 2008 kuwata-lab.com all rights reserved.
Other features
‣ Very fast
• All you have to do when running is to include() PHP file which is generated in advance.
‣ Support multi programming languages
• PHP/Ruby/Perl/Java
‣ Support non-HTML file
‣ Support auto-sanitize (html escape)
‣ Support to extract a part of HTML template
copyright© 2008 kuwata-lab.com all rights reserved.
Defects
‣ A little difficult to debug• Because line numbers are different between
presentation logic file and generated PHP script.
‣ Only id selector is available (class or tag are not supported yet)• Because Kwartz never use HTML parser in order to
support non-HTML file
• Next version may make restriction looser
3. Conclusion
copyright© 2008 kuwata-lab.com all rights reserved.
Conclusion
‣ To collaborate with designer...
• Not to break HTML design of template is inadequate
• The most important thing is to separate presentation logics from HTML template
‣ It is a programmer's responsibility to provide mechanism to collaborate with web designer
• Smarty is a bad choice for collaboration
copyright© 2008 kuwata-lab.com all rights reserved.
Resources
‣Web
• http://www.kuwata-lab.com/kwartz/
• http://groups.google.co.jp/group/kuwata-lab-products
‣ Article
• WebDesigning (magazine), May 2007
One more thing...
copyright© 2008 kuwata-lab.com all rights reserved.
Respect Web designer
‣ Everyone can't write cool HTML & CSS
• Same as that every programmer can't write cool code
‣ Designer is not servant of programmer
• Don't enforce custom tag or <% %>, please!
• Don't enforce a lot of template languages, please!
‣ Let designer use Dreamweaver or GoLive
• Can you stick if you were not allowed Emacs nor IDE?
thank you.
top related