Get Firefox

Videozinho para descontrair!

Abraços!

Introducao ao Fireworks

Apostila de Fireworks 8
Nível: Básico (Introdução ao fireworks)

Post meio grandinho, mais é bem útil para quem não tem nenhum conhecimento em Fireworks.

Este material não deve ser usado como fonte única de informação

1. Introdução ao Fireworks MX
A interface do Fireworks torna simples o processo criação, editoração e otimização de imagens para a web. o Fireworks possibilita a combinação de Vetor e Bitmaps no mesmo documento, evitando a alternação entre dois ou mais programas. Ele possui uma fácil integração entre os softwares Dreamweaver, Flash e Freehand.
Com a utilização do Firewoks, você pode dividir as imagens, com isso, você pode mesclar diferentes tipos de formatos em um mesmo documento(site). Criar efeitos de RollOver, Gifs animados e gerar arquivos HTML a partir do seu desenho.
Para abrir o Fireworks, vá em: Iniciar » Programas » Macromedia » Macromedia Fireworks 8.
2. Área de Trabalho

2.1. Barra de Ferramentas (tools)
O Painel de ferramentas é dividida em seis partes: Seleção(Select), Bitmap, Vetor(Vector), web, Cores(colors) e Visualização (view). Objetos em vetor podem ser diminuídos e aumentados sem qualquer distorção da imagem. Bitmaps podem vir a sofrer distorções e sofrer "estouro de pixels" quando redimensionados.

Algumas ferramentas são agrupadas com outras ferramentas e podem ser acessadas clicando na seta para baixo.

A seguir a barra de ferramentas (tool) com o nome e o atalho. Se possível, decore o máximo de atalhos, isso ajuda com que o seu trabalho ganhe produtividade.

(ver imagem inteira)

2.2. Inspetor de propriedades

Quando uma ferramenta é selecionada na barra de ferramentas ou um objeto é selecionado no documento, as opções da ferramenta é mostrada no inspetor de propriedades

Ferramenta "retângulo" selecionada na barra de ferramentas

Linha (path) selecionada no documento

Texto selecionado no documento

O inspetor de propriedades é dividido em diferentes áreas, de acordo com a característica de cada objeto. Essas áreas incluem: preenchimento, linha, tamanho, localização, efeitos, alinhamento, ou transparência(opacidade), entre outros.
2.3. Painel Camadas(Layers)
O Painel Camadas(Layers) é uma poderosa ferramente para auxiliar o desenvolvedor a criar e guardar objetos. Com elas, você pode controlar a ordem de empilhamento dos objetos na página, ordenando seus objetos de forma fácil e rápida para cima ou para baixo. Outras funcionalidades atribuídas ao painel Camadas é a possibilidade de poder bloquear e ocultar determinadas camadas. Você poderá também dar nomes específicos para cada camada, criar pastas parar guardar grupos de imagens, excluir e criar novas camadas, auxiliando na organização dos seus objetos.

3. Criando uma nova imagem
Para iniciarmos a edição de uma pagina(imagem), precisamos criar um novo documento, vá ao menu: File (arquivo) » New (novo) ou utilize o atalho CTRL + N.

Para criar um novo documento existem algumas configuração que devem ser feitas. No exemplo acima, as configurações definidas para largura (width) e altura (height) do documento estão configuradas em pixels, podem também ser configuradas por: Polegadas (inches) e Centímetros (Centimeters), este tamanho será o espaço disponível para o desenvolvimento, caso você não saiba qual o tamanho exato, insira um valor próximo, pois no decorrer do trabalho, o espaço para desenvolvimento poderá ser modificado facilmente.
Resolução (Resolution), esta propriedade vai definir a qualidade que você irá trabalhar no documento, trabalhos para a web recomenda-se o uso de 72 DPIs (dots per inches/pontos por polegadas), isso ocorre pois os existe um padrão determinando que as imagens para a visualização na tela dos computadores não necessitam mais do que 72 DPIs, caso haja a necessidade de criar imagens para impressão, o valor deve ser alterado para 300 DPIs.
Cor de fundo(Convas color), como o próprio nome já diz, será atribuída uma cor ao fundo do documento, as opções disponíveis são: branco(white), transparente(transparent) e Customizada(Custom), onde você pode definir qualquer cor de fundo ao documento. Após realizar todas as alterações desejadas pressione o botão ok ou tecle enter.

