Mundo do Blog - O que você procura acha aqui

quinta-feira, 31 de julho de 2014

Curso Web Design | O que é Front-End Developer?

Link to Blog do Curso Web Design - Microcamp SP

Posted: 31 Jul 2014 04:45 AM PDT

Desde que a internet começou a dar os seus primeiros passos e os primeiros sites foram desenvolvidos, uma das grandes preocupações dos web designers e web developers em geral era (e ainda é, diga-se de passagem) criar páginas que possuíssem recursos para auxiliar o usuário em sua experiência. É claro que no começo não haviam sido desenvolvidas muitas técnicas para tal, até porque isso ainda não era uma grande preocupação na época. A maioria dos usuários estava mais preocupada apenas na descoberta da internet e seus recursos do que avaliar as facilidades disponíveis.

Nessa época, poderíamos dizer que um site era essencialmente criado por dois tipos de profissionais: os Web Designers e os Web Masters. O Web Designer, como o nome sugere, era o responsável pela criação da estrutura e da parte gráfica das páginas, ou seja, era o responsável pelo código HTML, a estilização em CSS e as imagens que compunham o visual . Já o WebMaster era o responsável pela programação, ou o funcionamento da página propriamente dita, empregando scripts em Javascript, PHP e outros.

É claro que a coisa toda não podia parar por aí. A tecnologia – e por consequência a internet – é dinâmica e novos formatos, novas ideias e novas funcionalidades foram criadas, testadas e incorporadas à web. Antigamente, o que eram apenas páginas com banners animados e letras piscando, hoje são páginas que possibilitam fazer movimentações comerciais e bancárias, consultar mapas, compartilhar vídeos e fotos, interagir com grupos de amigos e muito mais. A lista é grande e eu poderia discorrer sobre o assunto longamente – além de incluir aí também as novas formas de acesso à rede, como os dispositivos móveis (tablets, smartphones, smart tvs e tudo mais que esteja sendo criado enquanto você lê este texto).

Com toda essa transformação, é bastante simples chegar à conclusão de que o perfil do profissional também iria mudar, e isso não foi diferente. As responsabilidades e as funções de um profissional web aumentaram, e muito! Com um leque tão grande de tecnologias e funções, fica até difícil criar um rótulo para abrigar tantas e tão diferentes habilidades para um profissional.

O que nos leva ao Front-End Developer.

Afinal, o que é um Front-End Developer?

O conceito sobre Front-End Developer ainda é fonte de alguma discussão na rede mundial de computadores. Muitas pessoas que trabalham com desenvolvimento de páginas web acham que o Front-End é o profissional equivalente a Web Designer, ou seja, o profissional responsável pelo "visual" da página. Mas a palavra "developer" (desenvolvedor, em bom português) entrega: apenas criar o design da página não faz da pessoa um profissional Front-End (entenda-se aqui “design” como o visual da página). Espera-se que ele domine as linguagens de programação que rodam do lado cliente (client-side) e algumas regras que garantam que essa página seja visualizada da forma correta e, por extensão, melhorem a experiência do usuário. Podemos citar algumas delas como exemplo: fazer com que a página se ajuste ao dispositivo que o usuário utiliza para visualiza=la corretamente na tela; corrigir eventuais bugs entre diferentes navegadores; fazer com que um conteúdo alternativo seja visualizado pelo usuário da página caso alguma tecnologia não funcione; e criar alternativas para pessoas com deficiências, entre tantas outras que poderia citar aqui.

A área de Front-End Developer é multidisciplinar, por isso é conveniente que um profissional deva ser capacitado não somente em criação de imagens, bom uso de tipografia, diagramação bem feita ou correta aplicação da teoria das cores, mas também na usabilidade, arquitetura de informação e é claro, um pouco de programação.

