Brincando de ser Ilustrador

Fala galera!

faz tempo que tento dedicar um tempo para aperfeiçoar a técnica (ou aprender mesmo kk) da ilustração digital, sempre procuro tutoriais em sites bacanas como o smashingmagazine.com ou vector.tutsplus.com. O illustrator da Adobe é uma ferramenta extraordinária mas para conseguir resultados realmente bons eu já pude ver que é preciso muita paciência e dedicação, como qualquer outra coisa que você vá tentar fazer mas com um pouquinho mais de dedicação pois para os iniciantes ao abrirem a ferramenta pela primeira vez pode ser um choque ! mas com o passar do tempo isso se torna mais tranquilo, a grande gama de ferramentas disponíveis dentro do illustrador passam a ser poucas e então você vai querer mais e mais kkk.

abaixo eu gostaria de mostrar algumas das experiências que consegui com o illustrator, e para os iniciantes não se desanimarem lá vai: alguns destes desenhos eu fiz sem conhecimento nenhum de iluminação. sombreamento ou mesmo desenho a mão livre, só tive a ajuda do software e algum conhecimento em design (que obtive com a minha especialização).

(* Este é o Alien Pensante, segundo o meu sobrinho,  “Eu acho que esse ai é o Alien Pensante”, disse ele assim que viu a ilustração. kkk)

Nenhum comentário.

Onde contratar consultoria de SEO, Otimização de Sites e Google Adwords

Fala galera! faz tempo que não escrevo nada no blog (para váriar né kkk), os projetos na Caos estão cada vez melhores então o tempo para escrever no blog as vezes fica curto, mas vamos lá já, começo o retorno as postagens fazendo uma recomendação sobre SEO e Google Adwords como o mercado está quente em busca destes serviços eu gostaria de recomendar uma empresa muito boa em SEO e Google Adwords chamada Carti.com.br. Eles trabalham Otimizando Sites com objetivo de aparecer melhor rankeado em buscadores como o Google.

Estatisticamente, as primeiras 3 posições nas buscas orgânicas recebem 70% dos cliques, então estar bem posicionado é essencial para ser encontrado e poder mostrar seus serviços e produtos a novos consumidores.

Acompanho o trabalho deles a algum tempo e leio o blog de seo em que eles publicam matérias muito interessantes, por exemplo: como expandir meus negocios online, como funciona o google adwords, otimização SEO no wordpress e muito mais.

Você pode solicitar orcamento de seo pelo próprio site ou entrar em contato para saber mais informações sobre um determinado serviço.

Outros pontos fortes da empresa é a  Otimização de Blogs Wordpress onde o CMS wordpress é personalizado de acordo com o que o cliente deseja, e como eles são parceiros da Caos Developers podem procura-los para futuros projetos #ficadica!

Para entrar em contato com a empresa, visite o site http://www.carti.com.br

grande abraço!

, , , , , ,

1 Comentário

A chegada do Windows Phone 7

Os primeiros smartphones com o sistema operacional Windows Phone 7 chegaram às lojas nos EUA há pouco mais de um mês, mas só desembarcarão no Brasil em 2011. Vejam o vídeo abaixo e tirem as suas dúvidas sobre o novo smartphone:

leia + em:
http://www.caosdevelopers.com/index.php?pags=noti&id=171

Nenhum comentário.

HTML5 Canvas – O futuro dos gráficos na web

Com certeza você já deve ter ouvido falar por aí e muito dessa nova tag do HTML5 e suas possibilidades, mas você sabe o significado dessa nova tag?

O elemento canvas permite no HTML através de uma área determinada na página criar desenhos através de scripts, desenhar e renderizar imagens, permitindo aos desenvolvedores criarem coisas que até então eram possíveis somente com a utilização do Flash, com a vantagem de que com o uso de canvas não precisamos de nenhum plugin de terceiros instalado no navegador.

O canvas foi desenvolvido inicialmente pela Apple para uso dentro do MAC OS X, alimentando aplicações como Widgets do Dashboard e o Safari. Posteriormente foi adotado pelos browsers baseados no motor Gecko e Opera e padronizado pelo WHATWG.

