JavaScript

19 Agosto, 2008 por Henrique Peron Teixeira

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. Assim, foi feita como uma linguagem de script. Javascript tem sintaxe semelhante à do Java, mas é totalmente diferente no conceito e no uso.
  1. Oferece tipagem dinâmica – tipos de variáveis não são definidos;
  2. É interpretada, ao invés de compilada;
  3. Possui ótimas ferramentas padrão para listagens (como as linguagens de script, de modo geral);
  4. Oferece bom suporte a expressões regulares (característica também comum a linguagens de script).

Sua união com o CSS é conhecida como DHTML. Usando o Javascript, é possível modificar dinamicamente os estilos dos elementos da página em HTML.

Dada sua enorme versatilidade e utilidade ao lidar com ambientes em árvore (como um documento HTML), foi criado a partir desta linguagem um padrão ECMA, o ECMA-262, também conhecido como ECMAScript. Este padrão é seguido, por exemplo, pela linguagem ActionScript da Adobe(Antigamente Macromedia, porém a empresa foi vendida à Adobe).

Além de uso em navegadores processando páginas HTML dinâmicas, o JavaScript é hoje usado também na construção do navegador Mozilla, o qual oferece para a criação de sistemas GUI todo um conjunto de ferramentas (em sua versão normal como navegador, sem a necessidade de nenhum software adicional), que incluem (e não apenas) um interpretador de Javascript, um comunicador Javascript <-> C++ e um interpretador de XUL, linguagem criada para definir a interface gráfica de aplicações.

O uso de JavaScript em páginas XHTML, pelo padrão W3C, deve ser informado ao navegador da seguinte forma:

<script type="text/javascript">

/* aqui fica o script */

</script>

Caso contrário, o navegador irá interpretar o script como sendo código HTML, escrevendo-o na página.

Exemplos práticos

Pop-up não bloqueável

<html>
<title></title>

<style type="text/css">
#popup{
position: absolute;
top: 30%;
left: 30%;
width: 300px;
height: 150px;
padding: 20px 20px 20px 20px;
border-width: 2px;
border-style: solid;
background: #ffffa0;
display: none;
}

</style>
<body onload="javascript: abrir()">

<script language="javascript" type="">
function fechar(){
    document.getElementById('popup').style.display = 'none';
}
function abrir(){
    document.getElementById('popup').style.display = 'block';
    setTimeout ("fechar()", 3000);
}
</script>

<DIV id="popup">
<p>
Esse é um exemplo de popup utilizando DIV. Dessa maneira esse
pop-up não será bloqueado.
</p>
<p>
<small><a href="javascript: fechar();">[X]</a></small>
</p>
</DIV>

<br /> <a href="javascript: abrir();">Abrir POPUP</a>
<br /> <a href="javascript: fechar();">Fechar POPUP</a>

</body>
</html>

CSS – Cascading Style Sheets

15 Agosto, 2008 por Henrique Peron Teixeira

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.

Ao invés de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo.

Com a variação de atualizações dos navegadores (browsers) como Internet Explorer que ficou sem nova versão de 2001 a 2006, o suporte ao CSS pode variar. O Internet Explorer 6, por exemplo, tem suporte total a CSS1 e praticamente nulo a CSS2. Navegadores mais modernos como Opera, Internet Explorer 7 e Mozilla Firefox tem suporte maior, inclusive até a CSS 3, ainda em desenvolvimento.

A interpretação dos browsers pode ser avaliada com o teste Acid2, que se tornou uma forma base de revelar quão eficiente é o suporte de CSS, fazendo com que a nova versão em desenvolvimento do Firefox seja totalmente compatível a ele assim como o Opera já é.

Exemplo simples:

  /* comentário em css, semelhante aos da linguagem c */
  body
  {
     font-family: Arial, Verdana, sans-serif;
     background-color: #FFF;
     margin: 5px 10px;
  }

