Aprendendo WebDesign e Programação – Profissionais em ação (Parte3)

Noticiado em: sexta-feira, 29 de maio de 2009

  Tendo em mente que você está acompanhando os posts - Aprendendo WebDesign e Programação - e já leu a introdução, a primeira e segunda parte da sequência, entro agora então na terceira parte que irá mostrar os profissionais em ação.

  Nesse texto disponibilizarei alguns links de video-aulas (e de alguns podcasts para complementar). Esse material pode ser de grande importância, pois essa é uma maneira de você observar e assimilar diferentes técnicas de diversos profissionais da área. 

  Uma ótima ferramenta para montar o design e layout do seu site é o Fireworks. Vai uma dica? 

Comece o layout com ele, acerte e acrescente detalhes do design com o Photoshop e finalize com o Fireworks.

Vamos à lista de link:

Fireworks:

• MX Studio - Aqui você irá encontrar tutoriais que ensinam técnicas importantes de várias ferramentas do programa de forma simples e bem explicada.

Photoshop:

•  Becck Design - Já escrevi um texto sobre esse site. Clique no link e confira.

Web Standards:

• Becck - (Agora para fazer download de algumas aulas é necessário o preenchimento de um pequeno formulário) Site completo (parte1) | Site completo (parte 2) | Site completo (parte final)

MXMasters -

• Criando um site completo
  

• Tableless - Estruturação de um layout de 3 colunas
  

PodCast

• Guanabara - Técnicas de SEO - Parte 1 | Técnicas de SEO - Parte 2

  Com essa terceira parte eu finalizo a primeira etapa que consiste em aprender o básico da área de webdesign. Pretendo atualizar sempre esses posts com novos links.

 Programação é o próximo assunto a ser abordado. Mas isso ficará para um próximo post.

(E desde já, conto com a ajuda de meus amigos programadores) :)

Até a próxima!

Campanha para eliminar browsers antigos do mercado

Noticiado em: sexta-feira, 20 de março de 2009

Lendo o Blog de meu camarada Lázaro Santos :-), tive conhecimento da campanha que o site IMasters está fazendo desde o começo deste ano de 2009.

A campanha consiste em você inserir um código que alertará a pessoa (com uma barra com opções de navegadores para download) que ele está usando um navegador fora dos padrões atuais da Web.

A idéia é ótima, tanto que já coloquei o código no meu e indico para o site de outras pessoas.

Veja a barra em ação e logo abaixo o artigo retirado do IMasters.

O uso de navegadores desatualizados por parte de alguns internautas faz com que desenvolvedores ainda percam muito em produtividade. Isso porque esses browsers não possuem suporte às funcionalidades e às tecnologias atuais para alcançar seus clientes, limitando soluções e criando dores de cabeça desnecessárias.

Lançado em 2001, o Internet Explorer 6.0 ainda abocanha 35% do mercado de navegadores. Infelizmente, trata-se de um browser que não acompanha o estágio atual da internet, pois apresenta falhas de segurança e limita todo o potencial de uma internet melhor para todos os usuários.

Chamada de Campanha CrossBrowser, a iniciativa visa a excluir navegadores desatualizados do mapa da internet do Brasil.

Para participar, basta inserir o código abaixo em todos os seus sites e de seus clientes. Assim, será exibida uma barra simples, sem marcas, para todo usuário que acessá-los utilizando navegadores desatualizados, que irá orientá-lo para atualizar o seu navegador e falar da importância desta atitude.

Ajude a tornar a internet ainda melhor. Divulgue em seu website a faixa da campanha, avise os amigos e cole o código na sua página:

<script src="http://imasters.uol.com.br/crossbrowser/fonte.js" type="text/javascript"></script>

Espero que tenham gostado da dica (e que transformem o uso dela em um hábito até que não existam mais pessoas usando navegadores ultrapassados).

Aprendendo WebDesign e Programação - CSS (Parte2)

