Projeto de Web Design (Parte 1)

Conceito

Um projeto é um esforço temporário empreendido para criar um produto, serviço ou resultado exclusivo. Um projeto web, por sua vez visa desenvolver um conteúdo para a internet no formato de um website.

Termos utilizados

• Website: é um conjunto de páginas navegáveis, dispostas em um mesmo local para apresentar um conteúdo na internet.
• Página: um documento escrito em linguagem HTML (ou apresentada nesta linguagem) apresentando uma informação, contendo textos, links, imagens, som e vídeo.
• Navegação: conjunto de recursos de HTML que visam a ligação entre páginas relacionadas em um website.
• Servidor Web: um computador ou um software instalado em um computador que permite a disponibilização de um website para a internet através do protocolo HTTP (HyperText Transfer Protocol).
• Hospedagem: serviço fornecido por um computador-servidor, localizado em um setor ou empresa externa para disponibilizar um website na internet.
• Serviço de hospedagem: Uma empresa que, a um determinado custo, utiliza seus recursos de servidores e conectividade para disponibilizar para internet uma página criada por um usuário deste serviço.
• FTP (File Transfer Protocol): É um protocolo de transferência de arquivos utilizado para enviar e receber arquivos através da internet. É bastante utilizado por serviços de hospedagem para carregar os arquivos criados pelos usuários para seus servidores.
• Webmaster (administrador de website): é o administrador dos serviços de hospedagem web. Sua função e garantir que todos os recursos do servidor web estejam disponíveis e que o site esteja no ar.
• Web-designer (projetista web): é a pessoa responsável pela criação do projeto visual de um site, seus recursos de interatividade e sua navegação.
• Web-developer (desenvolvedor web): é a pessoa responsável pelo projeto funcional do site, desenvolvendo recursos de dados e de código (principalmente se o site é desenvolvido utilizando linguagens de execução no servidor, como PHP e ASP) para um web-site. Uma pessoa pode acumular as funções de web-designer e web-developer.
• Server-side includes: são códigos que são lidos e interpretados pelo servidor web que, através de um interpretador, retorna as informações no formato de uma página da web, ou outro formato, para um site da web.
• Interpretador: em web é o sistema formado por uma linguagem e um mecanismo atrelado a um servidor web que permite o processamento das informações por parte do servidor web.
• Domínio: um endereço DNS que é utilizado por uma organização para a utilização de serviços na internet, como e-mail, servidor web e outros.

Noções de web design

A criação de conteúdo para a internet é uma tarefa o qual requer muitos cuidados, visto que há uma gama de recursos disponíveis, mas que não podem ser empregados de uma só vez em um mesmo projeto. Isto ocorre, pois, com o advento de novas tecnologias para a internet, vemos uma grande quantidade de dispositivos que acessam o seu conteúdo e estes se diferem bastante em recursos disponíveis, acessibilidade, sistemas operacionais, inclusive diferenciando entre versões de um mesmo software ou softwares diferentes que realizam uma mesma função.

Assim sendo, a primeira iniciativa a tomar quando se planeja desenvolver um website é definir seu público-alvo. Diferente dos projetos de marketing convencionais, nos quais é definido através de características socioeconômicas e mercadológicas, o público-alvo tem uma relação maior com os recursos tecnológicos disponíveis mínimos para a maioria dos computadores os quais o website deseja ser acessado. Os recursos tecnológicos a ser abordados, são os seguintes:

• Sistema Operacional: este estabelece os parâmetros do sistema como um todo, sobretudo à instalação de complementos e acelerações de hardware.
• Hardware: estabelece os parâmetros de resolução de tela e de memória, permitindo uma página com mais conteúdo ou com mais recursos de processamento.
• Largura de banda: refere-se à velocidade da conexão da internet. Há sites que são impraticáveis em conexão discada. Assim como haver sites em que a quantidade de recursos faz com que haja uma demora maior que a prevista ao carregar. Se isto ocorrer será necessária uma rotina de carregamento para avisar o visitante de que a página está sendo carregada.
• Navegador da web: há recursos que um navegador possui e outro não. Por essa razão, é preciso verificar quais recursos serão utilizados e quais estarão disponíveis de acordo com o navegador da web.
• Versões do navegador: Quando uma nova versão de um navegador é lançada, costuma agregar novos recursos que podem ser explorados pelas páginas, assim como versões antigas podem por em risco a segurança do usuário, inclusive alertando o usuário de uma possível incompatibilidade de seu conteúdo em relação à versão do navegador em uso.
• Uso de extensões e plug-ins: deve-se observar atentamente para a utilização de recursos fornecidos por plug-ins, como applets Java ou animações em Flash. Pois nem todas as plataformas, navegadores e sistemas o suportam. Há ainda organizações que não permitem a utilização destes recursos instalados em seus computadores.

