Arquivo do mês: setembro 2010

Imagens livres de direitos autorais na internet

Reunimos algumas dicas de sites com acervos de fotos e ilustrações para você baixar em alta qualidade

Links:

Sabe quando voce está fazendo um trabalho escolar, ou uma apresentação para mostrar no escritório, e falta uma imagem para ilustrar melhor o que voce está dizendo? O Olhar Digital pesquisou uma boa solução para o seu problema: os bancos de imagem digitais.

Que tipo de fotos você gosta? Retratos da natureza? Da imensidão das grandes cidades? Ou de crianças fofinhas? Bom, reunimos algumas dicas de sites com acervos enormes de imagens para você baixar em alta qualidade. São ótimas alternativas para quem possui um blog ou até mesmo precisa de fotos para ilustrar alguma tarefa da escola ou apresentação no trabalho. Ah, e o melhor: é tudo de graça.

Diretos

Diretos

O primeiro é o invocad Stock Exchange. Lá você encontra uma galeria com quase 400 mil fotos gratuitas, prontinhas para download. Após fazer o cadastro, é possível ter acesso a todo o conteúdo. O site funciona como uma rede social, dá para ter acesso ao perfil dos usuários que já cadastraram alguma foto. Você faz a busca pelo tipo de imagem ou então pode escolher por categorias pré-determinadas. Dá até para guardar as fotos preferidas no seu perfil. Basta clicar em “Add to Lightbox” e tudo vai ficar guardadinho na sua conta. Se quiser publicar suas próprias fotos, é só fazer o Upload do arquivo. Simples, não é?

O Stock Vault também compartilha fotos gratuitamente. Reúne mais de 27 mil pessoas do mundo inteiro. Você encontra imagens de objetos eletrônicos, de paisagens, de alimentos e por aí vai. O acervo do portal conta com cerca de 20 mil fotos. As categorias ficam no menu à esquerda do site, e também dá para ver quais são as imagens mais baixadas. Só fique ligado porque algumas fotos não são de graça. Mas se vc quiser algumas delas mesmo assim dá para pagar com cartão de crédito internacional.

E a última dica é esse outro site, o Every Stock Photo. Ele funciona de uma forma diferente dos outros dois que mostramos. O portal trabalha como um buscador de fotos gratuitas. Ou seja, ele consulta diversos bancos de imagens e oferece uma série de resultados. Nesse caso você pode procurar por vários assuntos, como Rio de Janeiro, esportes, cidades, pessoas, enfim, o que você precisar. E também é o caso de prestar atenção, nem todos os sites indicados cedem imagens de graça.

Fonte: Olhar Digital

Deixe um comentário

Arquivado em Fotografia, Internet

Versionamento inteligente para mobiles

Filtrar mobiles pelo tipo de aparelho é muito comum. A moda é versionar o site para iPhone. Mas há outros aparelhos com a mesma capacidade de renderização que podem se beneficiar.

Internet Movel

Internet Movel

O iPhone fez a festa dele. Todo mundo gostou do que viu e usou. Acontece que não só de iPhone vive o homem, e há pessoas por aí que não gostam do aparelho por motivos diversos. Há mercado para todos e por isso é natural que apareçam outros aparelhos com novos sistemas. Acontece que o lançamento do iPhone criou uma moda de criar versões dos sites específicas para ele. No começo isso foi ótimo. Mas agora, isso priva diversos celulares similares ao iPhone de terem uma boa experiência de navegação. É o caso de usuários de Android.

O Android é o novo sistema operacional para mobiles do Google. Até para um AppleBoy, como eu, o sistema é interessante. Tem a interface bem acabada, app’s amigáveis e etc. Ele faz muito bem o papel dele. O Engine de renderização do browser dele é WebKit. O mesmo engine que o Safari Mobile utiliza. E não estou falando de versões antigas do Webkit como alguns outros celulares utilizam. O Android utiliza as versões mais atuais do Webkit, com suporte extenso a CSS e HTML. Portanto, um site que teoricamente foi feito apenas para iPhone, pode ser visualizado da mesma maneira pelos usuários de Android.

