Montando sites com XHTML e CSS utilizando os padrões web
Upcoming SlideShare
Loading in...5
×
 

Montando sites com XHTML e CSS utilizando os padrões web

on

  • 15,177 views

Apresentação do minicurso realizado na UFC-Quixadá de 20 a 24 de julho de 2009.

Apresentação do minicurso realizado na UFC-Quixadá de 20 a 24 de julho de 2009.

Statistics

Views

Total Views
15,177
Views on SlideShare
15,101
Embed Views
76

Actions

Likes
8
Downloads
506
Comments
0

7 Embeds 76

http://www.slideshare.net 44
http://blog.ufpr.br 14
http://hjtem.suasideias.com.br 9
http://cedefes.blogspot.com.br 4
http://cedefes.blogspot.com 2
http://guardioesdorio2.blogspot.com.br 2
http://guardioesdorio2.blogspot.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Montando sites com XHTML e CSS utilizando os padrões web Montando sites com XHTML e CSS utilizando os padrões web Presentation Transcript

  • Programa
    1º Dia: Um pouco de história
    2º Dia: Mão na massa - Site do WTISC
    3º Dia: Montando a página Programação (Tabelas)
    4º Dia: Montando a página Inscrições (Formulário)
    5º Dia: Um pouco de JavaScript e FTP
  • 1º Dia:
    Um pouco de história
  • Como tudo começou
    A Web foi criado em 1989, por Tim Berners-Lee, para ser um padrão de publicação e distribuição de textos científicos e acadêmicos.
    Localizador Uniforme de Recursos (URL)
    Linguagem de Marcação de Hipertexto (HTML)
    Protocolo de Transferência de Hipertexto (HTTP)
    Navegador Web (Browser)
  • A Bagunça
    A Web cresce comercialmente,
    e veema necessidade de publicação de conteúdo diagramado,
    como em revistas e jornais
    (algo para o qual o HTML não possuiarecursos).
    Há então a adaptação da linguagem
    de forma equivocada,
    com uma preocupação unicamente visual, esquecendo da qualidade do código.
  • A Guerra dos Browsers
    Aproximadamente entre 1995 e 1999 houve a chamada “Guerra dos Browsers”, onde a Netscape (e seu Browsers de mesmo nome) e a Microsoft (com o seu Internet Explorer) disputavam o mercado de navegadores.
    Além de não darem suporte aos padrões do recém criadoWorld Wide Web Consortium (W3C),aindacriavam seus próprios padrões, aumentando a bagunça.
  • Editores WYSIWYG
    "O que você vê é o que você tem", ou em inglês "What You See Is What You Get" (WYSIWYG) sãoprogramas que lhe permitem ter a visualização final de um documento, enquanto o mesmo ainda é editado.
    Editores HTML WYSIWYG comoGo Live, Front Page e Dreamweaversurgiram por volta de 1996, e são conhecidos por gerar um código sujo e muito maior que o necessário.
  • Cursos e Profissionais desatualizados
  • Com tudo isso...
    Cada arquivos de um site acaba sendo um incompreensível emaranhado de Tags
    com tabelas, formatações, scripts...
    Tudo muito maior que o necessário.
    Dessa forma, para que seja feita alguma alteração no site, é necessário alterar todos os arquivos...
    um a um!
  • Os Padrões Web
    Padrões Web ou Web Standards são um conjunto de normas, diretrizes, recomendações, notas, artigos, tutoriais e afins de caráter técnico, produzidos pelo W3C e destinados a orientar fabricantes, desenvolvedores e projetistas para o uso de práticas que possibilitem a criação de uma Web acessível a todos, independentemente dos dispositivos usados ou de suas necessidades especiais.
    XHTML – HTML – CSS – DOM – XML – SVG – SOAP – ...
  • O que é W3C?
    W3C (World Wide Web Consortium) é um consórcio de empresas de tecnologia. Fundado por Tim Berners-Lee em 1994 para levar a Web ao seu potencial máximo.
    Desenvolve Recomendações abertas,
    até agora mais de 80 padrões...
    www.w3.org
  • Web Standards Project
    O Web Standards Project (WaSP) é um grupo formado em 1998 com o objetivo de promover os Padrões Web, assegurando desse modo um acesso simples e com menos custos para todos.
    Vem encorajando e persuadindo os fabricantes de Browsers a fornecerem suporte aos padrões, como o XHTML, CSS, ECMAScript (a versão standard do JavaScript) e o DOM.
    www.webstandards.org
  • Mudança de Conceito...
    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.
  • Mudança de Conceito...
  • Sem Padrões x Com Padrões
    ✗ Extensão da
    Mídia Impressa
    ✗ Layout baseado
    em Tabelas
    ✗ Conteúdo,
    Apresentação e
    Comportamento
    “aninhados”
    ✗ Código
    Incompreensível
    ✔ Acessível de
    qualquer
    dispositivo
    ✔ Layout baseado
    em CSS
    ✔ Separação entre
    Conteúdo,
    Apresentação e
    Comportamento
    ✔ Código Acessível
  • Vantagens da adoção dos Padrões
    Carregamento mais rápido
    Menores custos com hospedagem
    Melhor Consistência Visual
    Redesign mais barato e eficiênte
    Melhores resultados nos Mecanismos de Buscas
    Maior acessibilidade e interoperabilidade
  • Tableless x Web Standards
    Tableless é um termo que ficou muito popular no Brasil, e que acaba por confundir muita gente.
    Tableless significa (resumidamente) um site desenvolvido sem o antiquado uso das tabelas para organizar o layout, e sim usando CSS.
    Criar um site Tableless não significa que esteja seguindo os Padrões Web, que vão muito além de um código válido, e tem preocupações maiores como a Semântica e a Acessibilidade.
  • HTML
    HTML é a abreviação para HyperText Markup Language, que pode ser traduzido como Linguagem de Marcação para Hipertexto.
    Compõe a estrutura de uma página Web através de etiquetas (tags) e atributos.
  • HTML
    O HTML sofreu várias mudanças em suas diferentes versões, com o objetivo de estender a linguagem para que pudesse acompanhar a evolução da Web e das tecnologias nela inseridas.
    Versões do HTML:
    HTML 2.0 (Novembro de 1995)
    HTML 3.2 (Janeiro de 1997)
    HTML 4.0 (Dezembro de 1997)
    HTML 4.01 (Dezembro de 1999)
    ISO/IEC 15445:2000 "ISO HTML" (Maio de 2000)
    HTML 5 (Janeiro de 2008)
  • XML: eXtensible Markup Language
    Criada para suprir a falta de flexibilidade do HTML.
    Separação do conteúdo da formatação.
    Simplicidade e Legibilidade, para humanos e computadores.
    Criação de arquivos para validação de estrutura.
    Interligação de bancos de dados distintos.
    Concentração na estrutura da informação.
  • XHTML
    O (X)HTML, ou eXtensible Hypertext Markup Language, é uma reformulação da linguagem de marcação HTML baseada em XML.
    Pode ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada, pois as marcações possuem sentido semântico para as máquinas.
  • Um Código Semântico
    Semântica refere-se ao estudo do significado.
    Quando utilizamos cada marcação para o que ela realmente foi criada, estamos construindo um “Código Semântico”.
    Parar de pensar em “isso vem aqui, isso vai ali...” e pensar na “Estrutura da Informação”
    Criar uma “Marcação com Significado”.
  • Marcação Semântica
    Usar <table></table> apenas para dados tabulares
    Usar <h1></h1> até <h6></h6> para títulos
    Usar <ol></ol> para Listas Ordenadas e <ul></ul> para
    Listas Não Ordenadas, seguidos do elemento <li></li>
    Usar <em></em> para Enfase,
    e <strong></strong> para Enfase Forte
  • Versões do XHTML
    XHTML é uma linguagem que começou como uma reformulação do HTML 4.01
    usando XML 1.0:
    XHTML 1.0 (Janeiro de 2000)
    XHTML 1.1: (Maio de 2001)
    XHTML 2.0: Ainda é um projeto de trabalho do W3C.
    XHTML 5.0: é uma atualização para o XHTML 1.x, está sendo definido juntamente com o HTML5 no mesmo projeto.
  • DTD: DocumentTypeDefinition
    Um padrão que define as partes de um documento, e descrevem como eles podem ou não ser usados, o que pode ser colocado em seus interiores, e se são ou não elementos obrigatórios do documento.
    Descreve com precisão a sintaxe e a gramática da linguagem de marcação XHTML.
  • XHTML 1.0 - DOCTYPE:
    Strict
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    Transitional
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    Frameset
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  • XHTML – Elementos obrigatórios:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <htmlxmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>XHTML Base</title>
    </head>
    <body>
    <p>Conteúdo</p>
    </body>
    </html>
  • Diferenças entre XHTML e HTML
    Documentos devem ser bem-formados
    Todas as tags devem ser escritas com letras minúsculas
    Tags devem estar convenientemente aninhadas
    Uso de tags de fechamento é obrigatório
    Elementos vazios devem ser fechados
    Diferença na sintaxe dos atributos
  • Diferenças entre XHTML e HTML
    Documentos devem ser bem-formados
    A estrutura básica do documento deve ser conforme mostrado a seguir:
    <html>
    <head>
    ...
    </head>
    <body>
    ...
    </body>
    </html>
  • Diferenças entre XHTML e HTML
    Todas as tags devem ser escritas com letras minúsculas
    Errado:
    <DIV><P>Aqui um texto!</P></DIV>
    Correto:
    <div><p>Aqui um texto!</p></div>
  • Diferenças entre XHTML e HTML
    Tags devem estar convenientemente aninhadas
    Errado:
    <div><p>Aqui um <em>texto!</p></em></div>
    Correto:
    <div><p>Aqui um <em>texto! </em></p></div>
  • Diferenças entre XHTML e HTML
    Uso de tags de fechamento é obrigatório
    Errado:
    <p>Um parágrafo.
    Correto:
    <p>Um parágrafo.</p>
  • Diferenças entre XHTML e HTML
    Elementos vazios devem ser fechados
    Errado:
    <br>
    <imgsrc=“imagem.gif” alt=“uma imagem”>
    Correto:
    <br />
    <imgsrc=“imagem.gif” alt=“uma imagem” />
  • Diferenças entre XHTML e HTML
    Diferença na sintaxe dos atributos
    Errado:
    <td ROWSPAN=3>
    <input checked>
    Correto:
    <tdrowspan=“3”>
    <input checked=“checked”>
  • XHTML: Recomendações
    Aplicamos “Itálico” em um texto para dar ênfase...
    Ao invés da marcação <i></i>,
    use <em></em>, ou então <cite></cite>
    se for uma citação (de um livro, por exemplo)
    Para uma ênfase forte,
    ao invés de <b></b>,
    use a marcação<strong></strong>
  • XHTML: Recomendações
    Um menu nada mais é
    do que uma lista de opções...
    Então, use as marcações de
    Lista não-ordenada
  • CSS: Cascading Style Sheets
    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 aseparaçã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.
  • CSS: Cascading Style Sheets
    CSS 1.0 … CSS level 1
    Em setembro de 1994 surgiu a primeira proposta
    Emdezembro de 1996 lançadacomoRecomendaçãooficial do W3C
    CSS 2.0 … CSS level 2
    Publicadaemmaio de 1998
    Ultimarevisão: 12 de maio de 2008
    CSS 2.1 … CSS level 2 revision 1
    Candidata a Recomendaçãooficial do W3C em 23 de abril de 2009
    CSS 3.0 … CSS level 3
    Propostaem 2001
  • Associar CSSs a documentos HTML
    Inline
    Através do atributostyle diretamente dentro de uma marcação
    Interno
    Através da tag style entre as marcações <head></head> do documento HTML
    Externo
    Criar um link (ligação) para uma página que contém os estilos.
    <link href="estilo.css" rel="stylesheet" type="text/css" />
  • CSS: Cascading Style Sheets
  • CSS: Seletor classe
    Uma classe define a variação de um estilo.
    É referenciado através de uma ocorrência específica de um elemento utilizando o atributo class.
    Serve para definirváriosestilosdiferentespara o mesmoelemento.
    Defenidopelo .
    Exemplo:
    - no CSS: h4.diferente {color:red;}
    - no XHTML: <h4 class=“diferente”>Titulo</h4>
  • CSS: Seletor id
    Semelhante ao Seletor classe.
    A diferençaé que utiliza o atributo id, que serve para identificar exclusivamente um determinado elemento no documento.
    Defenido pelo #
    Exemplo:
    - no CSS: #header {width:900px;}
    - no XHTML: <div id=“header”>…</div>
  • CSS: Comentários
    Assim como em qualquer linguagem de programação, em CSS é possível adicionar comentários para melhor documentar o código.
    Exemplo:
    /* Comentário */
  • display: Define como um elemento é exibido.
    Ex: display: none;
    float: Faz o elemento flutuar à esquerda ou à direita do restante do conteúdo.
    Ex: float: left;
    CSS: Propriedades
  • margin-top, margin-right, margin-bottom e margin-left: Define a margem superior, direita, inferior e esquerda de um elemento.
    Ex: margin-top: 10px;
    padding-top, padding-right, padding-bottom e padding-left: Define a área superior, direita, inferior e esquerda de espaçamento de um elemento.
    Ex: padding-right: 5px;
    CSS: Propriedades
  • font-family: Relação de nomes específicos de famílias de fontes ou de seus nomes genéricos.
    Ex: font-family: Arial, Helvetica, sans-serif;
    font-size: Define o tamanho de uma fonte.
    Ex: font-size: 11px;
    font-weight: Define o peso de uma fonte.
    Ex: font-weight: bold;
    color: Define a cor do texto.
    Ex: color: red;
    CSS: Propriedades
  • text-align: Alinha o texto em um elemento.
    Ex: text-align: center;
    text-decoration: Acrescenta decoração de texto.
    Ex: text-decoration: underline;
    CSS: Propriedades
  • background-color: Define a cor de fundo de um elemento.
    Ex: background-color: blue;
    background-image: Define uma imagem como plano de fundo.
    Ex: background-image: url(images/bg.jpg);
    background-repeat: Define como uma imagem de fundo será repetida.
    Ex: background-repeat: no-repeat;
    CSS: Propriedades
  • border-width: Define a largura da borda de um elemento.
    Ex: border-width: 3px;
    border-style: Define o estilo da borda.
    Ex: border-style: dotted;
    border-color: Define a cor da borda.
    Ex: border-color: #000000;
    CSS: Propriedades
  • CSS e o Designer
    CSS é a linguagem do designer.
    Designer de web precisa saber CSS.
    Design não é nada sem controle.
    O CSS, dá o controle.
    Diego Eis - tableless.com.br
  • O Poder do CSS
    O CSS Zen Gardentem 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.csszengarden.com
  • Validadores
    Validador de HTML, XHTML, XML e
    http://validator.w3.org
    Validador de Folhas de Estilo CSS
    http://jigsaw.w3.org/css-validator
  • Fixe bem...
    “XHTML para estruturar
    e
    CSS para apresentar (formatação).”
  • Agradecimentos
    Grande parte dos slides utilizados aqui foram retirados da apresentação “Web Standards” de Eduardo Santos que prontamente me foram cedidos para ajudar na disseminação dos Padrões Web.
    Todos os créditos a ele.
  • Referências
    Silva, Maurício Samy – Construindo sites com CSS e (X)HTML. -- São Paulo: Novatec, 2008.
    www.w3.org
    www.w3schools.com
    www.maujor.com
    www.tableless.com.br
    www.cssnolanche.com.br
  • Dúvidas?
  • 2º Dia:
    Mão na massa – Site do WTISC
  • Mão na massa - Site do WTISC
    Passos:
    XHTML Padrão
    CSS Padrão
    Página Programação
    Trabalhando com tabelas
    Página Inscrições
    Trabalhando com formulários
  • Mão na massa - Site do WTISC
    Vamos aos trabalhos... Inicie o Editor.
    OBS: O site foi todo montado durante o minicurso.
    Link para o material final:
    www.igorpimentel.com/minicursos/xhtmlcss.zip
  • Obrigado!;)