Tribo do C.I.

Só mais um blog de informática (só que não)

Review e-book: Beto Chaves – Entre Pipas, Brigadeiros e Internet

janeiro 18th, 2013

beto_chaves_pipas_brigadeiros_internet

Caríssimos leitores, esse é o segundo review sobre e-books, se você ainda não viu o primeiro pode conferir o post Review e-book: Bel Pesce – A Menina do vale, nesse irei vou procurar abordar outros pontos sem deixar de ancorar em alguns tópicos também relevantes aqui.

Dois eventos importantes para a plataforma que eu leio e-books aconteceram nesse meio tempo desde a publicação do ultimo review, o primeiro foi o lançamento iBooks 3 e o lançamento dos Livros na iTunes Brasil embora silencioso o ultimo. Infelizmente eu já tinha terminado a leitura do beto então não interferiu na experiência da leitura do livro. Confira o twit de bebu que fiz quando terminei a leitura.

Bom, vamos ao review de fato.

Conheci o livro por meio de um twit do próprio beto chaves logo após eu publicar que tinha terminado de ler o livro da Bel, acho que pela temática ser parecida ele tenha me encontrado. Estava no meu telefone e tentei baixar o livro, o que não foi liso, precisei baixar no computador e jogar no dispositivo, teve esse ponto negativo no que diz respeito a independência a outros dispositivos.

O livro está disponível somente em PDF e dessa vez eu não tentei converter para epub, por isso, não consegui ler no mesmo ritmo pois a leitura não era tão agradável com os dispositivo de com tela pequena, mais conseguia ler quando estava quietinho com o tempo só pra o livro, acho que seria bem tranquilo em um tablet.

Até o próximo e ultimo review e não deixe de mandar suas próprias impressões sobre a leituras de ebooks, preferencialmente com dispositivos próprios para isso.

Links: 

  • Site oficial do Autor

Criando um Menu Dropdown com CSS

janeiro 10th, 2013

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.

Tribo do C.I.

Tribo do C.I.

Só mais um blog de informática (só que não)