O que é 'Mobile First' e por que isso é importante?

Basta olhar em volta que você verá é uma nação móvel. E todas essas pessoas com seus dispositivos firmemente na mão, indo de uma lado para outro sempre conectados e não estão apenas se conectando com amigos e familiares. Eles também estão envolvidos com suas marcas favoritas ou estão procurando um negócio local para atender às suas necessidades. Este é o momento em que o gigante do mecanismo de busca se tornou um plano para se mudar para uma abordagem de classificação móvel. Então, o que isso significa exatamente para seus negócios e seus planos de SEO?

O que é 'Mobile-First'?
O Google sempre olhou os sites apenas na forma como eles aparecem nos desktops, mas hoje ele tem focado sua indexação primeiramente nos dispositivos mobile "Mobile-First". Quanto ao código isso ajuda a eliminar códigos desnecessários, Pois focamos no código mobile.

Como isso afeta o SEO?
Se você é proprietário de uma empresa com um site de desktop e celular separado, sua classificação será afetada se o conteúdo for diferente. Por exemplo, uma versão móvel do seu site com muito menos conteúdo que o seu site da área de trabalho também não será classificada. Uma solução que vale a pena considerar é ter um único site com um design de site responsivo, referindo-se a um site projetado para se adaptar a qualquer tela que esteja sendo visualizada por um pesquisador.

O seu site deve ser amigável?
Algumas empresas realmente têm mais envolvimento dos usuários de desktops, por isso a simpatia móvel nem sempre é uma prioridade. No geral, no entanto, mais consumidores estão usando seus dispositivos móveis para procurar informações comerciais e tomar decisões de compra. De acordo com um estudo, metade de todos os usuários móveis fazem uma compra em um negócio local que eles encontram online. Além disso, o Google vem implantando constantemente recursos, de verificação de página, projetado para incentivar a compatibilidade com dispositivos móveis.

Veja alguns ajustes relacionados com SEO que você pode fazer para melhorar o recurso móvel do seu site:
  • Preste atenção aos tempos de carregamento da página (os usuários móveis geralmente esperam que as páginas sejam carregadas em alguns segundos)
  • Otimize seu site para pesquisadores locais, já que quase 60 por cento das buscas móveis têm intenção local
  • Otimize imagens para telas menores (imagens maiores podem diminuir a velocidade da sua página)
  • Reduza a desordem de conteúdo para permitir o uso de espaço em branco para aumentar a legibilidade em telas menores
  • Remova o código fonte desnecessário para evitar atrasos com cargas de página
  • Deixe espaço para os dedos em torno de botões e ícones para reduzir o risco de cliques acidentais em outros links, especialmente em páginas onde os clientes estarão completando compras e entrando informações de pagamento
  • Otimize suas páginas com títulos descritivos, parágrafos curtos e pontos de bala (os usuários móveis tendem a olhar todos os títulos primeiro e depois leem)

O Google insiste em classificar as páginas da Web a partir de uma perspectiva móvel, caso contrário seu site não terá um grande impacto nos rankings. Eles também estrearam uma atualização de algoritmo denominado Mobilegeddon, que dá prioridade aos sites que se apresentam bem em telas móveis. O que tudo isso significa é que manter um olho em como o conteúdo ressoa com os usuários móveis não é mais opcional é prioridade.

Você já otimizou o conteúdo de seu site?
Se precisar de ajuda com este objetivo, entre em contato com a nossa equipe.

Design Responsivo - Estrutura Base

Vamos entender na prática como tudo funciona

Como vimos no post anterior estamos trabalhando com WOT, como vamos desenvolver para diversos dispositivos então temos que ter um ponto de partida.

Em 03 de Novembro de 2009, Luke Wroblewski publicou uma matéria com o titulo "Mobile First", nesta publicação ele defende a ideia de se iniciar o projeto e seu código pelo menor dispositivo até o maior, exe.: iniciamos pelo celular, depois tablet e finalizamos com o desktop.

Em minhas postagens vamos desenvolver tudo seguindo o padrão "Mobile First".

HTML5 e CSS3

Tenho como base neste tema, Design Responsivo, que estou publicando para pessoas que já tem um conhecimento no assunto, por menor que seja e querem se atualizar. Sendo assim pode ser que eu vá direto ao ponto em alguns momentos e para quem não sabe nada de HTML5 e CSS3 vai ficar faltando conteúdo, Se isso acontecer, comenta na postagem, estou aqui para te auxiliar.