Recomenda-se atentar-se a estes parâmetros, pois a quantidade de recursos de um site pode ser inversamente proporcional à quantidade de usuários aptos a usufruir destes recursos. O ideal é verificar quais os recursos suportados pela maioria dos usuários do público-alvo selecionado, além de, se possível, criar versões diferentes de uma mesma página para públicos segmentados, como por exemplo, uma versão para computadores e outra para dispositivos móveis como smartphones e telefones celulares.

Além das opções para públicos-alvo distintos, a navegação do site, além de noções básicas de conceitos de atração sensorial (no caso da internet, com a sinestesia de sons e imagem) e conceitos de diagramação e interface visual, são ferramentas utilizadas pelos web-designers para o desenvolvimento de páginas da web atraentes ao público.

Usando o Dreamweaver para desenvolver sites em PHP com Banco de Dados MySQL (Parte 2)

Agora, com o site pronto, podemos criar sua estrutura e definir a base de dados que será implantada nele. Antes, porém, é preciso que um painel útil neste processo esteja visível. O painel Bancos de Dados. Para exibi-lo, vá até o menu Janela e em seguida clique em Bancos de Dados ou utilize a tecla de atalho Crtl + Shift + F10, conforme a figura a seguir.

Em seguida crie um arquivo no site. Para isso você pode pressionar a tecla de atalho Ctrl + N, ou clicar no menu Arquivo e em seguida Novo, ou ainda utilizando o painel arquivos do Dreamweaver (F8) clicando com o botão direito do mouse sobre uma área vazia do painel de arquivos e selecionando a opção Novo Arquivo, e depois de criado, basta abri-lo com um duplo clique sobre ele. Esta última maneira é a melhor, pois permite o salvamento do arquivo já com o nome definido, além de garantir a criação do arquivo dentro do site, na pasta correta. Com o arquivo criado e aberto no Dreamweaver, será possível a criação da conexão do banco de dados, pois se não há nenhum arquivo do site aberto, não é possível criar uma conexão de Banco de Dados.

Observe que sem um Banco de Dados criado, o painel de Bancos de dados possui um checklist em que todas as condições precisam estar satisfeitas para que o banco seja criado, a saber: A criação de um site, a escolha de um tipo de documento (no caso a escolha do site em PHP ou qualquer outra tecnologia de servidor) e a configuração de um servidor de teste (onde os arquivos criados serão validados).

Estando todos os requisitos satisfeitos, basta criar a conexão, clicando no botão com o sinal de adição (+) e selecionando o item Conexão MySQL.

Será exibida a janela abaixo. Nesta janela, defina o nome da conexão, que é o nome de uma variável onde os dados da conexão serão armazenados, o endereço do servidor MySQL, as credenciais de acesso (nome de usuário e senha) e o nome do banco de dados onde os dados estarão armazenados.

Se não tiver a certeza de qual banco utilizar, pode fazer uso do botão Selecionar... o qual permite escolher o banco de dados o qual as credenciais fornecidas possuem acesso.

Selecione o banco de dados desejado e clique ok. Com todos os dados preenchidos basta clicar em Testar, para verificar se a conexão foi bem-sucedida e em seguida OK para salvar as configurações de banco de dados.

Ao clicar em ok, o painel de Bancos de Dados muda para exibir a conexão de banco de dados na forma de um cilindro. Mesmo precisando de um arquivo estar aberto para criar a conexão, esta está disponível a todas as páginas que o site vier a possuir. Isso facilita nosso trabalho pois permite que através de uma única conexão possa criar páginas que manipulem dados do banco de dados no site inteiro. Além disso, é possível criar diversas conexões de bancos de dados MySQL para um mesmo site.

Mensagem de despedida aos alunos de TI

Usando o Dreamweaver para desenvolver sites em PHP com Banco de Dados MySQL (Parte 1)

Criar sites dinâmicos com banco de dados utilizando a tecnologia PHP, geralmente é trabalhoso. Isto porque há a necessidade de se estabelecer um algoritmo para que esta funcionalidade funcione. De forma resumida, a utilização de bancos de dados através do PHP obedece às seguintes etapas:

1. Conexão ao servidor

2. Utilização de um Banco de Dados no servidor conectado

