Rafaelcgstz

CURSO “DISCOVER DEVTOOLS” ATUALIZADO E COM LEGENDAS EM PORTUGUÊS

2014-02-11T23:52:00.002-02:00

O curso Discover DevTools continua gratuito e inclui lições sobre DOM e estilos, como trabalhar com o console JavaScript, como depurar e como identificar problemas de performance. Ao adicionar legendas em Espanhol e Português para o curso, esperam ver mais desenvolvedores talentosos aprofundando seus conhecimentos no Chrome DevTools e como ele pode acelerar seu workflow de desenvolvimento.

Dê uma olhada no curso Discover DevTools e veja como ele pode te ajudar a ser um desenvolvedor mais produtivo.

ZENO ROCHA – CAMPUS PARTY 2014

2014-02-11T23:49:00.003-02:00

Com apenas 22 anos, Zeno Rocha é engenheiro front-end e já trabalhou em empresas como Petrobras, Globo.com e a norte-americana Liferay, além de ser o único brasileiro do programa Google Developer Experts. Com uma linguagem jovem e divertida, Zeno compartilhou suas experiências de empreendedor nas empresas onde trabalhou e nos deu dicas valiosas para sair da zona de conforto e mudar o modo como encaramos o trabalho.

1. Reconheça as oportunidades. Quando surge uma coisa nova, ficamos com medo e não investimos nessa coisa. Por isso, não tenha medo do novo.

2. Quando você arrisca, coisas incríveis acontecem, sejam elas boas ou ruins. Zeno gostava de programar em flash para a web, porém a linguagem decaiu e ele foi aprender HTML5. Depois disso, começou a dar palestras no mundo todo. “O HTML5 pode ser o querido hoje, assim como o flash foi no passado, mas ele não será no futuro. O importante é como você vai encarar a mudança, você vai ser o cara que a odeia ou falar: ‘meu, isso é muito foda! Vamos encarar, posso me dar bem no futuro”, afirma Zeno.

3. Freela não compensa. Não pense no dinheiro que você irá ganhar, a não ser que você esteja muito ferrado. Opte sempre pela experiência que ganhará, o tempo que você gasta trabalhando no freela, você poderia investir em algo que você realmente gosta e que irá acrescentar algo na sua carreira. Quando Zeno pediu demissão da Globo.com, a empresa queria cobrir ou até aumentar a proposta da Liferay, porém ele não aceitou, pois queria fazer impacto no mundo e ter de adquirir a experiência de trabalhar em outro país.

4. Saiba mensurar o tempo em que você leva para realizar determinado trabalho, se você não o fizer, sempre entregará seus projetos fora do prazo e seu cliente ficará descontente.

5.Qualidade acima de quantidade. Prefira trabalhar um ano em um projeto do que em milhares de projetos toscos. Além disso, valorize seu trabalho. Você quer ser visto no mercado como aquele quebra galho barato ou o melhor cara da área?

6. Seja proativo, não espere seu chefe te pedir para fazer alguma coisa. Se a demanda não existe, crie-a.

7. Ferramentas vem e vão. Invista bastante tempo aprendendo novas ferramentas, assim você verá qual é a melhor forma de realizar seu trabalho. E quando achar que você já domina determinada ferramenta, aprenda outra.

8. Ame a segunda-feira. Se você passa a semana toda desejando que ela acabe, peça demissão hoje mesmo. Isso mostra que você não está gostando do que faz, então nunca será bom nisso.

9. Mude o mundo. Zeno, junto com outros feras como Marcel Duran (Twitter) e Renato Mangini (Google), criou um guia, o Como perder peso no browser (How to lose weight in browser), de performance para front-end em sete línguas diferentes para criar a melhor referencia possível para o publico dessa área. O site conseguiu tem milhares de acesso no mundo todo e está concorrendo ao Best Collaborative Project.

E aí, depois dessas dicas valiosas, vai começar a empreender em você?

Mariana Marinho
Voluntária/Campusera

Novidades no Bootstrap 3.1.0

2014-02-11T23:47:00.000-02:00

Novas funcionalidades, muitas correções de bugs e melhorias, e ferramentas de compilação atualizados.

Nova Documentação

Há toneladas de mudanças em várias linhas. Assim como a v2.1 trouxe novo design, v3.1 foca na documentação como se pode perceber a página inicial está mais intuitiva e resalta caracteristicas-chaves além de novos exemplos.

Oficial Sass

A melhor parte da v3.1 é o suporte para Sass que ao invés de inchar o projeto com suporte para LESS e Sass e toda documentação eles mantiveram separados por enquanto.

Novos Exemplos

Agora há três novos exemplos: Blog, Capa e Dashboard. Cada exemplo fornece uma única página de grandiosidade para você começar rapidamente em um projeto construído com Bootstrap. Eles são ágeis e pronto para começar.

Recursos Aprimorados
Um punhado de recursos que não são exatamente novas para Bootstrap ter visto uma atualização em v3.1:

- Modais agora incluem tamanhos opcionais
- Dropdowns agora têm suas próprias classes de alinhamento para a personalização mais fácil
- Estilos de feedback Formulário para os estados de validação agora incluem ícones opcionais para reforçar a mudanças de cor

Tudo-em-tudo isso faz componentes mais focado, mais durável e mais fácil de trabalhar with.See o changelog incluído com o lançamento GitHub para a lista completa de novos recursos.

Ferramentas de Construção Melhorados
Bootstrap e v3.1 traz uma série de atualizações.

Mudaram para grunt-contrib-less menos para o compilador, LESS 1.6.x (em oposição a 1.3.x com Recesso).
Código do compilado é praticamente idêntica em formatação e organização graças a CSScomb e algum outro Grunt-fu.
Os testes também correr um pouco mais rápido com a ajuda de alguns cache mágico e paralelização.
O Customizer web agora é gerado a partir de uma tarefa Grunt, o que significa que nunca vai perder a atualização ou a adição de uma variável novamente. Se você contribuir para o arranque regularmente, basta executar grunhido e se comprometem a atualizar a página.
Atenção! Se você desenvolver Bootstrap local, certifique-se de bombardear o seu diretório /node_modules e executar npm instalar antes de começar com v3.1.

Postagem Original

2011-11-29T09:06:00.001-02:00

Deixar o programa portátil com VM Ware ThinApp

Olá pessoal, nesse tutorial ensinei como transformar um programa instalado em um programa portátil para carregar no pendrive.

2011-11-29T09:04:00.001-02:00

Deixar o programa portátil com Winrar

Olá pessoal, nesse tutorial ensinei como transformar um programa instalado em um programa portátil para carregar no pendrive.

2011-11-29T08:57:00.001-02:00

Deixar o programa portátil com Cameyo

Olá pessoal, nesse tutorial ensinei como transformar um programa instalado em um programa portátil para carregar no pendrive.

2011-11-10T17:32:00.002-02:00

E-mail marketing foi bloqueado por spam?

É normal para o pessoal novo nessa área de e-mail marketing o susto ao perceber que foi bloqueado por spam, mas calma oque faz o provedor bloquear a entrega do e-mail marketing é a má reputação do IP e falta de qualidade dos códigos HTML, a reputação do IP é analisada devido as mensagens enviadas pela própria empresa aos seus contatos e em relação ao comportamento da base, além da fundamental relevância da mensagem.

1. Mantenha a base de dados higienizada:
Não deixe sua página de contatos com emails que não existem e que não tem aplicação nenhuma de nenhum database marketing, os provedores analisam que se o seu sistema de banco de dados tem tantos emails que não existem então um relacionamento com a base de contatos. Higienize seu banco de dados e tire os emails que foram considerados hard bounces.