Mas isso tudo também faz parte das funções de um designer? É claro que sim! O design da página será invariavelmente afetado ou criará uma experiência ruim caso algumas das situações citadas acima ocorram. Por exemplo, se um plugin não carrega, mas você reservou uma janela para ele ser visualizado na página, o que irá aparecer no lugar? Se um usuário acessa a página a partir de um smartphone e o layout não é responsivo (ou seja, não se adapta ao dispositivo), o que irá acontecer com o tamanho das fontes, dos botões, do texto, etc.? E se você cria algo no visual do seu site, mas ele aparece de forma diferente em diferentes navegadores? Pois bem, se algum desses erros ocorrerem, a responsabilidade é do designer. E você deve estar se perguntando: "Mas isso tudo não é feito com código?". Pois é, chegamos ao ponto central da questão. Ser um Front-End developer não significa saber desenhar um site no Photoshop ou no Fireworks, ou "apenas" criar páginas com HTML e CSS puramente. Ser um Front-End developer é saber criar designs para suas páginas e saber programá-las para que esses mesmos designs sobrevivam às mais diversas situações e, de quebra, possam auxiliar o usuário na experiência de navegação.

"Programar" em HTML e CSS?

É importante frisar que nem HTML nem CSS são linguagens de programação. Muita gente acha que "programa" algo nessas duas linguagens simplesmente porque elas são compostas de códigos. Mas, linguagens de programação, como o próprio nome explica, são um conjunto de comandos (linguagem) que, seguindo regras pré-determinadas, passam instruções lógicas para computadores realizarem tarefas (e aí entra a programação!). HTML e CSS são, em essência, responsáveis pelo visual da página. Por isso o Front-End ainda é (corretamente) ligado ao design.

O fato é que hoje o Web Design mudou. Você não desenha mais um site puramente com imagens e as fatia no Fireworks apenas. Você cria <Divs> e as estiliza, e embora isso possa parecer terrivelmente estranho, isso é web design! Escrever códigos que possam melhorar seu site levando em consideração a experiência do usuário é o cerne da existência de um Front-End Developer.

O que eu preciso saber para ser um Front-End Developer?

HTML, a estrutura

Como sabemos, não existe página web sem HTML. Ela é a linguagem base de todos os sites que existem e não haveria processamento de texto na internet sem o uso dela (sem falar em áudio, vídeo, etc. já que são conectados por hiperligações). Você não estaria lendo o texto desta página se ela não existisse, por exemplo. Neste momento, você está visualizando o resultado de um código HTML e na maioria das vezes nem se dá conta.

Importante lembrar que a linguagem HTML está em constante desenvolvimento para se tornar mais semântica e cheia de significado. Dominar o HTML, em especial o HTML5 e seus novos elementos é parte fundamental do aprendizado de um Front-End Developer!

CSS, o estilo

Criar uma estrutura é uma coisa. Revesti-la de cores, transições e efeitos é tarefa do CSS. Em uma analogia básica, podemos dizer que o HTML é estrutura de uma construção, com suas paredes formadas por blocos, já o CSS é a tinta que pintaria essa parede, suas texturas e molduras de gesso. As folhas de estilo em cascata (Cascading Style Sheets) são capazes de produzir formatações em fontes, criar formas de alinhamento, transformações, transições e até pequenas animações sem o uso do Flash. São essenciais para dar vazão a sua capacidade criativa no design de páginas, em especial com os recursos de sua última versão, o CSS3.

Técnicas SEO

Você já deve ter ouvido falar em SEO – Search Engine Optimization, ou Otimização para Sistema de Buscas, certo? É a maneira de preparar o conteúdo de uma página ou de um site inteiro para que seja encontrado durante uma pesquisa e para um melhor posicionamento nos rankings das ferramentas de procura. Já abordamos o assunto aqui – você pode clicar neste link para ler o post completo sobre SEO. As técnicas vão desde criar títulos de páginas descritivos, passando por descrições de imagens em tags ALT, descrições nos links , Meta tags e informações do conteúdo nas tags <title>.

Design Responsivo e Mobile First

Como mencionei anteriormente, hoje é quase inimaginável pensar em um site que não tenha uma versão ou funcionamento adaptado para diversos tamanhos de monitores de computador ou dispositivos móveis. Este é um assunto recorrente aqui, já discorremos sobre o tema no post inaugural do blog e em outras oportunidades, como no post sobre Media Queries, por exemplo. É claro que Design Responsivo engloba muito mais do que apenas o conhecimento de Media Queries. É preciso pensar que um Smartphone ou Tablet precisem de um layout próprio para que as páginas web sejam visualizadas de forma correta neles. Muita gente defende até que os layouts para dispositivos portáteis devem ser criados primeiramente (Mobile First!) antes mesmo do layout do site para desktop. E você, já tinha pensado nisto? Sabia que essa forma de desenhar páginas envolve técnicas de HTML e CSS combinadas? Pois é, nunca é tarde para começar a pesquisar sobre o assunto!

