Tribo do C.I.

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

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

julho 29th, 2013

 

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.

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.

iTunes U: Curso Desenvolvimento iOS em Português

maio 29th, 2012

Se o idioma era uma barreira para aprender a desenvolver aplicativos para iOS, seus problemas acabaram! O Instituto Politécnico de Leiria disponibiliza no iTunes U o Curso Desenvolvimento iOS totalmente em português de portugal ora pois, visto que a instituição é de lá, mais especificamente de Leiria como posso deduzir pelo nome.

Pois bem, as aulas tem uma didática que muito me agradou, a instrutora da imagem do artigo é Catarina Reis, até agora o curso está sendo ministrado por mais quatro pessoas que são, Catarina Silva, Luis Marcelino, Nuno Fonseca e Vitor Carreira.

Para acompanhar as aulas você terá que ter um Mac (ou um hackintosh para os mais corajosos), de toda forma você poderá adicionar ao seu iTunes U ou baixar os vídeos que estão em MP4 no link abaixo:

Esse não é o único curso em português que está disponível no iTunes U, você poderá navegar por País e encontrar vários cursos das mais diversas áreas de conhecimento como, Arte, Engenharia e porque não, Ciências da Computação. Eu assinei o feed de vários deles. Segue abaixo as instituições portuguesas que disponibilizam cursos até a publicação deste artigo:

Fique a vontade para explorar o conteúdo disponível pelo iTunes U e espero que tenha curtido essa dica.

Tribo do C.I.

Tribo do C.I.

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