Aí entra outra questão: provavelmente você deve ter pensado que seria apenas fazer um script de detecção de browser, capturando as visitas de Safari Mobile e Android e pronto. É aí que você se engana. Já há vários outros aparelhos que estão utilizando engines parecidas e que podem renderizar sua “versão de iphone”. Exatamente por isso, que você precisa fazer um filtro por características e não por browser. Fazemos isso utilizando Media Queries.

As Media Queries permitem fazer um pequeno filtro, onde definimos as características do dispositivo que acessará a página. Com isso, podemos definir um CSS específico para aquele grupo de dispositivos que se encaixaram no seu filtro. Veja um exemplo abaixo:

<link rel=”stylesheet” href=”style.css” type=”text/css” media=”screen and (min-width:481px)”>
<link rel=”stylesheet” href=”mob.css” type=”text/css” media=”screen and (max-width:480px)”>

A media que fiz é muito simples de ser entendida. A primeira linha engloba dispositivos que tem tela colorida, com uma resolução de largura mínima de 481px, isso inclui seu monitor, notebook e etc. A outra linha engloba dispositivos com uma largura máxima de 480px, ou seja, iPhones, Androids e dispositivos que seguem esse mesmo esquema de resolução e etc.

Dessa forma, você filtra os dispositivos e não os browsers dos aparelhos. Isso previne que algum celular, tão bom quanto o iPhone e o Android fiquem de fora de ter uma boa experiência de uso. Quer fazer um teste interessante? Se você estiver utilizando um browser que aceita media queries, redimensione a janela para uma largura menor que 480px. Você verá o Tableless chaveando os estilos automaticamente. Perceba que alguns elementos são reformatados e outros retirados do layout.

O filtro ainda não está completo porque não estamos contemplando os aparelhos que não aceitam meda queries, mas são mobiles. Para isso, usaríamos os Media Types, com valor de handheld. Embora celulares que aceitem os Media Types não tenham um bom suporte de CSS, podemos fazer pelo menos uma formatação de texto, cor e background. Celulares que utilizam Opera Mini, terão uma ótima experiência.

É sempre aquela mesma velha idéia: dar a melhor experiência para todos os meios de acesso. Sempre.

Fonte: http://www.tableless.com.br

1 comentário

Arquivado em Tecnologia Móvel

O que muda com o HTML 5?

Há algumas mudanças que vão ocorrer tanto nas estruturas técnicas do desenvolvimento de webpages quanto na postura e parâmetros que o profissional deverá apresentar na criação de um website.

Você desenvolvedor web, antenado, com certeza vem acompanhando a evolução, as críticas, as observações, os elogios e, claro, os tutoriais para entender um pouco mais do que efetivamente significa esta versão “5” do HTML.
Já você desenvolvedor, que limita-se a saber que uma nova versão está a caminho, talvez ainda não tenha tido a chance de conhecer quais serão essas importantes mudanças e o que trarão de novo para as bases do desenvolvimento web.

Aproveitando esta lacuna de compreensão do assunto procuro explanar, abaixo, sobre algumas mudanças que vão ocorrer tanto nas estruturas técnicas do desenvolvimento de webpages quanto na postura e parâmetros que este profissional deverá apresentar na criação de um website.

HTML 5

HTML 5

Lendo um “guia de aprendizado rápido para HTML5”, em meio à tantas outras informações que recebo todos os dias a respeito (desde jogos à músicas), percebi que além das diversas sinalizações quanto à nova estrutura que os códigos html vão apresentar, vai ficar cada vez mais claro que o trabalho do Htmler ou Front-End Engineer estará diretamente ligado à arquitetura de exibição de informação, já que no HTML5 vamos agrupar as informações de acordo com a sua relevância tanto para o usuário, quanto para os mecanismos de busca.

Aproveitando, deixo a primeira dica: este processo vai exigir que seja realizado um estudo sobre a importância e a hierarquia das informações e como elas devem ser exibidas no site, por isso caro desenvolvedor, ampliar seu leque para conhecer o gigante mundo da arquitetura de informação para websites, pode ser um grande diferencial em seu currículo.