2. Reporte de spam:
Se deve evitar ao máximo a falta de relevância do e-mail marketing para que a atitude do destinatário seja receptiva, caso ele clique em reportar o e-mail como spam ele vai estar dizendo ao provedor assim "este e-mail não está sendo entregue com coerência e não quero mais receber" se essa ação for natural entre muitas mensagens enviadas pelo mesmo domínio/IP, o provedor identifica que o remetente faz spam e nesse caso faz o bloqueio é preciso estudar o relacionamento com a base de contatos e entrega de mensagens relevantes de acordo com seu interesse.

3. Cuidado com o spam trap:
Esses spam trap são aqueles emails que o provedor manda para digitar um código de confirmação para a entrega do e-mail para o destinatário, porém os provedores mais antigos costumam usar e-mails sem atividade há algum tempo para criar seus spam traps. Isso quer dizer que, se sua empresa possui uma base opt-in muito antiga, ela pode estar cheia de spam traps. Neste caso, o ideal é trabalhar com a base de contatos que interage com seu e-mail marketing, com frequência. Com o restante da base, é aconselhável realizar comunicações esporádicas, apenas com o intuito de ativá-la, ou seja, aumentar o número de contatos que interagem. Aqui estamos falando de relevância de comunicação.

4. Interação é fundamental:

Alguns provedores conseguem reconhecer quando um e-mail marketing não é interessante para o contato e, assim, mudam o comportamento de entrega. Independente de ser um ou um milhão de destinatários que reportam o e-mail marketing como spam ou mesmo não interagem com a mensagem, esse histórico favorece o bloqueio da entrega dos e-mails.

Alguns provedores, como o Gmail e o hotmail, já trabalham com análise comportamental one to one. Isso quer dizer que o e-mail poderá ser entregue na caixa de entrada ou de spam em consonância com o histórico de interações de uma única pessoa. De acordo com as diretrizes para envio em massa publicada pelo Gmail, a maneira como ele classifica spam depende fortemente das denúncias de seus usuários. Os usuários do Gmail podem marcar ou desmarcar qualquer mensagem sempre que desejarem: “Nós analisamos os relatórios de nossos usuários e corrigimos problemas a fim de fornecer a melhor experiência para o usuário. Desde que nossos usuários não considerem seus e-mails como spam, ele não deverá ter problemas de entrega em caixas de entrada”. Leia mais em:http://mail.google.com/support/bin/answer.py?hl=br&answer=81126
Além dessa classificação, o gmail também criou a chamada “Caixa prioritária” que analisa a relevância das mensagens de acordo com a interação e insere as menos relevantes na caixa não prioritária. O hotmail também lançou, recentemente, a notícia de que começaria a trabalhar desta forma.

Para evitar que o e-mail marketing seja considerado spam, é preciso que o contato que o recebeu interaja. Para que o contato interaja com o e-mail marketing, é necessário que ele seja…relevante.

5. Aplique relevância na campanha de e-mail marketing:

Para toda e qualquer campanha, a palavra da ordem é relevância. Alguns provedores de e-mail disponibilizam serviços que ajudam a medir a saúde dos IP’s. O Smart Network Data Services, por exemplo, é um serviço disponibilizado pelo Hotmail que auxilia as empresas a entender a reputação de seus IP’s, a partir do envio de e-mail marketing (quantidade de erros, spam traps e reportes).

6. Apenas medir não é suficiente, é preciso agir:

É fundamental estudar o comportamento da base, pesquisar seus interesses, suas preferências e o momento em que cada contato vive. O Hotmail criou um programa chamado “especialistas”. Ele escolhe e convida pessoas aleatoriamente para classificar mensagens eletrônicas como “lixo” ou “não lixo”. Com esse programa, o Hotmail evita o chamado “falso positivo” e “falso negativo”. Se uma mensagem chega à caixa de entrada e a maioria dos “especialistas” a classificam como spam, no futuro, certamente essa mensagem chegará diretamente à caixa de spam.

Em suma, “converse” com quem quer “ouvir”. Não adianta forçar a barra. A tecnologia traz funcionalidades incríveis para um bom relacionamento digital. Aproveite isso!

E aqui fica meu conselho: antes de arrancar os cabelos tentando entender por qual motivo os provedores estão bloqueando seu e-mail marketing, faça a si mesmo a pergunta: “Quão relevante é minha mensagem para cada contato?”

7. O subject cuidado com o limite:

O limite para o subject é de 50 caracteres, evite de baixa reputação como "promoção, imperdível, crédito" não use acentos gráficos "!?" e nunca use subject em caixa alta. Seja objetivo se for uma promoção coloque o nome da promoção evite acentos e palavras fiscalizadas pelos anti-spam como "divulgue, consulte-nos, frete grátis" além das já citadas, se for um newsletter escolha o assunto principal e coloque no subject os demais deixe na mensagem apenas.

8. Uso de imagens:

Fatie a imagem do template além de inserir tags "alt" que permitirão o compreendimento do e-mail antes do carregamento das imagens, mapeie, insira hiperlinks e nos endereços das imagens não use palavras marcadas. uma imagem em uma pasta chamada marketing, promo ou e-mailmkt vai pontuar e muito o seu template. Equilibre seu template, use imagens mas também use textos o ideal é 50% para cada isso deixa seu HTML puro, nada de CSS, DIVs, Styles e Javascript pois todos são bloqueados nos webmails.

2011-11-10T10:17:00.004-02:00

Programa portátil com Cameyo

Vou mostrar como você pode tornar aquele programa legal que você tem em portátil para carregar no pendrive sem precisar instalar e tudo isso sem esforço algum.

Workflow (fluxo de trabalho) de um Web Designer

2011-11-08T16:46:00.000-02:00

Muitas empresas e indivíduos que precisam da ajuda de um web designer para seus sites. Claro, eles querem que olhar tão profissional quanto possível para que pudesseatrair o grupo certo de audiência. Eles confiam na web designers para fazer seus negócios online bem sucedido e para web designers se também certificar-se que eles poderiam dar o que o cliente quer.

Mas, além de adquirir e fornecer um web design grande, também é importante queambas as partes sabem o fluxo de trabalho de projeto ou processo a fim de evitar certos equívocos. Isso também irá ajudar o cliente eo designer para chegar a acordo sobre um cronograma do projeto. Tenha em mente que o cliente deve conhecer o processo de design, para que eles não teriam dúvidas sobre qualquer coisa. Explicar tudo para o cliente e fazê-los entender o processo. Isso vai ajudar muito em ter uma boa relação de trabalho com eles. Neste artigo, damos-lhe um guia sobre como fazer o seu trabalhopróprio projeto web.

1. Consulta

Primeira coisa que estaria falando com seu cliente sobre o que suas exigências são, o propósito do site, quais são as coisas que eles querem colocar no seu site, as cores que optar por usar, as imagens que deseja usar, e muitos outros da informação. Certifique-se de reunir todas as informações que você precisa na reunião inicial para que você possacomeçar a fazer uma proposta de projeto para eles. Você também tem que saber o orçamento do cliente assim que você pode limitar-se sobre o referido orçamento. Antes de vir para a primeira reunião, preparar as perguntas que você precisa perguntar.Lembre-se também para atuar profissionalmente ainda você tem que ser simpático e acolhedor, ao falar com seu cliente online e offline.

2. Fazer uma proposta de projeto

Nesta etapa, você tem tudo preparado para o cliente ver. Mostrar-lhe sua idéia de concepção do projeto, sugeriu mapa do site, linha do tempo, as aplicações de sistema e software, o custo do projeto, o papel do cliente, manutenção de sites e search engine marketing, material de marketing sugeriu, condições de pagamento, as questões de direitos autorais eo processo de aprovação . Você precisa explicar e discutir cada detalhe do projeto. Se o cliente sugere algo, aceitá-lo, mas se você acha que não é adequado para o projeto, você pode sugerir outra coisa respeitosa. Você também precisa explicar por que você acha que sua idéia é melhor. Sempre dar uma explicação honesta. O seu cliente irá apreciá-lo, porque mostra que você se importa com o projeto e o cliente também.

