Novo design (redesign) do meu site fspina.com.br mais simples e mais acessível.

Confira: www.fspina.com.br

Divulgando a apresentação da Paula Mariano na palestra “Como construir sites visualmente impressionantes com CSS” no Evento Microsoft Remix 07.

Vale a pena dar uma conferida, mostra a funcionalidade do CSS para apresentação multi plataforma e fazer o estilo a partir do HTML semântico.
Também, relata os benefícios para otimização de código, carregamento do site mais rápido, acessibilidade e conteúdo em site de buscas (SEO).

Para visualizar a apresentação (ppt), clique abaixo:
http://download.microsoft.com/…/
ComoconstruirsitesvisualmenteimpressionantescomCSS-PaulaMariano.ppt

No site de desenvolvimento da Apple, tem um guia mostrando como desenvolver web site, video e aplicações para o iPhone, é uma referência boa para programadores e designers.
Algumas dicas como saber o tipo de media do CSS, tamanhos e resolução de tela.

Mais referencias em:
http://developer.apple.com/iphone/
http://developer.apple.com/iphone/designingcontent.html

Existem vários sites para validar seu site nos padrões W3C/WAI

Tem um jeito mais fácil de fazer esse teste de validação, utilizando seu navegador.
Baixei o Fire Fox, nele tem uma extensão (plug-in/add-on) chamada HTML VALIDADOR (clique aqui para baixar).

Nessa extensão indica em qual linha tem erros e avisos.

Quando instalar e reiniciar o Browser, você vai ver um icone no canto inferior direito.
Se esse Icone for Verde , o site está validado, se tiver vermelho contém erros graves e se tiver um amarelho é de avisos para ser corrigido.

Lembrando que é super importante deixar o código sempre nos padrões para maior visibilidade do site, mesmo se o Icone validado estiver verde, é sempre bom validar a acessibilidade do site

Para ativar o teste de acessibilidade no código HTML, vai em Ferramentas/Tools do Firefox, tem uma opção Html Validator Options ou vai em Add-ons/Extensões, selecione HTML VALIDATOR e clique em Opção/Options.

Ative o “Accessibilty level” (igual da foto), deixando pelo menos no nível 1.
Se conseguir corrigir os problemas de acessibilidade no nível 3, deixará seu site com mais visibilidade ampliando o número de pessoas que possam acessar.

Procure sempre validar o código e deixar acessível multi plataforma.

Aplicativos divididos em sete categorias receberam ontem o Apple Design Awards 2007 na WWDC. Vou puxar a sardinha para o meu lado (para quem não sabe sou webdesigner) e falar de dois deles que uso faz pouquíssimo tempo, mas já amo e nem sei mais como vivi tanto tempo sem.

Coda 1.0 (Panic Inc.)

O Coda é sensacional. Faz tudo que a gente precisa e mais um pouco. E ainda consegue ser lindo! Depois de um tempo trabalhando com web peguei o costume de escrever páginas no código e nem me lembro mais da última vez que abri o Dreamweaver. Usei o BBEdit por um bom tempo, mas assim que conheci o Coda foi paixão à primeira vista. E pelo visto não fui o único, o programa ganhou o prêmio de Melhor Experiência de Usuário em Mac OS X (ou User Experience se preferir).

A lista de funções vai de itens indispensáveis para quem trabalha com web à coisas pequenas que fazem uma enorme diferença: FTP, navegador de arquivos no menu lateral, prévia da págína, CSS, complemento automático, validação de código e até material de referência para HTML, CSS, JavaScript e PHP.

A minha favorita é o Find/Replace. No Coda é possível fazer buscas colocando blocos de texto que podem ter qualquer valor. Por exemplo, imagine que você quer colocar todas as imagens da página para 200×300, mas atualmente cada uma tem um tamanho. Como substituir alturas e larguras com valores variados? Simples: é só substituir ” width=”*” height=”*” ” por ” width=”300″ height=”200″ ” (o * na verdade é um símbolo que o programa usa). O exemplo é o mais simples, mas a função tem uma possibilidade infinita! Também pode-se usar esses “blocos com qualquer valor” para o campo de Replace e por exemplo trocar alturas pelas larguras. Não sei de outros programas que façam isso, mas sempre sonhei com um que fizesse algo do tipo pra códigos html.