Noticiado em: sexta-feira, 27 de fevereiro de 2009

Seguindo os posts sobre como aprender WebDesign e Programação pela internet, vamos agora ao CSS... Mas antes visite os sites logo abaixo para já ter uma noção do que pode se fazer através dessa técnica:

CSS Zen Garden

Painel com todos os layouts do Zen Garden

E para uma introdução ao assunto, nada melhor que escutar a explicação do mestre e dinossauro das CSS Maurício Samy Silva, a.k.a. Maujor.  :-)

O link logo abaixo irá lhe redirecionar ao Blog do Maujor onde você poderá escutar o Podcast (on-line ou fazendo o download) com uma entrevista com o Maujor feita pela Agência GrifeMídia.

Podcast: Entrevista com o Maujor

Logo abaixo 2 dos principais sites que tratam sobre o assunto com a maior competência e dedicação:

Maujor : Bem... O que dizer sobre o Maujor?

Se você quer realmente aprender CSS não há para onde correr, pois é aqui onde o assunto é tratado em sua forma mais abrangente. Do básico ao avançado, esse site é a parada obrigatória para qualquer desenvolvedor web.

Tableless : Aqui você irá encontrar notícias e novidades sobre tecnologia e principalmente sobre CSS e Web Standards.

Tutoriais e vídeo-aulas fazem parte de seu conteúdo também, bastando somente uma navegada para encontrá-los.

Bem... Existem centenas de Sites/Blog que disponibilizam material sobre esse assunto.

Nestes você encontrará tutoriais e diferentes técnicas de como montar um menu ou como construir um layout.

Para encontrar esses sites, basta ir ao Google e ser feliz!

Como disse o Maujor: “CSS não é uma tecnologia muito fácil, é uma tecnologia fácil”!

Então vamos aos estudos.

Abraço e até o próximo Post! ;-)

Aprendendo WebDesign e Programação - HTML (Parte1)

Noticiado em: terça-feira, 20 de janeiro de 2009

Após uma pequena introdução (feita no post anterior) sobre como aprender WebDesign e Programação pela internet, começo agora de fato - nessa primeira parte - a mostrar onde encontrar alguns bons tutoriais e vídeo aulas.

Começaremos então com HTML. E a primeira dica é:

Esqueçam o Dreamweaver, pois ao contrário do que é dito nos cursos técnicos, ele não ajuda em nada para quem está começando.

Depois de muito navegar procurando por um material a mais sobre HTML, acabei percebendo que o que eu já tinha em mãos era suficiente.

A primeira dica deste post, são as vídeo aulas de HTML do Blog Guanabara.info.

Não tenho dúvida em afirmar que essas são as melhores vídeo aulas sobre o assunto disponíveis na internet.

E todo o código usado nas aulas, é feito no bloco de notas. Na unha, como deve ser feito em qualquer linguagem de programação.

O tempo de cada vídeo aula - que dura em média de 7 a 9 minutos - é muito bem aproveitado devido à clareza e ao dinamismo das explicações do professor Gustavo Guanabara.

Se eu tivesse que destacar algum "problema" seria pelo simples fato das aulas ainda não estarem completas, mas creio que isso não durará por muito tempo. Até porque se trata de um curso ainda recente.

Exemplo logo abaixo do vídeo de inauguração das aulas de HTML do Guanabara.info.

Visitem o Blog para assistir o restante.

Para quem tem pressa e não quer esperar pelas próximas vídeo aulas do Guanabara, basta visitar essas páginas com tutoriais sobre HTML.

 No site HTML.net  você encontrará um tutorial traduzido pelo Maurício Samy Silva, o Maujor.

Lá você terá a noção dos comandos básicos do HTML, e já ter uma noção também de como inserir o CSS (?... Calma, isso será abordado no próximo post) no código HTML.

 O outro site é o Criar Web.com. Mais especificamente na página que trata sobre formulários. Nesse tutorial você saberá o significado de cada tag usada para montar um formulário.