Além disso, conhecer um pouco melhor o conteúdo do site, sem limitar-se à ao “Loren Ipsun” no HTML5, auxiliará na construção da semântica do código e numa comunicação mais direta com os mecanismos de busca, como por exemplo, conseguir perceber mais claramente se numa lista usaremos os tipos UL, OL ou DL, levando em consideração principalmente a ordenação e subordinação das informações na tela e na leitura dos mecanismos.

Talvez caro leitor, você esteja pensando: “mas hoje, isso já é possível e deve ser feito” então, lhe explico o porque de ressaltar a importância de um cuidado com a semântica da informação nos websites:  infelizmente muitos desenvolvedores limitam-se a conhecer apenas o uso de DIV’s em substituição às tabelas, afim de resolver “problemas” de diagramação de imagens e textos quando feito o cross-browsers, bem como ignoram qualquer estrutura hierárquica que a informação exibida possa ter no site, e com o HTML5,  isso não poderá mais ser ignorado assim
como as incompatibilidades entre browers, também devem diminuir.

Em termos técnicos no html5, teremos a tag <header> que poderá ser utilizada para toda informação introdutória ou elementos de auxílio a navegação como H1, H2, etc;  a tag <nav> para utilizar em estruturas que representem a navegação do site, como os menus; as tags <section> para as secções da página;  as tags <article> que vão representar uma parte do conteúdo como notícias ou novos posts de um blog;  as tags <aside> que vão representar um grupo de conteúdo com pouca relação ao conteúdo principal, mas de considerável relevância para estar presente na página – neste caso, o exemplo que podemos citar são os sidebar’s com banners ou informações de atendimento à clientes ao lado do conteúdo principal e por fim e não menos importante, as tags <footer> que utilizaremos para informações de rodapé do site – assinaturas, endereços, copyright, etc.

Percebe? Teremos que nos familiarizar muito mais com a estratégia comunicacional do site, através das informações textuais e visuais, do que costumamos fazer nos projetos de hoje para que a construção dos nossos códigos, dentro da nova versão, tragam ainda mais benefícios de usabilidade e acessibilidade ao site. Sem contar claro, com o fato de poder alterar a posição do seu site nos resultados de busca orgânica, através da clareza na exposição das informações e na linearidade de comunicação entre seu código e o robô de resultados.

Enfim, teremos muito a aprender e muito a compartilhar com os designers de interfaces e arquitetos de informação, mas acima de tudo, vejo como uma situação positiva aos htmler’s, afinal estaremos participando ainda mais da concepção dos projetos como um todo e tendo a chance de desenvolver um trabalho muito mais direcionado e minucioso, valorizando a posição e a existência de profissionais Front-End nas empresas e agências de soluções web.

Fonte: tableless.com.br

Deixe um comentário

Arquivado em HTML 5

Novo Portal ASSESSOCOR – Assessoria Esportiva

Lançamento oficial do novo Portal de Assessoria Esportiva do Sul do país, o ASSESSOCOR veio para ficar.

Portal ASSESSOCOR

Portal ASSESSOCOR

Conheça mais sobre eventos esportivos, artigos, novidades e muito mais.

Acesse: www.assessocor.com.br

Deixe um comentário

Arquivado em Tecnologia e sistemas

Versão beta do Internet Explorer 9

A Microsoft anunciou dia (15) a versão beta do seu navegador web, o Internet Explorer, que é uma prévia da sua nona versão, ainda sem data de lançamento. A empresa decidiu apostar numa interface mais simples e na rapidez da navegação – para combater o crescimento de browsers rivais como o Google Chrome e Mozilla Firefox. O navegador não rodará em dispositivos com Windows XP, apenas Vista e 7. Veja as principais mudanças.

Beta internet explorer 9

Beta internet explorer 9

