Desenvolvimento templates css e s2

Slide 1: Blogs do SAPO Introdução ao desenvolvimento de templates através de css e S2 Hugo Costa <hugo.costa@co.sapo.pt>

Slide 2: Conteúdo ● Estrutura de um template ● css ● S2 ● Demonstração

Slide 3: Estrutura de um Template ● Template Blog HEADER – Cabeçalho – Posts – Comentários POST – Componentes – Rodapé COMP POST FOOTER

Slide 4: Estrutura de um Template ● Post TÍTULO – Título – Conteúdo – Autor – Links CONTEÚDO – Metadata (Tags) TAGS AUTOR | LINKS

Slide 5: Estrutura de um Template ● Comentário AUTOR | DATA – Conteúdo – Autor – Links CONTEÚDO LINKS

Slide 6: Estrutura de um Template ● Componentes TÍTULO – Título – Conteúdo CONTEÚDO

Slide 7: css ● Definição do estilo dos elementos html – Fonte(tipo, tamanho) – Cores (cor e cor de fundo) – Imagens de fundo – Altura e largura – Display (block, inline, none)

Slide 8: css Box Model ● A largura (e altura) MARGIN depende: – width (height) PADDING – padding – border WIDTH – margin

Slide 9: Templates css ● Modelos Template – Largura Fixa – Elásticos ● Implementação – Floats – Position

Slide 10: Web Design Tools ● Firefox, com os seguintes plugins: – Firebug – Web Developer – Measure It – ColorZilla

Slide 11: S2 ? ● Linguagem de programação ● Objectos que representam elementos do Blog: – Página (Page) – Posts (Entry) e comentários (Comments) – Autor (User) ● Gera xhtml para o browser

Slide 12: Layers S2 ● Existem 2 tipos de layers de sistema – Core – Definições do sistema – I18NC – Localização do Core ● Existem 4 tipos de layers do utilizador – Layout – Definição do template – I18N – Localização do template – Theme – Temas do template – User – Personalização do template

Slide 13: Styles S2 ● Um estilo S2 é um conjunto de layers associadas ao utilizador: – Layers de sistema ● Core ● I18NC – Layers de utilizador: ● Layout ● User

Slide 14: Views S2 ● Classes que representam as várias páginas do Blog: – RecentPage – Últimos posts – EntryPage – Post com comentários – ReplyPage – Pág. para comentar post – DayPage – Pág. com todos os post do dia – MonthPage – Pág. com arquivo mensal

Slide 15: Layout ● Onde começar? – Método Page::print() - Estrutura do template – Função print_stylesheet() - Definição da css – Função print_entry() - Estrutura dos posts – Função print_comments() - Estrutura dos comentários – Função print_generic_widget() - Estrutura dos componentes

Slide 16: Demonstração

Slide 17: Links úteis ● Blog Oficial: http://blogs.blogs.sapo.pt ● Blog Templates: http://templates.blogs.sapo.pt ● Firefox: http://getfirefox.com ● Plugins Firefox: – Firebug: http://tinyurl.com/2z4tvg – Web Developer: http://tinyurl.com/2ek6ec – Measure It: http://tinyurl.com/2yuvas – ColorZilla: http://tinyurl.com/2b2fcz