4. Canvas Size, Image Size e Fit Canvas

Estas três funcionalidades fazem parte do gerenciamento da sua área de trabalho no documento, e podem ser localizados no Inspetor de propriedades. Para que seja exibida as propriedades da página no inspetor é necessário clicar em uma área branca (que não possua nenhum objeto) ou clicar na área cinza ao redor de sua área de trabalho.

4.1. Canvas Size
Caso você tenha definido pouco espaço para o desenvolvimento do seu trabalho, este pequeno problema pode ser resolvido facilmente com a utilização da função Canvas Size. esta opção também pode ser escolhida indo ao menu Modify » Canvas » Canvas size.

em canvas size, existem duas sessões, a primeira (Novo tamanho) é responsável pela nova área de trabalho que você deseja definir e na segunda sessão é o tamanho atual do documento. Para entrar com o novo tamanho, escolha a altura e largura desejada (as alterações podem ser realizadas separadas, só altura por exemplo).
Após definir o valor para o novo tamanho, existe uma outra opção que deve ser configurado que é a âncora, o papel da âncora nada mais é que definir a direção em que vai ser expandido(ou retraído) o espaço de desenvolvimento. No exemplo, a expansão será feita para todos os lados, caso queira expandir apenas para baixo, você deve selecionar o botão .

4.2. Image Size
Esta opção serve para redimensionar o documento e todos os objetos que ele contém.

Em Pixel Dimensions, você deverá entrar com o valor de altura e largura (em pixels), o cadeado ao lado direito representa que se você alterar a largura, o Fireworks irá automaticamente alterar a altura proporcionalmente. Caso você queira configurar a imagem para um tamanho de impressão, você deve alterar os valores em Print size.
Para redimensionar a altura e largura independentes, retire a seleção da opção: Constrain Proportions.
Selecione a opção Resample Image para adicionar ou remover pixels quando a imagem é redimensionada, esta opção faz com que a mesma fique com a aparência semelhante à original.

4.3. Fit Canvas

Esta opção serve para você redimensionar o seu documento para que não fique espaço vazio em volta do seu trabalho. A figura abaixo representa a utilização da ferramenta.

é isso ae pessoal, espero que tenha sido de grande ajuda este pequeno post!

Abraços

As 10 maiores mentiras contadas pelos clientes

I ae pessoal, a muito tempo atras recebi um e-mail com as 10 maiores mentiras contadas pelos clientes... e eu no inicio ja estive envolvido em algumas delas, então, posto aqui para que quem esta começando agora abra os olhos em relação a isso.

por Rafael Dourado - 14/02/2007

1. Faça esse de graça que no próximo a gente se acerta.
Todo freelancer cai nessa quando faz o 1º trabalho, mas o 2º nunca vem. Ainda tem a desculpa: "é só para saber se você é bom mesmo".
2. Pago quando receber a versão final.
Clientes antigos e confiáveis até podem ter essa liberdade, mas novos clientes… Vide o item 5. E mesmo que termine, pode dizer que não quer mais. E aí? Foi tempo perdido. Por isso contratos são indispensáveis.
3. Esse trabalho vai te dar muita visibilidade e gerar inúmeros negócios novos.
Isso pode até ser verdade de fato. O problema é que essa frase geralmente é usada como argumento para baixar (e muito) o preço. Se você já começa fazendo um mal negócio, as indicações chegarão querendo um acordo semelhante.
4. Bom, não sei se vou fazer o trabalho com você, mas deixe aqui seu material que vou conversar com meu parceiro/investidor/esposa/clero.
Duas situações possíveis: você não está falando com quem toma a decisão na empresa, ou você acaba de prestar consultoria para um concorrente. No primeiro, tente sempre falar com quem toma as decisões, caso contrário um telefone sem fio acontece e sua defesa já era. No segundo, o cliente liga para um concorrente seu e barganha preço, que vai poder cobrar mais barato, pois todo o trabalho criativo você já fez. Não deixe nada que você gastou horas para fazer na mesa alheia.
5. O trabalho não foi cancelado, só adiado. Mas em um mês ou dois eu entro em contato.
Resultado do segundo item. Pode ser uma desculpa para não pagar pelo trabalho feito até então. Se bater a curiosidade, ligue em 2 meses para descobrir quem ficou no seu lugar.
6. Pra quê contrato?
Para se resguardar de metade dos itens aqui listados.
7. Mande-me a conta quando o trabalho for veiculado.
Mentira para publicitário, não para webdesigners. Com o 1º a veiculação vem depois que o trabalho terminar, logo, deve ser pago. Com o 2º isso não acontece, pois depois que o site está no ar pode precisar de adaptações pelas exigências do servidor ou problemas de renderização.
8. O último cara fez isso por tantos reais.
Se o último cara fosse bom o suficiente o cliente não estaria conversando com você agora, não é mesmo? Cobre um preço justo e segure-o. Parasitas sempre irão existir em qualquer mercado, mas se o seu preço reflete a qualidade do seu trabalho, mantenha-o.
9. Nós só temos tanto para gastar.
Menos dinheiro, menos trabalho. Não abandone um cliente porque ele não tem o quanto você está cobrando, mas reduza os recursos. Aquela área inovadora que demorava 3 meses para fazer talvez possa esperar mais um pouco.
10. Estamos com problemas financeiros. Nós dê seu trabalho que assim que ganharmos dinheiro com ele te pagamos.
Já ouvi muita história sobre isso. Isso é, no mínimo, uma aposta com MUITAS chances de se perder. O cliente pode até de fato ganhar muito dinheiro com seu trabalho, mas como você vai saber? Você não tem controle sobre as finanças da empresa. Não sabe o quanto eles estão gastando e quanto estão perdendo. E você também tem suas próprias contas para pagar.
======

