Dica rápida: campo de senha

É muito legal e causa muita confusão aos leigos (bem leigos) preencher o campo de senha em um formulário. Eu já fui professor de idosos e eles sempre ficavam intrigados por digitarem e, na verdade, só aparecer bolinhas na tela. Com a popularização dos smartphones essa prática deve ser repensada.

Não significa que o campo de senha tem que ser abolido, pois ele impede que quem quer que esteja ao seu lado saiba sua senha. No smartphone o campo de senha não é prático por dois motivos básicos:

  • O usuário quase sempre erra o que digita no celular, e não tem como ele checar sua senha.
  • Não é tão seguro assim para o curioso ao seu lado, pois ao pressionar o teclado, a letra aparece na tela por uma fração de segundo antes de virar uma bolinha.

A solução mais simples e mais usada para isso é deixar o campo de senha como está, e incluir uma opção de mostrar a senha. Assim o usuário pode digitar a senha mais à vontade e depois dar uma conferida se digitou corretamente. Essa prática se tornou tão comum que a microsoft a adotou como padrão em todo campo de senha do Windows 8.

Em 2016 eu iniciei uma idéia maluca de criar o projeto #366DailyCode, que consiste em publicar 1 pedaço de código JavaScript por dia (geralmente um problema ou algoritmo conhecido). Isso é assunto para outro post, o fato é que eu tornei essa opção de mostrar a senha o código do dia 14/01/2016. Você pode checá-la em prática abaixo:

See the Pen #366DailyCode #Day14?—?Input type password by Sheldon Led (@sheldonled) on CodePen.

Personalizar página inicial do WordPress

Esse tutorial é fruto de uma frustração, pois ao pesquisar diversas vezes por maneiras de sair do padrão de página inicial do wordpress para ter algo mais personalizado, encontrei informações esparramadas em vários posts, nenhum conteúdo objetivo ou compilado para esse devido fim, portanto resolvi criar esse tutorial, pois talvez possa ajudar outras pessoas.

Se você conhece algum tutorial que ensina esse assunto, por favor cite nos comentários, para que possamos editar esse post com mais links interessantes, dando maior completude na informação a ser passada.

Diferença entre Home e Front Page no WordPress

Quem já desenvolveu ou alterou um tema no wordpress sabe que o arquivo principal é o index.php, e que caso não houver outro arquivo mais específico, na hierarquia, o index.php será executado. Por padrão, o wordpress mostra uma listagem de posts na página inicial, porém existe também a possibilidade de exibir uma página estática, e isso é definido em Configurações > Leitura.

Quando a opção de mostrar posts recentes está marcada, o arquivo procurado pelo wordpress no seu template é o home.php, no entanto, quando a opção de página estática está marcada, o arquivo em questão é o front-page.php. Tendo isso em mente fica mais fácil implementar a página inicial personalizada. Existe uma maneira de verificação fornecida pela API do wordpress: as funções is_home()is_front_page()

Ajustando configuração da página inicial

O primeiro passo da nossa página inicial personalizada então, é setar a configuração no wordpress. No meu caso, eu deixei a opção de página estática marcada. Sendo assim, na pasta do tema, precisamos criar/editar o arquivo front-page.php. Em seguida, definiremos um layout padrão para a página inicial, algo como isso:

Exemplo de Layout

Codificando o front-page.php

O código inicial da nossa página inicial será mais ou menos assim:

<?php get_header(); ?>
	<div id="home-content" class="content-area">
		<div class="banner"></div>
		<div class="boxes">
			<div class="thebox"></div>
			<div class="thebox"></div>
			<div class="thebox"></div>
		</div>
	</div>
<?php get_footer(); ?>

Bom, o slider de banners pode ser muito facilmente configurado através do WP Nivo Slider, portanto não colocarei aqui essa parte, pois o interessante é colocar os 3 widgets logo abaixo.

Adicionando área de widgets

Precisamos adicionar o código que informa ao WordPress as áreas dinâmicas. Edite o arquivo front-page.php, na parte das boxes com o código abaixo

<div class="boxes">
	<div class="thebox first">
	    <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('left_box')) : else : ?>  
	        <p><strong>Widget Pronto</strong></p>  
	        <p>Essa left_box é uma área dinâmica! Adicione widget no painel do Administrador.</p>  
	    <?php endif; ?>  
	</div>
	<div class="thebox">
	    <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('center_box')) : else : ?>  
	        <p><strong>Widget Pronto</strong></p>  
	        <p>Essa center_box é uma área dinâmica! Adicione widget no painel do Administrador.</p> 
	    <?php endif; ?>  
	</div>
	<div class="thebox">
	    <?php if (function_exists('dynamic_sidebar') && dynamic_sidebar('right_box')) : else : ?>  
	        <p><strong>Widget Pronto</strong></p>  
	        <p>Essa right_box é uma área dinâmica! Adicione widget no painel do Administrador.</p> 
	    <?php endif; ?>  
	</div>
	<div class="clear"></div>
</div>