3. Assinatura do contrato

Nunca se envolver em qualquer transação sem um contrato. Sempre tem um. Depois de mostrar a proposta do projeto eo cliente concordaram com isso, fazer um contrato e tê-loassinado por ambas as partes. Isto lhe dará uma garantia para você e seu cliente de que tudo que já tenha discutido e acordado não pode ser mudado mais. Certifique-se também que você vai acompanhar tudo no contrato. Pelo tempo que o cliente assina-lo, você pode começar a trabalhar no projeto.

4. Aquisição de materiais necessários.

Com o sinal para começar, você precisa dos materiais para o projeto. Assim, as coisaspedido de seu cliente, como imagens, conteúdo, logos e outros. É claro, você estáapenas fazendo o projeto e é o seu cliente quem determina o conteúdo. Certifique-se que você terá imagens de alta resolução, para que ela vai ficar bem no site. Certifique-se também para reunir tudo para que você não precisaria ser chamá-los de vez em quando para esperar por algum conteúdo faltando você deixou de perguntar. Isso vai provocar um atraso para o projeto e você vai estragar o seu cronograma de projeto.

5. Fazer alguma pesquisa

Faça alguma pesquisa sobre os concorrentes do seu cliente de modo que você saberá o que fazer com seu web site. Claro, você tem que fazer isso melhor do que o site do concorrente. Além disso, determinar algumas palavras-chave que seria eficaz paraSearch Engine Optimization. Você pode sugerir isso para o cliente e tê-lo incorporado no seu site. Você também pode sugerir alguns conteúdos que podem ajudá-los a conseguir uma classificação mais elevada. Diga-lhes os resultados de sua pesquisa. Eles certamente será feliz que você teve o esforço de fazê-lo, a fim de ajudá-los.

6. Faça um Mapa do Site e Molduras Wire

Desta vez você tem que fazer um mapa do site e armações de arame. Para garantir que o conteúdo do seu site é organizado e fácil de navegar, há uma necessidade de ter um mapa do site que é um fluxograma de páginas de um web. Fora isso, também é importante para fazer wireframes. Wireframes são esqueletos de páginas importantes em um site que será usado por usuários on-line para realizar uma tarefa particular.Ambas as coisas são importantes na tomada de um site.

7. Fotografia e Imagens

Há casos em que o cliente continuará a pedido de uma fotografia tiro exclusivamente para o site. Você tem que se preparar para isso. Às vezes, eles simplesmente fornecer-lhe as imagens. Apenas certifique-se que as imagens dão-lhe têm boa qualidade e alta resolução, para que ele aparecerá bem no site.

8. Criando o projeto do Web site

Depois de recolher as fotos e fazer o mapa do site e wireframes, você pode fazer o design do site. Lembre-se dos pontos importantes do seu cliente lhe deu durante a consulta. Olhe para suas anotações e não esquecer de nada. Coloque o conteúdo do seu cliente lhe deu. Após fazer isso, mostrar para seu cliente no formato PDF e deixá-lo comentar sobre ele. Se houver correções e outros insumos, incorporá-lo no projeto.

9. Tornar o site beta

Pelo tempo que o design do site é aprovado, é hora de você fazê-lo funcionar como um website. Criá-lo em formato XHTML. Em seguida, fazer a programação de páginas XTHML, folhas de estilo CSS, Javascript e validação de elementos dinâmicos como formulários web, etc Também preparar o local para Search Engine Optimization, utilizando as tags título certo tags, meta, palavras-chave e tags alt das imagens. Você também precisa testá-lo para a compatibilidade do navegador. Seria melhor se ele roda bem qualquer tipo de navegador do público usa. Após fazer isso, fornecer um link para o cliente para que ele pudesse ver o site.

10. Tornando o conteúdo final

Quando o cliente é feito verificando o site, e você ter incorporado todas as correções do cliente, agora você pode finalizar o conteúdo do website. Claro, você tem que mostrar o resultado final para o cliente apenas no caso de haver pequenos ajustes.

11. Lançamento do site

Procure um bom host para o seu site web. Existem muitos sites de hospedagem que você pode escolher. Leia opiniões desses sites e tentar comparar as características de cada um. Desta forma, você poderia escolher o direito host. Além disso, tente testes de usabilidade antes do lançamento final do website.
Se você trabalha com um guia particular ou processo, você não vai perder nada. Isto é muito vital para garantir que seu trabalho está em sua ordem correta. Mas todo fluxo de trabalho designer não é o mesmo com outros de fluxo de trabalho. Pelo menos, nós fornecemos-lhe um guia em um processo de design web. Se existem outros pontos importantes que você gostaria de adicionar, sinta-se livre para fazê-lo.

7 Maneiras de otimizar seu site

2011-06-03T14:40:00.003-03:00

Web designers e desenvolvedores têm muitas responsabilidades quando se trata de construir sites. Desde a criação de um layout sólida para o front-end, para escrever código limpo, para que o site funciona sem bugs - há muita coisa envolvida. No entanto, uma coisa que é muitas vezes negligenciada e deve cair sobre o designer e desenvolvedor é search engine optimization. Aqui estão sete maneiras designers e desenvolvedores podem melhores práticas de SEO.

1. Evite modelos de imagem pesados

Não é nenhum segredo que as imagens muitas vezes levam a projetos pesado que pode causar mais do que os tempos de carga desejada. pontos de dados cada vez mais ao Google enfatizando a velocidade em sua página de fatores ranking. Se você não é capaz de cortar em imagens, imagens do projeto de modo que possam ser repetidas em CSS. Com os modernos efeitos CSS, como degradês e sombras pode ser alcançado sem o uso de imagens, como exigido no passado.

2. Não design links de navegação em imagens

Uma das maneiras mais fáceis para o Google para determinar o que uma página é sobre é através do texto âncora de um link. Navegação faz exatamente isso, ao mesmo tempo, adicionando uma média de organização também. Com ferramentas como o kit de tipos disponíveis, a desculpa de navegação imagem baseada não existe mais.

3. Condensar CSS e JS arquivos em um único documento

Como mencionado acima, a velocidade página está se tornando um grande jogador no ranking fatores. Uma maneira rápida e fácil de obter uma vitória pequena condensando CSS e JS em um documento de cada. Para cada documento que está listado no código de uma nova chamada do servidor é exigido, aumentando assim o tempo de carregamento. Ao diminuir esse número para apenas uma chamada para cada tipo de arquivo, você diminui o número de chamadas, diminuindo o tempo de carregamento.

4. Mantenha tag cabeçalho perto do topo do código

As tags de cabeçalho geralmente indicam o título de uma parte do conteúdo. Freqüentemente, este é o local onde SEOs frases-chave que estão a tentar a classificação. As teorias são de que o conteúdo no topo de um documento HTML tem mais peso do que a de conteúdo em áreas como o rodapé. tags H1 devem ser usadas para títulos do conteúdo.

5. Use CSS Sprites

No PubCon Sul 2011, Aaron Shear, o SEO para Zappos falou sobre a importância de sprites CSS, uma forma astuta de combinar imagens utilizando CSS para diminuir o tempo de carga. Embora o conceito de fazê-lo manualmente pode ser assustador, o Google recomenda uma grande ferramenta chamada SpriteMe, que eu já vi ótimos resultados com pessoal.

6. Mantenha as linhas tag longe do topo

Uma das primeiras coisas que você quer que o Google vê no seu código é a palavras-chave relacionadas a essa página. Muitas vezes os designers colocar slogans e frases de no cabeçalho de um projeto. Este não é o ideal como a primeira peça de conteúdo do Google vai ver em cada página é que o slogan ou linha de tag que não serão relacionados para essa página. Se você não é capaz de migrar para essa outra parte do site, é melhor colocá-lo em uma imagem.

