Como vender o valor do mobile para seus clientes – Smashing Magazine

Artigo Original: How To Sell The Value Of Mobile To Clients

Como Web Designers e developers, nós vemos o valor de se dar suporte a dispositivos móveis a cada dia. Estamos bem versados em técnicas e táticas para adaptar nosso trabalho a esses dispositivos. Nosso desafio é ser igualmente bem versado na venda desses serviços para nossos clientes e saber passar o valor disso para eles, convence-los que eles precisam investir suas preciosas economias em um projeto mobile.

Ei! Depois de ler essa tradução será mais fácil ler o artigo original! Isso fará você treinar sua leitura em inglês. Assim você tem acesso a muito material de alta qualidade, de certa forma isso diferencia os meninos dos homens ;) .

Continuar lendo

O Incrível Em & Layouts Elásticos com CSS

Artigo Original: The Incredible Em & Elastic Layouts with CSS

A incrível unidade em
Há quase um ano, Ty Gossman no Styleagala me pediu para escrever um artigo sobre layouts elásticos. O melhor que eu consegui fazer, na época, foi um rápido e-mail entre meus trabalhos. Eu sempre quis escrever algo bom sobre o tema. Obrigado pela sugestão; desculpe a demora.

Este artigo vai levar você, através da criação de um Layout elástico básico, a entender o que exatamente é um “em”, como calculá-lo, como usar ems para criar uma camada elástica para conteúdo com texto e imagens escaláveis, incluindo ritmo vertical básico.

O que é um Layout Elástico?


Um layout elástico escalável pelo tamanho do texto do usuário.


Mais precisamente, uma interface escalável pelo tamanho do texto do navegador – geralmente com padrão de 16px – que os usuários podem mudar se desejarem. Algumas pessoas o mantém permanentemente alterado por razões de acessibilidade, outras usam os controles de UI para aumentar o tamanho do texto quando precisam.

Designs elásticos usam valores em em para todos os elementos. Ems são tamanhos relativos, escritos como estes: 1em, 0.5em, 1.5em etc. Ems podem ser especificados com até três casa decimais assim: 1.063em. “Relativo” significa:

  1. Eles são calculados com base no tamanho da fonte do elemento pai. Por exemplo: Se um <div> tem um tamanho de fonte aparente de 16px então qualquer elemento dentro desta camada – um filho – herda o mesmo tamanho de fonte à menos que isto seja alterado. Se o tamanho da fonte do filho é alterado para 0.75em então o tamanho de fonte aparente será 0.75 x 16px = 12px.
  2. Se o usuário aumentar(ou diminuir) o tamanho do texto no navegador, toda a interface se estende (ou se reduz).

Veja um exemplo de layout elástico. Ajuste o tamanho do texto para vé-lo escalar. Isso contém todo o CSS e HTML usado neste tutorial.


Para outros exemplos de layout elásticos ativos, visite o lindo e elástico SimpleBits de Dan Cederholm’s e mude o tamanho do texto neste site.

Interfaces elásticas são flexíveis e acessíveis para usuários e podem ser quase tão preciso quanto os pixels para designers. Layouts podem ser criados rápida e fielmente usando CSS uma vez que entendamos o básico do relacionamento entre tamanho de fonte, pixels e ems.

Ei! Depois de ler essa tradução será mais fácil ler o artigo original! Isso fará você treinar sua leitura em inglês. Assim você tem acesso a muito material de alta qualidade, de certa forma isso diferencia os meninos dos homens ;) .

Continuar lendo

Como aprender Javascript Corretamente! – JavaScript.is (Sexy)

Artigo original: How to Learn JavaScript Properly

Dois roteiros separados para aprender javascript corretamente para leitores com diferentes bases de programação:

Aprenda Javascript Corretamente (para NÃO programadores javascript e programadores de primeira viagem)

Duração: 6 a 8 semanas
Pré-Requisito: Pelo menos ensino médio completo (experiencia em programação não necessária)
Continuar curso abaixo

Aprenda Javascript Intermediario e Avançado
(clique no link para acessar o outro curso) [inglês]

Tópicos nesse post

– como NÃO aprender javascript – Recursos para este curso – Semanas 1 e 2: Introdução, Tipos de dados, expressões e operadores
– Semanas 3 e 4: Objetos, vetores, funçoes, DOM, jQuery
– Obtenha “the ultimate javascript editor”: WebStorm
– Seu primeiro projeto: Questionário Dinâmico
– Semanas 5 e 6: Expressões Regulares, Eventos do Objeto Window, jQuery
– Semanas 7 e 8: Classes, Herança, mais HTML5
– Continue melhorando
– Palavras de encorajamento

Este esboço de curso lhe dá um estruturado e instrutivo roteiro de como aprender javascript corretamente e completamente, de absoluto iniciante até um bom nível de conhecimento!