Se ficou interessado em saber mais sobre o assunto, aconselho a dar uma olhada nos slides criados pelo desenvolvedor Rob Hawkes que ilustram muito bem o assunto:

 

Fonte: Pinceladas da web

, , , , , ,

Nenhum comentário.

A maior flor do mundo – José Saramago em animação

Este mês perdemos um dos maiores escritores do mundo, José Saramago. Seu legado é um tesouro inestimado para qualquer um que gosta de literatura, com obras como “Ensaio sobre a cegueira”, recentemente levado para o cinema por Fernando Meireles.

A produtora Continental Animación realizou um curta metragem de animação baseado na obra do autor chamada “A Maior Flor do Mundo”, premiado em vários festivais, feito em stop-motion com cenários pintados. Abaixo segue o vídeo, como uma forma de homenagear este excelente escritor. A realização é de Juan Pablo Etcheverry, com música de Emilio Aragón.

A Maior Flor do Mundo from Fundação Jose Saramago on Vimeo.

Fonte: Design on the Rocks

, ,

Nenhum comentário.

Fontes externas no seu web site… sim agora é possível!

Salve galera!

Hoje vou publicar um artigo muito bacana sobre como carregar fontes externas no seu website, se você está cansando (ou acostumado) com as fontes que são utilizadas como padrão na internet (arial, verdana, times, georgia entre outras… poucas), se segure … sente … relaxe … e leia este artigo na integra:

@font-face possibilita utilizar fonts externas em websites. Você já pode utilizar essa regra agora.

Tipografia na web sempre foi um sonho para todo designer para web. Alguns designers que trabalharam durante muito tempo com impressão estranham o tarbalhar com web por conta dessa limitação. A tipografia é parte importante na criação de peças gráficas e na web, isso não poderia ser diferente. Mesmo assim, não havia uma maneira ‘inteligente’ de utilizar fonts externas na criação de layouts para web. Iniciativas como TypeKite Sifr quebram o galho mas não são o ideal.

@font-face é uma das funcionalidades mais esperadas do CSS. Ela permite que você utilize famílias de fonts em websites sem que o usuário tenha a font instalada no sistema. Veja abaixo a sintaxe:

@font-face {
     font-family: helveticaneue;
     src: url('HelveticaNeueLTStd-UltLt.otf');
}

Na primeira linha você dá um nome para a Font que você está importando. Pode ser qualquer nome.

Na segunda linha, você inclue o endereço de onde a font se encontra. Para facilitar, crie uma pasta font dentro da pasta onde está o CSS.

Feito isso, você a utiliza como qualquer outra font:

p {
	font:36px helveticaneue, Arial, Tahoma, Sans-serif;
}

Fiz alguns testes aqui e em algumas máquinas e conexões lerdas, o browser carrega primeiramente o texto com a font padrão do sistema e logo depois monta o texto com as fonts corretas. Nada de outro mundo para quem utiliza imagens para substituir textos. Mesmo assim, pode ser um incomodo para alguns.

Suponhamos que você queira oferecer a font para os que não a tem disponivel no sistema, mas para que o site carregue mais rápido, queira utilizar a cópia local do sistema do usuário caso ele a tenha instalado:

@font-face {
     font-family: helveticaneue;
     src: local(HelveticaNeueLTStd-UltLt.otf), url(HelveticaNeueLTStd-UltLt.otf);
}

O valor local() faz com que o browser procure a font no computador do visitante antes de executar o download da font que está no servidor.

Abaixo segue uma série de formatos que podem ser usados e que os browsers podem adotar:

String Font Format Common extensions
“truetype” TrueType .ttf
“opentype” OpenType .ttf, .otf
“truetype-aat” TrueType with Apple Advanced Typography extensions .ttf
“embedded-opentype” Embedded OpenType .eot
“svg” SVG Font .svg, .svgz

