HTML CSS Dreamwaver - Aula 1

HTML+CSS+DREAMWcs3 Carolina Toledo carolina.toledo@gmail.com http://www.slideshare.net/carolinatoledo

Bibliografia • SILVA, Mauricio Samy. Construindo site com CSS e (X)HTML: sites controlados por folhas de estilo em cascata. São Paulo: Novatec Editora, 2008. • SILVA, Mauricio Samy. Criando site com HTML: sites de alta qualidade com HTML e CSS. São Paulo: Novatec Editora, 2008. • CASTRO, Elisabeth. HTML 4 para a world wide web. São Paulo: Makron Books, 2000. • MANZI, Fabricio. Dreamweaver Cs3 - criação de sites e loja virtual. São Paulo: Érica, 2007.

Como a coisa funciona? O que é a Internet? • A Internet é um conjunto de computadores conectados entre si. Alguns deles ficam conectados permanentemente (servidores de empresas, governo, universidades, bibliotecas, provedores de serviços, etc) enquanto outros se conectam eventualmente, como os usuários domésticos por exemplo. Independente do tipo de conexão, uma vez conectados todos constituem a internet.

Como a coisa funciona? Brevíssima história da Internet • A Internet surgiu nos anos 60, em um projeto de defesa norte americano de pesquisa militar. O governo criou uma rede de ampla abrangência territorial, que conectava diversos pontos do território nacional e através da qual se poderia transitar informações. • Essa rede se expandiu rapidamente, passando a abranger cientistas e pesquisadores de todo o país e posteriomente abrangendo também as universidades, bibliotecas e empresas.

Como a coisa funciona? World Wide Web, WWW, W3 ou me chame apenas de Web! • Na década de 90, Tim Berners-Lee, o inventor da Web, trabalhava na Seção de Computação do CERN (Organização Européia de Pesquisa Nuclear) , sediada em genebra, na Suiça, quando iniciou pesquisas visando descobrir um método que possibilitasse aos cientistas do mundo inteiro compartilhar eletronicamente seus textos e pesquisas, e que tivesse a funcionalidade de interligar esses documentos. • A Web é um conjunto caleidoscópico de milhões de arquivos de todo o tipo que podem ser acessados via internet: documentos de texto, imagens, vídeos, áudios, e principalmente as nossas páginas HTML. • Para tanto, Tim Berners-Lee inventou o protocolo HTTP, a linguagem HTML e construiu o primeiro navegador (Nexus).

Como a coisa funciona? HT... o Quê? • HTTP (Hiper Text Transfer Protocol) é um protocolo utilizado na Web para distribuir e recuperar informações . • O HTML (Hipertext Markup Language) é uma linguagem usada para criar páginas Web, que tem duas características essenciais: hipertexto e universalidade. • Hipertexto quer dizer que você pode criar um link (vínculo) em uma página, que conduza a outra página ou a praticamente qualquer outro tipo de arquivo da Web. Significa que a informação pode ser acessada a partir de pontos diferentes. Tim Berners-Lee queria que a Web trabalhasse mais como o cérebro de uma pessoa que como uma fonte estática de dados, tal como um livro. • Universalidade quer dizer que pelo fato dos arquivos HTMl serem gravados como do tipo somente texto ou ASCII, podem ser lidos por qualquer computador, isso também faz das páginas HTML arquivos de rápido carregamento.

Como a coisa funciona? • O que é uma página Web? Uma página web é um arquivo do tipo HTML ou escrito em alguma outra linguagem de programação (PHP, ASP, .NET, Java, etc) que pode conter elementos de texto e TAGS - comandos que informam sobre a formatação dos elementos da página, criam vínculos para exibição de imagens, audios, vídeos, etc. Esse conjunto de texto e TAGS consiste no que chamamos de Código Fonte do arquivo. • Para ver o código-fonte de um página HTML basta acessar: Menu principal do navegador > Exibir > Código Fonte. WOOooooooOOOOW!!! Não acredito que vou aprender isso!