Você quer aprender Javascript; isso é o porquê você está aqui, e você teve uma sábia decisão, se você quer desenvolver websites modernos e aplicações web (incluindo uma Startup da internet), você precisa saber Javascript. E existindo mais recursos para o aprendizado de javascript que o necessário, encontrar o mais eficiente e benéfico método de aprender “a linguagem da web” não é fácil e pode ser frustante.

É interessante notar que ao contrário de alguns anos atrás, quando você precisava saber uma verdadeira linguagem no lado do servidor (tal como PHP, Rails, Java, Python, ou Perl) para desenvolver uma escalável e dinâmica aplicação com banco de dados na web, hoje você pode fazer o mesmo ou mais somente com Javascript.

Ei! Depois de ler essa tradução será mais fácil ler o artigo original! Isso fará você treinar sua leitura em inglês. Assim você tem acesso a muito material de alta qualidade, de certa forma isso diferencia os meninos dos homens ;) .

Continuar lendo

Matemática e Web Design: Uma Relação Estreita – tuts+

Artigo original: Mathematics and Web Design: A Close Relationship

A matemática está presente em praticamente todas as áreas do conhecimento. E, como era de se esperar, ela desempenha um importante papel no Web Design. Como podemos usar essas razões, constantes e teorias para aperfeiçoar nossas interfaces web? Nesse artigo você vai aprender a aplicar alguns princípios básicos da matemática para projetar harmonia e beleza em suas criações.

Matemática por toda parte

Existe um belíssimo filme da Walt Disney chamado Donald no País da Matemágica. Esse curta – disponível no Youtube [em português e inglês] – é uma introdução à matemática para crianças que mostra suas surpreendentes aplicações na arquitetura, na musica e em diversos tipos de jogos. São apresentadas razões usadas para definir as notas de um instrumento musical bem como um retângulo matemático que pode ser encontrado tanto na arquitetura clássica quanto na contemporânea. Exatamente o mesmo retângulo é usado por artistas renascentistas renomados como Leonardo Da Vinci, por exemplo.

monalisa


Ei! Depois de ler essa tradução será mais fácil ler o artigo original! Isso fará você treinar sua leitura em inglês. Assim você tem acesso a muito material de alta qualidade, de certa forma isso diferencia os meninos dos homens😉.

Continuar lendo

Como criar um slider multi-item simples – Codrops

Artigo original: How to create a simple multi-item slider

Um tutorial sobre como criar um slider simples de categorias com design minimalista usando animações CSS e jQuery. A ideia é que os itens deslizem sequencialmente conforme a direção do slide, ou seja, dependendo da posição dos itens.

Imagem de demonstração

Veja a demonstração aqui

Para o tutorial de hoje nós queremos mostrar a vocês como criar um slider simples de itens com animações CSS e um pouco de jQuery. A ideia foi inspirada pelo slider de produtos do site da Apple onde vários itens deslizam flutuando com um certo balanço. Nós procuramos traduzir este conceito em uma alternativa com visual moderno e minimalista para uma loja online, onde os itens representam diferentes categorias de produtos. Categorias se encaixam bem como caso de uso aqui por causa da natureza limitada deste tipo de slider. Para mostrar mais itens, essa não é a melhor solução, mas se a quantidade de itens é pouca, isso pode dar um pequeno toque de charme à experiência.

Então vamos começar o tutorial!

Ei! Depois de ler essa tradução será mais fácil ler o artigo original! Isso fará você treinar sua leitura em inglês. Assim você tem acesso a muito material de alta qualidade, de certa forma isso diferencia os meninos dos homens ;) .

Continuar lendo

Colunas da Mesma Altura com CSS Cross-Browser – Matthew Taylor

equal-height-columns-cross-browser-css-no-hacks

Artigo Original: Equal Height Columns with Cross-Browser CSS

Criar colunas que se acompanhem quanto à altura com CSS pode não ser uma tarefa tão fácil quanto parece. Esse tutorial apresenta os possíveis problemas de renderização que podem ocorrer durante a criação de um layout com colunas e em seguida uma solução simples que funciona em todos os browsers. Esse método não usa nada de javascript, imagens ou CSS hacks e pode ser incorporado aos projetos mais rigorosos em termos de código limpo.

Àqueles que desejam checar logo como isso funciona, seguem demos de páginas com duas colunas, três colunas, quatro colunas e cinco colunas. Dê uma olhada também nesses layouts perfeitos com várias colunas em CSS Cross-Browser que usam a mesma técnica que será descrita a seguir para igualar a altura das colunas.

quadro-explicativo1


Ei! Depois de ler essa tradução será mais fácil ler o artigo original! Isso fará você treinar sua leitura em inglês. Assim você tem acesso a muito material de alta qualidade, de certa forma isso diferencia os meninos dos homens😉.

Continuar lendo