how to collaborate with web designer

How to collaborate with web designer

makoto kuwatahttp://www.kuwata-lab.com/

PHP Conference Japan 2008 LightningTalk

http://www.kuwata-lab.com

http://www.kuwata-lab.com

copyright© 2008 kuwata-lab.com all rights reserved.

Agenda

‣ 1. Conventional Problems

‣ 2. Introduction to Kwartz

‣ 3. Conclusion

1. Conventional Problems


Smarty template

<ul>{foreach from=$list item=$item} <li>{$item}</li>{/foreach}</ul> • HTML design is broken

• Designer can touch or change presentation logics


PHP template

<ul><?php foreach ($list as $item) { ?> <li><?php echo $item; ?></li><?php } ?></ul> • HTML design may not be broken



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


Problems

‣ Presentation logics are embedded in template file.

• HTML design is broken


(intentionally or accidentially)

• Designer can't use Dreamweaver to edit HTML

• HTML Validator is not available to check HTML


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


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


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)


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


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


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


#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(); }}


#list1 { logic: { // nothing }}

#list1 { logic: { if ($list !== NULL) { _stag(); _cont(); _etag(); } }}

Remove dummy elementPrint only if condition is true


#list1 { attrs: 'bgcolor' $color; logic: { foreach ($list as $i=>$item) { $color = $i % 2 ? 'red' : 'blue'; _stag(); _cont(); _end(); } }}

Border-colored table


#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


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


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


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


Resources

‣Web 　

• http://www.kuwata-lab.com/kwartz/

• http://groups.google.co.jp/group/kuwata-lab-products

‣ Article

• WebDesigning (magazine), May 2007

http://www.kuwata-lab.com/kwartz/

http://www.kuwata-lab.com/kwartz/

http://groups.google.co.jp/group/kuwata-lab-products




One more thing...


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.

how to collaborate with web designer

Technology