Desenvolvimento na prática, níveis de elementos, floats, position, libertando floats, problema tabela, seletores exóticos, propriedades proprietárias.
Material de estudos elaborado por Marcos César // www.marcoscesar.com
Todo o conteúdo é livre e pode ser copiado, consultado sempre e divulgado em toda internet desde que citados os créditos.
cc 2013 Construsite Brasil - Desenvolvimento web.
O documento discute os elementos essenciais de uma identidade visual e papelaria corporativa, incluindo: 1) A importância de criar peças que atendam às necessidades do cliente; 2) Os critérios de qualidade como simplicidade, funcionalidade e uso apropriado de cores; 3) As diferentes opções de cortes, dobras, versos e materiais.
CSS (Cascading Style Sheets) - 1ª parteMarcos César
Impácto visual, retroatividade, padronização de código (classes), w3c validator, CSS3.
Material de estudos elaborado por Marcos César // www.marcoscesar.com
Todo o conteúdo é livre e pode ser copiado, consultado sempre e divulgado em toda internet desde que citados os créditos.
cc 2012 Construsite Brasil - Desenvolvimento web.
Seja Onipresente como um deus no gerenciamento de sites WordPressValério Souza
This document discusses updates to security and monitoring systems as well as management tools for a website. It mentions a 20% discount for managewp.com/chegajunto and provides contact information for a local partner.
The document discusses techniques for working with legacy code, including breaking dependencies, adding tests, and refactoring code in small incremental changes to introduce improvements.
WordPress para Redatores, Jornalistas, Publicitários e BlogueirosValério Souza
O documento fornece instruções sobre como utilizar corretamente tags de cabeçalho, links permanentes e imagens ao redigir posts no WordPress. Também discute opções para encontrar imagens gratuitas e plug-ins úteis como o WordPress SEO e o Jetpack.
O documento discute as vantagens da plataforma Java e como outras linguagens como Ruby, Python e Lisp podem ser executadas na máquina virtual Java (JVM) por meio de mecanismos como o Bean Scripting Framework (BSF) e as especificações JSR. Isso permite aproveitar os recursos e desempenho da JVM para executar aplicações em diferentes linguagens.
O documento discute os elementos essenciais de uma identidade visual e papelaria corporativa, incluindo: 1) A importância de criar peças que atendam às necessidades do cliente; 2) Os critérios de qualidade como simplicidade, funcionalidade e uso apropriado de cores; 3) As diferentes opções de cortes, dobras, versos e materiais.
CSS (Cascading Style Sheets) - 1ª parteMarcos César
Impácto visual, retroatividade, padronização de código (classes), w3c validator, CSS3.
Material de estudos elaborado por Marcos César // www.marcoscesar.com
Todo o conteúdo é livre e pode ser copiado, consultado sempre e divulgado em toda internet desde que citados os créditos.
cc 2012 Construsite Brasil - Desenvolvimento web.
Seja Onipresente como um deus no gerenciamento de sites WordPressValério Souza
This document discusses updates to security and monitoring systems as well as management tools for a website. It mentions a 20% discount for managewp.com/chegajunto and provides contact information for a local partner.
The document discusses techniques for working with legacy code, including breaking dependencies, adding tests, and refactoring code in small incremental changes to introduce improvements.
WordPress para Redatores, Jornalistas, Publicitários e BlogueirosValério Souza
O documento fornece instruções sobre como utilizar corretamente tags de cabeçalho, links permanentes e imagens ao redigir posts no WordPress. Também discute opções para encontrar imagens gratuitas e plug-ins úteis como o WordPress SEO e o Jetpack.
O documento discute as vantagens da plataforma Java e como outras linguagens como Ruby, Python e Lisp podem ser executadas na máquina virtual Java (JVM) por meio de mecanismos como o Bean Scripting Framework (BSF) e as especificações JSR. Isso permite aproveitar os recursos e desempenho da JVM para executar aplicações em diferentes linguagens.
O documento discute layout responsivo, fornecendo definições, princípios e exemplos. Explica como criar interfaces flexíveis para diferentes dispositivos através de planejamento, uso de frameworks e media queries. Também lista vantagens como SEO, identidade visual e experiência do usuário.
LESS CSS (Pré compiladores) - IntroduçãoMarcos César
Noções básicas de pré compiladores CSS. LESSCSS. http://lesscss.org/
Material de estudos elaborado por Marcos César // www.marcoscesar.com
Todo o conteúdo é livre e pode ser copiado, consultado sempre e divulgado em toda internet desde que citados os créditos.
cc 2012 Construsite Brasil - Desenvolvimento web.
Electron: o poder da Web (e Node.js) em seu DesktopFilipe Falcão
A popularização de serviços cross-platform no desenvolvimento de aplicações mobile utilizando tecnologias web se torna cada vez mais popular e aceita pela comunidade. Cordova e, principalmente, Ionic chamaram a atenção para o crescimento dessa tendência. Fica a pergunta: será que em um ambiente Desktop, onde o poder de hardware geralmente é mais considerável, um aplicativo cross-platform com tecnologias web se comporta eficientemente? Nosso amado GitHub nos ajuda a responder essa pergunta com uma mãozinha do Electron, a ferramenta utilizada por Microsoft, Slack, Docker, Ionic e outros para criação de Desktop apps. Com esta talk irei mostrar as vantagens, desvantagens, ferramentas, tendências e, principalmente, porque você deveria adicionar do Electron à sua stack.
Node.js: 5 razões para começar a utilizarFilipe Falcão
Node.js possui diversas vantagens como back-end, incluindo ser baseado em JavaScript, ser rápido devido ao motor V8 e I/O assíncrono, e suportar alta concorrência através de loop de eventos único. O framework MEAN (MongoDB, Express, AngularJS e Node) permite criar sistemas completos usando todas essas ferramentas em JavaScript.
Making the most of exhibitions (feb 2010 novotel) fraserkeithwales
The document discusses strategies for maximizing business opportunities from overseas exhibitions and trade shows. It provides tips for choosing the right event, effective preparation and planning, generating qualified leads at the event, and following up afterwards. The key recommendations are to set SMART objectives focused on qualified leads that can translate to new business within 6-18 months, properly prepare exhibits and promotional materials, identify prospects that have money, authority and needs, and thoroughly follow up on leads post-event.
Team Music Otters is developing an app called Everybody DJ to allow groups to easily request and play music together at parties without the problems of bad music selection or censorship. The app will integrate music suggestions and storage from services like Google Music and allow seamless interaction between devices and computers to let any device act as the DJ through a easy to use interface. However, challenges remain in integrating the app's music library capabilities for app store approval and compatibility across different device types.
Gestão da informação com apache solr e drupalPedro Rocha
O documento discute como o Apache Solr pode ser usado para melhorar a gestão da informação no Drupal. Ele explica o que é o Drupal e o Solr, como o Solr indexa e pesquisa diversos tipos de dados, e como ele pode ser integrado ao Drupal para fornecer funcionalidades avançadas de busca.
Distribuições Drupal: de e-Gov a e-LearningPedro Rocha
Um dos grandes diferenciais do framework web Drupal é a possibilidade de criar "Distribuições"(Distros), que são pacotes pré-configurados para atender casos específicos, como sites governamentais, sites de mídia, sites educationais, e-commerce, intranets, redes sociais, CRM, etc.
Vagrant + chef cookbooks ambiente de desenvolvimento como o de produção em ...Tiago Butzke
O documento descreve como configurar um ambiente de desenvolvimento virtual usando as ferramentas Vagrant e Chef em 7 passos: 1) Instalar VirtualBox e Vagrant, 2) Adicionar uma "caixa" virtual, 3) Configurar o arquivo Vagrantfile, 4) Iniciar a máquina virtual, 5) Utilizar comandos Vagrant, 6) Criar diretórios para cookbooks, dados e funções, 7) Adicionar e executar um cookbook para instalar pacotes.
Prospects of development of publicly-owned roof solar powerinfoclimateorg
Ukraine has the legislative framework to support development of privately-owned roof solar power plants (PRSPs), including availability of a green tariff and clarified rules. However, there are also several obstacles, such as complicated permitting procedures, high risks due to uncertainty about receiving the green tariff, and a lack of public awareness. While PRSPs can provide benefits like energy independence and use of clean energy, the government needs to further support the market through measures like simplifying approvals, reducing local content requirements, and information campaigns to boost understanding and trust in solar projects.
A linguagem C# aproveita conceitos de muitas outras linguagens,
mas especialmente de C++ e Java. Sua sintaxe é relativamente fácil, o que
diminui o tempo de aprendizado. Todos os programas desenvolvidos devem
ser compilados, gerando um arquivo com a extensão DLL ou EXE. Isso torna a
execução dos programas mais rápida se comparados com as linguagens de
script (VBScript , JavaScript) que atualmente utilizamos na internet
As classes de modelagem podem ser comparadas a moldes ou
formas que definem as características e os comportamentos dos
objetos criados a partir delas. Vale traçar um paralelo com o projeto de
um automóvel. Os engenheiros definem as medidas, a quantidade de
portas, a potência do motor, a localização do estepe, dentre outras
descrições necessárias para a fabricação de um veículo
O documento discute layout responsivo, fornecendo definições, princípios e exemplos. Explica como criar interfaces flexíveis para diferentes dispositivos através de planejamento, uso de frameworks e media queries. Também lista vantagens como SEO, identidade visual e experiência do usuário.
LESS CSS (Pré compiladores) - IntroduçãoMarcos César
Noções básicas de pré compiladores CSS. LESSCSS. http://lesscss.org/
Material de estudos elaborado por Marcos César // www.marcoscesar.com
Todo o conteúdo é livre e pode ser copiado, consultado sempre e divulgado em toda internet desde que citados os créditos.
cc 2012 Construsite Brasil - Desenvolvimento web.
Electron: o poder da Web (e Node.js) em seu DesktopFilipe Falcão
A popularização de serviços cross-platform no desenvolvimento de aplicações mobile utilizando tecnologias web se torna cada vez mais popular e aceita pela comunidade. Cordova e, principalmente, Ionic chamaram a atenção para o crescimento dessa tendência. Fica a pergunta: será que em um ambiente Desktop, onde o poder de hardware geralmente é mais considerável, um aplicativo cross-platform com tecnologias web se comporta eficientemente? Nosso amado GitHub nos ajuda a responder essa pergunta com uma mãozinha do Electron, a ferramenta utilizada por Microsoft, Slack, Docker, Ionic e outros para criação de Desktop apps. Com esta talk irei mostrar as vantagens, desvantagens, ferramentas, tendências e, principalmente, porque você deveria adicionar do Electron à sua stack.
Node.js: 5 razões para começar a utilizarFilipe Falcão
Node.js possui diversas vantagens como back-end, incluindo ser baseado em JavaScript, ser rápido devido ao motor V8 e I/O assíncrono, e suportar alta concorrência através de loop de eventos único. O framework MEAN (MongoDB, Express, AngularJS e Node) permite criar sistemas completos usando todas essas ferramentas em JavaScript.
Making the most of exhibitions (feb 2010 novotel) fraserkeithwales
The document discusses strategies for maximizing business opportunities from overseas exhibitions and trade shows. It provides tips for choosing the right event, effective preparation and planning, generating qualified leads at the event, and following up afterwards. The key recommendations are to set SMART objectives focused on qualified leads that can translate to new business within 6-18 months, properly prepare exhibits and promotional materials, identify prospects that have money, authority and needs, and thoroughly follow up on leads post-event.
Team Music Otters is developing an app called Everybody DJ to allow groups to easily request and play music together at parties without the problems of bad music selection or censorship. The app will integrate music suggestions and storage from services like Google Music and allow seamless interaction between devices and computers to let any device act as the DJ through a easy to use interface. However, challenges remain in integrating the app's music library capabilities for app store approval and compatibility across different device types.
Gestão da informação com apache solr e drupalPedro Rocha
O documento discute como o Apache Solr pode ser usado para melhorar a gestão da informação no Drupal. Ele explica o que é o Drupal e o Solr, como o Solr indexa e pesquisa diversos tipos de dados, e como ele pode ser integrado ao Drupal para fornecer funcionalidades avançadas de busca.
Distribuições Drupal: de e-Gov a e-LearningPedro Rocha
Um dos grandes diferenciais do framework web Drupal é a possibilidade de criar "Distribuições"(Distros), que são pacotes pré-configurados para atender casos específicos, como sites governamentais, sites de mídia, sites educationais, e-commerce, intranets, redes sociais, CRM, etc.
Vagrant + chef cookbooks ambiente de desenvolvimento como o de produção em ...Tiago Butzke
O documento descreve como configurar um ambiente de desenvolvimento virtual usando as ferramentas Vagrant e Chef em 7 passos: 1) Instalar VirtualBox e Vagrant, 2) Adicionar uma "caixa" virtual, 3) Configurar o arquivo Vagrantfile, 4) Iniciar a máquina virtual, 5) Utilizar comandos Vagrant, 6) Criar diretórios para cookbooks, dados e funções, 7) Adicionar e executar um cookbook para instalar pacotes.
Prospects of development of publicly-owned roof solar powerinfoclimateorg
Ukraine has the legislative framework to support development of privately-owned roof solar power plants (PRSPs), including availability of a green tariff and clarified rules. However, there are also several obstacles, such as complicated permitting procedures, high risks due to uncertainty about receiving the green tariff, and a lack of public awareness. While PRSPs can provide benefits like energy independence and use of clean energy, the government needs to further support the market through measures like simplifying approvals, reducing local content requirements, and information campaigns to boost understanding and trust in solar projects.
A linguagem C# aproveita conceitos de muitas outras linguagens,
mas especialmente de C++ e Java. Sua sintaxe é relativamente fácil, o que
diminui o tempo de aprendizado. Todos os programas desenvolvidos devem
ser compilados, gerando um arquivo com a extensão DLL ou EXE. Isso torna a
execução dos programas mais rápida se comparados com as linguagens de
script (VBScript , JavaScript) que atualmente utilizamos na internet
As classes de modelagem podem ser comparadas a moldes ou
formas que definem as características e os comportamentos dos
objetos criados a partir delas. Vale traçar um paralelo com o projeto de
um automóvel. Os engenheiros definem as medidas, a quantidade de
portas, a potência do motor, a localização do estepe, dentre outras
descrições necessárias para a fabricação de um veículo
2. Construsite Brasil
Criação de sites
PRINCIPAIS Níveis de elementos HTML
(table, block, list-item, inline, inline-block)
3. Construsite Brasil
Criação de sites
Elementos invisíveis
(base, link, meta, script, style, title)
NÃO SÃO ELEMENTOS DE CONTEÚDO REAL PARA O USUÁRIO, SÃO ESPECIFICAÇÕES
E ORIENTAÇÕES PARA OS NAVEGADORES E MECANISMOS DE BUSCA ORGÂNICA.
4. Construsite Brasil
Criação de sites
Elementos a nível de bloco
{títulos (h1, h2, h3...), p, div, section, article, header, footer}
ELEMENTOS QUE CARREGAM CONTEÚDO REAL EM BLOCO.
5. Construsite Brasil
Criação de sites
Elementos em linha
(a, b, br, img, input, label, span, textarea, tt)
ELEMENTOS QUE CARREGAM CONTEÚDO SEGUIDOS, EM LINHA.
Lorem ipsum dolor sit amet consectetuer adipiscing ipsum dolor sit amet
Não permite estilos de
bloco, como margin.
6. Construsite Brasil
Criação de sites
Elementos de tabela
(table, inclui tr, td e tudo mais)
Endentamento
Tempo longo para
renderização.
Um elemento é
dependente do outro
para se posicionar.
ELEMENTOS ENDENTADOS E QUE CAUSAM “DEPENDÊNCIA“
Lorem ipsum dolor Lorem ipsum dolorLorem ipsum dolor sit amet,
consectetuer adipiscing
Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat. Duis
autem vel eum iriure dolor in hendrerit in vulputate velit
esse molestie consequat, vel illum dolore eu feugiat nulla
facilisis at vero eros et accumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te
feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer
adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat
volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in
vulputate velit esse molestie consequat.
Problema!
Mesmo se você definir a altura do elemento
da tabela ele será adaptado de acordo com o
tamanho do conteúdo.
yoooop (travado)
7. Construsite Brasil
Criação de sites
Elementos de lista
(ul, li)
ELEMENTOS DE ORDEM, LISTAGEM
Lorem ipsum dolor sit amet
consectetuer adipiscing elit
Sed diam nonummy nibh
Euismod tincidunt ut laoreet
Dolore magna aliquam erat volutpat
Ut wisi enim ad minim veniam
Quis nostrud exerci tation
Ullamcorper suscipit lobortis
Nisl ut aliquip ex ea commodo consequat
Duis autem vel eum iriure
Olor in hendrerit in
9. Construsite Brasil
Criação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-
lisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et ac
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit.
float: right
float: left
margin
Observação:
Maior tempo de renderização se
comparado com position, pois o texto
depende do bloco para se posicionar.
10. Construsite Brasil
Criação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-
lisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad
minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex
ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio
dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit
in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et ac
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla
facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea
commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat,
vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis
nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit.
float: right
float: left
Os elementos definidos com a propriedade float passam a “boiar“ em relação aos outros elementos.
Imagine um naufrágio, onde os textos são os lixos que flutuam ao lado das boias, mas não
sobrepõem uns aos outros sobre a água (mesma camada).
12. Construsite Brasil
Criação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-
lisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et ac cumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et ac cumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
position: absolute;
top:0;
left:0;
position: absolute;
bottom:0;
right:0;
Os elementos com a propriedade position de valor absolute é “tirado da camada
natural“ e posicionado.
Observação:
Menor tempo de renderização se
comparado com float, pois o texto não
depende do bloco para se posicionar.
Porém seria impossível criar o efeito
anterior.
14. Construsite Brasil
Criação de sites
<div id=”blocoGeral”>
<div id=”blocoVerde”></div>
<div id=”blocoTexto”>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed
diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis
nostrud exerci tation ullamcorper suscipit lobortis nisl ut
aliquip ex ea commodo consequat [...]
</div>
</div>
#blocoVerde {
width:200px;
height:400px;
background: #A3CC52;
float: left;
}
#blocoTexto {
clear:both;
}
15. Construsite Brasil
Criação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-
lisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
delenit augue duis dolore te feugait nulla facilisi.Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et ac cumsan et iusto odio dignissim qui
blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
float: left
clear: both
17. Construsite Brasil
Criação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-
lisi.
float: left; float: right;
Problema!
O blocoGeral não aparece.
18. Construsite Brasil
Criação de sites
<div id=”blocoGeral”>
<div class=”bloco verde fl”></div>
<div class=”bloco azul fr”></div>
</div>
#blocoGeral {
background: #333;
display: table;
}
.bloco {
width:200px;
height:400px;
}
.verde { background: #A3CC52; }
.azul { background: #3B9CD7; }
Solução 1
Definir a propriedade display com o valor table.
display:table;
19. Construsite Brasil
Criação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-
lisi.
Problema!
O blocoGeral está se comportando como tabela, a renderização é dependente.
20. Construsite Brasil
Criação de sites
<div id=”blocoGeral”>
<div class=”bloco verde fl”></div>
<div class=”bloco azul fr”></div>
</div>
#blocoGeral {
background: #333;
display: table;
width: 100%;
}
.bloco {
width:200px;
height:400px;
}
.verde { background: #A3CC52; }
.azul { background: #3B9CD7; }
Solução 1
Definir a propriedade width com o valor 100% por exemplo.
width:100%;
21. Construsite Brasil
Criação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-
lisi.
Problema!
O blocoGeral está se comportando como tabela, a renderização é dependente.
22. Construsite Brasil
Criação de sites
Problema Tabela!
Mesmo se você definir a altura do elemento a
nível de tabela ele será adaptado de acordo com o
tamanho do conteúdo que está endentado.
Isso causa mais dependência entre elementos.
23. Construsite Brasil
Criação de sites
<div id=”blocoGeral”>
<div class=”bloco verde fl”></div>
<div class=”bloco azul fr”></div>
</div>
#blocoGeral {
background: #333;
display: table;
width: 100%;
height:400px;
}
.bloco {
width:200px;
height:400px;
}
.verde {
height:600px;
background: #A3CC52;
}
.azul { background: #3B9CD7; }
Exemplo:
Definimos a propriedade height com o valor 400px e mudamos a
propriedade height da class .verde para 600px.
height:400px = #blocoGeral
height:600px = .verde
24. Construsite Brasil
Criação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-
lisi.
Problema!
O blocoGeral está se comportando como tabela, a renderização é dependente.
Problema Tabela!
Mesmo se você definir a altura do elemento
da tabela ele será adaptado de acordo com o
tamanho do conteúdo.
Problema Navegador!
A renderização de elementos a nível de
tabela variam e causam mais problemas em
diferentes navegadores.
Solução?
Esquecer tabela para casos como este.
Elemento a nível de tabela é para tabelas e
algumas exceções.
25. Construsite Brasil
Criação de sites
<div id=”blocoGeral”>
<div class=”bloco verde fl”></div>
<div class=”bloco azul fr”></div>
<div class=”cb”></div>
</div>
#blocoGeral { background: #333; }
.bloco {
width:200px;
height:400px;
}
.verde { background: #A3CC52; }
.azul { background: #3B9CD7; }
.cb { clear:both; }
.fl { float: left;}
.fr { float: right;}
Solução 2
Adicionar qualquer elemento a nível de bloco, definir
a propriedade clear com o valor both.
clear:both;
Libertando de verdade.
26. Construsite Brasil
Criação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-
lisi.
O blocoGeral está se comportando como elemento a nível de bloco, a
renderização é menos dependente.
Solução Simples!
Você pode reutilizar a classe criada para
blocos sucessores no layout, reaproveitar é
sempre a melhor opção.
27. Construsite Brasil
Criação de sites
Prova de fogo!
Mesmo que você defina a altura do elemento a nível de
bloco, ele será mantido de acordo com a definição das css,
sem dependência dos elementos flutuantes, sendo assim os
elementos flutuantes vão transbordar o seu elemento pai.
28. Construsite Brasil
Criação de sites
Exemplo:
Definimos a propriedade height com o valor 400px e mudamos a
propriedade height da class .verde para 600px.
height:400px = #blocoGeral
height:600px = .verde
<div id=”blocoGeral”>
<div class=”bloco verde fl”></div>
<div class=”bloco azul fr”></div>
<div class=”cb”></div>
</div>
#blocoGeral {
background: #333;
height: 400px;
}
.bloco {
width:200px;
height:400px;
}
.verde {
background: #A3CC52;
height: 600px;
}
.azul { background: #3B9CD7; }
29. Construsite Brasil
Criação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-
lisi.
30. Construsite Brasil
Criação de sites
Manter o nível natural dos
elementos é a melhor opção!
Exemplo: Quanto definimos uma propriedade display com o valor table
e esse elemento originalmente é um elemento a nível de bloco (display:
block; ex.: div) o navegador tem de processar ele de forma diferente
do padrão, levando mais tempo para a renderização do layout.
32. Construsite Brasil
Criação de sites
Porque utilizamos * para fazer um reset do html nas CSS?
*SELECIONA TODOS OS ELEMENTOS DESCENDENTES.
Atenção!
O grau de importância das
css selecionadas com * é
maior.
Exemplo:
<div id=”blocoGeral”>
<div class=”bloco verde”>Bloco01
<div class=”subBloco”></div>
</div>
<div class=”bloco azul”> Bloco02</div>
</div>
#blocoGeral {background: #333;}
.bloco {
width:200px;
height:400px;
}
.verde { background: #A3CC52; }
.azul { background: #3B9CD7; }
.subBloco { background: #C40303; }
33. Construsite Brasil
Criação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-
lisi.
Bloco01
Bloco02
subBloco
34. Construsite Brasil
Criação de sites
#blocoGeral * {background: #333;}
.bloco {
width:200px;
height:400px;
}
.verde { background: #A3CC52; }
.azul { background: #3B9CD7; }
.subBloco { background: #C40303; }
Se definirmos o #blocoGeral seguido pelo seletor * ele aplica a
formatação a todos os elementos descendentes.
#blocoGeral *
35. Construsite Brasil
Criação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-
lisi.
Bloco01
Bloco02
subBloco
36. Construsite Brasil
Criação de sites
SELECIONANDO ELEMENTOS FILHOS COM >
Exemplo:
<div id=”blocoGeral”>
<div class=”bloco verde”>Bloco01
<div class=”subBloco”></div>
</div>
<div class=”bloco azul”> Bloco02</div>
</div>
#blocoGeral {background: #333;}
.bloco {
width:200px;
height:400px;
}
.verde { background: #A3CC52; }
.azul { background: #3B9CD7; }
.subBloco { background: #C40303; }
37. Construsite Brasil
Criação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-
lisi.
Bloco01
Bloco02
subBloco
38. Construsite Brasil
Criação de sites
#blocoGeral > div {background: #333;}
.bloco {
width:200px;
height:400px;
}
.verde { background: #A3CC52; }
.azul { background: #3B9CD7; }
.subBloco { background: #C40303; }
Se definirmos o #blocoGeral seguido pelo seletor > para os elementos
div ele aplica a formatação a todos os div filhos.
#blocoGeral > div
39. Construsite Brasil
Criação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-
lisi.
Bloco01
Bloco02
subBloco
40. Construsite Brasil
Criação de sites
SELECIONANDO ELEMENTOS COM +
Exemplo:
<div>Bloco01</div>
<div>Bloco02</div>
<div>Bloco03</div>
<div>Bloco04</div>
div {
width:200px;
height:200px;
background: #333;
}
Conseguimos selecionar elemento determinado e seus adjacentes.
41. Construsite Brasil
Criação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-
lisi.
42. Construsite Brasil
Criação de sites
SELECIONANDO ELEMENTOS COM +
Exemplo:
<div>Bloco01</div>
<div>Bloco02</div>
<div>Bloco03</div>
<div>Bloco04</div>
div {
width:200px;
height:200px;
background: #333;
}
div+div { background: #C40303; }
Conseguimos selecionar elemento determinado e seus adjacentes.
43. Construsite Brasil
Criação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-
lisi.
44. Construsite Brasil
Criação de sites
SELECIONANDO ELEMENTOS COM +
Exemplo:
<div>Bloco01</div>
<div>Bloco02</div>
<div>Bloco03</div>
<div>Bloco04</div>
div {
width:200px;
height:200px;
background: #333;
}
div+div+div { background: #C40303; }
Conseguimos selecionar elemento determinado e seus adjacentes.
45. Construsite Brasil
Criação de sites
cumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla faci-
lisi.
46. Construsite Brasil
Criação de sites
SELETORES DE ATRIBUTOS
Conseguimos selecionar os elemento de acordo com seus atributos.
Exemplo:
input[type=”text”] { propriedade:valor; }
a[href^=”http”] { propriedade:valor; }
a[href$=”.html”] { propriedade:valor; }
seleciona todos os inputs de texto.
seleciona todos os elementos a que começam com o valor http.
seleciona todos os elementos a que terminam com o valor .html.
47. Construsite Brasil
Criação de sites
PROPRIEDADES PROPRIETÁRIAS
Conseguimos definir propriedades para um browser específico.
As propriedades proprietárias passaram a existir porque cada grupo de desenvolvedores
cria novas funcionalidades para as css mas só podem aplicar ao seu motor e não em todos.
Por exemplo:
A equipe de desenvolvedores da Apple (Webkit) criaram a funcionalidade de transição entre
estados de formatação para os elementos, a propriedade -webkit-transtition.
A equipe apresenta a solução para o orgão responsável pelo padrão de desenvolvimento web
(w3c) esses funcionalidades aos poucos vão sendo desenvolvidas e implementadas para os
motores de outros browsers como firefox (gecko), ie ou ópera.
Quando o processo de desenvolvimento chega ao término e funciona perfeitamente em todos
os browsers ele passa a ser aceito sem as propriedades proprietárias, sendo padronizada
pelo w3c.
Exemplo:
-moz
-o
-webkit
48. Construsite Brasil
Criação de sites
PROPRIEDADES PROPRIETÁRIAS
Conseguimos definir propriedades para browser específico.
Outro exemplo:
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
Exemplo:
-moz
-o
-webkit
Já está sendo implementado como padrão e reconhecido pelos navega-
dores com os motores gecko e webkit sem a necessidade da utilização de
propriedades proprietárias.
Cuidado ao utilizar geradores de
código automáico, talvez sejam
desnecessários.
49. Construsite Brasil
Criação de sites
CSS VALIDO É SEMPRE IMPORTANTE
CSS Validation Service
W3C
http://jigsaw.w3.org/css-validator/
50. Construsite Brasil
Criação de sites
Créditos
Construsite Brasil
Criação de sites
www.construsitebrasil.com
Marcos César
Desenvolvedor front-end e Designer
Material elaborado por:
51. Construsite Brasil
Criação de sites
Referêcias
6 estratégias para melhorar a organização do seu CSS/ Algumas estratégias simples podem ser utilizadas para deixar o seu CSS mais organizado, consistente e de fácil
manutenção. Tabeless. [acesso em 26 de novembro de 2012]. Disponível em: http://tableless.com.br/6-estrategias-para-melhorar-a-organizacao-do-seu-css-2/
Christopher Schmitt. Livro: CSS Cookbook/Soluções rápidas para problemas comuns com CSS. Novatec Editora Ltda. 2010.
Eric A. Meyer, CSS: The Definitive Guide. O’Reilly Media; Third Edition edition (November 14, 2006).
Diego Eis Elcio Ferreira. Livro: HTML5 e CSS3 com farinha e pimenta.
W3C, CSS Validation Service. Disponível em: http://jigsaw.w3.org/css-validator/acess
Bernard De Luna - Sexy web projects specialist | Web design speaker and teacher. Disponível em: http://bernarddeluna.com/
Zeno Rocha | HTML5, CSS3 e JavaScript. Disponível em: http://zenorocha.com/
CSS3 Generator. Disponível em: http://css3generator.com/
WebPlatform Docs. Disponível em: http://docs.webplatform.org