Estrutura base:
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>Titulo</title>
  5. <meta name="description" content=" ">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. </head>
  8. <body>
  9. Conteudo...
  10. </body>
  11. </html>
Esta é a nossa base, quero detalhar melhor a linha 6 onde temos nossa meta VIEW PORT.

A W3C propôs em Setembro de 2011 a utilização da @viewport para definir os valores das propriedades: zoom, width e orientation que mais adiante foi substituído pela metatag viewport.

Aqui temos alguns ajustes a fazer no código acima antes de continuar, estes ajustes não são obrigatórios são sugestões de diversos autores, programadores e minha também.

As versões do Internet Explorer anteriores a 9 não dão suporte as tags do HTML5 que vamos ver, sendo assim temos um pequenos ajuste a fazer, segue o código a baixo onde adicionei as linhas 7, 8 e 9.
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>Titulo</title>
  5. <meta name="description" content=" ">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <[!--if lt IE 9]>
  8. <script src="js/html5shiv.js"></script>
  9. <[endif]-->
  10. </head>
  11. <body>
  12. Conteudo...
  13. </body>
  14. </html>
Segue a link do arquivo HTML5Shiv para você baixar e colocar em seus estudos e projetos. Este arquivo faz com que o IE reconheça as tags do HTML5.

Continuando, temos mais uma boa pratica a ser feita, como falei anteriormente, não é obrigatória, é apenas uma sugestão.

Quando o HTML foi criado as tags foram criadas com padrões de: tamanho de fonte, quebra de linha, margem espaçamentos, e foi criado um CSS para normalizar tudo isso ou resetar tudo isso, esse conceito foi criado por Eric Meyer em 18 de Abril de 2007, é uma folha de estilo que redefine os padrões das tags,  posteriormente Nicolas Gallagher e Jonathan Neal criaram uma versão desta folha de estilo e deram o nome de normalize, segue abaixo o código atualizado mais uma vez com o arquivo RESET.CSS, este feito por mim, linha 10 foi adicionada.
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>Titulo</title>
  5. <meta name="description" content=" ">
  6. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7. <[!--if lt IE 9]>
  8. <script src="js/html5shiv.js"></script>
  9. <[endif]-->
  10. <link rel="stylesheet" href="css/reset.css">
  11. </head>
  12. <body>
  13. Conteudo...
  14. </body>
  15. </html>
Agora nosso código base esta pronto, segue link para o código.

Em nosso próximo post vamos falar sobre as tags do HTML5

Até a próxima!

Design Responsivo - Introdução

Na publicação anterior falamos sobre a historia do HTML CSS e JavaScript, com ela vimos a evolução a varios acontecimentos para chegarmos neste post RWD.

Se não viu, da uma olhada no post anterior


Um pouco mais de história, bem breve!

Maio de 2010, Ethan Marcotte faz uma publicação que iria mudar a forma filosófica de pensar Web e do desenvolvimento de Layouts.

Ele começa sua publicação com a seguinte frase:


"O controle que os designers tem no meio de impressão e muitas vezes desejam no meio da web é simplesmente uma função da limitação da página impressa. Devemos adotar o fato de que a web não possui as mesmas limitações  e devemos aceitar o refluxo e o fluxo das coisas"

John Allsopp, "A Dao of Web Design"





Uma coisa que devemos mudar em nossos conceitos antes de continuarmos é que Responsivo não quer dizer apenas que devemos adaptar um layout, "Faz caber ai!", vai mais longe do que isso. Ele deve deixar de fácil uso toda a área visual do site, ser renderizado de forma que acomode o conteúdo em resposta a todas as características do dispositivo onde ele esta sendo acessado.

Quando falamos Responsive Web Design falamos de:
Viewport, Grid View, Media Queries, Images e Vídeos Flexíveis

Como base para o desenvolvimento vamos utilizar:
HTML5, CSS3 e JavaScript

Nosso alvo: 

Todas os dispositivos, Temos hoje dois conceitos que que não pretendo discutir afundo mas vou apenas trazer um breve resumo, com o meu ponto de vista.


Internet das Coisas (IoT) e Web das Coisas (WoT)