Técnicas Cross-Browser

O termo Cross-browser refere-se à habilidade de um site, página web ou script side-client de ter suporte a múltiplos navegadores. É uma forma de utilizar tecnologias compatíveis com qualquer navegador de internet para que exiba conteúdos de acordo com as especificações do W3C. O termo foi criado nos anos 90 por causa da incompatibilidade entre navegadores durante o período que ficou conhecido como a "Guerra dos Browsers" e significa que o site possui a capacidade de ser visualizado da mesma maneira por qualquer navegador web. Embora atualmente esses problemas sejam cada vez menores, ainda é importante conhecer certas técnicas para reduzir os problemas causados pelo uso de versões antigas dos navegadores pré-padrões W3C.

Conclusão

Claro que ainda há muito mais coisas que poderia mencionar aqui, mas acredito que a essa altura você já tenha compreendido bem o significado sobre o que é ser um Front-End Developer (inclusive se você já pode se auto rotular como um) e o tipo de conhecimento que deve ter para trabalhar nessa área. Espero ter lançado uma boa luz sobre o assunto – é claro que, como disse no início, ainda há muita discussão e especulação sobre o que é ser um profissional Front-End, mas acredito que o conteúdo desse post vai ajuda-lo a ter um bom ponto de partida sobre o assunto. Prometo que em breve escreverei sobre a contrapartida do profissional de designer na programação: o Back-End Developer.

Grande abraço e até o próximo post!

Como criar um blog de Moda – Grátis

Posted: 31 Jul 2014 11:41 AM PDT

Atualmente criar um blog é muito simples e pode ser feito em menos de 5 minutos, podendo começar a publicar imediatamente. Um dos temas mais abordados pelo público feminino é a moda, conseguindo cativar um bom fluxo de seguidores, que podem inclusivamente subscrever o blog através dos feeds (para receber as novidades). Como criar um blog de moda? Existem 2 formas simples de criar um blog de Moda,...

Aceda ao nosso site para continuar a ler, clique no título.

quinta-feira, 24 de julho de 2014

Curso Web Design | Validação de formulários com Jquery

Validação de formulários com Jquery

Posted: 24 Jul 2014 05:21 AM PDT

Toda vez que vamos desenvolver um site ou mais especificamente uma página onde houver um formulário de cadastro, é imprescindível pensar nos erros que podem ocorrer no preenchimento incorreto dos campos pelo usuário e o transtorno que isso geraria em um Banco de Dados. Já apresentamos alguns tipos de validação aqui anteriormente, como no post onde demonstramos como fazer formulários em HTML5 e também como fazer validações pelo Dreamweaver. Desta vez, no post de hoje, demonstraremos como fazer a validação dos dados em um formulário utilizando o Jquery.

Nota do Moderador: O tutorial que você lerá a seguir foi desenvolvido e enviado pelo professor Victor Wurthmann, instrutor dos cursos de Web Design e Informática da unidade Praia Grande. Você pode conhecer melhor o Victor e entrar em contato com ele no seu perfil do Facebook ou deixando um recado para ele diretamente nos comentários do Blog. Boa leitura!

Objetivo da Validação

A validação de um campo de formulário consiste em testar os conteúdos preenchidos dentro dos campos antes de enviar para o banco de dados. Em geral, essa validação pode ser feita de duas maneiras distintas: via Server-Side ou via Client-Side.

Validação Server-Side

Scripts Server-Side (lado servidor, em português) serão processados diretamente no servidor retornando somente o resultado dos processos para o cliente. Pensando assim, esse método até parece legal, mas devemos levar em consideração que dessa maneira o fluxo de informações deverá passar obrigatoriamente pelo servidor e isso poderá sobrecarrega-lo.

Validação Client-Side

Scripts Client-Side (lado cliente) são processados diretamente na máquina do usuário. Com isso o servidor fica livre, pois como a validação é feita no próprio navegador, acaba sendo não exigido nesse método. Outra vantagem é que o processo não exige praticamente nada do processador da máquina.