3. Estabelecimento de um cursor de comandos. Cursor é uma variável que recebe as informações que serão enviadas ao banco de dados.

4. Envio das informações

5. Recebimento das respostas e tratamento delas através do PHP.

Por ser um processo complexo e interdependente, estabelecer um código que permita o mínimo possível de falhas é fundamental. Para isso, a cada etapa, geralmente é feito um tratamento de exceção para que o código exiba, de forma amigável o erro ocorrido, e ao mesmo tempo, aborte a execução do código. O programa Dreamweaver, da Adobe, permite a criação de uma conexão de dados MySQL para sites desenvolvidos em PHP de uma forma amigável, simples e rápida. O tutorial a seguir permitirá ao leitor a criação de uma conexão, a criação de um formulário de inserção e também um simples relatório de banco de dados.

Os pré-requisitos para o acompanhamento deste tutorial são os seguintes:

· Um local para hospedar experimentalmente os arquivos PHP e o Banco de Dados (Servidor de Teste)

· Um banco de dados já criado no servidor MySQL, com as tabelas e relacionamentos já definidos.

· Conhecimentos básicos de Windows, Dreamweaver, HTML, e PHP.

Partindo do pressuposto que os pré-requisitos foram satisfeitos, vamos dar início a este tutorial.

Criando um site

O primeiro passo é definir um site no Dreamweaver. Ao criarmos um site, estamos preparando um projeto completo para web e é nele que definimos os parâmetros de linguagem de servidor que este site irá utilizar. Faremos a criação de um site passo a passo:

Abra o Dreamweaver. Vá até o menu Site e clique em Novo Site, conforme figura.

Existem duas formas de criar e configurar o site. Na aba Básico, há as configurações básicas de criação do site, como o local onde está hospedado e o modelo do servidor. Na aba Avançado, temos um processo de criação mais detalhado com recursos do Contribute (sistema de gerenciamento de conteúdo da Adobe), check-in e check-out, e configuração de servidor de teste independente do servidor local. Faremos usando o assistente no modo básico.

A primeira tela pede apenas o nome que será dado ao projeto do site e ao endereço do site quando publicado.

A tela seguinte do assistente pergunta se o seu site possui tecnologia de servidor, selecione a opção sim que será exibido um menu o qual você deverá escolher qual tecnologia a ser adotada em seu site, neste caso, PHP MySQL.

Na tela seguinte, pergunta-se como trabalhar com os arquivos, no caso, a pergunta mais adequada seria: onde está o servidor de teste? A primeira opção, que é a que vamos escolher, é que o servidor de teste é a própria máquina em que estamos editando os arquivos. É um recurso muito prático, pois nos auxilia a realizar o projeto a qualquer hora, em qualquer lugar. A segunda opção é a edição local do site, mas com o carregamento dos arquivos em um servidor de teste externo, o que garante uma melhoria de desempenho tanto do programa quanto do servidor, o que nos permite inclusive uma simulação real do site em si. Por fim, a terceira opção é a edição dos arquivos remotamente através de uma rede local. A vantagem desta opção é a portabilidade e a possibilidade de desenvolvimento em equipe, o que permite que possa utilizar qualquer computador com Dreamweaver instalado para continuar seu trabalho ou até mesmo várias pessoas trabalhando em um mesmo site simultaneamente.

Em seguida, temos que informar qual o endereço do servidor de teste onde iremos testar os arquivos. É importante salientar que como o PHP é uma tecnologia de servidor, não é possível apenas abrindo o arquivo, verificar se a codificação está correta. Quem pode validar isso é o servidor de teste, através do interpretador PHP. Por isso é muito diferente criar um site em PHP ou ASP, do que criar um site em Flash ou HTML. Atente-se ao endereço do servidor de teste, pois se este estiver errado, não será possível verificar se o código está correto, mesmo utilizando as ferramentas de edição fornecidas pelo Dreamweaver.

Por fim podemos aqui definir o local onde os arquivos serão publicados para a web, chamado aqui de servidor remoto. Podemos inclusive adotar o servidor de teste como o próprio servidor remoto, pois o Dreamweaver possui a funcionalidade de realizar o teste do arquivo através de arquivos temporários. No nosso caso não iremos alterar por enquanto.

Por fim, é exibido um resumo das configurações feitas. Para salvar o site, basta clicar em Concluído. O site agora está disponível para edição e pode criar arquivos nele.

Estréia espaço do professor no Limão

Anotem o site: http://professorandrearruda.comlimao.com.br