7. Pare de usar text-indent:-9999px

Os programadores têm usado frequentemente text-indent:-9999px para enganar os motores a pensar que existe uma palavra-chave real em uma imagem. Se você é forçado a usar uma imagem em vez de texto, não tente enganar o mecanismo de busca mundos maiores e mais sofisticadas. Use uma tag alt. Eles sabem que as pessoas fazem isso ea equipe do Google também se manifestou contra isso várias vezes.

Planejamento de um site perfeito

2011-06-03T14:36:00.002-03:00

Como web designers, é muito fácil se perder em nossas próprias cabeças. O processo de um web design pode ser dividida em diversos sabores e cores em todo o globo. artistas gráficos e animadores digitais são apenas algumas das pessoas metendo a criação de aplicativos para a web.
Apesar de ser ousado para abrir pop Adobe Photoshop e ir direto para a concepção, há muitas etapas que podem melhorar um site, quando tomado em consideração. O processo de planejamento, embora aparentemente não muito longo, é quase um aspecto essencial do que empresta ao processo criativo. Espero apresentar algumas idéias aqui, que pode ser aplicado para projetar interfaces web fresco.

Iniciando o Projeto

Este é possivelmente o momento mais ansioso e condução durante o trabalho de projecto. Quando você tem uma lousa totalmente em branco para trabalhar, pensamentos e idéias parecem pilha mais rápido do que você pode agarrá-los. É importante aqui para respirar e refletir sobre os ideais do projeto. Talvez dê um passo atrás para questionar alguns aspectos simples do projeto.

O que você ou seu cliente à procura de um objeto preenchido? Existe algum item específico que você quer incluir sem perguntas? Estes podem estar caminhando banners, diferentes menus de navegação, um esquema de cor forte, ou mesmo um logotipo de página simples. Tente esboçar alguns protótipos antes de tomar para o processo digital.
Para aqueles entre nós que são menos artisticamente dotados mesmo bruto um esboço pode fornecer mais inspiração do que nada. Um protótipo oferece não apenas uma orientação, mas um wireframe para os quais a base de todas as suas páginas futuro fora. Este wireframe pode mudar entre os diferentes estilos de página (por exemplo, em casa, sobre nós, blog), mas acabará por conter o mesmo modelo.

Design Galerias Scrutinize

Eu já corri em muitos designers que defendem galerias de design não oferecem nenhum valor para a web. São caminhos aparentemente baratos para copiar designers e rasgar as suas ideias. E enquanto eu respeito esse ponto de vista, eu simplesmente não posso concordar e realmente acho muito pelo contrário. Designers optar por enviar seus projetos para esses locais e devem se sentir honrados que os outros podem se inspirar seus trabalhos.

Além disso, não há nada de errado com empréstimos idéias! Esta é a beleza da criação, como você toma uma mistura de muitos estilos artísticos diferentes e mistura-los juntos em seu próprio caminho. True web designers são capazes de dominar esta habilidade e até mesmo de começar a criar suas próprias interfaces simples de memória e inspiração!
CSS galerias e muitos dos mostruários on-line hoje são perfeitos para o designer de início. Como você treina as partes criativas do cérebro você começa a pensar fora da zona de conforto que você configurou para si mesmo. Este é um dos aspectos mais difíceis na carreira de web design, e mais especificamente durante o processo de criação. Mas, semelhante a muitas outras coisas na vida, esta é uma habilidade que se torna mais desenvolvido com a prática.

Dê a sua interface de um Test-Run

Antes mesmo de codificação de seu desenho ou projeto maquete passar algum tempo visualizando o processo de navegação. Se possível (e isso vem com a prática) colocar-se na pele de outro usuário entrar em seu site. Considere onde eles clique e que eles iriam achar mais interessante.
Uma vez que você entrar nesta zona poderá notar uma mudança de mentalidade de acompanhamento. Esta técnica irá ajudar a remover-se da posição de "designer" e ver as coisas de uma perspectiva maior. Eu sempre recomendo este passo antes da codificação, para poupar tempo, a longo prazo.

Na experiência pessoal, eu freqüentemente me pego a atualização da página ou áreas cores meados de design. Com tempo suficiente é simples passo para fora e imaginar como um usuário pode interagir com o menu da sua página ou links. Este processo pode ser difícil se você estiver olhando para o mesmo projeto por 3 horas seguidas. Tente fazer uma pausa para esticar e andar por aí - até 15 minutos podem desempenhar um grande papel na abertura de suas percepções.

Numerosos Design cria para Comparação

Esta etapa irá demorar muito mais tempo, mas se você tem o luxo Eu recomendo altamente você mesmo ritmo. Uma vez que você tem um esquema forte para que você pode considerar a criação de alguns projetos alternativos para escolher. Isso pode ser feito no Photoshop com a mesma facilidade se você não está artisticamente dotados com papel e lápis, ou simplesmente se sentir mais confortável em software.
Algumas pessoas acham que este passo a ser irritante e retardar o processo criativo. Se você costuma adivinhar-se este método você vai economizar cargas de tempo durante os estágios finais de produção. Acho 2-4 forte modelos estabelecidos na comparação pode ajudar a empurrar o seu carácter indeciso para escolher um produto etapa final.

Manter o espaço!

Espaço em branco é crucial em qualquer grande projeto. Isso surge como um quase acéfalo e você pode considerar algumas razões óbvias. Quando os elementos de página são definidos corretamente, você vai encontrar uma simetria natural no projeto. páginas da Web codificado com grades e acessibilidade em mente tendem a aparecer mais limpo e muito mais amigável.

Percorrendo a mesma linha que o espaço em branco é a chave para remover quaisquer elementos que possam estar ocupando espaço não-necessário. Isto, obviamente, são verdadeiras como uma crença em qualquer fase do projeto -, mas a sua captura não gosta ou erros no início vai economizar horas de trabalho do projeto. Certifique-se o conteúdo da sua página - parágrafos, títulos, imagens e vídeos - tem espaço suficiente para respirar e interagir com os visitantes do seu site.
Acho que escrever uma pequena lista de elementos de página obrigatória é uma ótima maneira de começar. Isso vai mudar com base no tipo de site que você está criando, o que demonstra o quão fluido este sistema pode se tornar. exemplos típicos incluem caixas de pesquisa, a mídia social compartilhamento botões, ícones carrinho de compras ou links, posts em blogs em destaque, ou até mesmo um pequeno formulário de contato!
Sempre que entram no processo de design se sentir confortável deixando sua mente vagar livre. É neste vácuo do espaço onde as idéias nascem ea inspiração gênio pode ser incinerado. Mantenha-se fiel ao seu coração no projecto. Criação de sites nunca foi uma tarefa fácil, porém bastante divertido e por vezes muito gratificante quando você reservar tempo para a construção e aprendizagem .

Crie uma foto do iPhone realista no Photoshop

2011-06-03T12:02:00.097-03:00

Este tutorial irá mostrar como criar uma imagem foto realista da Apple, recém-lançado iPhone4. Esperemos que, até o fim de tudo você terá algo muito próximo da coisa real, que para os poucos que não a própria iPhone4 (como eu), pode ser o mais próximo que nunca vamos conseguir. Antes de começar, pode ser uma boa idéia para puxar para cima uma imagem de referência a partir da web só para você saber onde tudo vai e do tamanho de alguns dos recursos. Mas por outro lado, Enjoy!

Passo 1

Para começar, crie um novo documento de um tamanho adequado (eu usei uma polegada 10 x 8 polegadas do tamanho da foto em 300dpi, porque se encaixa muito bem como um papel de parede de alta qualidade).
Para criar o fundo, definir a sua cor para # 505050 e, em seguida, use a ferramenta gradiente e selecione a configuração radial. Arraste a partir do centro para os lados para obter um brilho suave no meio da imagem.

