6 de abril de 2010

[HTML/CSS] Tutoriais que você deve ver

Arquivado em: CSS, HTML — Leonardo Miranda @ 17:39

Olá, gostaria de indicar 3 tutoriais excelentes, que você deve conhecer e ler várias vezes.

30 CSS Best Practices for Beginners

20+ HTML Forms Bests Practices

30 HTML Best Practices for Beginners

Abraços!!!

26 de janeiro de 2010

[DICA] TESTE SEU SITE EM VÁRIOS NAVEGADORES

Arquivado em: Dica — Leonardo Miranda @ 8:53

Olá queridos, após muito tempo sem postar nada, estou voltando ;D

Conheça 05 ferramentas para poder testar seu site em vários navegadores.

Browsershots

Browsershots

Adobe Browserlab

Adobe Browserlab

Litmusapp (paid service)

LitmusApp

VMware Fusion

VMware Fusion

IE Tester

IE Tester
Fonte

9 de outubro de 2009

[DICA] PROMOVA-SE

Arquivado em: Dica — Leonardo Miranda @ 15:55

web20-midia-social

Hoje as grandes/médias/pequenas empresas procuram uma forma de atingir seu público de uma forma ágil e eficiente.

As mídias sociais atendeu a essa expectativa, como por exemplo podemos ver grandes empresas como Globo, SBT, Record, MTV e várias outras no Twitter.

Veja um comparativo do tempo que demora para chegar a notícia até você

Jornal: 24h
Google: Até 24h
Sites de Notícias: Minutos
Blogs: Minutos
Twitter: Segundos

Recentemente a Google lançou uma nova ferramenta no Orkut chamada de Promover onde você cria um anúncio que vai aparecer em cada perfil de seus contatos, uma forma eficiente e 0800

1

2

VALE A PENA SEGUIR W3C?

Arquivado em: Acessibilidade, CSS, Dica, HTML, Web Design — Leonardo Miranda @ 15:11

boneco_clientes

Olá queridos amigos, vou tentar explicar o lado bom e o outro não tão bom do W3C.

O CLIENTE

Quando um cliente solicita algum projeto, ele que não quer saber se o site vai estar nos padrões W3C ou se é válido ou não, ele apenas quer saber se ao entrar no site não vai ter nenhum erro,  se está tudo no lugar e funcionando.

Não há dúvida de que quando seguimos os padrões não teremos nenhum problema de visualização, mesmo assim ainda temos o velho Internet Explorer onde tenho que desenvolver outro CSS para cada versão, ou usar algum CSS HACK.

TABLELESS

Pós
- Facilidade na atualização do código
- Arquivos mais leves
- Respeita a W3C

Contras
- Maior tempo gasto
- Muitas vezes utilizar de CSS-Hack

TABELAS

Pós
- Agilidade no desenvolvimento
- Não ter problemas de visualização em navegadores antigos

Contras
- Não respeita a W3C
- Arquivos mais pesados
- Atualização dependente de algum editor no modo Design

O DESENVOLVEDOR

Hoje nossos clientes estão cada vez mais exigentes quanto ao preso, e me pergunto se vale a pena continuar desenvolvendo meus projetos em Tableless, pois muitas vezes tenho que entregar o projeto rapidamente.
Por outro lado tenho que estar me atualizando sempre, para que eu possa acompanhar as novidades do mercado e ficar a frente do meu concorrente, além de que muitas agências de publicidade e propaganda exigem que o desenvolvedor utilize as normas W3C em seu projeto.

RESUMO FINAL

Ao desenvolver um novo projeto leve em consideração o prazo do projeto, se vai precisar de atualização constantes e seu tempo disponível para desenvolver em Tableless.

Irei terminar esta matéria com um comentário no twitter do @maujor onde ele disse o seguinte

RT: @???: @maujor o cliente que souber oq é HTML5…a maioria só se preocupa com o resultado final. – Então desenvolva com tabelas!

Ps.: Para quem não conhece o Maujor é o dinossauro do CSS, escritor de vários livros como o de jQuery, XHTML e CSS. Pode visitar seu site aqui

3 de outubro de 2009

[DICA] UTILIZANDO O DOCS COM SEUS CLIENTES

Arquivado em: Dica — Leonardo Miranda @ 12:46

GoogleDocs

Hoje vou dar a dica de como utilizar as diversas ferramentas na web, os aplicativos web que vai ser o futuro, fiquem ligados.

O Google Docs é um aplicativo onde você edita/cria arquivos de texto, planilhas, enquetes, slides e muito mais, então se você tem um contrato e precisa ter acesso a qualquer momento do dia, basta deixar no Docs.

CONTINUE LENDO ESTE ARTIGO… »

27 de setembro de 2009

[JS] TOOLTIPS

Arquivado em: jQuery — Leonardo Miranda @ 20:36

tooltips

Olá queridos vou disponibilizar para vocês um plugin onde serve para explicar algum link, ou fazer algum comentário.