Depois de lido e entendido esse tutorial, você poderá até ganhar um tempo construindo seus formulários no Dreamweaver. :-)

Introdução - Parte 1 - Parte 2 - Parte 3

Então é isso pessoal. Essa foi a primeira parte com dicas sobre como aprender WebDesign e Programação pela internet.

Na próxima aula, CSS.

Aprendendo WebDesign e Programação (Tutoriais – Vídeo Aulas – Dicas)

Noticiado em: sexta-feira, 16 de janeiro de 2009

Com a onda já consolidada da web 2.0, onde qualquer um com o mínimo de conhecimento pode montar um blog, surgem cada vez mais pessoas interessadas nas linguagens voltadas ao desenvolvimento web.

Para quem está começando e tem o real interesse de aprender e trabalhar com isso, minha opinião é que essa pessoa procure um curso técnico. E não digo isso nem pelo aprendizado em si, pois existem pela Net vários cursos e vídeo aulas fantásticas (que é sobre o que se trata esse post, mas aguardem), mas sim pelo networking.

Conhecer pessoas nesse meio, ainda mais para quem está começando é fundamental, pois é a partir daí que irão surgir futuras parcerias e até mesmo propostas de trabalho.

Mas nem tudo é tão simples. Fazer um curso técnico desses não quer dizer que você sairá um expert no assunto. Alguns cursos pecam, não por ensinar técnicas ultrapassadas, e sim por não ensinar as novas. Vai depender só de você correr atrás e se aprofundar mais no assunto.

E um outro porém, e creio que esse é o que mais pega na hora de fazer um curso técnico, são os preços que na maioria das vezes são salgados.

Pretendo então a partir deste post mostrar algumas (ótimas) alternativas que podem ser adotadas por aqueles que têm vontade de aprender essas linguagens, mas que por algum motivo ($$$ :-)) não podem freqüentar um desses cursos técnicos.

No próximo post começo com essas dicas e comentários a respeito de cada site/blog indicados por mim.

Até! ;-)

Photoshop: Design Effect

Noticiado em: segunda-feira, 1 de dezembro de 2008

Tutorial traduzido a partir de uma vídeo-aula disponibilizada no site Planet Photoshop.

Esse tutorial tem como objetivo mostrar como usar a luminosidade de uma imagem e criar um efeito de design bastante interessante.

Repare no resultado final de cada etapa para que esse tutorial funcione com qualquer uma de suas fotos.

Com algumas poucas alterações você conseguirá o mesmo efeito para qualquer imagem.

Antes de começarmos, um exemplo do efeito sugerido nesse tutorial:

(Clique nas imagens para uma melhor visualização.)

O primeiro passo é abrir sua imagem no photoshop ou fazer o download da imagem logo abaixo.

Com a imagem aberta, escolha a aba “Channels” (ao lado da aba “Layers”) e com o “Control” pressionado clique na imagem RGB.

Como pode ser visto na imagem de exemplo logo abaixo, você irá perceber que várias partes da imagem estarão com a marcação de seleção. Repare que os pontos luminosos foram selecionados.

Agora no rodapé da aba “Channels” clique em “create new channel”.

Uma nova channel com o nome “Alpha 1” será criada.

Note que aparecerá somente a marcação com o fundo preto. Confirme se o seu plano de fundo está com a cor branca selecionada e aperte “Control + backspace”.

A imagem novamente aparecerá.

Agora vá ao menu e escolha, “Select” > “Inverse” (ou Shift + Control + I).

Pressione "Alt” + “backspace” e a área escura da imagem ficará ainda mais escura.

Mais uma vez iremos inverter a marcação. ‘Select” > “Inverse” (ou Shift + Control + I)

Pressione 3 vezes a tecla “Delete”, sua imagem ficará como no exemplo abaixo:

Logo em seguida vá ao menu, “Image” > “Adjustments” > “Levels” (ou tecla de atalho Control + L) e diminua o brilho das áreas escuras escolhendo o valor 20 da primeira caixa de seleção.