Passo 2

Pressione (Cmd / Ctrl + R) para obter os governantes para cima, arrastar alguns guias dos governantes para o centro de onde você quer que seu iPhone de ser.

Etapa 3

Em uma nova camada, chamem-lhe "o lado de prata", selecione a ferramenta retângulo arredondado (U) e configurá-lo para caminhos. Certifique-se de seu raio é 1 cm e, em seguida, arraste a partir do centro do enquadramento, certificando-se de segurar 'Alt' quando você arrastá-lo. Experimente e obter uma forma realista (Se não tiver certeza, em seguida, puxe uma imagem de referência a partir da web).
Botão direito do mouse e selecione preencher caminhos. Preencha-a com # C9C9C9. Em seguida, escolha Filter> Noise> Add Noise. Escolha algo em torno de 9,51 (apenas o suficiente para torná-la mais realista e perder é dureza) no cenário monocromático e uniforme. Pressione o botão 'Escape' botão duas vezes para remover o caminho. Desenhar as pinceladas, como mostrado em seguida, vá em Filter> Blur> Gaussian Blur> 2,8 pixels.

Etapa 4

Crie uma nova camada e chamá-lo "caput". "Cmd / Ctrl - Clique em" o "Silver Side" camada e escolha "Select> Modify> Contract> 10 pixels.
Definir a cor de fundo para o seu # 0A0A0A, em seguida, para preencher a seleção, pressione "Cmd / Ctrl + Backspace. (Isto preenche automaticamente a seleção com a cor de fundo).

Etapa 5

Crie uma nova camada e chamá-lo de "profundidade": esta é apenas uma linha ao redor do interior do corpo onde o iPhone curvas e refrata a luz de distância da câmera. Para criar a linha 'Cmd / Ctrl - Clique em "o" corpo principal "da camada, então vá em' Edit> Stroke 'LARGURA - 10 pixels, cor - # 000000, LOCALIZAÇÃO - Inside.
Então vá para 'Filters> Blur> Lens Blur e aplique as configurações abaixo. Certifique-se que esta camada está sempre no topo de todas as outras camadas.

Passo 6

Crie uma nova camada abaixo chamado "Screen". Selecione a ferramenta marquee Rectangle (M) e, em seguida, retirar o centro das orientações, mantenha o 'Alt' depois de ter começado a arrastar o retângulo para fazer expandir a partir do centro. Faça o retângulo de uma forma agradável para a tela, deixando espaço para o falante botão de menu e câmera. Quando estiver satisfeito com a forma de sua tela, preenchê-lo com toda a cor e, em seguida, criar uma nova camada acima da "Screen" camada, não se preocupe com nomes ainda.

Passo 7

Quando estiver satisfeito com a forma da tela, em sua nova camada, escolha 'File> Place e escolha uma foto de sua escolha (eu escolhi o meu cachorro - ele não é bonito!) Em seguida, mover, redimensionar ou girar a imagem ou fazer o que quiser fazê-lo com bom aspecto. Certifique-se que a imagem está em cima da tela quando tiver terminado, você pode renomear a camada "Screen Pic". Agora, pressione "Alt - Clique em" entre o "Screen" e "Screen Pic" Layer para torná-lo uma camada de recorte. Isto significa que as culturas para a camada abaixo dela e que lhe permite editar ou alterar a imagem abaixo com facilidade.

Passo 8

Agora vamos iniciar no botão do menu. Crie uma nova camada e chamá-lo "Menu Button", a opacidade 60%. Traga outra diretriz para baixo, onde o botão será em seguida, use a ferramenta Elipse do centro da exploração orientações "Alt". Quando você tiver o tamanho desejado, preencha com branco, em seguida, abra o menu de efeitos de camada por duas vezes clicando ao lado da camada, em seguida, use a opção de sobreposição de gradiente com AEAEAE # para # 000000, como mostrado abaixo. Remova o caminho.

Passo 9

Crie uma nova camada e chamá-lo "Menu Icon", use a ferramenta retângulo arredondado (U) com um raio de 10 pixels e puxe o quadrado do centro, antes de adicionar um curso para ele, fazer a sua cor de primeiro plano # 979797, em seguida, selecione a ferramenta pincel (B) e fazer a escova de 3 pixels de largura e dureza de 90%. Então volte para a ferramenta retângulo arredondado e depois 'botão direito do mouse> caminho Stroke> Pincel> OK.

Etapa 10

Agora, para criar o orador, passar uma orientação horizontal acima da tela, tanto o orador ea câmera vai estar centrada nesta linha. Faça uma nova camada chamada "Speaker", em seguida, use a ferramenta retângulo arredondado (U) para fazer a grade do alto-falante. Definir o raio de um centímetro apenas para fazer uma borda arredondada, e em seguida, puxe a forma para o tamanho mostrado nas fotos abaixo. Com a mesma ferramenta, clique direito, escolha "Fill Path" e preencha com preto. Em seguida, visualize os efeitos de camada e escolha "Pattern Overlay" e "Outer Glow" e utilize as configurações mostradas.

Etapa 11

Agora vamos fazer a reflexão que mencionei anteriormente. Então, crie uma nova camada chamada "Reflexão" debaixo do "Speaker" da camada. "Cmd / Ctrl - Clique em" o "corpo principal" da camada e selecione a ferramenta Laço Poligonal (L), selecione o modo de se cruzam e, em seguida, fazer um triângulo em todo o lado direito do iPhone, como mostrado. Preencha com branco. Então traga a opacidade da camada para 55%.

Etapa 12

Selecione a ferramenta marquee Rectangle (M) e definir a pena de 150 pixels. Selecione o terço inferior da reflexão e pressione a tecla Delete algumas vezes até que você não consegue ver a ponta da reflexão.

Etapa 13

Agora podemos começar a câmera, tirar uma guia para onde deseja que o centro da câmara seja, criar uma nova camada chamada "câmera". Selecione a ferramenta Elipse (U) e faça três pequenos círculos, um dentro do outro a partir do centro do enquadramento. Preencha o anel exterior com # 424242, # 080809 anel do meio eo anel central # 080F2B.

Etapa 14

Agora vá ao menu de efeitos de camada e usar as configurações de chanfro e entalhe abaixo para fazer a câmera olhar mais definido para o iPhone. Em seguida, vá em Filter> Blur> Gaussian Blur 0.9pixels>.

Etapa 15

Agora que nós terminamos a câmera podemos finalmente avançar para os últimos retoques para a vista frontal do iPhone, primeiro vamos fazer os botões laterais. Crie três novas camadas abaixo do "Silver side" camada (nomeá-los Botão 1, 2 e 3.) Desenhe três caminhos com a ferramenta retângulo arredondado (U) com um raio 1pixel no lado esquerdo do iPhone. Estamos fazendo os dois botões de volume e silenciar o controle e você pode ver onde eles vão na imagem abaixo. Depois de ter extraído deles, preencher os caminhos de branco, um de cada vez em cada camada. Em seguida, aplique as configurações abaixo no menu de efeitos de camada. Quando você tem aplicado estes a cada camada, vá em Filter> Blur> Gaussian Blur> 1.

Etapa 16

Crie uma nova camada e chamá-lo "botão de cima." Criar um outro caminho com a ferramenta retângulo arredondado (U) no canto superior direito do iPhone. Preencha com branco e adicione as configurações abaixo.
Você pode ter que mover a gradiente para o local correto usando a ferramenta mover (V) e arrastando-o ao longo da tela. Prima Cmd / Ctrl + F para repetir o último efeito de filtro (Gaussian Blur, neste caso).

Etapa 17

