Prosseguindo com CSS3 – Bordas e Sombras
Seguindo com a série de posts sobre CSS3, hoje vamos falar sobre bordas e sombra(border e shadow em inglês) com CSS3, mais especificamente falaremos sobre:
- border-color
- border-image
- border-radius
- box-shadow
Se você não viu o post anterior a este, é bom ver agora :
A partir de agora os tutoriais desta série serão feitos em HTML5 e CSS3, então pare de usar Internet Explorer < 9. Se você ainda não conhece os seletores em CSS3, veja o artigo anterior. Algumas propriedades só funcionam em determinados browsers, mais quando isso ocorrer vou informar 
.
leia mais »
Shortlinks no WordPress 3.0
Juntamente com o estouro das “mini” redes socias como Twitter e Facebook, foi lançado o WordPress 3.0 não muito atrás. Lançamento que já veio um pouco “otimizado” para essas redes. Hoje vamos ver como utilizar shortlinks para ganhar alguns caracteres e utilizá-los para outro fim.
Porque Usar Shortlinks?
Como o número de caracteres nas redes é bem limitado – 140 caracteres no Twitter por exemplo – algumas URLs ultrapassam esse limite, perdendo a utilidade em redes sociais para compartilhamento. Isto acaba sendo um ponto negativo quando se tem um post ótimo, que deve ser compartilhado.
Até pouco tempo atrás a solução era usar um encurtador de urls para compartilhar o link, era – e ainda é – um pouco cansativo ter de abrir o site do encurtador, colar o link original, pegar o novo link e sair distribuindo. Esta era a solução!!!!
Além disso, faltaram alguns pontos que quase ninguém parou para pensar, sim estou falando sobre SEO e os encurtadores…faltaram questões como:
- O redirecionamento é 301, 302…?
- O site vai receber o link juice da URL encurtada?
- O Page Rank vai para o encurtador ou para o site?
- etc…
Com os shortlinks providos pelo WordPress, você não vai precisar fazer responder a estas perguntas ou até mesmo ter de refazer sempre o mesmo processo em um encurtador. Outro ponto é que o WordPress 3.0 também gera automaticamente um link no cabeçalho (antes de fechar a tag </head>) com o shortlink, seria algo +/- assim:
<link rel="shortlink" href="http://www.seusite.com/?p=717" />
O segredo por trás desta funcionalidade é justamente o ID do post, como você pode ver – /?p=717.
O Shortlink
Adeus IE6 – Plugin jQuery Hardcore Para Dar Um Fim ao Internet Explorer 6
Você já deve ter visto vários plugins na Internet para bloquear usuários do Internet Explorer, mais nenhum é como este – e olha que eu procurei….
Página do projeto | Instruções | Demo 1 | Demo 2
A Estratégia
A estratégia que montei para este plugin tem o mesmo objetivo dos demais, mais de uma forma diferente. Basicamente os plugins atuais ou pedem unicamente para atualizar o Internet Explorer ou usar outro navegador, o que não acho interessante em nenhum dos casos. Mais por quê? Simplesmente porque se eu unicamente atualizar o Internet Explorer 6 para uma versão mais recente (no momento seria o IE8), os outros browser que convenhamos, são melhores, iriam “ficar de lado”, o que não considero bom pois as novidades estão surgindo dos “outros” browser, além da taxa de novas atualizações serem bem maior do que o Internet Explorer. Há mais motivos, mais você já deve estar processando em sua mente boa parte deles .
Por outro lado, se eu somente migrar para outro navegador, o bendito do IE6 vai continuar instalado no PC do seu visitante, correndo o risco de volta e meia ele usar o IE6, o que não queremos.
Bom diante disso o Adeus IE6, primeiramente bloqueia o usuário (em outra palavras ele não navega no site ), “forçando” a atualização…mais ele vai ser convencido de que será melhor atualizar logo seu navegador 
. Em primeiro caso a atualização do Internet Explorer, depois…se ele quiser…ele testa outro browser (Melhor um pássaro na mão do que 2 voando). Enfim o visitante terá todas as opções, agora caberá a ele fazer a sua escolha.
Novo Site no Ar 2
Pois é, infelizmente eu lancei a versão 2010 do meu website, infelizmente para os meus concorrentes….Fora isso…
AEEEEEEEEEEE, ta no ar!!!!!!!! Bom não vou fazer um post extenso só vou explicar rapidamente as diferenças de destaque para ninguém ficar perdido:
- Feito com Linha Framework;
- WordPress 3.0, com template compatível;
- Re-design simples, sombras mais fortes e sai alguns itens;
- Revisão e ajustes de todos os posts;
- Uso e abuso de CSS3;
- IE6 não acessa mais (já teria que ter feito isso desde a versão anterior);
- Sai Página de Serviços (embutida na página Sobre Mim);
- Javascript em várias partes do site (teste e veja , hehe);
- Compartilhamento (Share) mais fácil;
- Validação mais eficiente de formulário de contato e comentários;
- Reply (responder) comentários;
- Verifiquem a página de ERRO 404 .
- Novo sistema de gerenciamento dos arquivos e demos.
- Outras coisas ai…
Pessoal é isso, espero que tenham gostado das alterações.
Pra não esquecer, rsrs: Espero estar mais presente no blog também e fazer uns screencasts que estou prometendo a um tempo. Se tiverem algum assunto de preferência, comenta ai que eu vou estudar a possibilidade.
Linha Framework – Desenvolva Front-end Com Mais Qualidade!
Bom dia, boa tarde, boa noite…depois de muito tempo sem atividade no blog venho trazer uma novidade para vocês. Alguns já devem saber o que é, não vou ficar de papo furado então vamos direto a novidade:
Linha Framework
Trata-se de um framework (meio obvio não?) para desenvolvimento front-end – HTML, CSS e Javascript. Se você já usou algum grid CSS, como o 960.gs ou Blueprint por exemplo, irá se familiarizar facilmente com este framework, mas o Linha Framework é mais completo.
É mais completo pois não fica somente no grid CSS, temos o grid template (PSD), marcação HTML e CSS em português, sem falar do plugins para jQuery em português támbem. Acredite, desenvolver com um framework poupa e muito o seu tempo. Passando um pouco para a prática, você poderá desenvolver as três camadas (HTML, CSS e JS) de uma só vez, de forma fácil e rápida.
Novas Funções do WordPress – Parte 3
Nós post anteriores sobre esta série ainda não tinha lançado o WordPress 2.9. Como ainda não deixei de tratar das novas funções do wordpress 2.8 vou citar algumas funções e já da uma introdução a versão 2.9
A seguir vou listar os post anteriores a este:
Novas funções(functions) do WordPress 2.8
Novas funções(functions) do WordPress 2.8 – Parte 2
automatic_feed_links()
Função adicionada na versão 2.8. Consiste básicamente em gerar ou não o Feed RSS no template, ou seja, se ao usar este template vai ter o não o feed RSS:
automatic_feed_links(false);//sem saida rss automatic_feed_links();//com saida rss...o mesmo que true
Links do Mês – Outubro de 2009
Mais um mês se foi e como não poderia faltar vamos ao links que se destacaram (e se destacaram) neste mês que se passou…
A maior novidade de todas!!!
Como colocar favicon em seu website
Já postei este tutorial uma vez (aqui) mais este estava com alguns “bugs” e era restrito somente ao wordpress, então hoje decidi fazer este post sobre favicons, beneficios e como inserir favicons que funcione no IE(Internet Explorer) e em todos ou outros navegadores vai ser bem completinho:
O que é favicon?
Favicon nada mais é do que aquelas pequenas imagens que aparecem no navegador ao lado do endereço do site. Mais para maiores e melhores detalhes veja a descrição do Winkipédia:
Favicons (palavra derivada de favorite (favorito) e icon (ícone)) são pequenas imagens no formato *.ico com de cerca de 16×16 pixels que ficam guardados em um site para visualização pelo navegador. Em alguns navegadores como Internet Explorer até a versão 6, só exibem os favicons quando um site é adicionado aos favoritos. Neste caso, apenas no menu correspondente aos favoritos pode-se encontrar a imagem. Em outros navegadores como Firefox, Opera e Internet Explorer 7(+), os favicons podem ser encontrados também nas abas e na barra de endereço.
Os favicons também tem teor de acessibilidade pois ajudam um usuário comum a identificar uma página quando ela está exibida em uma lista ou em uma barra de abas. Visando isto, muitos favicons são imagens simplificadas do logotipo da marca que representam.
Na ausência de um favicon, os navegadores exibem seu próprio ícone ou um ícone padrão como uma folha em branco.
Beneficios
Alguns beneficios que podemos conquistar com o uso de uma favicon são os listados abaixo:
- É otimo para marcar seu site tornando a localização deste mais fácil e de brinde tem até um destaque a mais ;
- Seu site vai ganhar uma aparência mais profissional e exclusiva que pode levar a mais links para seu site melhorando a parte do SEO (aqui já entra PR).
Preparando o terreno
Como tudo o que vamos fazer tem um requisito este não deixa de ser diferente. Para este processo precisamo de uma imagem no formato .ico com 16×16 pixels que pode ser feita usando o photoshop ou fireworks ou o seu programa de preferência. Para o processo que explicarei agora recomendo que faça a imagem em um formato grande uns 100×100 pixels deve ser o suficiente.
Links do Mês – Setembro 2009
Aeeeeeeeeeeeeeeeee galera, rsrs. Finalmente consegui um tempinho pra posta(to no curso). A partir de agora trarei posts com os links do mês, o que eu achei interressante, tutoriais, matérias, programas, sites enfim o que for revelante e eu ver vai estar aqui, hehe.
Alterando ou Adicionando o logo em Sua Loja Magento – Tutorial Magento
Bom pessoal hoje o post num é lá aquela programação toda, é mais pra mim dar inicio aos posts falando sobre o Magento. Vamos lá.
Alterando ou Adicionando o logo em Sua Loja Magento
Para isto podemos usar 3 formatos de imagens, que são os mais usados, JPEG, GIF e PNG, recomendo o PNG mais fica a sua escolha.
Usando GIF
Se usarmos o gif o processo é mais simples, basta fazer o upload e subistituir a imagem que esta localizada em skin/frontend/default/default/images/logo.gif usando o FTP.
Usando PNG e JPG
O primeiro passo é upar a imagem em skin/frontend/default/default/images/. Logo após acessamos o admin do magento http://www.oenderecodasualoja.com.br/admin e seguimos este caminho: Sistema » Configurações, selecione o link de menu Design (está a esquerda da página) e vá mais abaixo na parte Header do acorddion como na figura abaixo:
Clique na imagem para ver em tamanho original
Para o segundo passo, devemos colocar o nome da imagem que upamos no campo Logo Image Src; recomendo que renomeie com o nome de sua loja para os motores de busca, é mais questão de SEO.
Considerações Finais
Este pequeno tutorial foi desenvolvido tendo em mente o template padrão do Magento, por isso a localização skin/frontend/default/default/images/, se você usa o template blue que também já vem no magento o caminho é o mesmo: skin/frontend/default/blue/images/. Uma maneira de saber o caminho da logo é clicar com o botão auxiliar na foto e escolher a opção exibir imagem ou exibir imagem de fundo.
Até a próxima
Comentários
-
Mateus Souza disse:
Nossa cara verdade, essa passou direto e eu nem vi!!!! Vlw pelo aviso :)
-
Sérgio Rodrigues disse:
Opa! gostei muito do post, continue assim! Só um detalhe, você postou " – é um valor definido pelo programador –...mais »
-
CSS Gallery disse:
Sugiro http://cssgallery.com à lista
-
Luiz Felipe disse:
Cara, acho tenho uma idéia melhor. Por que você não coloca um botão "Continuar mesmo assim"? Acho que será melhor, pois...mais »
-
O código foi ajustado para aparecer no IE5.5, mais nem jQuery funfa no IE5 :). Para que apareça no IE7, você...mais »
© 2010 Mateus Souza – Webdesigner (Deus Seja Louvado) | Posts (RSS) | Comentários (RSS). | powered by WordPress e Linha Framework :P