Para acelerar a experiência do usuário, o Internet Explorer 9 utiliza 90% do poder de processamento gráfico dos computadores. Isso é possível pois o browser realoca a maior parte do processamento de gráficos para o GPU (Graphics Processing Unit) em vez da CPU (Central Processing Unit). Além disso, a Microsoft introduziu um novo motor de Java Script, o Chakra, que segundo a empresa torna o IE9 11 vezes mais rápido que o IE8.

“O foco do Internet Explorer 9 passa a ser na experiência do usuário ao navegar, queremos criar um ambiente que ressalte os websites, por isso a interface mais limpa, rápida, confiável e interoperável”, destacou Osvaldo Barbosa de Oliveira, diretor da divisão de serviços de Consumer & Online da Microsoft Brasil. “Com o IE9, queremos aproximar o browser ao mesmo desempenho e resposta obtidos quando utilizamos aplicativos nativos do computador”, complementou Oliveira.

A novidade, entretanto, é voltada para usuários dos sistemas operacionais mais novos da Microsoft, o Windows Vista e Windows 7. Essa escolha mostra que a empresa abandona o Windows XP, além de aproveitar o número crescente de computadores que chega ao mercado com melhor poder de processamento e aceleradores gráficos.

A empresa também dá destaque ao HTML5. O novo padrão vem ganhando popularidade, portanto o IE9 busca melhorar efeitos visuais na navegação usando a linguagem.

A versão beta do Internet Explorer 9 estará disponível a partir desta quarta até o final do dia para download no www.internetexplorer9.com.br. Você também pode baixar o navegador no UOL Downloads.

A versão definitiva não tem data de lançamento, pois depende do aprimoramento de alguns recursos de acordo com as sugestões e críticas que receber dos usuários.

A Microsoft detém atualmente cerca de 60% do mercado de navegadores com suas versões do Internet Explorer, segundo o Net Applications. Em seguida, estão Firefox, com 23% e o Chrome, com 7,5 %.

O que mudou
A primeira grande mudança notada na versão beta do Internet Explorer 9 é o visual minimalista e limpo da interface criada pela Microsoft. O botão Voltar, por ser um dos mais utilizados durante a navegação, ficou maior. Ao lado, uma única barra serve para digitação dos endereços e da buscas. As abas, antes dispostas abaixo da barra de endereços, agora estão ao lado dela. Como resultado, o usuário tem uma área abaixo maior para visualizar as páginas de internet.

Para aproveitar recursos do Windows 7, a Microsoft criou os sites fixos. Uma pesquisa da empresa mostrou que menos de um terço dos usuários abria sites pelo menu Favoritos. Sendo assim, agora os sites mais acessados podem ser arrastados para a barra de tarefas do Windows 7 (o que já podia ser feito com aplicativos instalados no sistema). Por meio de parcerias com o Facebook, Hulu, CNN, Ebay, Discovery, Wall Street Journal, entre outros, esse site favorito ganhará um visual específico de acordo com a identidade gráfica de cada empresa.

Assim como o Chrome, o IE9 trará uma página para visualização de todas as abas abertas. As abas poderão ser arrastadas para fora do IE9, transformando-se em nova janela do browser. Isso ajuda o usuário a ver um vídeo e ler notícias ao mesmo tempo ou fazer comparações em sites de compra online em janelas diferentes.

Para conhecer outras novidades do IE9, acompanhe algumas telas do navegador.

Deixe um comentário

Arquivado em Browsers

Artigo: A maldição do lixo eletrônico

Computadores velhos e TVs baleadas ninguém mais quer.

Hoje em dia está cada vez mais difícil empurrar equipamentos eletrônicos combalidos e computadores ultrapassados para frente. ONGs se tornaram altamente seletivas na aceitação de material doado — foi-se o tempo em que qualquer máquina, por pior que fosse, era considerada uma contribuição e tanto. Fora de forma, agora só se aceita iPad, uma das mercadorias mais raras do mundo no momento. iPad, de qualquer jeito. O resto, sem acordo.

Lixo Eletronico

Lixo Eletronico