Acrescento também mais um tópico que devemos ter um certo cuidado!

Pra vender a idéia do projeto para meu diretor preciso de um layout bem acabado. Sem algo palpável fica difícil de apresentar.

Quando o fornecedor é chamado a idéia já deve estar "vendida para o diretor". Os layouts feitos, mesmo que apenas para apresentações,devem ser cobrados se encomendados pelos clientes.

Como fazer uma bola de vidro utilizando Fireworks

Olá Pessoal, hoje vou tentar esinar um efeito bem legal de vidro utilizando o Fireworks, sempre lembrando que na vida tudo tem pelo menos dois lados, e com um efeito isso não é diferente.

Eu vou ensinar apenas UMA forma de fazer isso, mais existem vários, o estudo diário e a dedicação fazem com que essas técnias surgam.

Bom, vamos lá, este efeito não leva mais do que 10 minutos e é bastante legal.

Primeiramente, abra o fireworks (Iniciar » Todos os programas » Adobe » Adobe Fireworks).

1. Crie um novo arquivo: File » New ou CTRL + N, escolha a altura, largura, resolução e a cor de fundo.
   
   
   
2. Após criar um novo documento, vamos dar início ao desenvolvimento da nossa bola de vidro. Utilizando a ferramenta: Rectangle Tool (U), vamos desenhar uma "bolinha".
   
   
   
3. Após desenhar a bolinha, vamos configurar as cores, no meu caso, fiz uma bolinha vermelha. Para dar um efeito de profundidade, devemos colorir a bolinha com um efeito de Radial. (Painel de Propriedades).
   
   
   
   
4. Escolhemos o tipo de cor (Radial) agora temos que definir qual cor utilizar.
   
    
   Na primeira cor utilizei: #3E0000 e na segunda: #990000.
   
   Agora a nossa bolinha esta assim:
   
   
   vamos ter que mudar o foco da pintura Radial, como podem observar, ela esta no centro. vamos colocada mais abaixo. assim:
   
   
   