Antes de prosseguirmos, sugiro o grupo de camadas que você usou até agora em grupos de camadas, se você não tiver feito isso, pressionando o ícone da pasta na barra de camadas.
Agora o corpo iPhone está fora de forma, podemos começar a se mexer com a interface antes de passar para a opinião traseira e lateral do iPhone. Para começar, faça um grupo de nova camada e chamá-lo de "interface", Cmd / Ctrl - Clique no botão "Tela" camada e, em seguida, pressione o botão "Add Layer Mask". Isso fará com que tudo fez no grupo de culturas para a tela.
Faça uma nova camada e selecione a ferramenta Rectangular Marquee (M) e selecionar uma área na parte inferior da tela como na figura e preencha com branco.
Aplique as configurações abaixo. Em seguida, vá para a camada Layer Style>> estilo de camada Cópia.

Etapa 18

Arraste duas orientações para o centro da caixa e, em seguida, criar uma nova camada chamada "botão da câmera." Use a "ferramenta retângulo arredondado (U) com um raio de um centímetro para criar o botão. Prima Cmd / Ctrl + Enter para ativar o caminho em uma seleção e, em seguida preencha a seleção. Ir para a camada Layer Style>> estilo de camada Colar. (Isto irá colar os efeitos de camada mesma configuração da camada copiada para este).
Adicione as definições de bisel e relevo, como mostrado abaixo.

Etapa 20

Agora vamos criar o ícone da câmera para o botão, crie uma nova camada e chamá-lo ícone "Câmera". Usando a ferramenta retângulo arredondado (U) com um raio de 20 pixels, desenhe uma câmera de grande escala e usar a ferramenta de seleção de caminho direto para mover o canto superior da caixa de cima em direção ao outro. Prima Cmd / Ctrl + T para transformar o ícone; redimensioná-lo para fazê-lo caber dentro do botão da câmera. Selecione a ferramenta retângulo arredondado (U) e com o botão direito do mouse no caminho, clique em preencher caminho e preenchê-lo com # 424242.

Etapa 21

Criar uma nova camada chamada "caixa de barra" e usar a ferramenta retângulo arredondado (U) para a caixa no canto inferior direito da tela. Usando o mesmo raio, desenhar uma caixa onde os toques superior a diretriz como mostrado abaixo. Preencha com branco e depois aplicar esses efeitos camada.

Etapa 22

Faça uma nova camada chamada deslizante e, em seguida, novamente usando a ferramenta retângulo arredondado (U) faça uma barra pequena no interior da caixa deslizante, colocá-lo no lado esquerdo. Prima Cmd / Ctrl + Enter, em seguida, Cmd / Ctrl + Backspace para torná-lo uma seleção e preencha com a cor de fundo. Ir para a Camada> Estilo de camada> estilo de camada Cópia.
Vá para o "Câmera ícone" camada e pressione Command / Ctrl + J para duplicar a camada ícone da câmera, pressione Command / Ctrl + T para transformá-lo, reduzi-la e movê-lo acima da barra. Em seguida, desenhe um ícone de câmera de filme usando a ferramenta retângulo arredondado (U) e da ferramenta Pen (P), transformá-lo e movê-lo sobre a barra.

Etapa 23

Importar uma imagem diferente, indo em File> Place e escolha a sua imagem. Prima Cmd / Ctrl + T e reduzir o tamanho da imagem para que ele possa estar apertado no canto inferior esquerdo.

Em seguida, use a ferramenta retângulo arredondado (U) com um raio de 10 pixels para criar uma caixa sobre a imagem. Prima Cmd / Ctrl + Enter para criar uma seleção, e pressione o ícone "Adicionar máscara de camada 'na barra de camadas. Isto irá cortar a imagem para a seleção.

Passo 24

Agora vamos passar para a barra de zoom! Em uma nova camada chamada "barra" Zoom, use a ferramenta retângulo arredondado (U), com um raio de 30 pixels, e desenhe uma barra fina na parte inferior da tela. Então mude a ferramenta para subtrair e desenhar um outro bar no bar anterior. Usando a ferramenta de seleção de trajeto (A), selecione e clique com o caminho exterior, escolher o preenchimento sub caminho, e depois preenchê-lo com # EAEAEA.

Use a ferramenta de seleção de trajeto (A) novamente e selecione o caminho do centro. Alterar as configurações de subtrair para adicionar e preencha o caminho com o Black. Pressione 5 no teclado para reduzir a opacidade para 50%.
Faça uma nova camada e desenhe uma barra circular com a ferramenta elipse (U), preenchê-lo com o branco e pressione 9 para reduzir a opacidade para 90%.

Etapa 25

Selecione a ferramenta texto (T) e colocar uma preta + e - símbolo de cada lado da barra de zoom, a fonte é Marquise eo tamanho 8 para o sinal - e tamanho 6 para o sinal de mais. Traga a opacidade para 50%.

Etapa 26

Agora vamos passar para a tela do flash. Use a ferramenta retângulo arredondado (U) com 1 centímetro de raio para desenhar retângulo no canto superior esquerdo, preencha com branco e levar a opacidade para 50%. Use a fonte Marquise em preto e tamanho 12 para escrever a palavra 'Off' e então trazem a opacidade para 50% novamente. Usando a ferramenta Pen (P) desenhar um ícone relâmpago e preenchê-lo com # 000000. Traga a opacidade para 50%.

Passo 27

Agora está completamente terminado com a exibição principal do iPhone (tapinha nas costas, se quiser) e se você quiser ir mais adiante apenas continua a seguir o tutorial à medida que avançamos na parte de trás do iPhone e, em seguida, ao lado. Antes de começar, basta colocar o iPhone frente em uma pasta grande.
Esta etapa será mais fácil para aqueles que têm organizado as suas camadas em pastas, coloquei todas as minhas camadas e camadas botão corpo em uma pasta que eu posso simplesmente copiar e virar para a parte traseira do meu iPhone. Caso contrário, Cmd / Ctrl + Clique no "caput", "lado de prata", "slider mudo", "botão Top", "Reflexão", "profundidade" e as camadas botão de volume, botão direito do mouse e pressione duplicar camada, pressione Clique em OK e, em seguida, coloque as camadas em uma nova pasta chamada "Back iPhone.
Selecione a opção "Back iPhone" pasta, em seguida, use a ferramenta Move (V) para mover o iPhone de volta ao lado do iPhone frente. Abra a pasta e selecione todas as camadas, excluindo a camada de reflexão ", então escolha Edit> Transform> Flip Horizontal.

Etapa 28

Agora vamos passar para a câmara traseira. Criar uma "câmara anel" camada, trazer duas guias para onde você gostaria de ser sua câmera, e depois usar a ferramenta Elliptical Marquee (M), mantenha a tecla Alt + Shift apenas quando você tiver começado a arrastar a partir do centro do enquadramento. Em seguida, escolha Edit> Stroke> 4 pixels> OK. Em seguida, aplique as configurações de gradiente abaixo.

Etapa 29

Criar uma nova camada chamada "grays" e criar um outro círculo com a ferramenta Elliptical Marquee (M) dentro do anel da câmera e preenchê-lo com # 282828. Escolha Filter> Noise> Add Noise e escolha 16,57. Em seguida, escolha Filter> Blur> Gaussian Blur> 2,2 pixels. Adicione estes efeitos de camada. Vire a opacidade da camada para 50%.

Etapa 30

Crie outra camada chamada "underlay cinza" e por baixo da camada "cinza" usar a ferramenta Elliptical Marquee (M) e crie outro círculo abaixo, preenchê-lo e adicionar os efeitos de camada abaixo.

Finalmente desenhar outro círculo para a lente e preenchê-lo com # 013274, em seguida, aplicar esses efeitos.

Etapa 31

Crie uma nova camada abaixo da "reflexão cópia" camada e chamá-lo "logo da maçã." Obter uma imagem do logotipo da Apple e segui-lo ou apenas tirar-lo da memória usando a ferramenta caneta (P), preenchê-lo com # CECDCB.

Etapa 32