A mudança tem tudo a ver com o barateamento dos produtos à venda nas lojas, é claro. Tudo que leva chip está cada vez mais acessível. Com netbooks zero-quilômetro na faixa de 500 reais, quem vai querer um PC-trambolho com problemas? E se uma TV de LCD, pequena mas fininha, pode sair por menos de 600 reais, alguém vai se interessar por um aparelho pesadão de tubo, da época de Matusalém?

Mas não são só os preços que explicam a desgraça em que caiu a parafernália eletrônica usada. O Brasil, numa fase espetacular de crescimento econômico, virou um país de maioria de classe média com a ascensão da classe C, como até os marcianos já sabem. E a classe D passou a apresentar um potencial de compra que impressiona. Bancos e empresas de cartões estão quebrando a cabeça sobre como oferecer crédito aos mais novos consumidores. O mercado se expande por todos os lados — e a velharia chipada fica cada vez mais desprezada.

Felizmente, vê-se a criação de uma estrutura mínima para receber o lixo eletrônico como lixo — para reciclar, de preferência. Só um exemplo: outro dia, indo para o trabalho, soube pelo tuíte do José Serra sobre um site em São Paulo, o http://www.e-lixo.org, que dá dicas de lugares que coletam a tralha eletrônica e chipada. O site é simples e eficientíssimo — usa o Google Maps para mostrar, para cada CEP pesquisado, onde estão os postos de coleta. A surpresa: a quantidade enorme de opções para muitos tipos de lixo — de baterias a toners, de no-breaks a monitores, de ar-condicionado a aparelhos de som. Algumas pragas, como as baterias, são campeãs em postos de coleta. Não é que aos poucos vamos nos parecendo mais com o lado rico do mundo?

Fonte: Plantão Info

Deixe um comentário

Arquivado em Tecnologia Verde

Navegação Breadcrumb

O que é breadcrumb navigation ?

Imagine que você quer comprar uma HD e vai procurar na internet.

Você vai no buscador, procura por “seagate 250Gb” e ele te indica uma página que contém o produto.

Logo no topo, você irá encontrar alguns links em sequência, mais ou menos assim:

Informática>Discos Rígidos e Removíveis>Seagate > 250GB

e logo abaixo a descrição do produto.

Breadcrumb Demonstração

Breadcrumb Demonstração

Você se pergunta: Pra que isso?

Esse tipo de elemento é chamado Breadcrumb Navigation. São elementos que ajudam você a navegar melhor pelo site. No exemplo acima, se você quisesse procurar por Hd’s de outros tamanhos de armazenamento, mas da seagate, você intuitivamente clicaria no link >Seagate e acharia uma pagina falando dos vários tipos de hd’s da seagate, incluindo seus vários tamanhos de armazenamento. Logo, você deixará seu usuário mais feliz pela questão de usabilidade.

Outra coisa importante: se o usuário chegou à página do produto diretamente pelo link do buscador, e ele der clicar no botão “Voltar” do navegador, ele voltará para o buscador, o que é ruim para você, pois haverá mais chances do cliente ir para outro site procurar pelo produto. Mas se ele ver mais elementos de breadcrumb navigation, maior a chance do cliente permanecer no seu site procurando por mais coisas.

E por fim, como isso diminuirá o esforço do cliente para atingir uma página, isso qualificará melhor suas páginas. E para um questão de SEO, testes dizem que isso agiliza a indexação das páginas.

Dica de breadcrumb navigation: Colocar varios links para paginas importantes em pontos estratégicos da página, como no menu ou no rodapé.

Dica 2 de breadcrumb navigation: Esquema de paginação sugerido pelo meu amigo Rafael no seu post de acessibilidade. Ex:

<<Previous | 1 | 2 | 3 | 4 | 5 | Next>>

Mas cuidado, não saia colocando link pra tudo pra nao poluir a pagina e para o crawler não achar que você é um spammer. E tome cuidado com os conteúdos duplicados gerados pelos links.

Fonte: MestreSEO

Deixe um comentário

Arquivado em Acessibilidade na internet, CSS . Cascading Style Sheets, Padrões W3C