Idealmente, é conveniente que seja utilizado um script Client-Side para suas validações. No exemplo que mostro a seguir, utilizaremos para tal fim o Jquery, que é uma biblioteca do Javascript (ao qual você já foi apresentado em um outro post, aqui mesmo no Blog do Web Design).

Criando o Formulário

Para compreender como tudo funciona, iremos criar um formulário simples com 3 campos, sendo um campo de texto (text) e dois campos de senha (password). Faça o código do formulário HTML a seguir em seu editor de códigos favorito, como o Notepad++ ou o Dreamweaver. Crie a estrutura básica (html, head, title…) e inclua o formulário a seguir:

<form action="#" method="post">  Nome:<input type="text" name="nome" id="nome" size="30" />  <br />  Senha:<input type="password" name="senha" id="senha" size="30" />  <br />  Confirma Senha:<input type="password" name="senha2" id="senha2" />  <br />  <input type="submit" value="Cadastrar" id="btn" />  </form>  <p id="alerta"></p>

Salve-o com o nome index.html . O resultado no Browser será aproximadamente este:

Repare que cada elemento do formulário tem um seletor ID para identifica-lo, isso é importante na hora de criarmos o script. Insira após o formulário um paragrafo com ID alerta (<p id=”alerta”></p>) e não escreva nada nele.

Criando o Script de Validação

Agora vamos criar o script responsável pela validação, lembrando que você deve ter em mãos o arquivo da biblioteca Jquery. Para baixa-lo, vá até o site oficial do desenvolvedor: www.jquery.com.

Veja o código abaixo e logo a seguir a explicação dos comandos para que você possa entender o que está se passando em cada processo do código:

Criando as variáveis

O primeiro passo do Script é criar as variáveis que vão armazenar os valores dos campos dos formulários:

<script type="text/javascript" src="jquery.js"> </script>  <script type="text/javascript">    $(document).ready(function(){              $("#btn").click(function(){                   var nome = $("#nome").val()                   var senha= $("#senha").val()                   var senha2= $("#senha2").val()

Vamos entender os códigos:

Linha 1: Criando o link para a biblioteca Jquery que está na mesma pasta do arquivo index.html.

Linha 2: Iniciando o script que fará a validação do formulário.

Linha 3: Função que executa o script assim que a página HTML for carregada.

Linha 4: Função click, quando o usuário clicar no elemento com o ID btn (no caso o nosso botão “cadastrar”) ele irá executar a função a seguir.

Linha 5: Criando a variável nome e dizendo ao script que ela terá o valor do que for digitado no campo do formulário com ID nome.

Linha 6: Criando variável senha e dizendo ao script que ela terá o valor do que for digitado no campo do formulário com ID senha.

Linha 7: Criando a variável senha2 e dizendo ao script que ela terá o valor do que for digitado no campo do formulário com ID senha2.

Testando os Campos

Agora que já temos as variáveis armazenando o conteúdo do formulário, precisamos usar uma condição no script para testar os valores armazenados nas variáveis. Nesse caso utilizaremos a estrutura If /Else.

Veja a seguir:

if(nome == "")        {        $("#alerta").html("Coloque seu nome")        return false;        }  else if(senha == "")        {        $("#alerta").html("Informe sua senha")        return false;        }  else if(senha2 == "")        {        $("#alerta").html("Confirme sua senha")        return false;        }

Nessa parte do script estamos utilizando a estrutura If/Else para testar se os valores das variáveis são vazios, ou seja, se o usuário não digitou nada. Caso uma das condições seja verdadeira ele irá exibir uma mensagem no parágrafo que nós criamos com o ID alerta.

Entenda o código:

Linha 13 a 17: Primeiro teste com a variável nome. Caso ela esteja vazia, ele rodará a função HTML que exibirá uma mensagem através do elemento alerta. O return false serve para parar a execução do script naquele momento e aguardar por outras instruções.

Linha 18 a 22: Teste com a variável senha, caso ela esteja vazia irá executar a função HTML e exibir a mensagem no elemento com ID alerta.

Linha 23 a 27: Teste da variável senha2, caso ela esteja vazia irá executar a função HTML e exibir a mensagem no elemento com ID alerta.

Confirmando as senhas

Agora chegamos ao último passo, que é o de verificar se o usuário de fato digitou a senha corretamente. Geralmente quando criamos um cadastro temos de confirmar a senha, pois vários acidentes podem acontecer durante este processo: esbarrar em uma tecla e acabar digitando um caractere errado, digitar algo em maiúsculo em vez de minúsculo, por exemplo. Então o ideal é que tenhamos uma validação para esse tipo de situação também.

O código a seguir continua na mesma estrutura If /Else.

else if (senha != senha2)         {         $("#alerta").html("Digite a mesma senha")         return false;         }  else         {         $("#alerta").html("Cadastro efetuado com sucesso")         return false;         }     })  })  </script>