O código acima define fonte padrão Arial, caso não exista substitui por Verdana, caso não exista define qualquer fonte sem serifa. Define também a cor de fundo do corpo da página.

Sua necessidade adveio do fato de o HTML (Hyper Text Markup Language) aos poucos ter deixado de ser usado apenas para criação de conteúdo na web, e portanto havia uma mistura de formatação e conteúdo textual dentro do código de uma mesma página. Contudo, na criação de um grande portal, fica quase impossível manter uma identidade visual, bem como a produtividade do desenvolvedor. É nesse ponto que entra o CSS.

As especificações do CSS podem ser obtidas no site da W3C “Word Wide Web Consortium”, um consórcio de diversas empresas que buscam estabelecer padrões para a internet.

É importante notar que nenhum browser suporta igualmente as definições do CSS. Desta forma, o webdesigner deve sempre testar suas folhas de estilo em browsers de vários fabricantes, e preferencialmente em mais de uma versão, para se certificar de que o que foi codificado realmente seja apresentado da forma desejada.

XML – eXtensible Markup Language

15 Agosto, 2008 por Henrique Peron Teixeira

XML (eXtensible Markup Language) é uma recomendação da W3C para gerar linguagens de marcação para necessidades especiais.

É um subtipo de SGML (acrônimo de Standard Generalized Markup Language, ou Linguagem Padronizada de Marcação Genérica) capaz de descrever diversos tipos de dados. Seu propósito principal é a facilidade de compartilhamento de informações através da Internet. Entre linguagens baseadas em XML incluem-se XHTML (formato para páginas Web), RDF,SDMX ,SMIL, MathML (formato para expressões matemáticas), NCL, XBRL, XSIL e SVG (formato gráfico vetorial).

Principais Características

Estimulado pela insatisfação com os formatos existentes (padronizados ou não), o World Wide Web Consortium (W3C) começou a trabalhar em meados da década de 1990 em uma linguagem de marcação que combinasse a flexibilidade da SGML com a simplicidade da HTML. O principio do projeto era criar uma linguagem que pudesse ser lida por software, e integrar-se com as demais linguagens. Sua filosofia seria incorporada por vários princípios importantes:

  • Separação do conteúdo da formatação
  • Simplicidade e Legibilidade, tanto para humanos quanto para computadores
  • Possibilidade de criação de tags sem limitação
  • Criação de arquivos para validação de estrutura (Chamados DTDs)
  • Interligação de bancos de dados distintos
  • Concentração na estrutura da informação, e não na sua aparência

O XML é considerado um bom formato para a criação de documentos com dados organizados de forma hierárquica, como se vê frequentemente em documentos de texto formatados, imagens vetoriais ou bancos de dados.

Pela sua portabilidade, um banco de dados pode através de uma aplicação escrever em um arquivo XML, e um outro banco distinto pode ler então estes mesmos dados.

Este exemplo demonstra a sintaxe flexível do XML sendo usada para descrever uma receita de pão:

<?xml version="1.0" encoding="iso-8859-1"?>
<receita nome="pão" tempo_de_preparo="5 minutos" tempo_de_cozimento="1 hora">
  <titulo>Pão simples</titulo>
  <ingredientes>
    <ingrediente quantidade="3" unidade="xícaras">Farinha</ingrediente>
    <ingrediente quantidade="7" unidade="gramas">Fermento</ingrediente>
    <ingrediente quantidade="1.5" unidade="xícaras" estado="morna">Água</ingrediente>
    <ingrediente quantidade="1" unidade="colheres de chá">Sal</ingrediente>
  </ingredientes>
  <instrucoes>
    <passo>Misture todos os ingredientes, e dissolva bem.</passo>
    <passo>Cubra com um pano e deixe por uma hora em um local morno.</passo>
    <passo>Misture novamente, coloque numa bandeja e asse num forno.</passo>
  </instrucoes>
</receita>

Onde temos na primeira linha:

     <Receita nome="pão" tempo_de_preparo="5 minutos" tempo_de_cozimento="1 hora">