Para o flash é só usar a ferramenta Elliptical Marquee (M) e preenchê-lo com o branco em uma nova camada, use as diretrizes para mantê-lo em conformidade com a câmera. Então vá para os efeitos de camada e aplique a máscara padrão abaixo.

Etapa 33

Selecione a ferramenta texto (T) com a fonte Tahoma, tamanho 14 e escrever o iPhone para o fundo. Em seguida, use a mesma fonte, mas no tamanho 3,7 para o código do produto e as informações abaixo do nome da marca. A cor é # 545453.

Etapa 34

Comece a desenhar os símbolos de segurança e qualidade com a ferramenta Pen (P), se divertir e fazer alguns de seus próprios ou apenas manter as originais como se eu tivesse feito a seguir. Mais uma vez manter a cor # 545453.

Etapa 35

Agora que a volta está acabado então poderemos finalmente acabar com o lado. Criar um grupo de nova camada chamada "iPhone lado" e em que o grupo crie uma camada chamada de "preto lado." Eu arrastei algumas diretrizes para delinear a base do meu iPhone lado. Desenhe uma caixa com a ferramenta retângulo arredondado (U) com um raio de 10 pixels. Preencha-o e abra os estilos de camada e aplicar essas configurações.

Etapa 36

Agora, com a mesma ferramenta (U), em uma nova camada chamada "prata" desenhar uma caixa mais magro, mas mais do que o "preto do lado." Seu comprimento deve significar que apenas sobressai a borda da caixa de outras. Em seguida, adicione o gradiente embaixo.

Da esquerda para a direita este gradiente vai: # 202020, # 919191, # 2E2E2E, # 737373, # ADADAD, BCBCBC #, # 616161, # EDEDED, # 303030.

Etapa 37

Criar uma nova camada chamada "Refração" e depois Cmd / Ctrl - Clique na camada "Silver" e use a ferramenta laço poligonal (L) para selecionar duas áreas nos lados do iPhone como mostrado abaixo. Preencha com branco e mova a opacidade para 40%.

Etapa 38

Criar uma nova camada chamada "botões de volume" e use a ferramenta caminho elíptico (P) para criar dois círculos do tamanho do botão de volume, preenchê-lo e aplicar as configurações abaixo. Eu tenho usado as orientações para se certificar de que eles se alinham com os meus botões lado vista iPhone.

Etapa 39

Use a ferramenta de texto (T) e digite um sinal de mais e de menos em um dos botões, use a fonte Tahoma com tamanho 14. Faça o sinal de subtração maior, aumentando a largura para 160%. Vá para Layer>> tipo Rasterize (fazer isso para ambas as camadas de texto). Então Cmd / Ctrl - Clique nas camadas mais e menos, em seguida, ir para a "botões de volume" camada e pressione Delete.

Etapa 40

Para o nosso último passo usa a ferramenta retângulo arredondado (U) com um raio de 8 pixels e desenhe um retângulo em uma nova camada chamada "Back Slider". Preencha-a com # b7b7b7 e adicione a sombra interna abaixo.
Criar uma nova camada chamada "slider" e chamar uma outra caixa com a ferramenta retângulo arredondado (U) dentro da caixa anterior, só que desta vez com um raio de 7 pixels. Em seguida, aplique essas configurações para ele.

Etapa 41

Só para terminar, selecione a ferramenta pincel (B) no tamanho 13 e dureza 50% com a cor # 1E1E1E, Cmd / Ctrl - Clique na camada "prata" e, em seguida, na parte inferior desenhar uma linha de pincel, arrastando e segurando a tecla Shift. Verifique se ele está em sintonia com as outras linhas da visão traseira e dianteira. (Use uma orientação, se quiser.)

Imagem final

Você agora completou o seu iPhone 4. Eu realmente espero que tenha gostado deste tutorial e estão satisfeitos com o que você acabou com. Esperamos que você tenha aprendido algo novo e ter tido uma experiência agradável.

Caixa flutuante de Redes Sociais para o seu site

2011-06-02T17:27:00.016-03:00

Vamos aprender como colocar uma caixa de redes sociais como a da imagem do lado que irá dar um toque a mais no seu site de criatividade. Mais cuidado, tem muita gente que não gosta!

`1. COMEÇANDO`

Primeiramente teremos de criar uma página HTML e adicionar alguns div devidamente identificados relativamente à estrutura da página.

  <div id="wrapper">

            <div id="page-wrap">

                    <div id="content">

                        <div id="main">

                        </div>

                        <div id="sidebar">

                        </div>

                    </div>

                    <!-- O Conteúdo acaba aqui -->

            </div>

            <!-- O page-wrap acaba aqui -->

</div>

`2. SEGUNDO PASSO`

Adicione uma div abaixo da div page-wrap com os seus botões das redes sociais, como o Facebook, Twitter, entre outros.

<div id="floating-box">

                <div id="box">

                    <!-- Aqui insere o código dos botões -->

                </div>

              </div>

`3. INTRODUZIR DADOS`

É necessário para questões de teste, ter algum conteúdo. Se está a introduzir a caixa flutuante num site existente com conteúdo, salte este passo. Se não, vá aqui e copie algum texto e insira nas div main e sidebar.

`4. INTRODUZIR A MAGIA`

Para que a magia aconteça, é necessário introduzir algum código jQuery na tag head.

$(function() {
     var offset = $("#box").offset();
     var topPadding = 15;
     $(window).scroll(function() {
         if ($(window).scrollTop() &gt; offset.top) {
             $("#box").stop().animate({
              marginTop: $(window).scrollTop() - offset.top + topPadding
             });
         } else {
             $("#box").stop().animate({
                 marginTop: 0
             });
         };
     });
 });

`5. ESTILIZAR`