Entenda o código:

Linha 28 a 32: Verificando se a variável senha é diferente da variável senha2, caso essa situação seja verdadeira, ele exibirá uma mensagem através do elemento com ID alerta informando que o usuário deve digitar a mesma senha nos dois campos.

Linha 33 a 37: Finalizando a estrutura If/Else, dizendo ao script que se nenhum dos outros testes feitos forem verdadeiros, isso significa que o usuário digitou as informações corretamente, e então será exibida a mensagem "Cadastro Efetuado com Sucesso" no elemento com ID alerta.

Linha 38 a 40: Fechamento das chaves e parênteses e finalização do script.

Agora é só testar o trabalho e ver se funcionou corretamente! Veja a imagem com o resultado abaixo, onde digitei senhas diferentes e cliquei em “Cadastrar” para ver a mensagem de erro “Digite a mesma senha”:

Aqui o resultado caso digite as senhas corretamente:

Segue o código completo, caso tenha alguma dúvida ou queira copiar e colar diretamente no seu editor de códigos:

<html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>Validação de formulário</title>   <script type="text/javascript" src="jquery.js"> </script>   <script type="text/javascript">      $(document).ready(function(){    $("#btn").click(function(){     var nome = $("#nome").val()     var senha= $("#senha").val()     var senha2= $("#senha2").val()      if(nome == "")    {      $("#alerta").html("Coloque seu nome")      return false;    }      else if(senha == "")    {      $("#alerta").html("Informe sua senha")      return false;    }      else if(senha2 == "")    {      $("#alerta").html("Confirme sua senha")      return false;    }      else if (senha != senha2)    {      $("#alerta").html("Digite a mesma senha")      return false;    }      else    {      $("#alerta").html("Cadastro efetuado com sucesso")      return false;    }   })  })   </script>  </head>  <body>  <form action="#" method="post">  Nome:<input type="text" name="nome" id="nome" size="30" />  <br />  Senha:<input type="password" name="senha" id="senha" size="30"/>  <br />  Confirma Senha:<input type="password" name="senha2" id="senha2" />  <br />  <input type="submit" value="Cadastrar" id="btn" />  </form>  <p id="alerta"></p>  </body>  </html>

Conclusão

A validação de um formulário é importante para a consistência dos dados de um banco de dados. Também é importante que seja feita na máquina do cliente para que não haja sobrecarga do servidor. Outra observação importante é que o Jquery pode ser utilizado também com códigos PHP, ASP entre outros.

Agora é com vocês. Criem seus formulários com mais campos, façam a validação e pratiquem. É importante para que no futuro possam desenvolver suas próprias validações. Espero ver seus comentários no Blog para saber se gostaram e que outros tipos de trabalhos gostariam de ver aqui. Muito obrigado e até a próxima postagem!

segunda-feira, 21 de julho de 2014

Visual Dicas

Como criar um slideshow para o seu blog sem necessidade de programação

Posted: 20 Jul 2014 03:42 PM PDT

Slideshow para o seu blog ou site

Neste artigo vamos apresentar um aplicativo web para criar slidesshow's gratuitamente para você adicionar nos seus blogs e sites sem precisar saber nada de programação.

O que é um slideshow?

Slideshow é uma exibição de uma série de imagens escolhidas, feito para fins artísticos ou instrucionais. As imagens são apresentadas sequencialmente de acordo com a ordem e duração definidas pelo seu criador.