“Receita” é o nome principal para o seu documento. Note que a semelhança entre XML e HTML é grande, na 1ª linha abrimos a tag Receita e na última linha fechamos a mesma, como em HTML, assim se estendendo por todo o exemplo.

XHTML – eXtensible Hypertext Markup Language

15 Agosto, 2008 por Henrique Peron Teixeira

O XHTML, ou eXtensible Hypertext Markup Language, é uma reformulação da linguagem de marcação HTML 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.

O XHTML consegue ser interpretado por qualquer dispositivo, independentemente da plataforma utilizada, pois as marcações possuem sentido semântico para as máquinas. O HTML não consegue esta implementação. No entanto, não existem muitas diferenças entre o HTML e o XHTML. Para verificar se uma página XHTML está bem construída, o melhor método é validar o código através de uma aplicação Web disponibilizada pela organização W3C.

XHTML deverá ser o sucessor do HTML. Assim, muitos consideram que XHTML é a atual ou mais nova versão do HTML. Porém, XHTML é uma recomendação separada; a W3C continua a recomendar o uso de XHTML 1.1, XHTML 1.0, e HTML 4.01 para publicação na web, e HTML 5 está atualmente sendo desenvolvido.

Um exemplo simples de XHTML seria: ( Observando dentro das tags <html></html> )

<html> <head> </head> <body>

    <form>
     <fieldset>
     <legend>Dados pra Cadastro</legend>
     <label for="nome">Nome:</label>
     <input type="text" name="nome" id="nome" />
     <label for="tipo">Tipo:</label>
     <input type="text" name="tipo" id="tipo" />
          <label for="data">Data:</label>
     <input type="text" name="data" id="data" />
          <input type="submit" value="enviar" class="botao" />
     </fieldset>
   </form>

</body> </html>

o código CSS que formataria este xhtml seria:

<style> form fieldset {

  float: left;
  margin-right: 7px;
  width: 40%;
  border: solid black 1px;
  padding: 3%;
  margin-bottom: 10px;

}

form legend {

  padding: 6px;
  margin: 10px;
  border: solid black 1px;
  font-size: 90%;
  font-weight: bold;
  background-color: #e8e8e8;

}

form label {

  display: block;
  font-size: 11px;

}

form input {

  width: 100%;
  border: solid #ccc 1px;
  font-size: 11px;
  font-family: 'Trebuchet MS', Verdana, Tahoma, Serif;

}

form input.botao {

  display: block;
  width: auto;
  float: right;

}

form input.botao {

  display: block;
  width: auto;
  float: right;

} </style>

DHTML – Dinamic HTML

15 Agosto, 2008 por Henrique Peron Teixeira

Dynamic HTML, ou DHTML, é a união das tecnologias HTML, Javascript e uma linguagem de apresentação, como folhas de estilo CSS aliada a um Modelo de Objeto de Documentos, para permitir que uma página Web seja modificada dinamicamente na própria máquina cliente, sem necessidade de novos acessos ao servidor web.

Atualmente há pelo menos três grandes grupos trabalhando no DHTML: o W3C, que é o responsável pelas versões oficiais da HTML, a Netscape, e a Microsoft.

Em relação a especificação oficial, a Netscape e a Microsoft incluíram vários recursos extras que ajudaram ainda mais o DHTML. Sendo assim, esses DHTMLs vão algo além da capacidade de alterar as propriedades das marcações tags HTML dinamicamente. O DHTML da Microsoft, por exemplo, permite que se adicionem efeitos como sombra e néon a imagens dentro de um documento HTML. Outro recurso conhecido como Fontes Dinâmicas (Dynamic Fonts), da Netscape, permite que fontes sejam transmitidas pelo servidor junto com o documento HTML, possibilitando, a qualquer browser que implemente esse recurso, mostrar os caracteres exatamente como planejou o autor do documento. Resumindo, DHTML é um conjunto de ingredientes que proporcionam um controle sem precedentes sobre a apresentação do conteúdo de páginas da Web, além de possibilitar a inclusão de componentes multimédia, como animações, diretamente no código HTML, sem a necessidade de plug-ins. Toda a curiosidade em torno do HTML Dinâmico se justifica então, já que o mesmo estabelece novos patamares de interação e movimento na internet a um baixo custo – medido em velocidade, abrangência e flexibilidade, por exemplo, melhor do que em moeda corrente.

