0

Elementos Flutuantes

cssElementos Flutuantes

A propriedade float é aplicada a tag <img> do HTML. Dois valores podem ser aplicados: Left e Right. Ela é usada por causa de sua característica singular de poder colocar o conteúdo ao seu redor,sendo possível adicionar margin e padding.

Exemplo:

img04

  • CSS

  • HTML

Mas a propriedade float não se limita às imagens, podendo ser aplicada a qualquer elemento. Como em uma <div>, por exemplo:

img05

  • CSS

  •  HTML

Tome cuidado quanto ao tamanho do objeto que você vai usar o float, pois se ele for maior do que a área do conteúdo os elementos irão para baixo uns dos outros e não para o lado como no exemplo anterior.

img06

Exemplificação de Float com imagens maiores do que o campo visual

A Propriedade clear

A propriedade clear é usada para controlar o comportamento dos elementos que se seguem aos elementos floats no documento. Por padrão, o elemento subseqüente a um float, ocupa o espaço livre ao lado do elemento flutuado. A propriedade clear pode assumir os valores left, right, both ou none. A regra geral é: se por exemplo clear for definido both para um box, a margem superior deste box será posicionada sempre abaixo da margem inferior dos boxes flutuados que estejam antes dele no código.

Para evitar que o texto se posicione no espaço livre deixado pela imagem faremos da seguinte forma:

img07

  • CSS

  •  HTML

Z-index

O z-index é simplesmente a ordem em que os elementos podem ser apresentados no documento.

img08

  • CSS

 

0

Posicionamento de Elementos

cssPosicionando Elementos

O posicionamento de elementos tem como função dar o controle sobre o resultado visual de uma página.O CSS utiliza quatro tipos de posicionamento, os quais são:

  • Absolute
  • Relative
  • Static
  • Fixed

Todos os exemplos mostrados a seguir serão modelados utilizando a tag <div>.

Fluxo Normal

O termo fluxo normal refere-se ao comportamento padrão do navegador. Como você certamente percebeu, todo posicionamento “defaults” geralmente esta à esquerda do navegador, salvo aqueles modificados pela HTML ou CSS.
Os elementos “in-line” seguem com o fluxo. Se você redimensionar o navegador ou a resolução do monitor eles simplesmente irão se realocar, mas permanecerão no mesmo fluxo sem quebrar a linha, no caso, o parágrafo.

Posicionamento Absoluto

Todo elemento posicionado de forma absoluta não ocupará um espaço no documento.

Exemplo:

img01

 <div> com posição absoluta de 25px ao topo e a esquerda

Posição Relativa

O posicionamento relativo é muitas vezes confuso, primeiramente porque levanta a questão: relativo a quê? As maiorias das pessoas acham que a posição seria algo relativo a outro elemento.
Posicionamentos relativos em caixas são utilizados para o fluxo normal. Isto significa que elas não são removidas do fluxo normal de maneira absoluta na caixa onde está posicionado.
No exemplo abaixo será removida todas as margens usando o seletor universal (*). Isto foi feito para livrar-nos de todos os padrões em branco para que você possa ver exatamente como a posicionamento relativo está sendo usado.

Exemplo:

Portanto, a <div> está afastada 10 pixels a partir do elemento anterior, e 45 pixels à esquerda do fluxo exato do mesmo local onde o texto começa, pois é também no fluxo normal. Você vê que é o fluxo contínuo pelo posicionamento; daí o conteúdo flui como deveria, tanto antes como depois da caixa relativamente posicionada.

img02

O posicionamento relativo é utilizado quando o fluxo normal não deve ser quebrado. O posicionamento absoluto é mais bem usado para itens que devem ser posicionados muito especificamente.

Posição Fixa

A posição fixa é uma peça brilhante no CSS. Mas infelizmente não é suportada pelo internet explorer, podendo ser usada somente com Mozilla, Konqueror, Opera, Safari e outro que por ventura venha a oferecer esse suporte.

O posicionamento Fixo permite a você colocar uma caixa em qualquer lugar na página, atuando quase como que uma janela flutuante. Diferente do posicionamento absoluto em que elementos fixos são posicionados em relação a sua área de visão.

