Mostrando postagens com marcador html. Mostrar todas as postagens
Mostrando postagens com marcador html. Mostrar todas as postagens

sexta-feira, 10 de outubro de 2014

Apple cria nova linguagem de programação

A Apple fez o público da WWDC feliz ao anunciar uma nova linguagem de programação própria que descomplica sua anterior. Afinal, o evento que a companhia realiza nesta segunda-feira, 2, é voltada a desenvolvedores.

Chamada de Swift, a linguagem entrará no lugar da Objective C, usada pelos desenvolvedores na criação de aplicações para iOS.

Ao falar sobre a novidade, o vice-presidente de engenharia de software Craig Federighi disse que, quando a construía, a Apple pensava no que poderia ser feito "sem a bagagem da [Objective] C". Não à toa, a principal diferença entre as duas linguagens é que a segunda depende de muito menos códigos escritos.

As duas linguagens poderão ser usadas no mesmo aplicativo, segundo o The Next Web, assim os desenvolvedores poderão fazer a atualização aos poucos.

10 maneiras de como se tornar um bom designer

Você provavelmente já viu listas assim antes, mas eis minha visão em maneiras para melhorar suas habilidades e se tornar um bom designer. Acredito que bons designers não apenas fazem bom design, mas são conscientes, rápidos e intuitivos. Embora existem várias maneiras de tornar-se um designer, abaixo têm uma lista de dez coisas eu sinto que são importantes para cada designer.
1. Crie uma biblioteca de referência
É sempre bom ter referências boas e ruins. Sempre que consigo colocar as mãos em algum pedaço de papel, tento guardá-lo. Sejam cartões de visitas ou flyers. Por que é útil? Por um motivo simples: você terá em mãos um rápido manual do que pode ser feito em impressão (e o mais importante, do que não pode ser feito). Com uma biblioteca de flyers, por exemplo, se algum dia você for contratado pra fazer um, você já pode conferir pela sua biblioteca o que já foi feito antes, o que já foi legal, o que já foi feito e quem sabe utilizar essas referências como fonte de inspiração.

2. Faça pesquisas, nem que sejam mínimas

Embora o mercado atual é bem corrido, e logo logo notamos que não há espaço para corrermos atrás de painéis de semântica, pesquisa de mercado, etc. Mas pesquisar algo para um projeto de design é essencial. Muitas vezes, um bom briefing com um cliente pode responder muitas questões que você possa ter em aberto e salvá-lo de fazer pesquisas de campo. Claro que se nem o cliente sabe muito sobre sua empresa, digamos que talvez não seja lá uma boa idéia trabalhar com quem não sabe o que faz. Faça brainstormings ou mind-mappings rápidos, nem que seja num guardanapo. Pesquisas são importantíssimas, mesmo quando o tempo é apertadíssimo.

3. Conheça-te a ti mesmo

Pode parecer uma piração sócrateana, mas isso é importante. Saiba quais são suas limitações de antemão. Se o cliente quer um site inteiro em Flash e você não souber como mexer nesse programa, não espere aprender todo o necessário em dois dias. Diga logo de cara que você não têm o conhecimento para isso. É melhor perder um cliente honestamente, do que aceitar o trabalho e entregar o produto com quatro meses de atraso e com prejuízos ao cliente. Não tenha medo em admitir que não sabe fazer algo, é um processo normal. O mais importante de algo, não dê falsas esperanças ao cliente apenas para deixá-lo pensando “meu Deus, esse designer só me enrolou até agora”.

4. Conheça-te ao teu trabalho

Um designer que não entende o trabalho que lhe foi designado é tão útil quanto um burro-de-carga sem patas: ninguém vai a lugar algum. Você precisa entender o que seu cliente quer e como ele o quer. Se você vai fornecer soluções, você precisa saber as necessidades. E muitas vezes seu cliente não vai lhe dar todas as informações que você poderia ter, por isso a importância de uma pesquisa. Saiba o que você está fazendo e por que você está fazendo, não só pra quem você está fazendo.

5. Conheça-te a quem você faz design

Embora sempre fale-se de cliente isso, cliente aquilo, é necessário entender que o produto final não vai ser para seu cliente, mas para os clientes dele: o público geral. Se seu cliente não gostar de algo que você fez, justifique-se e explique porque você fez desta maneira, e enfatize o público geral. Mas não é só lembrar seu cliente que o design é pro público, é preciso lembrar a si mesmo que é para um público maior. Logo, se o público geral do seu cliente são jovens de 15 a 18 anos, uma linguagem formal demais pode ser inapropriada embora seja apropriada para seu cliente, que pode ter uma idade de 40 a 50 anos. O que seu cliente gosta pode não ser o que os clientes dele gostam.

