Olá pessoal e velhos amigos da Comunidade Fireworking.net.
Mais uma vez estamos juntos em mais um desafio, e eu, mais que nunca me sinto
feliz em estar podendo passar um pouco do meu conhecimento. Agora explorando
novas áreas,
estarei os guiando em novas aventuras no Dreamweaver, um grande companheiro
de criação e desenvolvimento, muito mais aprimorado na versão
MX 2004.

Introduzindo MySQL e PHP

Visto que hoje boa parte dos conteúdos na web são todos dinâmicos,
ou seja, envolvendo alguma linguagem de script, banco de dados ou XML, vou dar
algumas importantes dicas sobre como desenvolver alguns sisteminhas básicos,
mas de grande valia para o aprendizado como desenvolvedor.

Para os nossos artigos, utilizaremos uma linguagem de script muito poderosa
e que vem ganhando muitos adeptos, na onda do software livre, o PHP. O Dreamweaver
oferece maior poder de desenvolvimento para linguagens como o Coldfusion e o
JSP, mas já oferece também alguns recursos interessantes para o
PHP que antes não existiam na versão MX. A princípio, como
banco com suporte nativo e também como o grande parceiro desta linguagem,
utilizaremos o MySQL. O servidor web não importa muito, visto que o PHP
funciona bem tanto no IIS como APACHE. Por isso é importante que você tenha
instalado em seu computador o PHP e o MySQL, e rodando um dos dois servidores
web citados.

O MySQL pode ser baixado no seguinte endereço: http://www.mysql.com,
e o php pode ser baixado no site http://www.php.net.
Ambos os softwares possuem um manual de instalação.

Muitas pessoas procuram o Dreamweaver para trabalhar como ferramenta
de integração
entre linguagem de script e banco de dados, por sempre pensarem que por
não
ter noção de programação, o software quebrará o
galho. Na verdade não é bem isso que acontece, pois é importante
ter uma noção prévia de alguns conceitos não só de
progrmação, como também de algumas
características específicas da linguagem de script adotada. No
ambito do desenvolvimento, o que o Dreamweaver faz é praticamente como
uma ferramenta case para web, assim como o Delphi para o desktop. Ele
agiliza todo o processo, muitas vezes evitando que o programador digite
um linha se quer de código, mas
ainda assim exige um conhecimento do processo de desenvolvimento. Por
isso aconselho a quem não tem noção de nada sobre desenvolvimento
que estude algo antes para evitar dúvidas não muito relativas ao
processo.

Configurando o site

No processo de desenvolvimento, um ítem muito importante é a
depuração, onde você avalia o andamento do programa, detalhando
e consertando os erros encontrados. No Dreamweaver é possível se
ter este retorno sem nem mesmo abrir uma janela do Browser, por que ele possui
um recurso chamado ‘Live Data’. Com ele é possível se fazer simulação
de um processamento do script como se você estivesse o testando no próprio
browser. Quando eu falar em browser, muita gente que já programa em alguma
linguagem de script, lembrará das famosas ‘query strings’. Toda pessoa
que iniciou em programação voltada para a web se deparará com
a query string. Aí você me pergunta: mas o que é query string?
Query String nada mais é do que uma variável passada por URL. Por
exemplo, no nosso site você com certeza verá algo mais ou menos
assim:

http://www.mxstudio.com.br/views.tutorial.php?act=cat&cid=1

As querys strings são todas os valores que estão
após
o primeiro sinal de interrogação. As variáveis e seus valores
são separadas pelo caractere ‘&’ (o ‘E’ comercial). No
nosso caso então temos duas variáveis: act, com o valor cat e cid,
com o valor 1. É preciso estar atento aos nomes de variáveis, pois
algumas linguagens de script são case sensitive, ou seja, ela faz distinção
entre maiúsculas e minúsculas, onde Cat é uma variável
e cat outra, por exemplo.

Voltemos a configuração. Crie um novo site,
no modo Basic (Básico). Digite um nome para o site.

.Na próxima tela, o Dreamweaver pergunta se utilizaremos alguma tecnologia
de servidor. No nosso caso, sim. Na lista, selecione PHP MySQL.