5. A primeira parte da bola esta feita, agora precisamos colocar um efeito de brilho. Selecione a bolinha, e duplique ela, apertando CTRL + SHIFT + D. Aparentemente, nada vai acontecer, mais agora você tem duas bolas. Pinte a de cima com BRANCO (#ffffff).
6. Agora selecione a bola branca, vá em: Commands » Creative » Fade Image. Uma telá irá aperecer:
   
   Escolha a opção mostrada na figura acima, de OK.
   Nossa bolinha ficará assim:
   
     
   
7. Agora, temos que fazer os ajustes, de tamanho da bolinha branca e também da transparencia, essa barrinha preta bem no centro. Ficando assim:
   
    
   
   Para ajustar o tamanho, é só apertar CTRL + T, e para ajustar a transparência, é so clicar no quadradinho preto e arrastar pra cima.
   
8. É isso ae pessoal, espero que tenha sido útil este tutorial, agora com o final da faculdade fica mais facil escrever algo. Agora é só ir incrementando as técnicas e bolar a sua!

 

Abraços a todos! Próximo tutorial, pretendo ensinar como fazer um reflexo utilizando o FW.

 

Ah! Bolinha leia-se Elipse.

 

:D Feliz Ano Novo a todos!

Feliz Natal

Gostaria de desejar um Feliz Natal e um Próspero ano novo, com muitas conquistas, conhecimentos adquiridos, dinheiro, saúde, paz e tudo aquilo que todo mundo deseja pra todo mundo.

=)

Abraços a todos!

Servicos relacionados a um projeto de site na internet

Post FIELMENTE afanado copiado do blog do Rafael Lima.

Achei o post inteiramente interessante para os iniciantes em desenvolvimento, bom lá vai! Boa Leitura!

--------

Este post é dedicado aqueles que desejam construir um site na internet e não tem nenhum conhecimento sobre os processos e serviços envolvidos. Tenho feito alguns sites de profissionais liberais e tenho percebido que nem todos sabem o que é necessário para ter um site funcionando e quais os serviços envolvidos.
Se você é um usuário avançado, fique a vontade para indicar este post para seus clientes ou conhecidos que precisam ler sobre o assunto.

Ter um site na internet envolve em geral os seguintes serviços:

Desenvolvimento - O desenvolvimento pode ser basicamente dividido em Design e Programação. O design vem primeiro e consiste na concepção gráfica e de estrutura do site. Após ter os layouts prontos entra a parte de análise e programação. A análise vai modelar o sistema e o banco de dados e a programação vai transformar os layouts em site funcional. Este serviço é pago uma única vez, o valor varia muito de acordo com o escopo do projeto.

Hospedagem - Para o site estar disponível na internet para qualquer pessoa acessar, os arquivos devem estar em um computador chamado de servidor que fica fisicamente em um datacenter. O datacenter é um ambiente com redundância de energia elétrica, link de acesso a internet de alta velocidade, brigada de incêndio, segurança física, ou seja, tudo para garantir que o servidor funcione bem 24h por dia. O serviço de hospedagem é pago mensalmente, e o valor é algo em torno de R$ 30,00.

Registro de domínio - O site será acessado por um endereço, como por exemplo www.seunome.com.br. Esse endereço chama-se domínio e ele precisar ser registrado. Neste registro se configura qual o endereço do servidor onde estará hospedado o site. Quando o domínio termina em “.com.br” o registro é feito no registro.br necessariamente e custa R$ 30,00/ano. Quando termina com “.com” ou “.net” deve ser registrado em um provedor internacional e custa algo em torno de U$ 15,00/ano.

Manutenção do conteúdo - O ideal é que o site seja dinâmico, ou seja, que tenha uma ferramenta de administração onde você possa facilmente atualizar o conteúdo. Os sites dinâmicos, em geral, precisam de banco de dados para funcionar. O valor deste serviço vai depender da demanda de conteúdo para ser atualizado, sendo texto ou imagens. Normalmente é realizado por designers ou jornalistas.

Manutenção de segurança - A manutenção de segurança deve ser realizada por quem desenvolveu o site e por quem realiza a hospedagem. O ideal é que a empresa que realize a hospedagem seja a mesma empresa que desenvolveu o site, pois diminuirá a chance de problemas de incompatibilidade nas atualizações feitas, umas vez que a empresa sabe das necessidades do site. Além disso ela poderá efetuar mudanças no site e no servidor no mesmo tempo, evitando que o site fique fora do ar. A manutenção de segurança é realizada por profissionais de tecnologia e o valor do serviço varia de acordo com o nível de serviço acordado.

Suporte - Muitas vezes será necessário ter um suporte de uso da ferramenta que foi desenvolvida/utilizada no site. Algumas ferramentas são bem completas e possuem muitos recursos. Em geral este serviço é cobrado por hora de consultoria e é realizado por desenvolvedores ou consultores que conheçam a ferramenta.
O intuito foi esclarecer o básico dos serviços que irão aparecer para qualquer contratante de sites na internet, espero que seja útil para todos.