A página e a caixa flutuante necessitam agora de alguma estilização com CSS. Você poderá dar asas à sua imaginação e criar de acordo com o seu gosto, no entanto deixamos uma sugestão valiosa.

  <style type="text/css">

  * { margin: 0; padding: 0; }

  body { font: 14px/1.4 Verdana, Arial, sans-serif; font-weight: normal;background-color: #f2f2f2;float: left;width: 100%; color: #333333;

}

  #wrapper{width: 800px;margin: 0 auto;padding: 0px;}

  #content{float: left;width: 100%;border: 1px solid #B5076D;background-color: #FFFFFF;font-size: 12px;line-height: 20px;}

  #page-wrap {  position: relative;float: left; margin: 50px 0;}

  h1{font-size: 1.6em;color: #B5076D; font-style: italic;padding: 20px;}

  p { margin: 0 0 10px 0; }

  #main { width: 460px; float: left; padding: 20px; background-color: #f1f1f1;border: 1px solid #DDDDDD; margin: 20px;display: inline;}

  #sidebar { width: 215px; float: right;border: 1px solid #DDDDDD; background-color: #f1f1f1;margin: 20px; display: inline;}

  #sidebar ul{padding: 10px;}

  #sidebar ul li{font-size: 0.9em;margin: 0 0 0 20px;}

  </style>

Além do código acima, introduza este código CSS para embelezar um pouco a caixa

  #box{position: absolute;left: -70px;border: 1px solid #B5076D;

 border-right: 0px;padding: 10px;background-color: #FFF;}

#box div{margin: 10px 0;}

E já está. Uma caixa flutuante para as redes sociais em 5 minutos!

Melhorando o desempenho do Windows 7

2011-05-26T16:20:00.003-03:00

Através desse tutorial você conseguirá dobrar a velocidade do seu micro!

Desativar atualização no Windows 7 (gpedit.msc)

2011-05-26T14:45:00.002-03:00

Vou estar ensinando como você faz para travar as atualizações seu Windows 7 através do gpedit.msc

Vínculos

2011-05-26T10:02:00.001-03:00

Hoje vamos aprender a mexer com vínculos, a pedido de um aluno das vídeo aulas anteriores, ele pediu para esclarecer as informações da janela de vínculos.

Menu superior

2011-05-26T09:44:00.001-03:00

Nesse tutorial ensinei aonde se aplica cada um dos menus expansíveis na parte superior do InDesign.

Janelas

2011-05-26T09:36:00.001-03:00

Nesse tutorial ensinei como mexer com janelas no InDesign para ter uma noção.

Ferramentas de seleção

2011-05-26T09:28:00.000-03:00

Nessa vídeo aula vou ensinei como é o uso das ferramentas de seleção ou seja as quatro primeiras ferramentas do menu lateral esquerdo.

Criando um novo documento

2011-05-25T17:20:00.001-03:00

Nessa vídeo aula vou ensinei como é o menu inicial de criação de um novo documento.

Lightbox + flash missão II

2010-06-14T22:26:00.000-03:00

Olá,

Devido a grande quantidade comentários em um post sobre este mesmo assunto, resolvi dar uma revisada na técnica.

Fato que eu prefiro e utilizo em meus projetos o Shadowbox por ser muito mais completo, extensível, adaptável e ainda por cima funciona com jQuery. Se alguém quiser saber como operar Flash + Shadowbox confira aqui.

Porém neste post iremos trabalhar novamente com Lightbox, dado a quantidade de dúvidas e também por ser mais popular.

Abordarei inicialmente e como sempre com ActionScript 2.0 porém farei também em outro post como utilizar a solução em AS 3.0.

A idéia é a mesma, baixa-se o script do Lightbox, descompacte-o na pasta de seu projeto e depois é só ligar o flash ao mesmo.

O objetivo final é termos uma ação semelhante a este exemplo que disponibilizarei no final do artigo. Não abordarei, assim como no outro post, como instalar o Lightbox em sua página HTML, dado que isto está na página do script.

Mãos a obra

Um dos problemas mais relatados em comentários no artigo/post anterior é a questão de que as últimas versões do Lightbox estarem com uma ação embutida na sua execução que esconde os SWFs da página, o que para muitos esteticamente não é interessante.

É aí que entra o foco principal desta nova postagem. Eu fiz um hack em JavaScript para o Lightbox afim de evitar essa ação de esconder os SWFs o máximo possível e também facilitar a chamada de ação junto ao flash. Este script pode ser baixado aqui e deverá ser carregado junto com o seu HTML. Desde que o SWF tenha fundo(wmode) transparent ou opaque, e com excessão de versões mais antigas do FlashPlayer em ambiente linux, no restante dos sistemas operacionais e navegadores não terá problema algum com SWFs.

Além deste pequeno hack, criei uma função para auxiliar a chamada do Lightbox pelo Flash, confiram:

PLAIN TEXT

ACTIONSCRIPT:

//lightBox function for call JavaScript...
function Lightbox(src, title)
{
if(typeof src == "string") src = [src];
if(typeof title == "string") title = [title];
if(typeof title == "undefined") title = [];
function addSlashes(str) { return "'" + escape(str) + "'"; }
if(flash.external.ExternalInterface && flash.external.ExternalInterface.available)
{
flash.external.ExternalInterface.call("Lightbox.start", src, title);
}
else
{
for(var i=0; i<src.length; i++) src[i] = addSlashes(src[i]);
for(var i=0; i<title.length; i++) title[i] = addSlashes(title[i]);
getURL("javascript:Lightbox.start([" + src.join(",") + "],[" + title.join(",") + "]);void(0);");
}
}

Com essa função podemos chamar a execução com maior facilidade, também implementei a possibilidade abrir um grupo de fotos por vez, aproveitando dos recursos de galeria do Lightbox. Coloquei a possibilidade de colocar uma legenda/title por foto. Ficou bem mais completo que a nossa primeira tentativa.

Copie a função acima e coloque dentro de seu arquivo .fla e depois basta colocar uma chamada para função Lightbox em seu objeto para que a mágica aconteça. Exemplo:

PLAIN TEXT

ACTIONSCRIPT:

bt1.onRelease = function()
{
Lightbox(['images/image-1.jpg', 'images/thumb-1.jpg'], ['Legend Test', 'çóh?']);
};

No código acima, estamos setando uma ação de clique/release a um botão chamado bt1. Ao clicar, será aberto um grupo de imagens(array de valores no primeiro argumento), com suas respectivas legendas(array de valores do segundo argumento).

Finalizando

Então é isso pessoal, creio que agora ficou redondinho. Se alguém achar algum bug ou quiser testar melhor no Internet Explorer(só dei uma testada assim por cima :P) fiquem a vontade.

Para baixar um exemplo completo de utilização junto com todos os scripts clique aqui.

Abraços!

Lightbox no flash

2010-06-14T21:37:00.000-03:00

Opa?

Acho que a maioria dos desenvolvedores web já conhecem o Lightbox. É um efeitinho super supimpa (tirando o peso) de ampliar imagens, baseado em Javascript e CSS.

Pois bem, devido ao fato de ser JS e CSS, muita gente fica na mão se deseja utilizar o recurso no Flash, contando que estejam sem tempo ou sem conhecimento, para desenvolver tal efeito 100% Flash. Aí que entra a integração que apresentarei aqui

Lightbox + Flash

Para utilizar o LightBox acionado a partir do flash, primeiro você deve fazer o de praxe como apresentado neste link(carregar os arquivos .js e .css, as imagens e etc), deixar tudo certinho como se fosse usar o LightBox normalmente, isso tudo você acerta no HTML que receberá o SWF(Flash) com a ação em questão.

Depois coloque a seguinte função JavaScript(entre as tags SCRIPT) no mesmo HTML:

PLAIN TEXT

JavaScript:

function showFoto(src)
{
//criando um link falso, para o LightBox captar as informações
var a_false = document.createElement("A");
a_false.rel = "lightbox";
a_false.href = src;
//chamando a função do lightbox responsável pelo início das ações
myLightbox.start(a_false);
//anulando o link
a_false = null;
}

E no Flash, em nosso botão, chamamos na ação onRelease, o seguinte AS:

PLAIN TEXT

ACTIONSCRIPT:

getURL("javascript:showFoto('MINHAFOTOAQUI.jpg');", "_self");

Agora, é só publicar, botar o SWF no html preparado e só alegria =D

Obs.: Para o efeito ficar completo, é necessário o SWF estar com fundo transparent(wmode=transparent) ou opaco(wmode=opaque), para que o lightbox não fique por trás do SWF.

[update]

Na ultima versão do LightBox, colocaram uma função para esconder os SWFs da página na hora do efeito, logo quem notar que seu SWF sumiu do fundo ao aciona-lo, já sabe o porque :S

Neste link http://www.huddletogether.com/projects/lightbox2/#download tem o changelog da versão, com as mudanças que teve.

Abracetas...

Swf transparente

2010-06-14T21:28:00.000-03:00

Mesmo sendo fácil ainda há gente que não conhece. Através de um parâmetro (<param>) dentro da tag object podemos especificar se o arquivo terá o fundo transparente.

<param name=”wmode” value=”transparent” />

Para muitos que aindam usam a tag embed para funcionar em todos os browsers tem que colocar o atributo wmode nela também:

<embed wmode=”transparent” … />

Então o código validado do SWF com fundo transparente ficaria assim:

<object type=”application/x-shockwave-flash” data=”filme.swf” width=”550″ height=”400″>

<param name=”allowScriptAccess” value=”sameDomain” />

<param name=”movie” value=”filme.swf” />

<param name=”wmode” value=”transparent” />

</object>

Uma coisa que acontece também que pode gerar bastante dor de cabeça é quando algum elemento do HTML que deveria ficar por cima do SWF e acaba acontecendo o contrário. E você pode alterar o position o z-index e nada. O “bicho” insiste em ficar por cima.

E a solução consiste apenas em deixar o SWF com o fundo transparente.