Tag: webdesign

MIHTool: Faça os seus aplicativos Web para iOS acontecer

mihtool-logo

Ta aí uma aplicação pra você desenvolvedor de aplicativos web para dispositivos com iOS ( iPhone, iPad, iPod Touch), o MIHTool pode ser sua bala de prata da depuração (Eu poderia falar debug mais eu sou da escola da tropicália).

O que vi como grande diferencial da ferramenta é que você pode inspecionar a sua aplicação diretamente no aparelho em ela deve funcionar, e evitar o clássico “Na minha máquina funciona”, você pode inclusive alterar e ver o resultado na hora, assim como você faz em um firebug da vida.

Eu já tinha essa solução mais com um monte de ferramentas separadas, inclusive o próprio remote debugger weinre, e as vezes é interessante ter uma solução completa em um único lugar, sem contar que é 0800 é só ir na AppStore e Baixar, na faixa, de graça, sem custo adicional como você preferir chamar.

E de fato é muito ruim desenvolver no escuro, com o MIHTool você consegue mudar essa situação e “fazer as coisas acontecerem”, as aspas é por que MIH é de “make it happen”. Então se você desenvolvia pra web e tinha ferramentas como firebug ou developers tools nos browseres web kit a sua disposição você vai se sentir mais confortável.

Na página do desenvolvedor  você pode acompanhar o registro (olha a tropicália aí de novo) de todos os recursos que foram adicionados e erros que por ventura foram corrigidos além de artigos e a documentação para ajudar você a usa-la.

Entrei em contato direto com um dos desenvolvedores da ferramenta e ele foi bastante atencioso, e você pode ter também achando ele no Google Plus Unbug Lee não vou colocar e-mail aqui porque é deselegante e muitos spammers se aproveitariam disso.

Espero que tenham gostado da dica e até a próxima.

Links:
* Página do Desenvolvedor – http://www.iunbug.com/mihtool
* Aplicativo MIHTools na Apple AppStore – https://itunes.apple.com/us/app/mihtool/id584739126?ls=1&mt=8

Criando um Menu Dropdown com CSS

Se quiser ler esse post em inglês, acesse: http://codepen.io/sheldonled/blog/menu-dropdown-css-3levels

É muito comum ver sites utilizando menu dropdown, mesmo que este tipo de menu seja um pouco difícil de lidar quando vamos pro mundo mobile. Se você quer um menu desses no seu site, siga os passos abaixo e crie seu próprio menu dropdown, utilizando apenas CSS.

Primeiro, defina seus links no HTML, para nosso exemplo, usaremos a tag nav do HTML5

<nav>
	<ul>
		<li><a href="#">Inicio</a></li>
		<li><a href="#">Tutoriais</a>
			<ul>
				<li><a href="#">Php</a></li>
				<li><a href="#">Java</a></li>
				<li><a href="#">SQL</a>
                                     <ul>
                                          <li><a href="#">PostgreSQL</a></li>
                                          <li><a href="#">MySql</a></li>
                                     </ul>
                                </li>
			</ul>
		</li>
		<li><a href="#">Redes Sociais</a>
			<ul>
				<li><a href="#">Facebook</a></li>
				<li><a href="#">Twitter</a></li>
			</ul>
		</li>
		<li><a href="#">Sobre</a></li>
	</ul>
</nav>

Então veja que o mapa do menu ficou da seguinte maneira:

  • Inicio
  • Tutoriais
    • Php
    • Java
    • SQL
      • PostgreSQL
      • MySql
  • Redes Sociais
    • Facebook
    • Twitter
  • Sobre

Agora, visualizando como ficou a hierarquia de links, passamos para o CSS (Lembrando que tudo pode ser recustomizável para adequar ao seu layout):

ul {
    position: absolute;
    margin: 0;
    list-style:none;
}

li {
    display: inline-block;
    padding: 5px 10px;
    position: relative;
}

Setamos a configuração inicial para todas as listas (ul) e seus elementos (li). O position absolute dá uma independência às listas e sublistas. Agora vamos ao estilo-chave do menu

li:hover > ul {
    display: block;
}

Estamos falando para o navegador que, ao passar o mouse sobre um item da lista (li), sua sublista ( >ul) será mostrada (display block). Mas para isso acontecer, precisamos deixa-las invisíveis (display none).

ul ul {
    position: absolute;
    display: none;
    margin: 0;
    padding: 5px 10px;
}
ul ul li {
    display: block;
}

Agora sim, nosso menu já estará funcionando, porém se quiser fazer o terceiro nível funcionar corretamente, é melhor adicionar o estilo abaixo:

ul ul ul {
    position: absolute;
    top: 0;
    left: 100%;
}

O código acima faz o 3º nível do submenu aparecer ao lado do item pai dele. Veja o resultado abaixo.

See the Pen Cfqmb by Sheldon Led (@sheldonled) on CodePen.