Prosseguindo, ele pergunta onde os arquivos serão armazenados. È recomendável
que os arquivos sejam armazenados em uma pasta criada exclusivamente
pra este site na pasta www do servidor web. Caso os arquivos estejam
em outro lugar fora do servidor web, será necessário que você crie
uma pasta virtual no servidor web que aponte para esta pasta de arquivos.
Acima nas três
opções, ele também pergunta como você deseja trabalhar
e testar suas páginas. Por segurança selecione a primeira opção,
para que você possa trabalhar e testar localmente.

A próxima etapa se refere aos testes dos arquivos. A
configuração
correta deste ítem é importante para a depuração,
pois o Dreamweaver simulará o processamento de uma página com
o endereço do site, e se este endereço estiver errado, uma futura
visualização do mesmo utilizando a tecla F12 poderá trazer
muitos erros, inclusive o de página não encontrada. Por isso, digite
o endereço corretamente do servidor web local até a pasta que você utilizará para
guardar os scripts e clique em ‘Test URL’ ( Testar URL) para verificar
se endereço no servidor web confere, senão o Dreamweaver retornará uma
mensagem de erro informando que o endereço não foi encontrado no servidor
web.

O último passo
refere-se ao fluxo de trabalho, ou seja, se você deseja que ao editar algum
arquivo ou o site inteiro, tenha-se a possibilidade de sincronizar o seu site
local com servidor remoto, ou seja, atualizar o seu site na internet sempre que
você fizer alguma alteração. O site remoto necessariamente
não precisa ser um servidor na internet, mas pode ser um servidor da sua
rede local, como o seu computador. Os tipos de servidores mais comuns para este
tipo de sincronização são o FTP ou Rede Local. No nosso
caso, como estamos testando tudo local, não há necessidade de configurar
esta parte.

Trabalhando com QUERY STRINGS

Para os que não conhecem muito bem a linguagem e os recursos que o Dreamweaver
oferece em termos de depuração, vou começar dando alguns
exemplos de como se trabalhar não só com as variáveis passadas
por url, mas também com variáveis de formulários, sessão,
e de servidor entre outras.

Crie um novo arquivo. Abra a guia APLICATION (Aplicação). Clique
na aba Bindings (Ligação). Vamos criar uma variável de URL.
Vamos dar o nome de ‘nome’.

Esta variável ficará disponível
para toda a página que você criar neste site. É recomendável
que se crie essas variáveis através deste meio, por que assim podemos
tirar todo o proveito do poder do Dreamweaver como ferramenta case, ou seja,
utilizando esta variável em qualquer parte de nossa aplicação
apenas a selecionando e arrastando-a. Por isso, depois de criada arraste para
qualquer parte de sua página, como mostra a figura.

A partir de agora
podemos testar usando o recurso do Live Data, habilitando pressionando
o seguinte ícone
ao lado dos ícones de visualização de código e design.

Repare que aparece uma barra de endereços semlhante
a barra de endereços
de um browser. Lá já está habilitado o endereço do
site, exatamente o mesmo endereço que digitamos ao configurar o site somado
a página atual que está sendo testada. Deixe marcada a opções
‘Auto refresh’. Os valores que serão passados por url você pode
digitar diretamente, mas vamos poupar tempo e facilitar todo o processo
clicando em Settings (Configurações).

Na tela que se abrir, vamos adicionar as variáveis e seus respectivos
valores. Adicione a variável ‘nome’. Digite um valor qualquer
como mostra a figura. Clique em ok.

Vamos incrementar esta situação adicionando mais variáveis.
Clique em Settings novamente. Adicione as seguintes variáveis: ‘sobrenome’ e ‘ultimonome’ como
mostra a figura.

Repare que agora todas as variáveis e seus respectivos
valores aparecem na barra de endereços todas separadas por ponto e vírgula.
Mas os valores não aparecem na página. Basta apenas criá-las
como variáveis de URL da mesma forma que criamos a variável nome
e arrastá-las para a página.

E se quisermos por exemplo incrementar estas variáveis
de forma que, por exemplo todos os nomes aparecam com os caracteres em
caixa alta (maiúscula)?
Basta inserir a variável de outra forma. Na guia Aplicativo, na aba Server
Behaviors (Comportamentos de Servidor) selecione a opção Dinamic
Text (Texto Dinâmico).