Compatibilidade
A compatibilidade é melhor do que você pode imaginar. Mesmo assim há alguns entraves que chateiam. Entretando, se você pratica Gracefull Degradation, vai achar uma maravilha.

As versões 7, 8 e 9 do Internet Explorer aceitam o @font-face apenas se a font for EOT.

Safari, Firefox, Chrome e Opera aceitam fonts em TTF e OTF.

Você pode converter suas fonts para EOT diretamente no Font Squirrel.

É sempre bom você não abusar. Uma porque o design não fica bonito se você utilizar muitas fonts diferentes. Outra que o site pode ficar carregado. Lembre-se que o browser carrega o arquivo da font para só assim aplicar no layout.

Veja um exemplo pronto do site tableless.com.br.

Fonts pagas
O principal problema com o @font-face o download de font ilegal. Há uma pancada de fonts que são grátis, estas não há problema. Mas há uma outra grande parte que são pagas. O problema é que você tem a licensa de utilizar essa font nos seus projetos, mas não tem o direito de compartilhá-la ou dar para alguém. Quando você utiliza @font-face, você praticamente disponibiliza para o mundo o arquivo da font. Qualquer um pode fazer o download sem problemas. Por isso, cuidado com a font que você utiliza. Certifique-se de que ela é uma font gratuita.
Espero que tenham gostado.

abraços!

Fonte: tableless.com.br
Link direto: http://www.tableless.com.br/font-face-fonts-externas-na-web


, , , , , , , , , ,

1 Comentário

Gracefull Degradation … o que é isso ?

você já se deparou com esse termo ? caso não tenha visto ou se já se deparou com ele e não soube o significado, vou tentar explicar como funciona e o que significa “Gracefull Degradation” junto com um artigo super bacana que li no tableless.com.br.

Gracefull Degradation ao pé da letra significa “Degradação Harmoniosa”, mas e ai ??? você deve estar se perguntando. Vamos um pouco mais além para saber mais sobre o seu significado:

Graceful degradation means that your Web site continues to operate even when viewed with less-than-optimal software in which advanced effects don’t work.

tradução:
Degradação Harmoniosa significa que seu site deve funcionar mesmo quando acessado com software/hardware inferior ao ideal.

Artigo da tableless.com (vale a pena dar uma conferida!).

Esse assunto é bastante velho, mas que volta à tona nestes dias de campanhas contra o IE6 e outros browsers antigos. Eu mesmo já falei para ignorar totalmente o Internet Explorer 6, mas não é tão fácil assim. Eu posso ignorar aqui no Tableless, onde os usuários são de um nicho específico, mas eu não posso ignorar esse público quando se trata de um produto que é feito para o meu cliente. O cliente do meu cliente utiliza IE6. E ignorá-los significa fazer meu cliente perder dinheiro. Isso está fora de questão.

Então, se seguirmos este raciocínio, pense bem: podemos cometer este erro com outros tipos de usuários. Por exemplo, se seu site não pode ser bem visto em dispositivos móveis ou se não é bem acessado por leitores de tela.

É tudo sobre acessibilidade
Engana-se aquele que acha que acessibilidade é apenas sobre cegos e outras pessoas com alguma necessidade fisica. É claro que esse público merece uma atenção especial, que muitas vezes é tristemente ignorada. Mas quando falamos sobre acessibilidade, temos que entender que há outros grupos que se encaixam nesse assunto.

Quando um visitante não consegue acessar seu site por causa da resolução, ou por meio de algum dispositvo, ou por algum sistema de voz etc, estamos falando de acessibilidade.

Temos que prever visitantes com necessidades diversas. Há pessoas que passam a maior parte do tempo viajando. Por isso é muito difícil ler emails ou trabalhar conectado por notebook ou computador decente. Por isso ela passa a maior parte do tempo utilizando aparelhos móveis. Não por que ela queira, mas por causa da sua necessidade.