Em poucas palavras, IoT nada mais é que uma extensão da Internet atual, que proporciona aos objetos do dia-a-dia (quaisquer que sejam), mas com capacidade computacional e de comunicação, se conectarem à Internet.




WoT é um termo usado para descrever abordagens, estilos de arquitetura de software e padrões de programação que permitem que objetos do mundo real façam parte da World Wide Web. A WoT fornece uma camada de aplicação que simplifica a criação de aplicativos para a IoT.

IoT é proporcionar uma conexão a internet para todas as coisas e WoT é proporcionar uma aplicação para todas as coisas.
Andre L.P.

Tudo isso torna a vida do Designer (me permita sempre que eu usar a palavra designer, compreender todos aqueles que atuam na criação da aplicação, sejam eles programadores, gestores, designers...) muito mais difícil, não "só um site" ou "só um app", temos que fazer ele estar presente em tudo, e quando digo tudo, é tudo mesmo, tudo que se conecte a internet.

Computadores, Tablets, Celulares, SmartTV, Relógios, Geladeiras, Rádios, Óculos, enfim, uma infinidade de Coisas.

Agora já temos uma base mesmo que simples para entender o que é RWD.

Em meu post inicial coloquei algumas bibliografias, em sua maioria com um conteúdo bem teórico do assunto, pretendo a partir da próxima postagem ser mais prático e dar muitos exemplos de código no decorrer do nosso aprendizado, em caso de duvidas ou sugestões deixe seu comentário.

Até a próxima!

Design Responsivo - História da Web

Tudo deu inicio em 1980 com Tim Bernes-Lee, nesta época ele trabalhava no CERN, uma organização de pesquisa nuclear, ele participava de um projeto chamado Enquire, seu foco era criar hipertextos.

Em 1990: ele notou que poderia passar seu conteúdo de hipertexto na rede através do protocolo TCP/IP a partir disso ele criou o HTTP e uma linguagem para criar hipertexto, o HTML.


Lançamento do HTML 1.0

Em 1991: o primeiro website é lançado e podemos acessa-lo até hoje no site da CERN na página do projeto.


Em 1992: é lançado o navegador MOSAIC, antes dele existiam outros, mas este foi um grande sucesso por mostrar na tela, textos, links e imagens.


Em 1994: surge o Netscape, feito pelos criadores do MOSAIC que sairão da NCSA e fundaram uma empresa.


Em 1995: a Microsoft cria o Internet Explorer, como a partir de 1996 ele já estava nativamente nas versões do Windows, o Netscape foi perdendo usuários e o Internet Explorer assumiu boa parte do mercado.


Lançamento do HTML 2.0, nesta época ele ficou sendo responsabilidade da HTML WORKING GROUP, mas as empresas dos navegadores queriam cada uma fazer seu código de um jeito e não chegavam em uma acordo e em 1995 foi lançado o HTML 3.0, mas desta vez sua responsável era a W3C que seu fundador foi Tim Bernes-Lee, ele e sua equipe seriam responsáveis pelos padrões do HTML.

Em 1996:
Lançamento  do CSS1, do Javascript e do Flash

Em 1997: o Netscape estava quase falido e seus fundadores iniciaram a criação da Mozilla.
Lançamento do HTML 4.0
Em 1998:
Lançamento  do CSS2



Em 1999: foi criado o navegador Mozilla Firefox pela fundação Mozilla.

Em 2002:
O padrão Tableless começa a ser adotado na criação de interfaces

Em 2004:
Lançamento do XHTML, ele era baseado no XML, esta mudança gerou uma preocupação por parte das empresas de Navegadores, sendo assim a Mozilla, Ópera e Apple fundaram a WHATWG que tinha como objetivo evoluir a linguagem HTML independente da direção que a W3C fosse seguir.

Em 2005:
Lançamento do Ajax

Em 2006:
Lançamento da biblioteca jQuery, criada por John Resig

Em 2007:


Lançamento do XHTML 2.0, a WHATWG apresentou uma nova proposta para a W3C que era compatível com a versão 4.0 do HTML, a W3C gostou da proposta e descontinuou o XHTML, e lançou o HTML 5.0, ainda em faze de estudos pois ele deixou de ser apenas código e seu conceito de semântica e suas atualizações no código tinham que ser implementadas pelas empresas de navegadores.

