• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Seu desenho vai virar código, e agora?
 

Seu desenho vai virar código, e agora?

on

  • 3,855 views

Palestra ministrada no dia 30 de janeiro na Campus Party Brasil 2010....

Palestra ministrada no dia 30 de janeiro na Campus Party Brasil 2010.
"Quais dificuldades existem na hora de transformar o seu layout em uma página da Web. O que um designer precisa saber de CSS antes de iniciar o projeto de um layout? Quais os novos recursos o CSS3 nos traz, e quais os ganhos visuais na hora de projetar layouts para essa linguagem."

Statistics

Views

Total Views
3,855
Views on SlideShare
3,489
Embed Views
366

Actions

Likes
5
Downloads
162
Comments
1

7 Embeds 366

http://www.agni.art.br 328
http://blog.ufpr.br 14
http://www.inovaremos.com.br 10
http://www.slideshare.net 4
http://cedefes.blogspot.com 4
http://cedefes.blogspot.com.br 4
http://localhost 2
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

11 of 1 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Seu desenho vai virar código, e agora? Seu desenho vai virar código, e agora? Presentation Transcript

    • CSS é como xadrez... “Você pode aprender os princípios em um dia, E passar a vida inteira Se especializando” (Chris Coyier | css-tricks.com) www.agni.art.br 2
    • O conceito ideal... Web dividida em três camadas: ✔ Conteúdo (XHTML) ✔ Apresentação (CSS) ✔ Comportamento (Javascript) Devem ser desenvolvidas de forma independente, porém uma complementa a outra www.agni.art.br 3
    • Div isão em Camadas... Javascript XHTML CSS CSS CSS www.agni.art.br 4
    • CSS: Cascading Style S heets Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento. Pode-se definir apresentações especificas para diferentes dispositivos (Tvs, Celulares e PDAs, Impressoras, etc) apenas criando folhas de estilo alternativas. www.agni.art.br 5
    • CSS: Cascading Style S heets Podemos inserir código CSS diretamente dentro de uma marcação (inline) ou entre as marcações <head></head> (Interno). Porém, a forma mais correta é criar um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas do site. s" /> <link href="estilo.css" rel="stylesheet" type="text/cs www.agni.art.br 6
    • Caso: CSS Zen Garden O Zen Garden tem como alvo entusiasmar, inspirar e encorajar a separação do Conteúdo (HTML) da Apresentação (CSS) Mostrar as enormes possibilidades de se obter belos Layouts através do CSS Como exemplo, podemos Acessar os links e visualizar diversos Layouts diferentes. O código HTML permanece o mesmo, a única coisa que muda é o arquivo CSS externo. www.agni.art.br 7
    • www.agni.art.br 8
    • www.agni.art.br 9
    • www.agni.art.br 10
    • Folhas de Estilo seletor { propriedade: valor; } seletor: Marcação HTML ou identificador propriedade: O que será alterado valor: O valor de alteração body { font-family: Arial, Verdana, sans-serif; background-color: #FFF; margin: 5px 10px; } www.agni.art.br 11
    • Elementos de Bloco... Exemplos: margin-top: 20px; margin: 10px 20px 50px 30px; padding-left: 25px; padding: 20px 40px; border-left-width: 3px; border-top-style: dotted; border-color: #FF0000; border: 1px solid #333; www.agni.art.br 12
    • Elementos de Bloco... Exemplos: position: absolute; top: 20px; left: 60px; background-color: #ccc; background-image: url(cominho/imagem.jpg); background-repeat: no-repeat; www.agni.art.br 13
    • Estilizando Texto... Exemplos: color: #5d665b; font-family: Verdana, Arial, sans-serif; font-size: small; line-height: 180%; font-weight: bold; www.agni.art.br 14
    • Estilizando Listas... Exemplos: list-style-image: url(caminho/marcador.gif); list-style-position: outside; list-style-type: square; www.agni.art.br 15
    • Estilizando Links... Exemplos: a:link {color: #696; text-decoration: none; background-color: transparent} a:visited {color: #699; text-decoration: none; background-color: transparent} a:hover {color: #c93; text-decoration: underline; background-color: transparent} a:active {color: #900; text-decoration: underline; background-color: transparent } www.agni.art.br 16
    • Outros estilos... Flutuação: Float: left; Visualização: Display: block; Display: inline; Controlando o tamanho dos elementos: Overflow: auto; Overflor: scroll; www.agni.art.br 17
    • CSS2 ainda fica devend o... #Fail... Hoje os Designers e Desenvolvedores ainda tem que se virar pra conseguir certos efeitos gráficos como sombras em objetos e textos, cantos arredondados, fazer multiplas camadas de planos de fundo, inserir opacidade nos elementos, trabalhar com diferentes famílias tipográficas, trabalhar com colunas de textos... www.agni.art.br 18
    • CSS3 Com o CSS3 teremos maior controle sobre o estilo dos elementos da página, sem ter que recorrer a Hacks ou truques para isso. Propriedades para cantos arredondados, ou sombras em textos estarão disponíveis na nova versão da linguagem, sem precisarmos recorrer ao uso de imagens. Informações - http://www.css3.info www.agni.art.br 19
    • Muito Obrigado :) os de Agni é diretor de arte online, trabalha com projet interface, web standards e criação. www.twitter.com/eduagni www.formspring.me/eduagni www.a gni.art.br www.agni.art.br 20