Se negligenciarmos o acesso desse tipo de público, cometemos um erro grave de acessibilidade. O mesmo para um simples visitante que não consegue acessar seu website por causa da sua resolução. Ele usa 800×600 porque precisa e não porque quer. Embora haja alguns que nem sabem o que é resolução.

Necessidade. Acessibilidade é tudo sobre a necessidade das pessoas.

Meios de acesso a Internet
Se as pessoas acessam a Internet, elas acessam por meio de um dispositivo especifico. Se ela é cega ou tem algum ou outro problema de visão, ela acessa o site por um leitor de tela. Se ela viaja muito ou fica muito tempo presa no trânsito, utililza dispositivos móveis.

Hoje em dia não existem muitos meios de acesso a Web. Se não acessamos por um computador ou um dispositivo móvel, acessamos com o que?
Outros meios de acesso a Internet estão nascendo. Na verdade novos usos para o acesso a Internet estamos surgindo e com estes novos usos, surgem novos meios de acesso. Vide o Surface da Microsof. É um meio totalmente diferente de interagir com a Web. Mas é um novo meio.

Mas e o Graceful Degradation?
Problemas com compatibilidades sempre existiram e creio que nunca deixarão de existir. Pelo contrário. Esses problemas serão mais comuns embora fiquem mais fáceis de resolver. Não serão apenas probleminhas entre browsers (os browsers existirão em tempos futuros?), mas também entre dispositivos.

Acontece muito hoje: tentamos acessar um serviço por um determinado browser, e somos aconselhados a utilizar outro browser porque o serviço não é compativel ou não funciona bem no nosso browser predileto.
Isso tira qualquer um do sério. O site deveria funcionar em qualquer browser. Para exemplificar: se em um meio de acesso eu não consigo utilizar bordas arredondadas nos elementos, os elementos apareceriam sem as bordas arredondadas. Isso não deveria prejudicar minha experiência de uso. Eu perderia um pouco no Design, mas conseguiria utilizar o serviço sem problemas.

A idéia do Graceful Degradation é exatamente essa: dar a melhor experiência possível ao dispositivo/meio que o usuário estiver utilizando sem prejudicar a acessibilidade.

Os usuários do IE6 por exemplo podem ficar sem bordas arredondas, position fixed, sombras e pngs semi-transparentes, mas eles precisam acessar e utilizar perfeitamente o site, com a melhor experiência que é possivel dar a este browser.

Mesma coisa é aplicada aos dispositivos móveis. Estes dispositivos normalmente não tem os mesmos recursos de um desktop. É tudo diferente, desde o poder de processamente até o tamanho das coisas. Então imaginar que o uso do sistema/site será parecido como se fosse acessado por PC, é um erro.

É um erro também se fizermos um site pensando em dispositivos menos capazes mas não nós lembrarmos do grupo de usuarios que acessam seu site com dispositivos mais completos e modernos. É engraçado porque pensamos sempre no usuário que está no pior cenário. Mas aquele usuário que não seria um problema pra nós, pode se tornar o pior deles.

Um exemplo disso é quando usuários de iphone acessam sites inteiros feitos em Flash. Sabemos que é uma limitação do aparelho. Mas estes usuários estão crescendo e seu cliente pode estar ali. Normalmente ninuem coloca uma versão diferente da do Flash. Logo, estes usuários simplesmente são ignorados. Imagine a frustação.

Resumidamente, Graceful Degradation é dar a melhor experiência que você conseguir para o usuário.

Se ele utiliza o último lançamento da Apple ou se ele utiliza um Nokia 6111 com Opera Mini. Ele precisa ter a melhor experiência que é possível dar dentro dos limites de cada dispositivo.
Obviamente que vice não vai prever todos os tipos de usuário. Mesmo porque seria impossível fazer isso. Novamente eu digo o óbvio: faça um estudo de público-alvo é importante.

Saiba mais acessando: www.tableless.com.br

, , , , , , , , , ,

Nenhum comentário.

Já pensou em personalizar o seu IPAD?

