Criar site para celular
Fala galerinha, beleza?
O tutorial hoje vai ser punk, se preparem em!
Antes começar algo técnico e difícil pra quem não faz sites, vou passar uma opção mais simples...
Você pode recorrer ao site do google, que ajuda você a montar seu site móvel!
Acessando http://www.gomobrasil.com.br, você encontrará uma página que esclarece alguns aspectos dos sites móveis, porque ter um site móvel, você pode testar seu site, para ver se está nos padrões aceitáveis para celulares(velocidade, se está escalável à tela, interações touch, entre outras coisas).
Ao procurar nesse site por um desenvolvedor você acha o link do próprio Google: http://www.google.com/intl/pt-BR_ALL/sites/help/mobile-landing-pages/mlpb.html
Como podemos ver já pelo link, isso ajuda você a fazer uma "landing page" mas afinal o que é isso?
É a página que usuário irá visualizar assim que entrar no seu site, é a página inicial...
Só que no caso é uma versão pra celular, você tem que focar nas coisas mais importantes que você tem a oferecer ao usuário, você encontra além do site do google, outros sites que fazem esse tipo de landing page, ajudando que não entende muito para fazer a página por HTML.
Bom, mas se os modelos prontos não lhe agradam, sinto informar, que ou você paga alguém pra fazer isso pra você, ou você terá que se enfurnar em códigos de fonte HTML, procurando sites para celular com menus parecidos para intender o funcionamento(caso não tenha experiência)...
Se você já tiver experiência a minha dica principal é, apostar em divs e css, não esquecer de trabalhar preferencialmente com porcentagens, para que se adeque a tela do celular, tentar não colocar muitos elementos clicáveis na mesma linha, colocar elementos fáceis de manusear(as pessoas estarão usando touch, não mouse, como você!), isso tudo é o lado de layout, você deve se atentar também ao conteúdo, isso é, fazer com que o site móvel consiga exibir a mesma atualização que o normal, isso parece simples, mas se for em html, sem uma linguagem server-side(ASP,PHP), você terá que recorrer a muito javascript, feeds, etc...
Me inspirei o site móvel do facebook pra desenvolver o exemplo que vou mostrar à vocês agora.
Para acessar o site móvel ao invés de colocar www. , você coloca m. , se o site tiver um site móvel você será redirecionado para ele, mesmo estando em um computador.
Bom, vamos ao meu exemplo, não vou explicar muito, é mais pra vocês verem como é possível fazer do 0, sem utilizar ferramentas na internet pra fazer páginas pra vocês.
Imagem de como ele ficou +/-, executei pelo pc pra tirar a print, no celular em portrait(celular deitado) ficou bem melhor, mas dá pra ter uma idéia...
Salvei o arquivo com o nome de meusite.htm, abaixo o conteúdo do mesmo:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head title="Bem-vindo ao Meu site">
<title>Bem-vindo ao Meu site</title>
<meta name="description" content="Meu site ajuda todo mundo a resolver seus problemas, venha vê-lo também!" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="referrer" content="default" id="meta_referrer" />
<noscript>
<meta http-equiv="X-Frame-Options" content="deny" />
</noscript>
<style>
body{
background:#000000;
color:#FFFFFF;
margin:0px;
padding:0px;
line-height:18px;
}
#viewport{
overflow:hidden;
width:100%;
}
#barra_topo{
width:100%;
background: #E6E6E6;
background: -moz-linear-gradient(top, #E6E6E6 0%, #CCCCCC 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E6E6E6), color-stop(100%,#CCCCCC));
background: -webkit-linear-gradient(top, #E6E6E6 0%,#CCCCCC 100%);
background: -o-linear-gradient(top, #E6E6E6 0%,#CCCCCC 100%);
background: -ms-linear-gradient(top, #E6E6E6 0%,#CCCCCC 100%);
background: linear-gradient(to bottom, #E6E6E6 0%,#CCCCCC 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E6E6E6', endColorstr='#CCCCCC',GradientType=0 );
line-height:43px;
font-size:24px;
font-weight:bold;
text-align:center;
color:#555555;
text-shadow:0 -1px 0 rgba(0, 0, 0, .35);
}
#menu{
width:100%;
background: #555555;
background: -moz-linear-gradient(top, #555555 0%, #222222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555555), color-stop(100%,#222222));
background: -webkit-linear-gradient(top, #555555 0%,#222222 100%);
background: -o-linear-gradient(top, #555555 0%,#222222 100%);
background: -ms-linear-gradient(top, #555555 0%,#222222 100%);
background: linear-gradient(to bottom, #555555 0%,#222222 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#222222',GradientType=0 );
line-height:35px;
text-align:center;
}
#menu span, #menu a:link, #menu a:hover, #menu a:visited{
font-size:18px;
text-decoration:none;
color:#FFFFFF;
}
#pesquisar{
max-width:300px;
height:30px;
overflow:hidden;
margin:0 auto;
margin-top:4px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid rgba(0, 0, 0, .35);
}
#pesquisar form{
margin:0px;
padding:0px;
}
#pesquisar input{
float:left;
padding:0px;
border:0px;
margin:0px;
width:200px;
line-height:30px;
font-size:21px;
}
#pesquisar button{
float:left;
padding:0px;
border:0px;
margin:0px;
width:100px;
background: #E6E6E6;
background: -moz-linear-gradient(top, #E6E6E6 0%, #CCCCCC 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E6E6E6), color-stop(100%,#CCCCCC));
background: -webkit-linear-gradient(top, #E6E6E6 0%,#CCCCCC 100%);
background: -o-linear-gradient(top, #E6E6E6 0%,#CCCCCC 100%);
background: -ms-linear-gradient(top, #E6E6E6 0%,#CCCCCC 100%);
background: linear-gradient(to bottom, #E6E6E6 0%,#CCCCCC 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E6E6E6', endColorstr='#CCCCCC',GradientType=0 );
line-height:30px;
font-size:24px;
font-weight:bold;
text-align:center;
color:#555555;
text-shadow:0 -1px 0 rgba(0, 0, 0, .35);
}
#principal{
clear:both;
}
#imagens{
text-align:center;
}
#imagens a:link, #imagens a:visited, #imagens a:hover{
text-decoration:none;
}
#imagens img{
margin:2px;
background:#FFFFFF;
padding:5px;
border:1px solid #CCCCCC;
vertical-align:middle;
}
</style>
</head>
<body>
<div id="viewport">
<h1 style="display:block;height:0;overflow:hidden;position:absolute;width:0">Meu Site</h1>
<div id="barra_topo">
Meu Site
</div>
<div id="menu">
<span>
<b>Inicial</b>
<span role="separator" aria-hidden="true">·</span>
<a href="#">Produtos</a>
<span role="separator" aria-hidden="true">·</span>
<a href="#">Contato</a>
<span role="separator" aria-hidden="true">·</span>
<a href="#">Mais…</a>
</span>
</div>
<div id="pesquisar">
<form method="post" action="#">
<input autocorrect="off" autocapitalize="off" name="email" placeholder="Procurar produto" value="" type="text"/>
<button type="submit" value="Buscar" role="button">Buscar</button>
</form>
</div>
<div id="principal" tabindex="0">
<div id="imagens">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif6BUXh8YYC_UDTkzsSiSAxWq731Jo25LUmO-2C7V3R2fgP1NVUjqboWXsbw_N039lbmMqw06ev0S7cYQzULIDjCIYAMnh3rbwRH1PhUneZyOI75kUGQv4yaIiIH6dunsuk3ifZFGq8Ok/s1600/Jun-Mitani-Origami-3.jpg">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif6BUXh8YYC_UDTkzsSiSAxWq731Jo25LUmO-2C7V3R2fgP1NVUjqboWXsbw_N039lbmMqw06ev0S7cYQzULIDjCIYAMnh3rbwRH1PhUneZyOI75kUGQv4yaIiIH6dunsuk3ifZFGq8Ok/s200/Jun-Mitani-Origami-3.jpg" />
</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW14Lkwq15Na_kQYFHxYqfa86F-gOBfL5bR1PvpIu56DZU2t3HZBTtm-OcmM7m7RnEKwdQSc2tOFWGKzpOentld2-2DZ4pI8MxiOsKKJnULznVoHLXHHQbYZyli8ZFtQ30vfT_WFT14c4/s1600/jun-mitani-origami-1.jpg">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW14Lkwq15Na_kQYFHxYqfa86F-gOBfL5bR1PvpIu56DZU2t3HZBTtm-OcmM7m7RnEKwdQSc2tOFWGKzpOentld2-2DZ4pI8MxiOsKKJnULznVoHLXHHQbYZyli8ZFtQ30vfT_WFT14c4/s200/jun-mitani-origami-1.jpg" />
</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfQkuKZ0ByOhkChwFlNy2fPpCeiuhhHX9QckWf6ajxDZdBMVe1-gpj0IeO9DSjG2hKQKzJ5qWZHZ71mkEuCW0-YMExVjqRKQuuSp56gyeIRTiGSc1vp0-BZU0gknmWYaoG359-czYGPlc/s1600/jun-mitani-origami-7.jpg">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfQkuKZ0ByOhkChwFlNy2fPpCeiuhhHX9QckWf6ajxDZdBMVe1-gpj0IeO9DSjG2hKQKzJ5qWZHZ71mkEuCW0-YMExVjqRKQuuSp56gyeIRTiGSc1vp0-BZU0gknmWYaoG359-czYGPlc/s200/jun-mitani-origami-7.jpg" />
</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIZMlYQekfZJF_RqJPnsWCWGVeomZsTSvY6x9qLTtsQ-4LkeHycYX64qJ52wuRunU23KI4tw4vq9sCzAdu4HAQypNxxTw321D1CXaL5-Qv3vmgTpr6I6VLHyfXDmk6A90UAGWH77IRTCk/s1600/origami-tyranossauro.jpg">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIZMlYQekfZJF_RqJPnsWCWGVeomZsTSvY6x9qLTtsQ-4LkeHycYX64qJ52wuRunU23KI4tw4vq9sCzAdu4HAQypNxxTw321D1CXaL5-Qv3vmgTpr6I6VLHyfXDmk6A90UAGWH77IRTCk/s200/origami-tyranossauro.jpg" />
</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2aW_OINqBLbW-nmK3dUswgrBxTfYykjKMsXtdJEcefOnaR5ArkIsCWav2sRssFuJjHj1hTBM9aXhn0lo9RWY15YhL8rKFyG-JbOT6pL6NHrl43l8zlcysGoZxWXzpokgqxhmaWD_Yz5E/s1600/origami02.jpg">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2aW_OINqBLbW-nmK3dUswgrBxTfYykjKMsXtdJEcefOnaR5ArkIsCWav2sRssFuJjHj1hTBM9aXhn0lo9RWY15YhL8rKFyG-JbOT6pL6NHrl43l8zlcysGoZxWXzpokgqxhmaWD_Yz5E/s200/origami02.jpg" />
</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbwlCdpQ54_HLr_BcJt04V2N-LGh1nF75rCZ2YkG9MgxxGF936hNzzZ2CJoXH4yHCaK6O6VrVc4RlQXMsL9ZeGiPf7OwHhhSYTWDPHhfjXVRSJTPtNLa36JTU4c1RLcY6zLCDWfTw3Yd4/s1600/origami_021.jpg">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbwlCdpQ54_HLr_BcJt04V2N-LGh1nF75rCZ2YkG9MgxxGF936hNzzZ2CJoXH4yHCaK6O6VrVc4RlQXMsL9ZeGiPf7OwHhhSYTWDPHhfjXVRSJTPtNLa36JTU4c1RLcY6zLCDWfTw3Yd4/s200/origami_021.jpg" />
</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1EfiHkW2pjG7QcOG-YYFnu9_BfXaP8KLSN2AA5buD8r8CsHmype5bh291Ml_I2KNqFvDuCbu2fmmeHCSPmsR0MEaiMEh2UTFyvZaNsEFEIt40eRNHtr766UnlzYcUr3YkGImR3NnYvY/s1600/origami_kamiya2.jpg">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1EfiHkW2pjG7QcOG-YYFnu9_BfXaP8KLSN2AA5buD8r8CsHmype5bh291Ml_I2KNqFvDuCbu2fmmeHCSPmsR0MEaiMEh2UTFyvZaNsEFEIt40eRNHtr766UnlzYcUr3YkGImR3NnYvY/s200/origami_kamiya2.jpg" />
</a>
</div>
</div>
<div id="rodape" align="center">
Todos direitos reservados.
</div>
</div>
</body>
</html>
Eu testei no meu Android, para testar, você tem que salvar o arquivo(cola tudo isso no bloco de notas, vai em salvar e salva como meusite.htm e pronto!), transferir pro celular, no caso eu armazenei no cartão, por isso no link abaixo você vai ver sdcard...
Como tinha imagens da internet ao abrir pelo html viwer do celular não aparecia, para aparecer corretamente, bem como funcionar o javascript tem um macete, você tem que ir no navegador e digitar tuuuuuudo isso lá: content://com.android.htmlfileprovider/sdcard/PASTA/ARQUIVO.HTM assim você conseguirá visualizar o site como se ele estivesse na internet já.
Gostou do resultado? Quer entender um pouco mais do código?
Vou dar uma ajudinha pra vocês...
O tutorial hoje vai ser punk, se preparem em!
Antes começar algo técnico e difícil pra quem não faz sites, vou passar uma opção mais simples...
Você pode recorrer ao site do google, que ajuda você a montar seu site móvel!
Acessando http://www.gomobrasil.com.br, você encontrará uma página que esclarece alguns aspectos dos sites móveis, porque ter um site móvel, você pode testar seu site, para ver se está nos padrões aceitáveis para celulares(velocidade, se está escalável à tela, interações touch, entre outras coisas).
Ao procurar nesse site por um desenvolvedor você acha o link do próprio Google: http://www.google.com/intl/pt-BR_ALL/sites/help/mobile-landing-pages/mlpb.html
Como podemos ver já pelo link, isso ajuda você a fazer uma "landing page" mas afinal o que é isso?
É a página que usuário irá visualizar assim que entrar no seu site, é a página inicial...
Só que no caso é uma versão pra celular, você tem que focar nas coisas mais importantes que você tem a oferecer ao usuário, você encontra além do site do google, outros sites que fazem esse tipo de landing page, ajudando que não entende muito para fazer a página por HTML.
Bom, mas se os modelos prontos não lhe agradam, sinto informar, que ou você paga alguém pra fazer isso pra você, ou você terá que se enfurnar em códigos de fonte HTML, procurando sites para celular com menus parecidos para intender o funcionamento(caso não tenha experiência)...
Se você já tiver experiência a minha dica principal é, apostar em divs e css, não esquecer de trabalhar preferencialmente com porcentagens, para que se adeque a tela do celular, tentar não colocar muitos elementos clicáveis na mesma linha, colocar elementos fáceis de manusear(as pessoas estarão usando touch, não mouse, como você!), isso tudo é o lado de layout, você deve se atentar também ao conteúdo, isso é, fazer com que o site móvel consiga exibir a mesma atualização que o normal, isso parece simples, mas se for em html, sem uma linguagem server-side(ASP,PHP), você terá que recorrer a muito javascript, feeds, etc...
Me inspirei o site móvel do facebook pra desenvolver o exemplo que vou mostrar à vocês agora.
Para acessar o site móvel ao invés de colocar www. , você coloca m. , se o site tiver um site móvel você será redirecionado para ele, mesmo estando em um computador.
Bom, vamos ao meu exemplo, não vou explicar muito, é mais pra vocês verem como é possível fazer do 0, sem utilizar ferramentas na internet pra fazer páginas pra vocês.
Imagem de como ele ficou +/-, executei pelo pc pra tirar a print, no celular em portrait(celular deitado) ficou bem melhor, mas dá pra ter uma idéia...
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head title="Bem-vindo ao Meu site">
<title>Bem-vindo ao Meu site</title>
<meta name="description" content="Meu site ajuda todo mundo a resolver seus problemas, venha vê-lo também!" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<meta name="referrer" content="default" id="meta_referrer" />
<noscript>
<meta http-equiv="X-Frame-Options" content="deny" />
</noscript>
<style>
body{
background:#000000;
color:#FFFFFF;
margin:0px;
padding:0px;
line-height:18px;
}
#viewport{
overflow:hidden;
width:100%;
}
#barra_topo{
width:100%;
background: #E6E6E6;
background: -moz-linear-gradient(top, #E6E6E6 0%, #CCCCCC 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E6E6E6), color-stop(100%,#CCCCCC));
background: -webkit-linear-gradient(top, #E6E6E6 0%,#CCCCCC 100%);
background: -o-linear-gradient(top, #E6E6E6 0%,#CCCCCC 100%);
background: -ms-linear-gradient(top, #E6E6E6 0%,#CCCCCC 100%);
background: linear-gradient(to bottom, #E6E6E6 0%,#CCCCCC 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E6E6E6', endColorstr='#CCCCCC',GradientType=0 );
line-height:43px;
font-size:24px;
font-weight:bold;
text-align:center;
color:#555555;
text-shadow:0 -1px 0 rgba(0, 0, 0, .35);
}
#menu{
width:100%;
background: #555555;
background: -moz-linear-gradient(top, #555555 0%, #222222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555555), color-stop(100%,#222222));
background: -webkit-linear-gradient(top, #555555 0%,#222222 100%);
background: -o-linear-gradient(top, #555555 0%,#222222 100%);
background: -ms-linear-gradient(top, #555555 0%,#222222 100%);
background: linear-gradient(to bottom, #555555 0%,#222222 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#555555', endColorstr='#222222',GradientType=0 );
line-height:35px;
text-align:center;
}
#menu span, #menu a:link, #menu a:hover, #menu a:visited{
font-size:18px;
text-decoration:none;
color:#FFFFFF;
}
#pesquisar{
max-width:300px;
height:30px;
overflow:hidden;
margin:0 auto;
margin-top:4px;
-moz-border-radius: 5px;
border-radius: 5px;
border:1px solid rgba(0, 0, 0, .35);
}
#pesquisar form{
margin:0px;
padding:0px;
}
#pesquisar input{
float:left;
padding:0px;
border:0px;
margin:0px;
width:200px;
line-height:30px;
font-size:21px;
}
#pesquisar button{
float:left;
padding:0px;
border:0px;
margin:0px;
width:100px;
background: #E6E6E6;
background: -moz-linear-gradient(top, #E6E6E6 0%, #CCCCCC 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E6E6E6), color-stop(100%,#CCCCCC));
background: -webkit-linear-gradient(top, #E6E6E6 0%,#CCCCCC 100%);
background: -o-linear-gradient(top, #E6E6E6 0%,#CCCCCC 100%);
background: -ms-linear-gradient(top, #E6E6E6 0%,#CCCCCC 100%);
background: linear-gradient(to bottom, #E6E6E6 0%,#CCCCCC 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#E6E6E6', endColorstr='#CCCCCC',GradientType=0 );
line-height:30px;
font-size:24px;
font-weight:bold;
text-align:center;
color:#555555;
text-shadow:0 -1px 0 rgba(0, 0, 0, .35);
}
#principal{
clear:both;
}
#imagens{
text-align:center;
}
#imagens a:link, #imagens a:visited, #imagens a:hover{
text-decoration:none;
}
#imagens img{
margin:2px;
background:#FFFFFF;
padding:5px;
border:1px solid #CCCCCC;
vertical-align:middle;
}
</style>
</head>
<body>
<div id="viewport">
<h1 style="display:block;height:0;overflow:hidden;position:absolute;width:0">Meu Site</h1>
<div id="barra_topo">
Meu Site
</div>
<div id="menu">
<span>
<b>Inicial</b>
<span role="separator" aria-hidden="true">·</span>
<a href="#">Produtos</a>
<span role="separator" aria-hidden="true">·</span>
<a href="#">Contato</a>
<span role="separator" aria-hidden="true">·</span>
<a href="#">Mais…</a>
</span>
</div>
<div id="pesquisar">
<form method="post" action="#">
<input autocorrect="off" autocapitalize="off" name="email" placeholder="Procurar produto" value="" type="text"/>
<button type="submit" value="Buscar" role="button">Buscar</button>
</form>
</div>
<div id="principal" tabindex="0">
<div id="imagens">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif6BUXh8YYC_UDTkzsSiSAxWq731Jo25LUmO-2C7V3R2fgP1NVUjqboWXsbw_N039lbmMqw06ev0S7cYQzULIDjCIYAMnh3rbwRH1PhUneZyOI75kUGQv4yaIiIH6dunsuk3ifZFGq8Ok/s1600/Jun-Mitani-Origami-3.jpg">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif6BUXh8YYC_UDTkzsSiSAxWq731Jo25LUmO-2C7V3R2fgP1NVUjqboWXsbw_N039lbmMqw06ev0S7cYQzULIDjCIYAMnh3rbwRH1PhUneZyOI75kUGQv4yaIiIH6dunsuk3ifZFGq8Ok/s200/Jun-Mitani-Origami-3.jpg" />
</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW14Lkwq15Na_kQYFHxYqfa86F-gOBfL5bR1PvpIu56DZU2t3HZBTtm-OcmM7m7RnEKwdQSc2tOFWGKzpOentld2-2DZ4pI8MxiOsKKJnULznVoHLXHHQbYZyli8ZFtQ30vfT_WFT14c4/s1600/jun-mitani-origami-1.jpg">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW14Lkwq15Na_kQYFHxYqfa86F-gOBfL5bR1PvpIu56DZU2t3HZBTtm-OcmM7m7RnEKwdQSc2tOFWGKzpOentld2-2DZ4pI8MxiOsKKJnULznVoHLXHHQbYZyli8ZFtQ30vfT_WFT14c4/s200/jun-mitani-origami-1.jpg" />
</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfQkuKZ0ByOhkChwFlNy2fPpCeiuhhHX9QckWf6ajxDZdBMVe1-gpj0IeO9DSjG2hKQKzJ5qWZHZ71mkEuCW0-YMExVjqRKQuuSp56gyeIRTiGSc1vp0-BZU0gknmWYaoG359-czYGPlc/s1600/jun-mitani-origami-7.jpg">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfQkuKZ0ByOhkChwFlNy2fPpCeiuhhHX9QckWf6ajxDZdBMVe1-gpj0IeO9DSjG2hKQKzJ5qWZHZ71mkEuCW0-YMExVjqRKQuuSp56gyeIRTiGSc1vp0-BZU0gknmWYaoG359-czYGPlc/s200/jun-mitani-origami-7.jpg" />
</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIZMlYQekfZJF_RqJPnsWCWGVeomZsTSvY6x9qLTtsQ-4LkeHycYX64qJ52wuRunU23KI4tw4vq9sCzAdu4HAQypNxxTw321D1CXaL5-Qv3vmgTpr6I6VLHyfXDmk6A90UAGWH77IRTCk/s1600/origami-tyranossauro.jpg">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIZMlYQekfZJF_RqJPnsWCWGVeomZsTSvY6x9qLTtsQ-4LkeHycYX64qJ52wuRunU23KI4tw4vq9sCzAdu4HAQypNxxTw321D1CXaL5-Qv3vmgTpr6I6VLHyfXDmk6A90UAGWH77IRTCk/s200/origami-tyranossauro.jpg" />
</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2aW_OINqBLbW-nmK3dUswgrBxTfYykjKMsXtdJEcefOnaR5ArkIsCWav2sRssFuJjHj1hTBM9aXhn0lo9RWY15YhL8rKFyG-JbOT6pL6NHrl43l8zlcysGoZxWXzpokgqxhmaWD_Yz5E/s1600/origami02.jpg">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2aW_OINqBLbW-nmK3dUswgrBxTfYykjKMsXtdJEcefOnaR5ArkIsCWav2sRssFuJjHj1hTBM9aXhn0lo9RWY15YhL8rKFyG-JbOT6pL6NHrl43l8zlcysGoZxWXzpokgqxhmaWD_Yz5E/s200/origami02.jpg" />
</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbwlCdpQ54_HLr_BcJt04V2N-LGh1nF75rCZ2YkG9MgxxGF936hNzzZ2CJoXH4yHCaK6O6VrVc4RlQXMsL9ZeGiPf7OwHhhSYTWDPHhfjXVRSJTPtNLa36JTU4c1RLcY6zLCDWfTw3Yd4/s1600/origami_021.jpg">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbwlCdpQ54_HLr_BcJt04V2N-LGh1nF75rCZ2YkG9MgxxGF936hNzzZ2CJoXH4yHCaK6O6VrVc4RlQXMsL9ZeGiPf7OwHhhSYTWDPHhfjXVRSJTPtNLa36JTU4c1RLcY6zLCDWfTw3Yd4/s200/origami_021.jpg" />
</a>
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1EfiHkW2pjG7QcOG-YYFnu9_BfXaP8KLSN2AA5buD8r8CsHmype5bh291Ml_I2KNqFvDuCbu2fmmeHCSPmsR0MEaiMEh2UTFyvZaNsEFEIt40eRNHtr766UnlzYcUr3YkGImR3NnYvY/s1600/origami_kamiya2.jpg">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhA1EfiHkW2pjG7QcOG-YYFnu9_BfXaP8KLSN2AA5buD8r8CsHmype5bh291Ml_I2KNqFvDuCbu2fmmeHCSPmsR0MEaiMEh2UTFyvZaNsEFEIt40eRNHtr766UnlzYcUr3YkGImR3NnYvY/s200/origami_kamiya2.jpg" />
</a>
</div>
</div>
<div id="rodape" align="center">
Todos direitos reservados.
</div>
</div>
</body>
</html>
Eu testei no meu Android, para testar, você tem que salvar o arquivo(cola tudo isso no bloco de notas, vai em salvar e salva como meusite.htm e pronto!), transferir pro celular, no caso eu armazenei no cartão, por isso no link abaixo você vai ver sdcard...
Como tinha imagens da internet ao abrir pelo html viwer do celular não aparecia, para aparecer corretamente, bem como funcionar o javascript tem um macete, você tem que ir no navegador e digitar tuuuuuudo isso lá: content://com.android.htmlfileprovider/sdcard/PASTA/ARQUIVO.HTM assim você conseguirá visualizar o site como se ele estivesse na internet já.
Gostou do resultado? Quer entender um pouco mais do código?
Vou dar uma ajudinha pra vocês...
Começando com as tags html né.
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
Essa tag localizada entre as tags <head></head> faz com que o conteúdo carregue na resolução do celular, evitando com que o celular fique querendo diminuir a página, fique mostrando a opção de zoom, enfim, aquela chatice, que deixa o site muito ruim de ver no celular.
<h1 style="display:block;height:0;overflow:hidden;position:absolute;width:0">Meu Site</h1>
Ajuda a identificar seu site em buscadores, as tags h1, são muito consideradas nos buscadores...
As tags <h1></h1> geralmente mostram as letras muito grandes, por isso foi usado um style nessa tag, que passou a exibir nada.
<div id="menu"><span><b>Inicial</b> <span role="separator" aria-hidden="true">·</span> <a href="#">Produtos</a> <span role="separator" aria-hidden="true">·</span> <a href="#">Contato</a> <span role="separator" aria-hidden="true">·</span> <a href="#">Mais…</a></span></div>
Copiei +/- essa estrutura de menu do face, eles usam esse separador, acho interessante, pois é simples, ocupa pouco espaço e cumpre bem o papel de separar os itens do menu, porém você pode fazer diferente também. A tag span foi colocada para personalizar melhor no css, mas na verdade não era necessária. Porém os buscadores também parecem gostar dessa tag, então pode ser bom usá-la às vezes. Além disso elas também tem funções específicas que não cabe aqui explicar.
<input autocorrect="off" autocapitalize="off" name="email" placeholder="Procurar produto" value="" type="text"/>
Salientando alguns atributos que ainda não conhecia, como o autocorrect, que acho que impede o celular de ficar dando "dica" do que digitar, o autocapitalize, acho que desativa o celular de ficar colocando letra maiúscula e o placeholder é aquela letra que fica meio apagada e quando você clica e começa a digitar no campo ela some, antes fazia isso com javascript e dava uma trabalheira...rs
<div id="principal" tabindex="0">
O tabindex 0 é pra mostrar que é o campo inicial da página, no caso de um campo de input, isso pode fazer com que usuário ao entrar seja levado direto ao input para inserir os dados(mas nem sempre funciona).
Agora o CSS.
margin:0px
Isso fala pro navegador não colocar margens ao elemento, isso é essencial na tag body, já que muitos navegadores colocam uma margem automática, e isso deixará sua div com uma lateral branca, apesar disso não afetar o entendimento do usuário, afeta o layout, deixando o site diferente do que você planejou.
line-height:18px;
Coloquei essa altura de linha no CSS logo no body, pra não ter que ficar repetindo, depois nos menus e coisas que achei que mereciam uma letra maior eu aumentei. 18px é um bom tamanho porque dá um espaço entre as linhas(não deu pra perceber muito isso nesse modelo que fiz) e isso facilita a leitura e navegação do usuário...
#viewport{
overflow:hidden;
width:100%;
}
A div com id viewport é como se fosse o conteúdo navegável pelo celular, então ela tem que se adequar a largura dele(width:100%), e caso algum elemento dentro dela extrapole essa largura ela simplesmente o ocultará(overflow:hidden).
#barra_topo e #menu
No css esses dois elementos são parecidos, pois tem um background com gradient, um line-height e fontes diferentes do resto do site(body). Creio que sabendo o mínimo de inglês você consiga saber o que cada estilo faz no elemento, caso tenha alguma dúvida procure no google sobre o comando que não sabe o significado. Mas o principal nesses dois é o width:100%, ele faz com que o título do site e o menu ocupem 100% da largura da tela do celular.
#pesquisar{
max-width:300px;/* Determina a largura máxima que o elemento pode ter */
height:30px;/* Determina a altura que o elemento tem, podendo ser aumentada se for necessário */
overflow:hidden;/* Tudo que ultrapassar os limites do elemento serão ocultados */
margin:0 auto;/* Faz com que o elemento mesmo não sendo 100% da tela, fique no centro dela */
margin-top:4px;/* Margem no topo do elemento */
-moz-border-radius: 5px;/* O elemento será arredondado nos cantos, deve ser usado junto com overflow:hidden */
border-radius: 5px;/* O elemento será arredondado nos cantos, deve ser usado junto com overflow:hidden */
border:1px solid rgba(0, 0, 0, .35);/* Faz uma borda no elemento */
}
Não vou explicar o css do input da pesquisa e o botão de buscar, porque acho que não vai agregar muita coisa no tutorial...
#principal{
clear:both;/* Clear, porque tava usando float:left no input e botão do form */
}
#imagens{
text-align:center;/* Alinhar texto e imagens ao centro do div */
}
#imagens a:link, #imagens a:visited, #imagens a:hover{
text-decoration:none;/* Tira o underline que fica embaixo do texto */
}
#imagens img{
margin:2px;/* Margem de 2px em volta de toda imagem dentro da div */
background:#FFFFFF;/* Atrás da imagem será fundo branco */
padding:5px;/* Isso faz uma espécie de moldura pra imagem, mostrando o fundo branco */
border:1px solid #CCCCCC;/* Uma borda para finalizar */
vertical-align:middle;/* Isso faz com que imagens de alturas menores, fiquem centralizadas verticalmente perante as com altura maior, sem isso elas ficariam "no chão" */
}
Bom galera, por hoje é isso!
Espero ter ajudado, em caso de dúvidas é só falar.
Se quiser me contratar também pode deixar email aí que entro em contato...haha :P
Valew, brother. Muito obrigado pelos esclarecimentos!
ResponderExcluirDicas excelentes! Contratei uma empresa (Agência Uruz) para criação de um blog pessoal, gostei muito do trabalho. Mas, economizar é tudo rsrs... Vou tentar fazer um eu mesmo, apenas para celular, espero que dê certo.
ResponderExcluir