Veja que todas ligações aparecem com
a lista de variáveis. Basta selecionar a variável que você deseja
e selecionar uma opção de formatação. Neste caso,
escolha a opção “AlphaCase – Uper” (Caractere
Maiúsculo). Veja o resultado na página.

Bom, essa foi uma introdução bem simples a criação
de aplicações dinâmicas envolvendo linguagens de script.
No exemplo das Querys Strings, poderíamos
utilizar outra linguagem que o processo seria o mesmo. Mas já que daqui
em diante vamos nos focar a construir pequenos sistemas baseados em PHP
e MySQL, é preferível
que façamos nesta linguagem.

Na continuação daremos prosseguimento aos nossos estudos trabalhando
com outros tipos de variáveis e uma pequena introdução a
aplicação utilizando banco de dados.

Um abraço a todos e até a próxima.

Bom, atendendo a alguns pedidos de alguns usuários, hoje vou mostrar
num tutorial rápido e prático, o processo que foi utilizado
para a construção da nossa barra de menus da comunidade,
o qual muitos me pediram através de emails. Provavelmente
alguns já viram esta técnica em sites estrangeiros, como o Ultraweaver.com.

A princípio é um tutorial bem básico para aqueles
que não ainda não possuem muita praticidade no Fireworks.

Então, vamos lá:

Crie um novo documento (CTRL + N).

Desenhe um retângulo com dimensões de mais ou menos 800
pixels de largura por 20 pixels de altura.

O principal processo que dá a ilusão de uma barra metalizada é bem
simples e não é necessário nenhum efeito de tipo brilho
ou sombra, somente a mistura de cores no preenchimento é o suficiente
para se chegar ao resultado. Por isso, dê ao retangulo um preenchimento
do tipo ‘Bars’(Barras).

Fireworks MX -> Clique na caixa de seleção do tipo de
preenchimento e escolha Bars ( Barras )
Fireworks MX 2004 -> Clique na caixa de seleção do tipo de preenchimento,
seleciona Gradient ( Gradiente ) e escolha Bars ( Barras ).

Note que o preenchimento é uma mistura de apenas
duas cores e com as barras na vertical. Precisamos alterar o sentido desta
barra para horizontal. Para isso, selecione o retângulo, e altere
a direção
das barras clicando no símbolo quadrado e o arrastando num sentido
de 90º e diminua o seu tamanho de forma que ele temha a espessura
exata do retângulo. Clique e veja o exemplo animado
deste processo.

Provavelmente a cor mais escura deverá estar na parte de cima,
precisamos então alterar esse sentido de forma rápida. Com
o retângulo selecionado, escolha Modify > Transform > Flip
Vertical (Modificar > Transformar > Inverter Verticalmente).

Agora vamos modificar as cores, de forma a dar o efeito exato de cromado
ou metalizado. Com o retângulo selecionado, clique na paleta de cores
de preenchimento do objeto. Você deverá ter uma tela semelhante
a esta, onde você encontrará duas cores apenas, representadas
cada uma por um controle deslizante, onde podemos ajustar a intensidade
da mistura entre as cores.

Aqui entramos num processo onde poucas ainda não
sabem como lidar com este recurso, que é adicionar ou remover cores.
No nosso caso vamos adicionar mais duas cores. Para isso, posicione o
mouse perto da linha de controle de cores até que apareça
um sinal de (+) junto ao ponteiro. Ao clicar, você terá adicionado
uma nova cor. Precisamos de mais uma cor, portanto, repita o mesmo processo
para adicionar a outra cor. Clique e veja o exemplo
animado.

Com as quatro cores na paleta, é só ajustar
a cor de cada
controle e sua intensidade. Para alterar a cor de cada controle, basta
clicar em cima dele para abrir a paleta de seleção de cores,
onde você pode escolher um cor padrão ou criar a sua digitando
o valor hexadecimal no espaço em branco.

Bom, já temos praticamente nossa barra quase completa, mas ainda
faltam alguns detalhes para deixa-la completa: as bordas. Aí você deve
estar se perguntando que para isso bastaríamos adicionar a cor da
borda ao retângulo. Poderia ser também, mas não poderíamos
ter duas bordas com espessuras finas e cores diferentes com apenas um cor
concorda? Então como faremos isso? Desenhando duas linhas distintas,
que servirão de base para as bordas e a separação
entre outras barras se você assim desejar.