As vendas do novo gadget(Ipad) da Apple estão a todo vapor, e com ele em mãos quem não gostaria de personalizar ? digo personalizar não só com fundos de tela e programas que tem a sua cara, mas sim personalizar o gadget por fora com seu estilo musical preferido, herói preferido ou até mesmo com uma criação própria… algumas empresas já estão divulgando o serviço que é na verdade uma impressão de vinil auto adesivo, que não prejudica (nem deixa marcas) no dispositivo.

seguem algumas personalizações divulgadas na internet:

quer saber mais ou ver mais pernalizações do IPAD acesse:
http://blogof.francescomugnai.com/2010/05/pimp-your-ipad-25-awesome-vinyl-decals/
fonte: Fracesco Mugnai

, , , , ,

1 Comentário

Será que a apple está desenvolvendo o seu próprio flash?

O motivo de tanta resistência ao Flash aos poucos vai se revelando. De acordo com o site Apple Insider, a Apple estaria trabalhando no desenvolvimento de seu próprio framework para aplicações na web, o “Gianduia”.

O site norte-americano diz que a tecnologia foi apresentada pela primeira vez no ano passado, na World of WebObjects Developer Conference, conferência independente que aconteceu paralelamente à Apple Worldwide Developer Conference, e seria basicamente “uma mistura do Cocoa, incluindo seu CoreData, com WebObjects escrito em Javascript”.

A Apple já estaria testando internamente a tecnologia em suas lojas de varejo Apple Store, no programa de pós-venda One to One e em seu serviço de suporte Genius Bar.

Como em carta oficial divulgada no final de abril, Steve Jobs havia criticado o Flash por ser uma ferramenta “100% proprietária” , o programa que ainda não tem data oficial de estreia será 100% aberto.

, , ,

Nenhum comentário.

CSS Cleanner – limpando de vez as maluquices dos browsers

Salve galera! hoje vou publicar um método que utilizo sempre para evitar problemas com diferenças no layout entre os browsers (é claro que só isso não resolve totalmente, lógico … não é simples assim, mas já ajuda bastante).

Nos meus desenvolvimentos eu costumo utilizar bastante um método de centralizar a minha página, fazendo com que o conteúdo fique sempre a vista do usuário, mesmo quando ele não está com a janela do navegador totalmente maximizada, para isso eu utilizo o atributo “position:absolute;” do meu elemento principal veja um exemplo abaixo:

#principal {
width:800px;
height:auto;
left:50%;
margin:0 0 0 -400px;
position:absolute;
}

Imagine que meu elemento principal tem 800 pixels de largura, e eu preciso que ele fique centralizado na página, com o atributo “left:50%” nós forçamos o elemento a ir 50% para esquerda da página independente do tamanho que ela seja, e com a margin nós puxamos ele devolta utilizando a metade do seu tamanho em largura “margin:0 0 0 -400px” (lembrando que a largura é 800px então a sua metade é justamente 400px), e por fim utilizandoo atributo “position:absolute”, forçando ainda mais o elemento a manter a posição absoluta à página… foi fácil até agora ? ai é que começa a briga entre os browsers, este caso é somente um exemplo, mas é por essas e outras que utilizo o css cleanner, que nada mais é do que um css incluindo tudo que você utiliza no seu projeto (tags) e zerando todas as suas propriedades, sem isso cada browser ira seguir um padrão e adaptar as suas tags como ele quiserem seguindo um critério próprio … exemplo: Firefox ficara diferente do Internet Explorer, que ficara diferente do Safari e assim por diante (isso mesmo começe a arrancar os seus cabelos), mas já vamos resolver isso :)

Este caso abaixo eu costumo utilizar nos meus projetos mas vocês podem adaptar da forma que acharem melhor:

*{
outline-color:invert;
outline-style:none;
outline-width:medium;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: normal;
font-style: inherit;
font-size: inherit;
font-family: inherit;
vertical-align: baseline;
}

uma outra forma que também utilizo quando não vou utilizar muitos elementos:


html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
}

bom é isso ai, espero que tenham gostado.
abraços!

, , , ,

Nenhum comentário.