0
Estruturação Web Dreamweaver, (x)html e css Professor Fabiano Pereira
O que é estruturação? <ul><li>Fazer o código (x)html, desenvolver o css para formatação visual. </li></ul><ul><li>Parte-se...
É necessário saber (x)html/css? <ul><li>A web é inteiramente baseada em tais linguagens de estruturação visual. </li></ul>...
Como aprender? <ul><li>Orientações corretas, bons professores. </li></ul><ul><li>Evitar livros, apostilas e tutoriais de q...
O que são web standards? <ul><li>Padrões de desenvolvimento, dizem respeito ao conjunto de normas que devem ser utilizados...
Web Standards: <ul><li>Recomendam a utilização do DOCTYPE xhtml 1.0 (transitional e strict). </li></ul><ul><li>Recomendam ...
Dreamweaver <ul><li>Editor de código WYSWYG (edição visual do código), aumenta produtividade. </li></ul><ul><li>Permite cr...
Dreamweaver: armadilhas! <ul><li>Profissional web deve conhecer código, fazendo sites até com bloco de notas. </li></ul><u...
Dreamweaver: benefícios <ul><li>Facilita a produção web. </li></ul><ul><li>Oferece recursos de aprendizado. </li></ul><ul>...
Conclusões Finais <ul><li>Deve-se conhecer (x)html e css. </li></ul><ul><li>Não abrir mão das facilidades oferecidas pelo ...
Links Sugeridos: <ul><li>http://www.w3.org/2005/11/Translations/Lists/OverviewLang.html#pt-br </li></ul><ul><li>http://www...
Upcoming SlideShare
Loading in...5
×

Estruturação Web

719

Published on

Apresentação utilizada para introduzir meus alunos no mundo da estruturação com (x)html/css. A novidade, aqui, é apresentar os prós e contras da utilização de ferramentas WYSWYG, como o dreamweaver.
Questões como a organização do código e a cobrança do mercado web para que o profissional conheça tais técnicas também são abordadas.

Apresentação baseado em artigo "(x)html/css para design de interfaces", que pode ser lido no seguinte endereço:
http://www.fabianoweb.net/blog/2008/10/xhtml-e-css-para-design-de-interfaces-1/

Grande abraço!

Published in: Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
719
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
24
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Estruturação Web"

  1. 1. Estruturação Web Dreamweaver, (x)html e css Professor Fabiano Pereira
  2. 2. O que é estruturação? <ul><li>Fazer o código (x)html, desenvolver o css para formatação visual. </li></ul><ul><li>Parte-se de um lay-out pronto e aprovado, feito em algum programa para criação visual. </li></ul><ul><li>Transformar lindos arquivos .psd em páginas web que funcionem corretamente, de maneira satisfatória. </li></ul>
  3. 3. É necessário saber (x)html/css? <ul><li>A web é inteiramente baseada em tais linguagens de estruturação visual. </li></ul><ul><li>Não saber é como morar na Inglaterra, sem o conhecimento de inglês fluente. </li></ul><ul><li>O mercado profissional EXIGE tal conhecimento, para designers e programadores. </li></ul>
  4. 4. Como aprender? <ul><li>Orientações corretas, bons professores. </li></ul><ul><li>Evitar livros, apostilas e tutoriais de qualidade duvidosa, antiquados. </li></ul><ul><li>Aplicar conceitos padronizados, sem vícios ou ‘quebra-galhos”. </li></ul><ul><li>Conhecer o código à fundo, sem dependência somente do editor visual. </li></ul><ul><li>Aplicar as Web Standards. </li></ul>
  5. 5. O que são web standards? <ul><li>Padrões de desenvolvimento, dizem respeito ao conjunto de normas que devem ser utilizados. </li></ul><ul><li>Garantem o acesso democrático ao conteúdo de seu site web. </li></ul><ul><li>Otimiza a localização de seu site pelo google, aumentando o lucro. </li></ul>
  6. 6. Web Standards: <ul><li>Recomendam a utilização do DOCTYPE xhtml 1.0 (transitional e strict). </li></ul><ul><li>Recomendam o repúdio aos códigos antiquados e “sujos”. </li></ul><ul><li>Utilizar a semântica (usar o comando – tag para o fim original para qual foi criada). </li></ul><ul><li>Recomendam acessibilidade. </li></ul>
  7. 7. Dreamweaver <ul><li>Editor de código WYSWYG (edição visual do código), aumenta produtividade. </li></ul><ul><li>Permite criação de páginas sem “sujar as mãos” com códigos xhtml/css. </li></ul><ul><li>Oferece ferramentas diversas para a organização e produção de conteúdo. </li></ul><ul><li>Melhor editor xhtml/css pago do mercado </li></ul>
  8. 8. Dreamweaver: armadilhas! <ul><li>Profissional web deve conhecer código, fazendo sites até com bloco de notas. </li></ul><ul><li>Gera código sujo, não-semântico. Assim, se o profissional não conhecer xhtml/css, o código irá ao ar com diversos erros. </li></ul><ul><li>Oferece recursos não recomandados atualmente. Falta de cultura geral leva ao uso errado de recursos. </li></ul>
  9. 9. Dreamweaver: benefícios <ul><li>Facilita a produção web. </li></ul><ul><li>Oferece recursos de aprendizado. </li></ul><ul><li>Integração com demais ferramentas. </li></ul><ul><li>Edita, facilmente, blocos complexos de código, com correções diversas. </li></ul><ul><li>Indispensável no dia-a-dia do profissional. </li></ul>
  10. 10. Conclusões Finais <ul><li>Deve-se conhecer (x)html e css. </li></ul><ul><li>Não abrir mão das facilidades oferecidas pelo Dreamweaver (indispensáveis). </li></ul><ul><li>Expandir técnicas e conceitos (ver a web e suas possibilidades como conceitos, não somente ferramentas e softwares). </li></ul><ul><li>Estar sempre bem informado e atualizar-se constantemente. </li></ul>
  11. 11. Links Sugeridos: <ul><li>http://www.w3.org/2005/11/Translations/Lists/OverviewLang.html#pt-br </li></ul><ul><li>http://www.w3.org </li></ul><ul><li>http://www.maujor.com.br </li></ul><ul><li>http://www.fabianoweb.net/blog </li></ul><ul><li>http://www.imasters.com.br </li></ul><ul><li>http://www.csszengarden.com </li></ul>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×