Archive for the ‘css’ Category

Brand new website

Posted on October 26th, 2008 by fspina

Como já estou morando há mais de dois meses aqui em Sydney, nada justo como redesenhar meu portfólio para a linguagem nativa do país onde estou vivendo. Isso tudo para a tentativa de novos trabalhos na minha área por aqui.

Brand New website

www.fspina.com (ou www.fspina.com.br dá no mesmo lugar)

Dê uma olhada e deixe seu comentário com o feedback.

Navegação em dispositivo móvel

Posted on May 7th, 2008 by fspina

Encontrei uma solução para navegar sem precisar carregar determinados elementos das páginas como CSS, Javascript e outros. No qual demorava muito para abrir ou o browser não suportava.

Usando o PSP aqui, alguns sites são incompatíveis e na maioria das vezes não abrem.

Meu amigo Sergio, me mostrou uma solução para isso usando Mowser

É uma ferramenta que você digita o endereço do site e gera apenas o HTML e as Imagens da página.

Isso facilita para quem quer somente o conteúdo, se não for em Flash ou qualquer Applet, é claro.

CSS NAKED DAY

Posted on April 9th, 2008 by fspina

Hoje é o CSS NAKED DAY, sim você verá uma lista de sites “pelados” nesse dia!
Isso, é somente o código HTML e tirar o CSS da página. O meu site ficou pelado: http://fspina.com.br/
Confira a lista com uma porção de sites pelados:
http://naked.dustindiaz.com/

Coda - Editor de HTML e CSS

Posted on January 28th, 2008 by fspina

Já falei do Coda uma vez aqui e vai eu de novo com a mesma opinião de ser o melhor editor de HTML. 

Tem uma biblioteca de referência, com 4 livros dentro dele (HTML, CSS, JavaScript e PHP).

coda biblioteca html > tag > marquee (tag não válida pelo W3C hehe) 

Tem o desenvolvimento local e no servidor hospedado, podendo editar já na web apenas salvando o próprio programa faz o FTP.
A lista de sites que você edita, aparece com thumbnail a screenshot do próprio site, para fazer isso apenas definir nas propriedades do FTP da onde vem a imagem.

Lista de sites com thumbnails das próprias screenshots

Na edição de CSS, tem um painel para selecionar as propriedades nas quais precisa, em modo que parece preencher um formulário para setar as mesmas.

Editor de CSS - Selecione as propriedades para setar elas.

O Coda ainda é só para usuários da plataforma Macintosh e só é FREE por 30 dias.

Tutoriais de Acessibilidade Web

Posted on October 30th, 2007 by fspina

Tutoriais de conteúdo e estrutura

  1. Como legendar imagens de uma página web.
  2. Marcar a estrutura de uma tabela de dados.

Tutoriais sobre CSS

  1. CSS em Acção: Conteúdo Invisível apenas para Utilizadores de Leitores de Ecrã.

Tutoriais sobre Formulários

  1. Criar formulários acessíveis.

Tutoriais sobre Web Semântica

  1. Criar Uma Estrutura Semântica.

Tutoriais sobre JavaScript

  1. Criação de JavaScript Acessível.

Mais em: http://www.acesso.umic.pt/tutor/index.htm

Como construir sites visualmente impressionantes com CSS

Posted on September 10th, 2007 by fspina

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

Apple Design Awards 2007

Posted on July 18th, 2007 by fspina

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

PNG no IE

Posted on May 9th, 2007 by fspina

Quem descobrir uma forma FÁCIL de rolar o formato .PNG no Internet Explorer, pode escrever um livro e ganhar uma grana com isso.
Por exemplo, background no css usando png, fica quase impossivel de ser usado.
Usei o seguinte metodo:

background: url(../img/bg_me.png) no-repeat top !important;
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/img/bg_me.png’, sizingMethod=’scale’);

Mesmo se você usar o pngfix.js não rola:

Quem souber algo simples de funcionar o png seja background ou css ou na página, vai ser um sucesso não precisar se preocupar com o Matte.