Exemplo:

img03

0

JNI (Java Native Interface)

Java (2)Java Native Interface – Parte 1

c++logoA Java Native Interface JNI define um padrão de nomes e convenções de funções que só a Máquina Virtual Java pode localizar e invocar nos métodos nativos de uma DLL gerada em C/C++ ou Assemble. O JNI habilita programadores a escrever métodos nativos para tratar situações em que uma aplicação não pode ser escrita inteiramente na linguagem Java.  A Java Native Interface define um padrão de nomes e convenções de funções que só a Máquina Virtual Java pode localizar e invocar nos métodos nativos.

Através do uso do padrão JNI podemos integrar nossos projetos Java com  DLLs geradas no em C.

nativesides

O Aplicativo javah

O aplicativo javah essencial para a criação da interface nativa é fornecido pela JDK. Utilizamos este aplicativo para gerar um arquivo .h que define os protótipos dos métodos de uma classe Java em forma de interface C/C++. Esta interface contém as declarações necessárias para compilarmos corretamente os módulos nativos que interagem com a JNI.

O aplicativo javah tem como vantagem reduzir os erros de programação na hora de integração de módulos nativos com a nossa JNI.

Para gerar um arquivo .h com o aplicativo javah devemos seguir com os seguintes passos:

1 - Compilação da Classe Java

2 - Criação da Interface Nativa

Após a criação da Interface Nativa será gerado um arquivo uma estrutura semelhante a:

Na próxima postagem, uma abordagem sobre tipos de dados.

0

Como perder peso no Browser

supermanComo perder peso no Browser

Consultado algumas boas práticas de uso de Javascript e CSS em projetos esbarrei com o site http://browserdiet.com/pt/ que é uma iniciativa de grandes profissionais que criaram um  guia de referências com as boas práticas na hora de expor seu conteúdo na web. O site conta com grandes profissionais do mundo web. Vale a pena conferir!

Iniciativa dos profissionais:

Briza Bueno (Americanas.com),  Davidson Fellipe (Globo.com),  Giovanni Keppelen (ex-Peixe Urbano)Jaydson Gomes (Terra)Marcel Duran (Twitter)Mike Taylor (Opera)Renato Mangini (Google) e Sérgio Lopes (Caelum) .

0

Web Semântica

images

“The Semantic Web is an extension of the current  web in which information is given well-defined meaning, better enabling computers and people to work in cooperation.”

“A Web Semântica é uma EXTENSÃO da web atual na qual é dado a informação um SIGNIFICADO bem definido, permitindo com que computadores e  pessoas trabalhem em cooperação.”

Berners-Lee,
Hendler e
Lassila

0

Configuração Maven – Parte 1

maven

O Maven é uma ferramenta de gerenciamento, construção e implantação de projetos, que tem como função ajudar no processo de gerenciamento de dependências e no de build do projeto, geração de relatórios e de documentação.

 Download do Framework

O framework está disponível na página oficial da ferramenta: http://maven.apache.org/.

CONFIGURAÇÃO DO MAVEN

Variáveis de Ambiente do Maven

varsambiente

Variáveis de Usuários

JAVA_HOME  = C:\Program Files\Java\jdk1.7.0_45

CLASS_PATH= C:\Program Files\Java\jdk1.7.0_45\bin\lib

M2_HOME = C:\Program Files\apache-maven-3.1.1

M2_REPO = C:\Users\ppontes\.m2\repository

MAVEN_OPTS = -Xmx1024m -Xmx512m -XX:MaxPermSize=128m -Djava.awt.headless=true

Variáveis de Sistema

Path – C:\Program Files\apache-maven-3.1.1\bin

 Descrição das Variáveis de Ambiente

M2_HOME Home de instalação do Maven
M2_REPO Repositório das Bibliotecas
MAVEN_OPTS Configurações de Memória do
Path Variáveis de Ambiente do Sistema Operacional
JAVA_HOME Home de instalação da JDK
CLASS_PATH Classpath com as libs da JDK