Existem vários widgets e plugins disponíveis para você criar slideshow's, entretanto o aplicativo que mostraremos a seguir é muito prático e fácil de utilizar. É gratuito e não requer registro no site para acessá-lo.

Criando um slideshow

Acesse o site: slideshow.void7.com

Se o aplicativo estiver estiver em inglês, clique na bandeira de Portugal que aparece no menu lateral para alterar o idioma para o português.

Clique em [Criar slideshow] ou [Criar slideshow num passo].

Agora vamos iniciar nosso slideshow…

Passo 1: Digite o título do seu slideshow que deve ter mais de 10 caracteres.

No nosso exemplo vamos criar um slideshow com o nome "Slideshow teste Visual Dicas"

Passo 2: Defina as dimensões do seu slideshow. Procure manter uma proporção adequada para as imagens inseridas e o local onde você adicionará o seu slideshow.

No nosso exemplo vamos criar um slideshow com 510 px de largura e 350 px de altura.

Passo 3: Insira o endereço das imagens no campo [url].

O slideshow deve ter um mínimo de 2 e um máximo de 10 imagens.
Para cada imagem, é necessário indicar o url completo da localização da imagem, por exemplo: http://visualdicas.com.br/images/stories/novologo.jpg

Atenção: Todas as imagens devem ser em formato jpg e devem permanecer no servidor original, ou seja, devem estar previamente hospedadas na internet.

Como hospedar suas imagens

Você poderá hospedar sua imagens ou fotografias em algum utilitário disponível para isso, como o Tinypic por exemplo – leia Como hospedar imagens e gif animados gratuitamente.

Se você tiver um site hospedado em um servidor, poderá através enviar e armazenar suas imagens via ftp – leia O que significa FTP e para que serve?

Você também poderá utilizar imagens de outros sites, desde que públicas, copiando o URL da imagem.

Continuando o nosso exemplo, vamos utilizar arquivos de imagens que hospedamos no Tinypic, copiando o link direto (ver figura abaixo).

Vamos então digitar todos endereços da imagens do nosso slideshow (4 imagens)…

Passo 4: indique a duração de cada imagem, em segundos. Pode usar décimos de segundo.

No nosso exemplo vamos utilizar 5 segundos para cada imagem.

Passo 5: Selecione o tipo de transição que pretende entre fotografias.

Existem diversas opções para as transições, conforme podemos observar na figura abaixo.

Para testarmos, vamos selecionar 4 tipos de transição diferentes para o nosso slideshow…

Passo 6: Descreva o seu slideshow. É obrigatório uma descrição com mais de 100 caracteres. No nosso exemplo copiamos um texto sobre a descrição e password.

Passo 7: A password é necessária para que possa ter autorização para modificar o slideshow. Pode personaliza-la durante a criação do slideshow. Caso contrário é usada uma password gerada automaticamente.

No nosso exemplo vamos alterar a password para "visualdicas" facilitando a memorização, se precisarmos alterar o slideshow.

Passo 8 (itens opcionais): Você também poderá preencher os itens opcionais se desejar…

Email: O endereço de email será necessário para o caso de se esquecer da password e necessitar de alterar ou apagar o slideshow. Não será publicado em nenhuma página do site.

url da música: Pode colocar som ou música no seu slideshow, desde que coloque o link para o arquivo MP3 correspondente. Só é suportado o formato MP3. Atenção que o arquivo do som ou de música não é transferido para o slideshow.void7.com. Deve manter o ficheiro sempre no mesmo link e com o mesmo nome que indicou aquando da configuração do slideshow.

Link do site: Pode colocar o endereço do site onde irá publicar o slideshow, para que o título da página fique com o link para o seu site.

Cor de fundo: Se a transição da primeira fotografia for diferente do "none" a cor de fundo será visível. A cor de fundo é visível no caso de algumas fotografias terem uma relação largura/altura diferentes entre elas. Pode colocar, por exemplo uma cor de fundo igual à cor de fundo da página do seu site ou blog.

Comentários: Pode decidir se o slideshow fica disponível para receber comentários. Desde que tenha a password do slideshow, poderá a qualquer momento apagar os comentários que achar inoportunos.

Estado: Se por algum motivo pretender desativar o slideshow, poderá fazê-lo desde que tenha a passsword do mesmo.

Passo 9: Clique no botão [Criar].