---

Abraços a todos!

CSS Text Wrap

Olá Rapaziada, mais uma vez, lendo meus Feed do Ajaxian, me deparo com uma ferramenta muito show.

Bom, melhor mostrar visualmente do que textualmente.

Visualmente eu pude definir como o meu texto írá ficar, nesta ferramenta, após definir (visualmente) como o seu texto vai ficar, é só clicar em "i'm Done", e pronto, o código é gerado, onde:

• Você pode trabalhar com CSS Inline;
• XHTML + Classes;
• Javascript.

O sistema possibilita também várias configurações como mostra a figura a seguir:

Onde você pode alterar o tamanho da sua caixa de texto (largura e altura), alinhamento do texto, tipo de fonte, tamanho da fonte, qual texto vai ser exibido e espaçamento entre as linhas.

A ferramenta é muito fácil de utilizar e nos dá um resultado final muito bom.

Teste você mesmo o CSS TEXT WRAP

Portifolio: Player de Audio e Video

Player de audio e vídeo que fiz em parceria com a Makina, empresa de Florianópolis.

A parte de Design foi criado por eles, eu fiz a programação em Flash (Action Script)

Desenvolvido com Action Script 2.0 utilizando o componente FLVPlayback (para vídeo) e a classe Sound(); para o player de audio, para carregar os ítens, utilizei XML.

quem quiser conferir é só acessar o site da Norelha.

 

Abraços a todos!

Dica de Livro: WEBDESIGN: TEORIA E PRATICA

Olá pessoal, Gostaria de deixar aqui uma dica de livro que acho muito interessante.

WEBDESIGN: TEORIA E PRÁTICA, livro de Anielle Damasceno. O livro aborda os principais fundamentos para projetos web. O livro é muito claro e direto, como o nome já diz, ele trata da teoria e também de prática.

Ótimo para quem pretende iniciar-se com webdesign, este livro foi muito importante na minha formação.

O único ponto fraco que eu achei do livro é que ele NÃO é colorido, o livro ganharia muito se fosse.

Sinopse do Livro

Este livro destina-se a demonstrar os principais fundamentos que cercam a concepção e criação gráfica para a Web, possibilitado ao leitor desenvolver habilidades na arte da observação e percepção do bom e verdadeiro design gráfico. Esta obra atemporal é recomendada a todos os profissionais da área que desejam aprofundar-se no estudo da concepção e criação do Webdesign. Aborda a história do Webdesign e sua evolução ao longo dos últimos anos, desmembrando detalhadamente cada um dos tipos de sites existentes; explica os principais fundamentos teóricos que cercam a utilização de formas e cores, entre outros.

Onde Comprar?

Livros de internet - R$ 79,00

Submarino - R$ - (Ainda não disponível até a data de hoje)

Visual Books - R$ 71,10

Tempo Real - R$ 71,10

 

Acessando os links acima, vocês podem obter mais informações sobre o livro.

É isso ae, abraços e boa leitura!

 

Ah! não esqueçam, Livros são investimentos e não gastos.

TCC

Pois é pessoal,

Depois de 4 anos, tudo acaba, ou começa? enfim, "detalhes" a parte, esses anos ficarão pra sempre na memória, e não importa o que aconteça a não ser bater a cabeça muito forte nunca será esquecido, principalmente o momento abaixo, trexo da nossa apresentação em qua recebemos as notas.

Depois de meses, madrugadas sem dormir.. a recompensa!

É isso ae, PRIMEIRO (e por enquanto único) 10 no TCC da ESUCRI!

Eu realmente não podia deixar de postar isso!

Agradecimentos especiais ao meu parceiro de TCC, will e a nossa orientadora Maristela!

Abraços!

Google cria rival para Wikipedia

No melhor estilos Pink e Cérebro! a Google desenvolve mais uma ferramenta, desta vez, é um rival para a conhecida Wikipedia.

O nome da "criança" é Knol, uma redução de knowledge (conhecimento).

Para quem não conhece (primeiro acesso a internet hoje) a Wikipedia trabalha com o compatilharmento de informações, onde pessoas podem contribuir com conteúdo.

A diferença é que no Knol da Google, é que os autores possam se identificar, assinando seus textos. Com isso, os usuários podem questionar, corrigir ou comentar sobre as informações.