Iremos escolher a ferramenta Brush com as seguintes configurações:

• Tamanho (médio) 60px,

• Soft

• Cor branca.

E iremos pintar as áreas ao redor do rosto em que a luminosidade está mais forte, apagando aquilo que não precisaremos usar em nosso design final.

Pressione Control + I e transforme a imagem em um negativo.

Voltemos agora para a aba “layers” .

Crie uma nova camada acima da camada background (onde se encontra a nossa imagem) e escolha a cor branca como background para essa nova camada (Control + backspace).

 Novamente crie mais uma camada. Vá ao menu “Select” > “Load Selection” > e em “Channel” escolha “Alpha 1”. E em operation deixe como “New selection”

Pressione Ok.

Escolha uma cor para o primeiro plano (nesse tutorial eu escolhi #002157) e aperte Alt + Delete para preencher a seleção que deverá ficar assim:

Vamos travar essa camada e na caixa de ferramentas escolha Gradiente Tool (G).

Clique em Gradient Editor e mude a opção Gradient Type para “noise”.

Em randomize escolha uma paleta de cores de sua preferência para o efeito final.

Com a ferramenta Gradiente Tool ainda selecionada, basta arrastá-la.

Experimente cores diferentes, acrescente margem, mude a posição de efeito da Gradiente Tool. Escolha o que melhor lhe satisfazer! Aqui está um exemplo do efeito da ferramenta Gradiente Tool em ação:

 

A primeira vista o tamanho do tutorial pode assustar, mas você vai perceber que ele é bem simples de se fazer. E o resultado é bacana!

Até a próxima! ;-)

Photoshop: Adicionando um efeito dramático

Noticiado em: quarta-feira, 19 de novembro de 2008

Tradução do Tutorial publicado no site Photoshop Frenzy.
Clique nas imagens para uma melhor visualização.

Nesse tutorial será mostrado como adicionar um efeito dramático a um perfil no photoshop.

O efeito sugerido é este que aparece a seguir nas imagens.

Abra sua imagem em um novo projeto e imediatamente crie duas cópias da camada background.

Com a camada “background copy” selecionada vá ao menu e siga esses 4 passoas:

1. Filter,

2. Other,

3. Hight Pass,

4. E em Radius coloque 5 pixels e click Ok.

Agora escolha (nessa mesma camada ‘background copy”) o efeito de camada “Overlay”.

Agora com a camada “Background Copy 2” selecionada vá ao menu e siga os seguintes passos:

1. Image,

2. Adjustment,

3. Desaturate.

E escolha “Hard Light” como efeito nessa camada.

No menu da paleta das camadas escolha “Flatten Image”. Novamente ficaremos com uma única camada “background”.

Duplique esta camada e dê “Ctrl + F” para aplicarmos o mesmo efeito usado no início desse tutorial.

Escolha “Overlay” como efeito de camada.

E novamente no menu da paleta das camadas escolha “Flatten Image”.

Agora clique no ícone Create New Adjustment Layer (imagem abaixo) no rodapé da paleta de camadas e escolha “Curves”.

Na caixa “Curves” faça como na imagem ou digite um valor próximo a:

• Input: 57

• Output:190

Clique no Thunbnail Mask da camada onde foi criado o “Curves adjustment” e pressione “Ctrl+i”. A imagem ficará escura.

Modifique seu primeiro plano para a cor branca (pressione D).

Selecione a ferramenta Brush na caixa de ferramentas e use as seguintes configurações para o pincel:

• Diameter - 15px

• Hardness - 15%

Passe por sobre os olhos para aumentar os brilhos.

E pronto! Nosso efeito dramático está completo! Divirtam-se e apliquem esse efeito em outros projetos!

(A última etapa desse tutorial não foi traduzida devido a explicação do autor estar meio confusa e por não ter grande influência no resultado final)