Crie uma linha com largura semelhante a do retângulo. Você pode
utilizar tanto a Pen Tool (Ferramenta Caneta) quanto a Line Tool (Ferramenta
Linha) para desenhar a linha. Ao criar a linha, duplique-a, pressionando
CTRL+D.

Posicione cada uma das linhas de forma que elas fiquem
acima e abaixo do retângulo respectivamente como mostra a figura.
A linha de cima deve ficar um pouco separada do retângulo para que
dê a impressão
de baixo relevo. A linha de baixo pode ficar junto ao retângulo como
se fosse a borda dele.

Terminamos? Não, claro que não! Ainda falta um pequeno
detalhe, a divisória, que separa cada opção do menu.
Mas isso não é problema, basta desenhar duas linhas verticais,
com altura exatamente igual a do retângulo. As linhas devem estar
uma ao lado da outra. Uma cor cor mais escura e outra mais clara. No
nosso caso uma linha cinza e outra branca. Poderíamos utilizar
outras cores, mas não teria o mesmo efeito, até pelas cores que
utilizamos no retângulo,
da mesma forma que não teria sentido por exemplo se tivéssemos
uma barra metalizada laranja.

CONCLUSÃO

Bom, neste tutorial tentei explorar alguns conceitos como mistura de
cores e ferramentas vetoriais utilizando um exemplo bem simples para
os usuários mais leigos na ferramenta. Esta barra poderia ser feita
com outro tipo de recurso como CHANFRO ou RELEVO tranquilamente, mas
não teria nenhum sentido, pois não teríamos a chance de explorar outros
recursos do Fireworks. Enfim, o intuito aqui é que
você leve como conhecimento o conceito de como se trabalhar com ferramentas
vetoriais e misturar cores utilizadas na web, criando trabalhos mais
profissionais. E lembre-se, o bom profissional é aquele que aprende
a técnica,
pratica e tenta aperfeiçoa-la, e sempre utilizando a criatividade.

Qualquer dúvida, meu email é marcelo@fireworking.net.

Um abraço a até a próxima.

No nosso exemplo trabalharemos com um layout único, ou seja, que

seja adaptável tanto para um estilo vertical, que geralmente é

uma página única (o mais usado hoje), quanto para um estilo

horizontal (que geralmente utiliza frame).

Iremos fatiar um Layout (já pronto) com dimensões de 790 pixels de largura X 450 pixels de altura. Repare que a largura é 10 pixels menor que a configuração padrão para a navegação na web atualmente, que é de 800×600 pixels. Mais a frente, quando estivermos trabalhando com o Dreamweaver, você entenderá o porque dessa medida. Para fatiar utilizamos a Ferramenta Fatia.

Agora o passo final, e o mais complicado, o desenho da distribuição do conteúdo propriamente dito. Há um ponto importante a se notar antes de começarmos a traçar as divisões : Esta página serve como modelo para as outras, ou seja, uma base principal, mas isso não quer dizer que todas as outras seguiram seu modelo rigorosamente. Sendo assim, podemos ter essas divisões apenas nesta primeira página, onde teremos um breve resumo dos conteúdos oferecidos pelo site, e as outras páginas sem essas divisões para abrigar o seu conteúdo exclusivo. Por isso deixo para você esta escolha, mostrando o que pode ser feito das duas maneiras. Voltando ao início do nosso tutorial, você se lembra que quando começamos a desenhar as fatias, desenhamos três fatias principais em cima da fatia inicial que ocupava toda a área de trabalho, sendo divididos em cabeçalho, conteúdo e rodapé, respectivamente. Já definimos as divisões do cabeçalho e do conteúdo. E o rodapé? No nosso caso não será necessário, mas deixo a seu critério caso você queira fatiá-lo. Na continuação do tutorial, daremos início a configuração das fatias para exportação do nosso projeto.

Agora que temos o nosso fatiamento quase terminado, vamos então

começar a configurar nossas fatias de forma que se possa aproveitar

melhor o seu espaço e ter uma melhor qualidade na exportação

dos arquivos.

Podemos configurar a exportação dos arquivos de duas formas:

