Este documento apresenta o GBD Pattern, um padrão de desenvolvimento front-end que visa resolver problemas comuns em HTML, como "Div-itis" e "Class-itis". O GBD Pattern é composto por Grids, Box e Dados. Grids definem um sistema de grade para layouts responsivos. Boxes dividem páginas em módulos reutilizáveis. E Dados descreve semanticamente informações através de elementos HTML e classes.
Web Apps é um modo fácil e rápido de se construir aplicações para Série 40, entretanto existe o desafio de fazer uma app suportar diversas resoluções de tela. Este webinar tem como objetivo mostrar métodos e boas práticas de construção de Web Apps Série 40 com suporte para várias resoluções.
Hoje em dia quando o assunto é CSS muito se fala em modularização e arquitetura de código. Mas o que de fato é isso? Quais abordagens podemos utilizar para tornar o código do nosso CSS mais organizado?
Nessa apresentação procuro passar uma visão geral das técnicas mais populares, detalhando suas particularidades e a ideologia por traz de cada uma.
Também falo de técnicas mais recentes que abordam o desenvolvimento de CSS de perspectivas diferentes e algumas dicas gerais de como deixar seu código mais flexível a mudanças.
Slides da Apresentação sobre Bootstrap para a Maratona de Inovação da ISITEC 2017.
Mostro um pouco das facilidades de usar o Bootstrap para criar um frontend em um hackathon
Elementos essenciais de CSS para desenvolvedores web. Exemplos de páginas HTML com estilos definidos via CSS. Inclui botões, fontes, layouts, frameworks e bibliotecas. Vários links apontam para fontes adicionais.
CSS {Grid} Layout: It's evolution babyCriciúma Dev
Diogo Moretti (Chaordic)
Vamos falar de CSS Layout, de como evoluímos de tabelas para Tableless, Box Model, Grids, Flexbox… até chegar na nova especificação de Grid Layout.
Vale do Carbono Conference
A intenção da palestra é dar uma visão geral sobre alguns padrões de escrita de estilos (OOCSS, SMACSS, BEM), destacar seus benefícios, aprofundar nas convenções de nomenclatura do SUIT CSS e mostrar através de exemplos porque o adotei na minha empresa. Palestra realizada no PHPeste 2015 na trilha javascript organizada pelo ParaibaJS.
Dicas para criação rápida de projectos WEBMarco Pinheiro
Inclui ainda algumas dicas úteis criação rápida de projectos WEB como:
- projecto initializr
- twitter bootstrap (grid 12 colunas)
- google fonts
- placeholders de imagens (placehold.it)
A API de manipulação do DOM é a mais lenta e inconsistente entre browsers que os programadores client têm acesso. Conheça e saiba como funciona uma engine de seleção de elementos DOM (Slick, Sizzle, micro-selector, etc), onde elas são usadas e como otimizar seletores CSS nessas engines para comparação e busca de elementos.
Uma básica introdução a respeito do que é o Bootstrap, fazendo referências sobre o que é a grid, conceito e metodologia de trabalho oriundos do mundo do design gráfico. Bem como uma rápida explicação do LESS, o que é e como funciona.
Web Apps é um modo fácil e rápido de se construir aplicações para Série 40, entretanto existe o desafio de fazer uma app suportar diversas resoluções de tela. Este webinar tem como objetivo mostrar métodos e boas práticas de construção de Web Apps Série 40 com suporte para várias resoluções.
Hoje em dia quando o assunto é CSS muito se fala em modularização e arquitetura de código. Mas o que de fato é isso? Quais abordagens podemos utilizar para tornar o código do nosso CSS mais organizado?
Nessa apresentação procuro passar uma visão geral das técnicas mais populares, detalhando suas particularidades e a ideologia por traz de cada uma.
Também falo de técnicas mais recentes que abordam o desenvolvimento de CSS de perspectivas diferentes e algumas dicas gerais de como deixar seu código mais flexível a mudanças.
Slides da Apresentação sobre Bootstrap para a Maratona de Inovação da ISITEC 2017.
Mostro um pouco das facilidades de usar o Bootstrap para criar um frontend em um hackathon
Elementos essenciais de CSS para desenvolvedores web. Exemplos de páginas HTML com estilos definidos via CSS. Inclui botões, fontes, layouts, frameworks e bibliotecas. Vários links apontam para fontes adicionais.
CSS {Grid} Layout: It's evolution babyCriciúma Dev
Diogo Moretti (Chaordic)
Vamos falar de CSS Layout, de como evoluímos de tabelas para Tableless, Box Model, Grids, Flexbox… até chegar na nova especificação de Grid Layout.
Vale do Carbono Conference
A intenção da palestra é dar uma visão geral sobre alguns padrões de escrita de estilos (OOCSS, SMACSS, BEM), destacar seus benefícios, aprofundar nas convenções de nomenclatura do SUIT CSS e mostrar através de exemplos porque o adotei na minha empresa. Palestra realizada no PHPeste 2015 na trilha javascript organizada pelo ParaibaJS.
Dicas para criação rápida de projectos WEBMarco Pinheiro
Inclui ainda algumas dicas úteis criação rápida de projectos WEB como:
- projecto initializr
- twitter bootstrap (grid 12 colunas)
- google fonts
- placeholders de imagens (placehold.it)
A API de manipulação do DOM é a mais lenta e inconsistente entre browsers que os programadores client têm acesso. Conheça e saiba como funciona uma engine de seleção de elementos DOM (Slick, Sizzle, micro-selector, etc), onde elas são usadas e como otimizar seletores CSS nessas engines para comparação e busca de elementos.
Uma básica introdução a respeito do que é o Bootstrap, fazendo referências sobre o que é a grid, conceito e metodologia de trabalho oriundos do mundo do design gráfico. Bem como uma rápida explicação do LESS, o que é e como funciona.
12. Grids
“Todo trabalho de design envolve a solução de problemas
em níveis visuais e organizativos. Figuras, símbolos, massa de
textos, títulos e tabelas devem se reunir para transmitir
informação. O grid é uma maneira de juntar esses
elementos.”
- Luiz Agner, designer, arquiteto e professor
Fonte: http://www.slideshare.net/agner/a-construo-do-grid
13. Grids
“O grid introduz uma ordem sistemática num leiaute e
permite que o designer diagrame uma grande quantidade de
informação. Também permite vários colaboradores num
mesmo projeto.”
- Luiz Agner, designer, arquiteto e professor
Fonte: http://www.slideshare.net/agner/a-construo-do-grid
14. Grids
“Vantagens do grid:
- Clareza
- Eficiência
- Economia
- Identidade”
- Luiz Agner, designer, arquiteto e professor
Fonte: http://www.slideshare.net/agner/a-construo-do-grid
15. Grids
‣ Padrão de-facto para layouts em CSS.
‣ Permite o intercâmbio de componentes entre
produtos
‣ Define o espaço horizontal que os componentes
podem ocupar (o conteúdo dos componentes
definem o espaço vertical)
‣ Dada uma largura fixa, pode-se compor “linhas” com
até 12 colunas.
29. Box
‣ Pattern que subdivide páginas web em pequenos
“módulos” autosuficientes.
‣ É como um pequeno chassi para os componentes
que vão preencher os compartimentos da estante.
‣ Juntando-se vários componentes formam-se
composições sólidas.
30. Box
‣ Podem ser utilizados por widgets, destaques, forms,
menus, etc...
‣ Baseado nas novas tags do HTML 5: article, section,
aside, header e footer.
57. Pattern Box: Aninhamento
‣ Pattern como uma estrutura HTML qualquer
<ul> <form> <table>
<li></li> <fieldset> <tr><th></th></tr>
<li></li> <label></label> <tr><td></td></tr>
<li></li> <input /> <tr><td></td></tr>
</ul> </fieldset> </table>
...
</form>
58. Pattern Box: Aninhamento
‣ E como tal ele pode ser aninhado.
<section class=”box”>
<header></header>
<section class=”content”>
<section class=”box”>
<header></header>
<section class=”content”></section>
</section>
<section class=”box”>
<header></header>
<section class=”content”></section>
<footer></footer>
</section>
</section>
</section>
59. Demo de Grid com Box
http://jsfiddle.net/lquixada/scTcU/
60. Pitfalls
‣ Favor, não misturar box com classes do grid
Exemplo: <section class=”box box-plantao span4”>
‣ Evitar qualquer tipo de <div> dentro do
box, inclusive do próprio grid.
62. Dados
‣ Utilização de elementos semânticos para descrever
dados através de tags e/ou classes.
‣ É uma inspiraçao que veio de Microformatos e, mais
recentemente, de Microdados.
‣ Não serve paras os search engines, apenas melhora a
clareza do código.
64. Microdados
“Microdados é uma especificação WHATWG HTML5
usada para aninhar semântica dentro de conteúdos
existentes em páginas web.
Isso é feito usando atributos específicos: itemscope,
itemtype, itemid, itemprop e itemref.
Search engines, web crawlers, e navegadores podem
extrair e processar microdados a partir de uma página
web e usar isso para prover uma experiência de
navegação mais rica para os usuários.”
- Wikipedia
65. Microdados: Exemplo
<div>
<h1>Avatar</h1>
<span>
Director:
James Cameron
(born August 16, 1954)
</span>
<span>Science fiction</span>
<a href="/movies/avatar.html">Trailer</a>
</div>
66. Microdados: Exemplo
<div itemscope>
<h1>Avatar</h1>
<span>
Director:
James Cameron
(born August 16, 1954)
</span>
<span>Science fiction</span>
<a href="/movies/avatar.html">Trailer</a>
</div>
67. Microdados: Exemplo
<div itemscope itemtype="http://schema.org/Movie">
<h1>Avatar</h1>
<span>
Director:
James Cameron
(born August 16, 1954)
</span>
<span>Science fiction</span>
<a href="/movies/avatar.html">Trailer</a>
</div>
85. Outro exemplo....
cite.brother-tweet
span.brother-idade
span.brother-cidade-natal
span.brother-signo cite.brother-tweet-tempo
span.brother-time
86. Demo de Grid com Box com Dados
http://jsfiddle.net/lquixada/WLZ8V/
87. Dica!
‣ Div e span são “tags fallback,” quando não
houver uma tag mais semântica, use-as.
‣ Use <div> para descrever estrutura
‣ Use <span> para descrever dados
88. Pitfalls
‣ Favor, não misturar box com classes do grid
Exemplo: <section class=”box box-plantao span4”>
‣ Evitar qualquer tipo de <div> dentro do
box, inclusive do próprio grid.
89. Pitfalls
‣ Não colocar elementos nativamente block
dentro de elementos nativamente inline
<li>
<a class=”noticia” href=”#”>
<img class=”thumb”
src=”foto.jpg” />
<div class=”chapeu”>(chapeu)</div>
<h6>(titulo da noticia)</h6>
</a>
</li>
90. GBD Pattern
‣ Válido (W3C friendly)
‣ Semântico
‣ Enxuto
‣ Otimizado para SEO (Google friendly)
‣ Acessível
‣ Progressive Enhancement
‣ Fácil de entender
Quando o PO pede um box no planning, ou o UX desenha um box novo: o que vc pensa em termos de HTML?\n
Escada da Morte, Stairway to Hell\n
Esses s&#xE3;o os problemas que o Tableless trouxe.\n
\n
Primeira vez apresentando como GBD.\nAntes era Grid, Minidocumentos e Microsemantica.\n
Falar sobre o que &#xE9; a id&#xE9;ia e como cheguei nela.\n\n
Sem&#xE2;ntico: que fa&#xE7;a sentido para humanos\n
\n
\n
\n
\n
\n
- Grids s&#xE3;o como estantes que alocam espa&#xE7;os para os componentes\n- &#xC9; como se os espa&#xE7;os verticais dos compartimentos pudessem variar\n
\n
- Existem v&#xE1;rios tipos de grid na web: blueprint, 960 (mais famoso), YUI Grids, etc.\n- Em geral seguem os mesmos princ&#xED;pios, s&#xF3; mudando alguns detalhes de implementa&#xE7;&#xE3;o.\n
- Vamos usar o grid do twitter como exemplo.\n
\n
\n
\n
\n
\n
- Na pr&#xE1;tica, utilizamos mais span4, span8 e span12\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
- Lembrar rob&#xF4;zinho do BBB\n
\n
\n
Melhor n&#xE3;o divs e classes demais! EVITE-AS!!\n
Article = conte&#xFA;do principal\nSection = Parte de um conte&#xFA;do principal\n
Aside = conte&#xFA;do perif&#xE9;rico\n
\n
\n
- Coment&#xE1;rios, de prefer&#xEA;ncia, din&#xE2;micos.\n
\n
\n
\n
Deixa o componente mais desacoplado do grid. Assim &#xE9; poss&#xED;vel alterar o grid da p&#xE1;gina sem afetar o componente.\n
\n
elementos sem&#xE2;nticos: h1, p, form, table, input, a, etc...\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
Vamos dar um zoom!\n
Perceba que s&#xF3; utilizei elementos inline, nenhum block. Blocks estruturam, inlines apresentam.\nNunca, nunca colocar um block dentro de um inline.\n