HTML – HyperText Markup Language

15 Agosto, 2008 por Henrique Peron Teixeira

HTML (acrônimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Documentos HTML podem ser interpretados por navegadores. A tecnologia é fruto do “casamento” dos padrões HyTime e SGML.

HyTime é um padrão para a representação estruturada de hipermédia e conteúdo baseado em tempo. Um documento é visto como um conjunto de eventos concorrentes dependentes de tempo (como áudio, vídeo, etc.), conectados por hiper-ligações. O padrão é independente de outros padrões de processamento de texto em geral.

SGML é um padrão de formatação de textos. Não foi desenvolvido para hipertexto, mas tornou-se conveniente para transformar documentos em hiper-objetos e para descrever as ligações.

Os documentos em HTML são como arquivos de texto comuns. Para facilitar a produção de documentos, existem editores HTML específicos:

  • Editores de texto fonte: inserem automaticamente as etiquetas, orientando a inserção de atributos e marcações.
  • Editores WYSIWYG: oferecem ambiente de edição com um “esboço” resultado final das marcações.

A estrutura de um documento HTML apresenta os seguintes componentes:

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html lang="pt">
 <head>
   <title>Título do Documento</title>
 </head>
 <body>
   texto,
   imagem,
   links,
   ...
 </body>
 </html>

As etiquetas HTML não são sensíveis à caixa (case sensitive), portanto tanto faz escrever <HTML>, <Html>, <html> ou <HtMl>.

As etiquetas básicas de HTML, cuja presença é altamente recomendada nas páginas são:

  • <html>: define o início de um documento HTML e indica ao navegador que todo conteúdo posterior deve ser tratado como uma série de códigos HTML.
  • <head>: define o cabeçalho de um documento HTML, que traz informações sobre o documento que está sendo aberto.
  • <body>: define o conteúdo principal, o corpo do documento. Esta é a parte do documento HTML que é exibida no navegador. No corpo podem-se definir propriedades comuns a toda a página, como cor de fundo, margens, e outras formatações.

Dentro do cabeçalho podemos encontrar os seguintes comandos:

  • <title>: define o título da página, que é exibido na barra de título dos navegadores.
  • <style>: define formatação em CSS.
  • <script>: define programação de certas funções em página com scripts, podendo adicionar funções de JavaScript.
  • <link>: define ligações da página com outros arquivos como feeds, CSS, scripts, etc.
  • <meta>: define propriedades da página, como codificação de caracteres, descrição da página, autor, etc. São meta informações sobre documento. Tais campos são muitos usados por mecanismos de busca(como o Google) para obterem mais informações sobre o documento, a fim de classificá-lo melhor. Por exemplo, pode-se adicionar o código <meta name="description" content="descrição da sua página" /> no documento HTML para indicar ao motor de busca que texto de descrição apresentar junto com a ligação para o documento.

Obs: as etiquetas <style> e <script> servem tanto para delimitar o espaço usados pelos códigos na pagina quanto para invocar códigos existentes em outros arquivos externos.

Dentro do corpo podemos encontrar outras várias etiquetas, como por exemplo:

  • <h1>, <h2>,... <h6>: cabeçalhos e títulos no documento em diversos tamanhos. (quanto menor for o numero, maior sera o tamanho da letra)
  • <p>: novo parágrafo.
  • <br>: quebra de linha.
  • <table>: cria uma tabela (linhas são criadas com <TR> e novas células com <TD>. Já os cabeçalhos de coluna são criados com a etiqueta <TH>.)
  • <div>: determina uma divisão na página a qual pode possuir variadas formatações.
  • <font>: altera a formatação (fonte, cor e tamanho) de um trecho do texto.
  • <b>, <i>, <u> e <s>: negrito, itálico, sublinhado e riscado, respectivamente.
  • <img>: imagem.
  • <a>: hiper-ligação para um outro local, seja uma página, um e-mail ou outro serviço.
  • <textarea>: caixa de texto (com mais de uma linha); estas caixas de texto são muito usadas em blogs, elas podem ser auto selecionáveis e conter outros códigos a serem distribuídos.
  • <acronym>: acrônimo (sigla)
  • <cite>: citação
  • <address>: endereço

W3C – World Wide Web Consortium

14 Agosto, 2008 por Henrique Peron Teixeira

O World Wide Web Consortium é um consórcio de empresas de tecnologia, atualmente com cerca de 500 membros. Fundado por Tim Berners-Lee em 1994 para levar a Web ao seu potencial máximo, por meio do desenvolvimento de protocolos comuns e fóruns abertos que promovem sua evolução e asseguram a sua interoperabilidade. O W3C desenvolve padrões para a criação e a interpretação dos conteúdos para a Web. Sites desenvolvidos segundo esses padrões podem ser acessados e visualizados por qualquer pessoa ou tecnologia, independente de hardware ou software utilizados, como celulares (em Portugal, telemóvel), PDAs, eletrodomésticos, de maneira rápida e compatível com os novos padrões e tecnologias que possam surgir com a evolução da internet.

Para alcançar seus objetivos, a W3C possui diversos comitês que estudam as tecnologias existentes para a apresentação de conteúdo na Internet e criam padrões de recomendação para utilizar essas tecnologias. Com a padronização, os programas conseguem acessar facilmente os códigos e entender onde deve ser aplicado cada conhecimento expresso no documento.

Padrões seus como HTML, XHTML e CSS são muito populares, contudo, em muitos casos são usados de forma errônea devido ao desconhecimento da especificação.

É um dever de todo desenvolvedor Web respeitar e seguir os padrões de acessibilidade do W3C, pois de outro modo poderá impor barreiras tecnológicas a diversas pessoas, desestimulando e até mesmo impedindo o acesso a suas páginas.

Padrões W3C

  • Cascading Style Sheets (CSS)
  • Common Gateway Interface (CGI)
  • Document Object Model (DOM)
  • Resource Description Framework (RSF)
  • Scalable Vector Graphics (SVG)
  • Simple Object Access Protocol (SOAP)
  • Synchronized Multimedia Integration Language (SMIL)
  • Web Services Description Language (WSDL)
  • eXtensible Hypertext Markup Language (XHTML)
  • eXtensible Markup Language (XML)
  • XML Information Set
  • XPath
  • XQuery
  • eXtensible Stylesheet Language for Transformation (XSLT)
  • Web Ontology Language (OWL)
  • Para saber mais sobre o projeto acesse http://www.w3c.org.

    Web Designer x Web Master

    14 Agosto, 2008 por Henrique Peron Teixeira

    Qual é a diferença entre Web Designer e Web Master?

    O Web Designer é quem projeta e implementa toda a parte visual de uma home page.
    É necessário que esse profissional conheça ferramentas como HTML, Dreamweaver, Criação e Design, Flash, Corel Draw, Photoshop, Fireworks e FreeHand.

    Já o Web Master Developer é quem projeta e implementa toda a parte de programação de uma home page. Esse profissional deve ser qualificado e ter sólidos conhecimentos nas seguintes ferramentas/linguagens: ASP, JavaScript, Java, SQL – 2000 e XML. A nova ferramenta da Microsoft, Visual Studio.NET (Visual Basic.Net, C#.Net, C++.Net, ASP.Net, J#.Net ), está chegando ao mercado para facilitar a vida desse profissional e dar mais flexibilidade para a criação e a integração de home pages.