Em 2008: a Google entra no mercado com o Google Chrome

Em 2010: projeto HTML5 é lançado definitivamente, Steve Jobs emite uma carta pública intitulada "Reflexões sobre o Adobe Flash", onde ele conclui que o desenvolvimento do HTML5 tornaria o Adobe Flash não mais necessário.


Evolução do Layout Web

Com a evolução dos navegadores e da linguagem HTML foram surgindo novas, linguagens, metodologias e práticas de criação para web.

CSS, ele faz toda a interface do site, suas medidas cores a alinhamento, faz a mágica acontecer.

Ajax, que nos auxiliou no carregamento de conteúdo da página sem a necessidade de ficar recarregando a mesma, podíamos então utilizar um XML para armazenar dados e interagir com ele no tempo de execução da página.

jQuery, uma biblioteca JavaScript fantástica que facilita muito nossa vida ao criar funções e métodos em JavaScript para qualquer que seja a situação.

E também surgiram ferramentas conceituais como Grids, Tableless, conceitos de Fluídez e Redimensionamento de conteúdo entre tantos outros.




O nosso foco daqui para frente é falar e aprender sobre tudo que diz respeito a RESPONSIVIDADE, agora que já sabemos como chegamos até aqui, quero junto com vocês aprender como criar uma boa programação e um bom design para meus clientes e projetos.


Até a próxima publicação!

Design Responsivo - Apresentação

Hoje darei início a uma sequência de 11 posts sobre Design Responsivo.

Estes posts têm como objetivo ensinar este conceito para os que ainda não conhecem e aprimorar o trabalho daqueles que já estão atuando como designer.

Vou utilizar como base meus conhecimentos obtidos em mais de 18 anos trabalhando com Web, alguns anos como Professor na área e alguns vários livros e autores que mudaram minha forma de ver este mundo do Design.

Tenho muitas pessoas a agradecer pelo que tenho e sou hoje, familiares, amigos, colegas de trabalho, mas vou ressaltar duas pessoas que me motivaram a estudar e trabalhar com Desenvolvimento e Design para Web, isso lá atrás em 95 e 2002:

Paulinho , que me deu este apelido de Webdre, e quando eu era criança, sempre achava incrível tudo o que eu fazia e me propunha novos desafios.

Davi Fontebasso Marques de Almeida, meu professor, amigo e atualmente colega de trabalho, mediamos juntos no SENAC São Paulo e aprendi muito com ele quando ele foi meu professor e hoje aprendo muito com ele como parceiros de trabalho.




Índice:



Segue abaixo algumas bibliografias e autores que vão nortear boa parte de minhas postagens:


Toda semana um novo post, em breve, post: Tags HTML5

Repositório no GitHub - > https://goo.gl/G43jH1
Canal no Youtube - > https://goo.gl/QV2Msh

Para os curiosos querendo um pouco mais, deem uma lida nos links e livros acima, garanto que será um aprendizado grande
OBS: Este post será atualizado no decorrer das publicações.

Pague com o Google


A partir de segunda-feira (23 de outubro), uma nova solução da Google está chegou para permitir que os consumidores tenham mais facilidade na hora de pagar suas compras online.

O funcionamento é simples: basta entrar em um site ou app compatível, tocar no botão “Pagar com Google” e autorizar a transação.



Alguns dos parceiros aqui no Brasil são: Peixe Urbano, iFood, Hotel Urbano e Magazine Luiza; além de já haver a informação de que Groupon, Netshoes e vários outros estão para receber a novidade em breve.

Se você é desenvolvedor, pode implementar a API com apenas algumas linhas de código, e é grátis — não cobramos taxas de transação, conforme explicação da  empresa.

Turma Nova: Web Design

Começou no dia 02/10/2017 mais uma turma de Web Design do SENAC ITU, com o objetivo de formar profissionais com competências para atuar e intervir em seu campo de trabalho.


O web designer trata do projeto visual e funcional de um site, considerando como referência as necessidades do cliente e o público-alvo a ser atingido, utilizando técnicas de planejamento, composição visual e criatividade. As estratégias adotadas por esse profissional têm o intuito de atrair a atenção do usuário, valorizar o produto exposto e facilitar a utilização do sistema.

Parabéns pessoal, tenham um ótimo curso, acredito que nossos encontros serão impressionantes.