Outra função interessante é o Clips. Você pode salvar tags e textos mais comuns para repeti-los sempre que precisar. Eles ficam numa janela prática e podem ser separados pelos sites que você está trabalhando. Para os usuários mais avançados o Coda também possui o Terminal embutido no programa e permite acesso a funções de servidor como MySQL e debug de PHP.

Para baixar, vá em http://www.panic.com/coda/. (A Panic, desenvolvedora do Coda, é a mesma do CandyBar. Para quem gosta de personalizar a interface do Mac OS vale uma conferida também.)

CSSEdit (MacRabbit)

Eu acabei de falar de um programa que canta, dança representa e também edita CSS. Então porque falar de um que só edita CSS? Apesar do nome, o CSSEdit tem como maior atrativo a dissecação do código e levou este ano o prêmio de Melhor Ferramenta para Desenvolvedor.

O programa possui um navegador no qual você pode abrir qualquer página (local ou na web) e examinar as folhas de estilo. Melhor que isso: é possível também clicar em qualquer elemento da página e ver a lista de estilos aplicado a ele, informando inclusive em qual arquivo css e class está definido cada atributo.

E não é só isso!

Você pode editar o css de uma página que está no ar e visualizar as alterações ou também substituir o css por um que esteja salvo na sua máquina.

Para trabalhar com css (e tableless) esse programa além de uma ótima ferramenta de desenvolvimento se torna também uma excelente fonte de aprendizado.

Para adquirir o seu ligue (011) 1406 ou visite http://macrabbit.com/cssedit/

Além de Coda e CSSEdit, os cinco programas que completam a lista de vencedores do Apple Design Awards 2007 são:

Delicious Library 2.0 alpha (Delicious Monster)

Melhor Aplicativo para OS X Leopard

http://www.delicious-monster.com/ (página da versão atual do produto)

World of Warcraft: The Burning Crusade 2.0 (Blizzard Entertainment)

Melhor Jogo para OS X

http://www.worldofwarcraft.com/

Papers 1.0 (Alexander Griekspoor)

Melhor Solução para Computação Científica

http://mekentosj.com/papers/

BART Widget 1.0 (Bret Victor)

Melhor Widget para Dashboard

http://worrydream.com/bartwidget/

Picturesque 1.0 (Zac Cohan and Nik Youdale)

Melhor Produto de Estudante

http://www.acqualia.com/picturesque/

Dicas no blog MAC e etc
http://oglobo.globo.com/blogs/mac/default.asp

Making the Most of Your Content
A Publisher’s Guide to the Web

Acesse o guia de Mostrar seu conteúdo na web.

Downloads importantes para Webdesigners autônomos ou Freelancers, atendimento ao cliente, coordenador de operações, projetos, negocios, pesquisa, planejamento e profissionais da área.

• Tabela referencial de custos de sites (clique aqui para baixar)
  
• Tabela que mostra os preços de quanto cobrar para um projeto Web, de um site simples a um projeto de um Portal, com cada serviço mostrado (valores/conteúdo)

• Modelo de briefing (clique aqui para baixar)
  
• Aqui tem um modelo de um briefing onde será informado nesse documento todas as informações que o cliente quer a ser realizada, através dessas informações o webdesigner terá a visão do trabalho a ser feito.

• Contrato de Prestação de Serviços de Desenvolvimento de Site (clique aqui para baixar)
• Modelo de contrato para comprir uma prestação de serviço, indicando o que será desenvolvido valores, prazo e outras informações.
  Que serão assinada pelo cliente para estar ciente do que esta contratando.

• Proposta (clique aqui para baixar)
• Documento no qual será preenchido com as informações de todo serviço no qual vai ser desenvolvido.
  Mostrando as tarefas, etapas, o tempo de cada etapa e valores.

• Pesquisa de satisfação (clique aqui para baixar)
• Pesquisa que será enviada para o cliente, para ter um “feedback” do seu serviço prestado, ou seja, saber os itens no qual foram positivos e acrescentaram a satisfação do projeto ou os pontos negativos para ser reavaliado.

• Modelo de Aprovação de Etapa (clique aqui para baixar)
• Informações e material enviado ao cliente no qual ele recebe esse documento, e tem a opinião de decidir a aprovação da tarefa realizada.

Referência da Revista webdesig da Arteccom
www.arteccom.com.br/webdesign