Agora a página inicial já está quase pronta, porém precisamos registrar as áreas dinâmicas, como você provavelmente já deve ter feito com a sidebar. Edite o arquivo functions.php adicionando o código abaixo:

if (function_exists('register_sidebar'))
{
    register_sidebar(array(  
        'name' => 'Left Box',  
        'id'   => 'left_box',  
        'description'   => 'Widget area para primeira caixa de conteúdo da página inicial',  
        'before_widget' => '<div id="%1$s" class="widget %2$s">',  
        'after_widget'  => '</div>',  
        'before_title'  => '<h4>',  
        'after_title'   => '</h4>'  
    ));  
    register_sidebar(array(  
        'name' => 'Center Box',  
        'id'   => 'center_box',  
        'description'   => 'Widget area para segunda caixa de conteúdo da página inicial',  
        'before_widget' => '<div id="%1$s" class="widget %2$s">',  
        'after_widget'  => '</div>',  
        'before_title'  => '<h4>',  
        'after_title'   => '</h4>'  
    ));  
    register_sidebar(array(  
        'name' => 'Right Box',  
        'id'   => 'right_box',  
        'description'   => 'Widget area para terceira caixa de conteúdo da página inicial',  
        'before_widget' => '<div id="%1$s" class="widget %2$s">',  
        'after_widget'  => '</div>',  
        'before_title'  => '<h4>',  
        'after_title'   => '</h4>'  
    ));  

}

Pronto, agora você pode adicionar widgets em Aparência > Widgets, como aparece na imagem ilustrativa abaixo:

widgetsEditando os estilos

Como é possível perceber, na parte de baixo da página inicial foi utilizado o plugin Flexible Posts Widget para exibir informações de alguns conteúdos na página inicial. Você pode utilizar de diversas técnicas CSS para estruturar a informação da página inicial, porém segue abaixo um pouco do código que servirá de base inicial para desenvolvimento do seu tema:

.home-content {
    width: 80%;
    margin: 0 auto;
    min-width: 1000px;
}

 .boxes {
 	width: 1000px;
 	min-height: 200px;
 	margin: 50px auto;
 }
 .thebox {
 	float: left;
	width: 300px;
	min-height: 200px;
	background: rgba(255,255,255,0.1);
	margin-left:50px;
}
.thebox.first {
	margin: 0;
}

Dica Rápida: Desafio CSS (iMasters) – Especial Cone

 

cone

Há alguns dias atrás foi lançado no iMasters um desafio de css, criar um cone usando somente uma div, no html. No artigo do desafio, o Bernard de Luna estabeleceu algumas regras, dentre elas, que o único código HTML dentro do body seria este

 <div class="cone"></div>

GITHUB

Com intuito de inaugurar/divulgar o Github da Tribo do CI nós disponibilizamos a nossa implementação do Cone CSS no GitHub, feito por mim: Sheldon Led. Vamos explicar um pouco do código.

Algumas explicações sobre o código.

Se você observar a figura acima, com um olhar mais analítico, perceberá que o cone nada mais é do que um triângulo com a base arredondada em cima de um losango com uma borda arredondada e mais escura. O código CSS está bem dividido nessas 2 partes, o “triangulo” é o .cone:after e o “losango” é o

  • Pseudo-classes: Existe um artigo bem completo no Tableless sobre Pseudo-classes. Uma pseudo-classe, ou pseudo-elemento, nada mais é do que alguns comportamentos/padrões de elementos HTML em CSS. Para o cone, utilizamos a pseudo-classe :after, que em uma interpretação a grosso modo, interpreta um elemento depois do elemento em questão, que no caso é a div da classe cone.
  • Bordas: Tanto no .cone quanto no .cone:after controlamos cada borda separadamente. Existe uma explicação legal sobre bordas em CSS no site do Maujor.
  • Transform: Novamente, existe um artigo bem detalhado e com exemplos de CSS Transform no site do Tableless. No nosso cone utilizamos o transform para rotacionar o elemento. É possível utilizar vários efeitos inclusive simultaneamente com o transform, porém como ainda não é uma especificação definida, é preciso utilizar prefixos.
  • Prefixos: Os prefixos são propriedades de CSS que funcionam especificamente para um navegador, pelo fato de ainda não ser uma especificação W3C ou por ser uma especificação em teste. No cone utilizamos os prefixos: -webkit (Chrome, Safari e Opera mais recente),  -moz (Firefox, Iceweasel), -ms (Internet Explorer), -o (Opera). Utilizamos os prefixos no css transform e border-radius.
  • Box Shadow: O box-shadow é uma propriedade do CSS3 que desenha uma sombra atrás de um elemento. Ele foi utilizado para desenhar a borda mais escura da base do cone.

Você pode ver o código, no  Github da Tribo do CI e tentar fazer sua própria implementação de exemplo, e ver abaixo (caso seu navegador estiver atualizado) nosso exemplo sendo executado.

 

 

 

 

 

 

 

 

OBS: Usei como base de conhecimento para produzir o cone, esses Exemplos de figuras geométricas em CSS.