Tribo do C.I.

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

Formulário com GeoLocalização

julho 24th, 2014

Obs: este artigo pode ser lido em inglês em: https://medium.com/@sheldonled/form-with-geolocation-7c9cc0936732

Todos os dias preenchemos algum formulário na internet, e sabemos o quão chato é! Por exemplo, porque sempre temos que preencher informações de endereço? Porque o computador não simplesmente “tem” minha localização Deus sabe como? Bom, com HTML5 GeoLocation a experiência do usuário pode ficar bem melhor. Através do HTML5 Geolocation temos as coordenadas geográficas, e através da API de Geocodificação Google conseguimos o restante da informação

Eu assisti a uma palestra sobre melhores práticas em Web Mobile, e aprendi que pode ser uma boa ideia preencher os dados de endereço do formulário usando geolocalização. Você pode aprender mais sobre HTML5 GeoLocation na MDN, e você vai ver que essa API só fornece as coordenadas geográficas. Você pode ver no Can I Use o suporte dos navegadores para GeoLocation, mas por questões de privacidade, no navegador do usuário aparecerá uma pergunta se ele permite fornecer sua localização, ou seja, o preenchimento automático vai depender do usuário.

Uma vez que você tem as coordenadas geográficas do usuário, você pode mandar uma requisição à API Google de Geocodificação, para pegar as informações reais, como cidade, estado e cep. Estas informações podem vir erradas, então é importante deixar o input editável. A URL da API Google que vamos usar é a Geocodificação Reversa, e é mais ou menos assim:

https://maps.googleapis.com/maps/api/geocode/json?latlng=<latitude>,<longitude>

A informações entre tags devem ser substituidas por números reais, tipo assim:

http://maps.googleapis.com/maps/api/geocode/json?latlng=37.4319075,-122.137884

Bom, “talk is cheap show me the code”, Eu fiz um exemplo prático de como você pode usar isso no seu formulário:

Agora, Eu só quero que todo mundo (até eu) comece a usar isso porque é uma boa melhoria e economiza tempo.

OBS: Por questões de segurança, as requisições estão sendo feitas apenas dentro de sites com HTTPS, portanto preste atenção à isso.

Outra coisa, por algum motivo que ainda não descobri porque, em algumas versões do Firefox o código no Codepen não funciona, mas você pode copiar o código e colocá-lo num arquivo para testar que eu imagino que dê tudo certo =)

Personalizar página inicial do WordPress

janeiro 10th, 2014

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;
}

Criando uma ConnectionFactory java com Xml

dezembro 6th, 2012

A maioria das aplicações trabalha com persistência de dados, ou seja, é necessário Gravar, Recuperar, Alterar e Deletar dados em algum Banco de Dados. Para essas 4 operações básicas é usada a sigla CRUD (Create, Read, Update, Delete) e é necessário uma conexão com o banco de dados para realizá-las. Para isso, é sempre criada uma classe com método(s) de Fábrica de Conexão (Connection Factory) e o código para isso fica parecido com o código mostrado na imagem abaixo:

Connection Factory

Os dados necessários para uma conexão com o banco são:

  • Usuário;
  • Senha;
  • URL de conexão;
  • Banco de Dados;

Porém, no exemplo da imagem acima, essas configurações ficam amarradas ao código, sendo necessário reescrever a classe e recompilar o programa a cada vez que qualquer um desses dados é alterado. Então a melhor sugestão seria criar um arquivo de configuração externo ao programa que mantem esses dados. Para isso utilizaremos dos recursos das classes: java.util.Properties, java.io.FileInputStreamjava.io.FileOutputStream.

Primeiro, criaremos uma classe que cuidará dessa parte, podemos nomeá-la JdbcConnection:

public class JdbcConnection {
private String user;
private String passwd;
private String url;
private String database;
//Criar getters e setters
}

Como o arquivo de configuração ainda não existe, teremos que criar, dentro da classe JdbcConnection um método para criação do arquivo Xml utilizando um objeto Properties:

    public void setProps(){
        Properties props = new Properties();

        props.setProperty("jdbc.user", "postgres");
        props.setProperty("jdbc.passwd", "senha");
        props.setProperty("jdbc.url", "jdbc:postgresql://localhost:5433");
        props.setProperty("jdbc.dataBase","banco");

        try {
            FileOutputStream fos = new FileOutputStream("config.xml");
            props.storeToXML(fos, "FILE JDBC PROPERTIES:","ISO-8859-1");
            fos.close();

        }catch (IOException e){
            System.out.println(e.getMessage());
        }

    }

Assim, será criado um arquivo parecido com esse:

<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE properties SYSTEM "http://java.sun.com/dtd/properties.dtd">
<properties>
<comment>FILE JDBC PROPERTIES:</comment>
<entry key="jdbc.passwd">error#404</entry>
<entry key="jdbc.url">jdbc:postgresql://localhost:5433</entry>
<entry key="jdbc.user">postgres</entry>
<entry key="jdbc.dataBase">ponto</entry>
</properties>

Através das informações contidas nesse arquivo, iremos preencher os atributos de um objeto JdbcConnection, e para isso criamos o método abaixo:

    public void getProps (){
        Properties props = new Properties();

        try {
            //Setamos o arquivo que será lido
            FileInputStream fis = new FileInputStream("config.xml");
            //método load faz a leitura através do objeto fis
            props.loadFromXML(fis);
        } catch (IOException e) {
            System.out.println(e.getMessage());
        }
        //Captura o valor da propriedade, através do nome da propriedade(Key)
        this.setUser(props.getProperty("jdbc.user"));
        this.setPasswd(props.getProperty("jdbc.passwd"));
        this.setUrl(props.getProperty("jdbc.url"));
        this.setDatabase(props.getProperty("jdbc.dataBase"));

    }

E para finalizar, o nosso método de Conexão ficaria mais ou menos dessa forma:

    public static Connection getConnection(){
        Connection con = null;
        try {
            JdbcConnection jdbc = new JdbcConnection();
            jdbc.getProps();
            if (jdbc.getUrl() == null) {
                jdbc.setProps();
                jdbc.getProps();
            }

            con = (Connection) DriverManager.getConnection(jdbc.getUrl() + "/" + jdbc.getDatabase(), jdbc.getUser(), jdbc.getPasswd());
        } catch (Exception e) {
            System.out.println(e.getMessage());
        }
        return con;
    }

Note que é preciso testar se o arquivo existe, para que os atributos do objeto jdbc não venham vazios. A maneira mais prática e didática que veio na minha mente foi testar se algum dos atributos ainda está nulo mesmo depois da chamada jdbc.getProps(); e, caso esteja nulo, chamo jdbc.setProps(); com as configurações “amarradas” no código-fonte do seu sistema. Porém, depois do arquivo gerado é possível alterar sem problemas.

Tribo do C.I.

Tribo do C.I.

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