Ferramentas e Tecnologias de
Desenvolvimento Web
Profª MSc. Elizabete Munzlinger www.elizabete.com.br
1
Ferramentas e Tecnologias de
Desenvolvimento Web
Índice
1) Ferramentas Editoras de páginas web... 2
a) Bloco de Notas... 2 b) TextEdit... 2 c) Adobe Dreamweaver... 2 d) KompoZer... 2 e) Microsoft FrontPage... 2 f) Nvu... 2
2) Linguagens de Marcação e Padrões para Desenvolvimento Web ... 3
a) SGML (Standard Generalized Markup Language)... 3
b) HTML (Hyper Text Markup Language)... 3
c) XHTML (eXtensible Hypertext Markup Language)... 4
d) DHTML (Dynamic HTML)... 4
e) CSS (Cascading Style Sheets)... 4
f) XML (eXtensible Modeling Language)... 5
g) DTD (Document Type Definition)... 5
3) Linguagens de Programação para Desenvolvimento Web ... 6
Client-side - Linguagens que rodam na máquina do cliente:... 6
a) JavaScript... 6
b) VBScript... 6
c) ActionScript... 6
Server-side - Linguagens que rodam no Servidor: ... 6
d) PHP... 6
e) JSP... 7
f) ASP... 7
g) Outras linguagens e tecnologias/padrões... 7
2
Desenvolvimento Web
Aqui são citadas algumas das ferramentas e linguagens disponíveis para desenvolvimento web:
1) Ferramentas Editoras de páginas web
O documento HTML pode ser escrito em qualquer editor de textos, desde que este tenha a capacidade de gravá-lo como código ASCII (American Standard Code for Information Interchange - código utilizado para representar textos quando há computadores envolvidos), isto é, como texto puro, sem formatação ou caracteres de controle.
Existem diversos editores de códigos para criação de sites. Alguns apenas para codificação manaul, preferido pelos puristas, e outros para criação de sites usando ferramentas de edição gráfica no estilo WYSIWYG ("What You See Is What You Get", ou "O que você vê é o que você tem"), onde se desenha o site e a ferramenta gera o código. Algumas são:
a) Bloco de Notas
Notepad, Editor de texto da Microsoft. É a ferramenta editora de texto mais básica possível. Apresenta baixo rendimento no trabalho de codificação por não ser capaz de reconhecer a sintaxe das linguagens.
b) TextEdit
Editor de Texto do MacOS X.
c) Adobe Dreamweaver
É um software de desenvolvimento voltado para a web criada pela Macromedia (adquirida pela Adobe Systems), e que está atualmente na versão CS4. Suas versões iniciais serviam como um simples editor HTML WYSIWYG porém as suas versões posteriores incorporaram um notável suporte para várias tecnologias web, tais como XHTML, CSS, JavaScript, Ajax, PHP, ASP, ASP.NET, JSP, ColdFusion e outras linguagens Server-side. A ferramenta já possui hoje os validadores de código.
d) KompoZer
Editor HTML, estilo WYSIWYG, de código fonte livre, desenvolvido pela SourceForge.Net.
Oferece uma interface básica mas funcional e com funcionalidades de edição de CSS´s, e validações W3C, para os vários SO (http://kompozer.net/).
e) Microsoft FrontPage
É um editor HTML WYSIWYG e ferramenta de administração de websites da Microsoft para o sistema operacional Windows.
f) Nvu
Pronuncia-se n-view. É um editor HTML, estilo WYSIWYG, de código livre e produzido pela Linspire. Disponível para Linux, MacOS e Windows (http://www.nvudev.com/).
Leitura complementar: http://revolucao.etc.br/archives/web-standards-e-as-ferramentas-de-desenvolvimento/
3
2)
Linguagens
de
Marcação
e
Padrões
para
Desenvolvimento Web
Para o desenvolvimento de websites podemos lançar mão de diversas linguagens de marcação e padrões. Uma linguagem de marcação é um conjunto de códigos aplicados a um texto ou a dados, com o fim de adicionar informações particulares sobre esse texto ou dado, ou sobre trechos específicos. Padrão nada mais é que uma recomendação de uso de uma ou mais linguagens em conjunto visando o melhor aproveitamento.
a) SGML (Standard Generalized Markup Language)
É uma Linguagem de Marcação Padrão Genérica (metalinguagem) e internacional para descrição da estrutura de diversos tipos de documentos eletrônicos e sistemas. Padrão ISO 8879 de formatação de textos: não foi desenvolvido para hipertexto, mas torna-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações. SGML não é aplicado de maneira padronizada: todos os produtos SGML tem seu próprio sistema para traduzir as etiquetas para um particular formatador de texto. Através da SGML se pode definir linguagens de marcação para documentos. Inicialmente concebida para permitir a partilha de documentos que permitissem a leitura por máquina em projetos de grande dimensão governamentais e na indústria aeroespacial, que necessitam de permanecer legíveis por várias décadas. HTML e XML são ambas derivadas do SGML.
b) HTML (Hyper Text Markup Language)
É uma linguagem de marcação utilizada para produzir páginas na Web. A linguagem HTML foi criada baseada no SGML (Standard Generalized Markup Language). O HTML se concentra na formatação dos elementos de um documento dando a cada um deles uma configuração diferente, definindo tipos, cores, alinhamento, etc. Estabelece como um determinado elemento deve ser visualizado, não sendo, portanto uma linguagem de programação, e sim, uma linguagem de formatação/marcação de exibição de textos, através de "comandos" conhecidos como TAGs. Em suma, HTML é empregado para definir as funções dos diferentes elementos das páginas (como textos, imagens, tabelas) que serão visualizadas pelo programa de navegação (Browser). HTML não é uma Linguagem de programação, e sim uma Linguagem de Marcação. Linguagem de Marcação é um conjunto de etiquetas de marcação (tags). HTML usa as tags para definir a forma na qual se apresentará o texto e outros elementos da página.
Exemplo de página com cabeçalho, parágrafo e links: Código:
4
c) XHTML (eXtensible Hypertext Markup Language)
É uma reformulação da linguagem de marcação HTML 4.01 baseada em XML. Combina as tags de marcação HTML com regras da XML; este processo de padronização tem em vista a exibição de páginas Web em diversos dispositivos (televisão, palm, celular, etc). A intenção é melhorar a acessibilidade, sendo interpretado por qualquer dispositivo, independentemente da plataforma utilizada.. A apresentação é controlada puramente pelas Folhas de Estilo em Cascata (CSS).
Exemplos de reformulações:
HTML XHTML
d) DHTML (Dynamic HTML)
É um padrão de desenvolvimento. DHTML é um termo usado para descrever a combinação de HTML, Javascript, CSS e DOM, para permitir que uma página Web seja modificada dinamicamente na própria máquina cliente, sem necessidade de novos acessos ao servidor web.
Exemplo configuração de borda em texto através de função javascript: Código:
Resultado no browser:
e) CSS (Cascading Style Sheets)
É uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação. Seu principal benefício é prover a separação entre o formato e o conteúdo de um documento.
Exemplo de formatação de cabeçalhos e parágrafo: Código:
5
Resultado no browser:
f) XML (eXtensible Modeling Language)
Linguagem de marcação de dados extensível. Provê um formato para descrever dados estruturados. É uma recomendação da W3C para gerar linguagens de marcação para necessidades especiais. É um subtipo de SGML capaz de descrever diversos tipos de dados. Seu propósito principal é a facilidade de compartilhamento de informações através da Internet. O XML e o HTML têm uma origem comum, o SGML. No entanto, o XML não estabelece como um determinado elemento deve ser visualizado. Seu objetivo é armazenar as informações de forma organizada. A idéia é que um arquivo XML possa ser apresentado em mídias diferentes - um mesmo material, por exemplo, pode receber determinado tratamento gráfico para a Web e outra formatação para ser impresso. Por suas características, o XML necessita de um intermediário para que os dados sejam visualizados.
Exemplo de documento que armazena dados de um currículo:
g) DTD (Document Type Definition)
Os DTDs definem a estrutura de um documento, onde são especificados quais os elementos e atributos são permitidos no documento. Embora não seja necessário que um documento XML tenha um DTD correspondente, recomenda-se a utilização de DTDs para garantir a conformidade do documento. O intercâmbio de informações, na forma de documentos XML, entre organizações (business-to-business) é um exemplo de intercâmbio de documentos XML onde é necessário que estes estejam em conformidade.
Exemplo de arquivo XML e do seu DTD validador: Arquivo XML:
6
Arquivo DTD
3) Linguagens de Programação para Desenvolvimento
Web
As linguagens de programação são utilizadas em conjunto com linguagens de marcação de forma a tornar as páginas com conteúdo dinâmico ou interativo. Algumas delas são:
Clientside Linguagens que rodam na máquina do cliente:
a) JavaScript
É a linguagem script padrão para HTML. JavaScript é uma linguagem de programação criada pela Netscape em 1995, que a princípio se chamava LiveScript, para atender, principalmente, as seguintes necessidades:
• Validação de formulários no lado cliente (programa navegador). • Interação com a página.
• Javascript tem sintaxe semelhante à do Java, mas é totalmente diferente no conceito e no uso. • Oferece tipagem dinâmica - tipos de variáveis não são definidos.
• É interpretada, ao invés de compilada.
b) VBScript
É a linguagem default (por definição) para Active Server Pages (ASP) e pode ser usada no scripting (programação) de Windows e de páginas da Internet. Fortemente ligada ao navegador Internet Explorer apresenta muita incompatibilidade com outros navegadores.
c) ActionScript
É uma linguagem de programação orientada à objetos. ActionScript começou como uma linguagem de script para a ferramenta Macromedia Flash. É executada em uma máquina virtual (AVM -
"ActionScript Virtual Machine", atualmente na versão 2) que está disponível no Flash Player (plug-in encontrado em navegadores web) e também no ambiente Adobe AIR.
Serverside Linguagens que rodam no Servidor:
d) PHP
Hypertext Preprocessor criada em 1995 e originalmente chamada de Personal Home Page Tools. É uma Linguagem de criação de scripts com código-fonte aberto embutido em HTML do lado do servidor Web. Compatível com os mais importantes servidores de Web (notadamente Apache). Código-fonte aberto. Fácil uso com código embutido no HTML. Tem suporte a serviços através de protocolos como IMAP, SNMP, NNTP, POP3, HTTP e é compatível com diversas plataformas. Pode ser programado de forma Estruturada e Orientado à Objetos.
7
e) JSP
JavaServer Pages permite produzir aplicações que acessem banco de dados, manipulem arquivos de texto, capturem informações de formulários, etc. Similar ao ASP e ao PHP e baseada na LP Java.
f) ASP
O ASP é uma estrutura de programação em script que se utiliza de linguagens como VBScript, JScript, PerlScript ou Python processadas no servidor para geração de conteúdo dinâmico na Web. Roda nativamente em servidores Windows, através do serviço chamado de IIS (Internet Information Service) - o servidor web da Microsoft. O script é interpretado no lado do servidor e ao usuário é enviado apenas a saída, que normalmente é uma linguagem de marcação como HTML. Também é possível executar consultas a Banco de Dados.
g) Outras linguagens e tecnologias/padrões
CGI, .NET, ASP.NET, ColdFusion, Ruby, Python, Java, C, C++, etc