Um outro diferencial, é que os contribuintes possam ser remunerados, claro, se o famoso Adwords (Links patrocinados da google) possa aparecer ao lago dos verbetes com o concentimento do autor.

Por enquanto, a ferramenta esta disponível apenas para um pequeno grupo e a google ainda não publicou quando vai disponiblizar a ferramenta.

Fonte: Info Online

Adobe Kuler e Colour Lovers - Compartilhamento e combinacao de cores.

Salva Rapaziada,

Hoje, vou mostrar um site muito interessante que é uma ferramenta da Adobe, chamada de Kuler.

Este site permite que as pessoas compartilhem paletas de cores desenvolvidas por elas, este site é muito interessante para as pessoas que estão começando no desenvolvimento a escolherem cores adequadas para colocar nos sites.

A questão de combinação de cores, é um ítem muito importante e é onde a maioria dos desenvolvedores iniciantes cometem erros. Então, com este site, a chance de erros diminui bastante!

Similiar a este site também tem o Colour Lovers, muito interessante também.

É isso ae pessoal, espero que aproveitem ao máximo esses sites.

Abraços!

Web 3.0 - A Web Semantica

Vídeo que eu "encontrei" na net.

"Tim Berners-Lee, considerado o "pai" da web, comenta quais são os príncipios da "Web Semântica", chamada por alguns analistas de Web 3.0 prevista para estar em prática a partir de 2010."

Ficar como administrador no Windows Vista

I ae pessoal, saindo um pouco da finalidade do blog, vou postar aqui uma dica para os usuários do Windows Vista.

Nativamente, o Windows Vista não da controle de Administrador para os usuários do SO. Na verdade, ele possui 3 níveis de usuário.

• Usuário Padrão: Aquele que não pode fazer quase nada, ou seja, perfeito para criar uma conta para os filhos ou namoradas :P;
• Usuário Administrado: Tem acesso ao sistema, instalar programa, enfim, faz quase tudo que o sistema permite;
• Usuário Administrador "Master": Ele por padrão fica desabilitado. utilizando este usuário não é preciso "permitir" nada, com isso, a sua utilização deve ser feita com cautela.

Vamos lá, para tornar o Administrador "Master" ativo basta seguir estes passos:

1. Digitar CMD no campo de busca;
2. Nos resultados, clicar com o botão direito do mouse sobre o ítem CMD, e clicar em: Rodar como Administrador (ou Run as administrator);
3. No prompt de comando digite: Net user administrador /active:yes;
4. ENTER;
5. Uma mensagem de confirmação irá aparecer: Comando Concluido com êxito.

Obs.: Caso o windows vista esteja em Inglês, deve-se trocar: Administrador por Administrator.

Para acessar com o usuário Master, basta fazer o log off, ou apertar as teclas: Window + L. (vai para a tela de login)

Obs2.: Por padrão, o usuário administrador vem sem senha, caso queira deixar ele ativo, coloque uma senha nele.

Caso queira desabilitar, faça o procedimento anterior e modifique apenas o "yes", assim: net user administrador /active:no.

é isso ae pessoal, espero que esta dica tenha sido útil para quem utiliza o windows vista. e lembrando que foi lançado o SP1 onde vc pode fazer o download no site do BABOO.

 

Abraços a todos!

Criar Sitemaps (mapa do site) online

I ae rapazia, depois de um certo tempo sem postar estou de volta.

Bom, encontrei uma coisa muito bacana pra ajudar o desenvolvedor a documentar o site, tanto para uso pessoal, quanto para apresentar para o futuro cliente sobre como o site será distribuido.

Eu particularmente sempre coloco nos meus projetos o mapa do site, o que o site vai conter, páginas, o que o usuário vai fazer nela, enfim, todas as ações. QUASE um diagrama de casos de uso (UML).

Bom vamos lá, lendo os meus Feeds do site Ajaxian tinha um site muito show que disponibiliza uma ferramenta - gratuita - para criar os sitempas, é uma ferramenta muito fácil de utilizar.

Para isso basta criar um cadastro e pronto.

o site é: WriteMaps.

Abaixo uma foto de um exemplo...

Detalhe da imagem acima:

Bom, é isso ae pessoal, espero que esta ferramenta seja muito útil para todos.

Abraços!!!