Passo 1

Acesse o site do plugin Easiest Tooltip ou caso queira ver a DEMO

Passo 2

Agora vamos importar o jQuery e o plugin.

<script src="jquery.js" type="text/javascript"></script>
<script src="main.js" type="text/javascript"></script>

Passo 3

Adicione o texto no ALT do link.

<a href="http://cssglobe.com" title="Web Standards Magazine">Roll over for tooltip</a>

Para ver todas as formas possíveis com o uso deste plugin acesse e para fazer o download do js AQUI

[BATE-PAPO] REGRESSÃO OU EVOLUÇÃO

Arquivado em: Leonardo Miranda — Leonardo Miranda @ 18:38

netbooks

Durante meu trabalho na Miranda Imobiliária estava atendendo um cliente no suporte online onde um usuário de Netbook estava reclamando de o site não “caber” na tela, isso me faz lembrar a velha história de a resolução 800×600 está em desuso como o IE6 e penso, como nós web designers/masters/programadores vamos desenvolver sites tendo que pensar nesses usuários? Ou vamos adotar a idéia de que quem usa o Netbook sabe que seu PC é pequeno e logo pode passar por isso? Ouro caso que me faz pensar é a Web Mobile, onde está crescendo rapidamente e vai ser o futuro, mais quanto ao Mobile não há muito problema pois nós desenvolvemos uma versão do próprio site para eles, claro que são 02 serviços e devemos cobrar por este serviço de nossos clientes.

25 de setembro de 2009

[DICA] ENCONTRADA SOLUÇÃO DEPOIS DE MESES

Arquivado em: Dica — Leonardo Miranda @ 22:07

encorelogo

Olá queridos, essa matéria não tem nada haver com o Web Standads, e sim com um problema que vinha passando há messes, tenho um roteador Encore e tinha o problema de entrar no MSN e o roteador reiniciava, nunca conseguia ficar por mais de 2 minutos online, após muitas pesquisas e nunca achei nada que pudesse me ajudar, até que procurei o código embaixo do roteador, entrei no site do fabricante, minha surpresa foi que a foto do produto no site é um e o meu é outro. Veja o aparelho ENHWI-G3 no site do fabricante.

Agora veja o modelo que eu tenho

1904821

A solução que eu encontrei foi fazer o download do firmware aqui.

Depois acesse o INICIAR > EXECUTAR > cmd > ipconfig e copie o endereço do Gatway Padrão, coloque o IP em seu navegador, irá pedir um login admin e senha admin, depois clique em Firmware e selecione o arquivo que você fez o download do site.

22 de setembro de 2009

[JS] INTEGRANDO TWITTER COM SITE

Arquivado em: jQuery — Leonardo Miranda @ 15:54

twitter_bird

Olá, tive que integrar um site com o twitter e com uma rápida pesquisa encontrei um tutorial muito simples no Pinceladas Web. Nós iremos utilizar um JS e pronto.

Tutorial

Faça o download do JS o download do plugin e a biblioteca jQuery antes da sua <head>

<script src="jquery.twitter.js" type="text/javascript"></script>

Logo depois

<div id="twitter"></div>

Agora altere o seu login e pronto, coloque esse script antes do <head>


$(document).ready(function() {
$("#twitter").getTwitter({
userName: "jquery",
numTweets: 5,
loaderText: "Loading tweets...",
slideIn: true,
showHeading: true,
headingText: "Latest Tweets",
showProfileLink: true
});
});

20 de setembro de 2009

[DICA] Top 10 Plugins para Firefox

Arquivado em: Dica — Leonardo Miranda @ 17:57

15-firefox

O firefox facilita, e muito, a vida de nós desenvolvedores web. E nada mais justo que eu eu enumerar aqui os melhores plugins que o firefox tem para nós que amamos desenhar/programar e temos que quebrar a cabeça para funcionar tudo em navegadores ruins como os IEs…

1. Firebug: Edita Javascript, HTML e CSS em tempo real e pode ser acessado com F12 do teclado. Usando a função Inspect você escolhe qualquer elemento do site e edita na hora – muito útil para verificar heranças CSS e corrigir erros de layout em tempo real.
URL: https://addons.mozilla.org/en-US/firefox/addon/1843

2. Web Developer: É o melhor e mais completo plugin para desenvolvimento web. É uma barra de ferramentas com mais de 100 opções, por exemplo: desabilita e habilita javascript, cookies, css, imagens, cores da página, cache; identifica em tempo real o tamanho ou caminho (path) de uma imagem, divs block level, divs inline, tabelas, frames, elementos obsoletos, formulários; edita em tempo real o CSS e o HTML; mede partes da página com uma régua dinâmica; preenche formulários automaticamente.
URL: https://addons.mozilla.org/en-US/firefox/addon/60

CONTINUE LENDO ESTE ARTIGO… »

Próxima Página »