- Um configuração Geral, que aplica o tipo de exportação

para todas as fatias…

- A configuração Individual: que aplica um tipo de exportação

a fatia selecionada.

No nosso caso vamos usar a segunda opção, por nos dar mais

flexibilidade na hora de exportar, já que podemos escolher entre

vários formatos selecionando cada fatia individualmente.

Depois de terminado a fase de desenho do layout e desenho das fatias

que irão compor todo o conteúdo do nosso site, é

hora de exporta-lo para html e posteriormente editar alguns detalhes no

dreamweaver. Crie uma pasta no diretório/pasta de sua preferência

com o nome de Tutorial Exemplo e dentro deste crie uma pasta chamada Imagens,

para abrigar as imagens de seu site.

Para exportar selecione Arquivo > Exportar (Ctrl+Shift+R) ou se preferir

na janela de Visualização de Exportação, selecionando

Exportar:

Na janela de configuração, navegue até o diretório

Tutorial Exemplo e dê um nome para o seu arquivo. Em Salvar como

tipo selecione HTML e Imagens. Em HTML selecione ‘Exportar arquivo

HTML’ e em Fatias selecione Exportar Fatias. Deixe selecionado o

item ‘Incluir áreas sem fatias’, para que ele crie

imagens que ocupem automaticamente os espaços da tabela. Selecione

‘Colocar imagens na subpasta’ para salvar as imagens geradas

em uma pasta diferente que, no nosso caso, será a pasta Imagens

que criamos.

Clique em Ok para voltar a janela de exportação e clique

em Salvar para salvar o arquivo html e as imagens.

Pronto, nossa exportação já está finalizada.

Nosso próximo passo agora será editar o site no Dreamweaver.

Abra o Dreamweaver. Crie um novo site, como mostra a figura:

Digite um nome para o seu site, e em Pasta Raiz local, selecione a pasta

Tutorial Exemplo para onde foi exportado as fatias no Fireworks.

Os ítens mais detalhosos vou deixar a cargo de

você, já que agora você está com a faca e

o queijo na mão. Basta aplicar as dicas e técnicas que

utilizamos neste tutorial e você poderá executar qualquer

trabalho com facilidade. Para um trabalho perfeito, nada melhor que

praticar.

Bom pessoal, é isso, esse foi um tutorial bem simples

e resumido sobre este tópico de fatiamento e exportação.

Mas espero que tenham gostado. Se alguém tiver dúvidas

por favor nos envie um email, ou poste sua mensagem no nosso fórum

para ser debatida entre os colegas.

Fica aí um grande abraço a todos vocês..

Marcelo Rodrigues (Firemaster).

Passo 2 – Criação

de Comandos.

Esta etapa é um pouco mais complicada, porém mais divertida,

pois aqui começamos a entender melhor o funcionamento dos comandos

que o Fireworks executa.

Abra um novo arquivo, com a dimensão á seu gosto.

Pronto, agora você usar este comando não só para

o processo em lote, mas para qualquer objeto no seu trabalho, como um

comando comum padrão do Fireworks.

Feche este arquivo. Não é necessário salvá-lo,

mas se você quiser, sinta-se á vontade.

Agora vamos partir para a última fase do nosso tutorial, que é

a aplicação do nosso comando á todas imagens no processo

em lote.

Vá ao menu Arquivo > Processo em Lote. Selecione as imagens

quer foram redimensionadas no Passo 1( cuidado para não abrir as

imagens originais de backup do processo anterior de redimensionamento

). Selecione tudo, e clique em Próximo.

Repare que os todos os passos que executamos neste tutorial, poderiam

ter sido executados de uma só vez. Ou seja, poderíamos redimensionar

e colocar a marca d’água nas imagens tudo ao mesmo tempo,

mas para facilitar o entendimento deste tutorial, preferi dividir estas

duas etapas.

Bom, este tutorial foi escrito baseado na dúvida de um colega

do fórum, e também é muito parecido e baseado em

um tutorial escrito pelo ex-colunista sobre Fireworks do site iMasters,

Eduardo Carrega, por isso fiquem ligados, a qualquer momento a sua dúvida

também pode estar aqui nos tutoriais.

Um abraço á todos.

Marcelo Rodrigues