6. Não tente criar uma obra de arte

Você fornece soluções para seu clienteEssa é difícil para muitos designers. Somos perfeccionistas natos, queremos algo que nós mesmos olhemos e digamos “nossa…esse com certeza vai para meu portfólio”. Mas muitas vezes clientes discordam e precisamos fazer algo que eles achem bom. Lembre-se que você fornece soluções para seu cliente, e seu objetivo não é criar algo para seu portfólio, mas algo para solucionar o problema do seu cliente.

7. Receba opiniões

É importante um designer receber opiniões referentes ao seu trabalho. Para sites e produtos que envolvam interação com um usuário, quem sabe não seja interessante pegar alguém sem muito conhecimento em navegação para internet para testar se seu produto é usável. Pergunte a opinião de outros designers também. Se eles não gostarem, justifique suas escolhas. Se eles repensarem sua opinião, ótimo. Caso contrário, talvez você realmente deva alterar alguma coisa.

8. Dê umas voltas

Especialmente útil quando você tiver um bloqueio mental. Se algo te incomoda, se você está preso entre duas opções ou se você simplesmente não sabe o que fazer, vá dar umas voltas. Saia do escritório ou de sua casa, dê umas voltas pela quadra, observe o mundo ao seu redor. Note as coisas pequenas: a textura do concreto da escada, a tinta escorrendo daquela pixação no muro, etc. Distraia sua mente. Quando você voltar ao trabalho, sua mente estará refrescada e pronto para agir.
Dê umas voltar por aí quando não estiver muito inspirado
Dê umas voltar por aí quando não estiver muito inspirado

9. Desafie-se

Tente se surpreender. Se você têm uma idéia mas que parece arriscada, tente de qualquer maneira. Pode ser que sua idéia seja algo extremamente inovativo nunca tentado antes e você vire milionário. Daí você vai lembrar deste site e vai sentir vontadezinha de doar um pouquinho do dinheiro, né?

10. Ame design

Não existe nada melhor que um profissional que ama seu trabalho. Isso reflete na qualidade dos seus trabalhos e reflete nos seus clientes. Se você entrou nesse ramo odiando cada segundo, honestamente, por que continuar aqui? Um designer não só trabalha com design, mas respira design, vive design. E quando seu cliente ver sua paixão pelo design, ele será contagiado também. E os clientes dele também serão. Amor é contagioso, portanto ame ao máximo. Você só têm a ganhar.

11. (Bônus) Estude design

Afinal de contas, do que adianta ser apaixonado e saber tudo sobre Photoshop, Corel Draw e Illustrator mas não entender nada sobre gestalt, teoria da cor e princípios básicos do design. Existem milhares de cursos aí por fora que ensinam você a ser designer. Não acredite neles! Design não é só mecher em software, design não é só desenhar. Design é encontrar soluções para viabilizar um produto, agregar valor a uma marca e aumentar lucros para seu cliente. Você não aprende isso nestes cursinhos de seis mêses de design. Acredite, apenas boas faculdades ensinam isso.

domingo, 21 de setembro de 2014

Validação de formulário com HTML5



HTML5
HTML5 evoluiu bastante e tem uma série de novidades entre elementos e atributos para formulários. Nesse artigo mostro um pouco sobre validação dos campos de um formulário. Acredito que em um futuro próximo os desenvolvedores não precisaram escrever o código de validação de formulário em JavaScript, por exemplo, já que os navegadores serão capazes de fazer tudo isso para nós.

Atributo required

Utilizamos esse atributo para informar ao navegador que um elemento do formulário é de preenchimento obrigatório, ou seja, o usuário não consegue enviar o formulário se não preencher o campo com o atributo required. Seu uso é exclusivo com os elementos input, select e textarea.
Uma mensagem é informada ao usuário em uma tentativa de envio de formulário sem o preenchimento de um campo com required. Esse atributo apenas verifica se o campo foi preenchido ou não. Quero dizer que, qualquer caractere será aceito.
view plaincopy to clipboardprint?
  1. <form method="post" action=""> 
  2. <label for="nome">Nome: </label><input id="nome" type=text required name=nome> 
  3. <input type=submit value="OK"> 
  4. </form> 
Abaixo mostro as mensagens de alerta nos seguintes navegadores: Google Chrome, Firefox e Opera. Perceba que cada fabricante estiliza a mensagem de forma diferente.
mensagem de alerta em diferentes navegadores