Como assim arquivo? Tipo de Arquivo Extensão Programa Associado Texto .txt Bloco de Notas .doc Word .pdf Acrobat Reader Imagem .jpg Visualizador de imagens e .gif fax do Windows .png Photoshop Apresentação de Slides .ppt Powerpoint Páginas Web .html Browser (navegador) .htm Editor de HTML .php .asp

Softwares Necessários • Navegadores (browsers) Maxthon Netscape Opera Chrome Firefox Internet Explorer Safari Flock • Editores de HTML • Cliente FTP • Bloco de Notas (WIN) • Dreamweaver (WIN/MAC) • WordPad (WIN) • FireFTP (FTP gratuito/WIN) • SimpleText (MAC) • FileZilla (FTP gratuito/WIN) • BBEdit (MAC) • CoffeCup FTP (FTP gratuito/WIN) • Dreamweaver (WIN/MAC) • CoreFTP (FTP gratuito/WIN) • FrontPage (WIN) • Smart FTP (WIN) • HTMLKit (editor gratuito/WIN) • CoffeCup Free (editor gratuito/WIN) • Arachnophilia (editor gratuito/WIN)

Versões e Incompatibilidades • Existem várias versões do HTML sendo que a cada nova versão novas TAGs são criadas ou colocadas em desuso, visando que os desenvolvedores tenham maior controle sobre o planejamento de suas páginas. Neste curso trabalharemos com a versão HTML 4.0 • Embora o HTML tenha sido criado com o objetivo de ser universal, nem todos o experimentam da mesma forma. Como as páginas aparecem de fato dependerá do tipo de computador, do monitor, da conexão com a internet e do navegador utilizado.

Versões e Incompatibilidades • Para piorar a situação... empresas que desenvolvem navegadores criaram suas próprias extensões HTML e isso resultou em incompatibilidades e numa despadronização da linguagem. TAGs que funcionam em um navegador podem ser totalmente ignoradas ou exibidas incorretamente em outros. • Para driblar esses problemas, os desenvolvedores devem conhecer o público do site e focar na tecnologia que será utilizada pela maioria dos seus usuários, estar atentos à forma como escrevem seus códigos e testar as páginas em diversos ambientes e navegadores.

Versões e Incompatibilidades • Uma boa forma de conhecer os habitos dos usuários da internet é consultar relatórios de estatísticas gerais da web: • http://www.w3schools.com/browsers/browsers_stats.asp • http://www.netapplications.com • http://en.wikipedia.org/wiki/Usage_share_of_web_browsers • http://www.onestat.com/html/aboutus_pressbox48-microsoft-internet-explorer-usage.html • http://www.hitslink.com • Realizar pesquisas com seus clientes potenciais • Instalar e analisar relatórios de estatísticas dos usuários do seu site: • Google Analytics - http://www.google.com/intl/pt-BR_ALL/analytics • Google Urchin - http://www.google.com/urchin

Web Standards • Para tentar amenizar a situação foi criada a WWW Consortium ou W3C, dirigida pelo Tim berners-Lee, que visa estabelecer padrões e boas práticas de desenvolvimento. http://www.w3.org • Um dos maiores esforços da W3C foi o desenvolvimento das CSS (cascading Style Sheets) ou Folhas de Estilo em Cascata, um sistema que separa o conteúdo de uma página – escrito em HTML – de sua formatação – escrita em CSS. As CSS permitem um controle maior sobre o projeto do design e mantém a página universal. • Outra organização que estuda a implementação de padrões web e a The Web Standards Project. http://www.webstandards.org

http://www.slideshare.net	17
http://glauciobedim.com	2
http://flavors.me	2
http://elearning.sharjah.ac.ae	1

HTML CSS Dreamwaver - Aula 1

by Carolina Toledo on Mar 31, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

4 Embeds 22

Statistics

HTML CSS Dreamwaver - Aula 1 — Presentation Transcript