type=”email”

Atributo type de um input com a opção igual a email significa definir o campo para receber um endereço de e-mail válido. A forma de validação não verifica se o e-mail digitado realmente existe, mas sim se o formato está correto. Exemplo de um formato de email aceito: teste@teste.com.
view plaincopy to clipboardprint?
  1. <form method="post" action=""> 
  2.     <label for="email">E-mail: </label><input id="email" type=email required name=email> 
  3.     <input type=submit value="OK"> 
  4.     </form> 
Atente para o seguinte: além de ser um campo onde o usuário deve digitar um endereço de e-mail válido o campo é de preenchimento obrigatório.
Alerta para o usuário caso não seja digitado nada no campo input.
Validação email required
Alerta para o usuário caso não seja digitado um formato de e-mail no campo input.
Validaçao email
Um recurso CSS3 pode ser usando para identificar se o elemento do formulário recebeu ou não um dado válido. Esse recurso é o pseudoclasse :valid e :invalid
Assim que o usuário digitar um dado válido, o navegador altera o pseudoclasse de :invalid para:valid. No exemplo abaixo o campo inicia com uma cor de fundo avermelhada, assim que o usuário digitar um formato de e-mail o campo é alterado para verde.
Veja o CSS:
view plaincopy to clipboardprint?
  1. #email:valid {background:#006600;color:#fff } 
  2. #email:invalid {background:#990000; color:#fff} 

type=”url”

Um campo input com type igual a url recebe apenas url’s no seu formato correto, ou seja, http://www.site.com, http://www.site.com.br etc.
view plaincopy to clipboardprint?
  1. <form method="post" action=""> 
  2. <label for="site">Site: </label><input id="email" type=url required name=site> 
  3. <input type=submit value="OK"> 
  4. </form> 
Mensagem de alerta do navegador Chrome ao digitarmos uma url em um formato inválido.
Exemplo validação de url com HTML5

pattern = “Expressão”

Com uso do atributo pattern você pode exigir que o usuário digite valores em um padrão feito comexpressão regular, ou seja, o que for digitado no compo input deverá satisfazer a expressão regular criada pelo desenvolvedor.
Explicarei o atribudo criando uma expressão para entrada de um número de telefone. O valor inserido no campo de input deverá iniciar com (xx) logo terá um espaço em branco com uma sequência de quatro dígitos, um traço, e para terminar mais uma sequência de quatro dígitos, ficando assim: (xx) xxxx-xxxx.
Abaixo o código para criar a condição descrita acima.
view plaincopy to clipboardprint?
  1. <form> 
  2.    <label>Telefone: <input required name="tel" pattern="\([0-9]{2}\)[\s][0-9]{4}-[0-9]{4}"></label> (xx) xxxx-xxxx 
  3.    <input type=submit value=Enviar> 
  4.   </form> 
\([0-9]{2}\) usuário deve digitar dois números de 0 até 9 entre parênteses.
[\s][0-9]{4}-[0-9]{4} um espaço e duas sequência de números divididas por um traço.
Em HTML5 há um valor para o atributo type que é o tel. Ao utilizar esse valor não há máscara de formatação ou validação, já que não há um padrão para números de telefones. Ele serve apenas para informar que o valor do campo é um número de telefone.
Abaixo outro exemplo utilizando o atributo pattern, agora validando CEP
view plaincopy to clipboardprint?
  1. <form> 
  2.    <label>CEP: <input required name="cep" pattern="[0-9]{5}-[0-9]{3}"></label> (xx) xxxx-xxxx 
  3.    <input type=submit value=Enviar> 
  4. </form> 

novalidate=”novalidate”

Quando presente dentro do elemento form, especifica que os elementos do formulário não devem ser validados quando submetidos mesmo que tenham em seu type atributos iguais a email, url, etc.
view plaincopy to clipboardprint?
  1. <form action=" " novalidate="novalidate"> 
  2.   <label>nome: <input name="nome" required></label> 
  3.   <label>email: <input name="email" type="email" required></label> 
  4.   <input type="submit" name="action" value="Enviar"> 
  5. </form> 
No exemplo acima mesmo que o usuário clique no botão enviar sem preencher os campos com required o formulário será submetido. Isso porque passamos o valor novalidate="novalidate".

Compatibilidade entre navegadores

Pelos testes que fiz a validação funcionou perfeitamente nos navegadores Chrome, Opera e Firefox em suas últimas versões. Navegadores como Safari e Internet Explorer não foram capazes de reconhecer tais elementos da HTML5.