O PHP é uma das linguagens mais utilizadas no desenvolvimento web e nesse artigo trataremos do uso de classes no PHP.

Com a necessidade de enviar arquivos em diversos sistemas, é necessário que seja criada uma classe para que realize essa função.

Uma das principais funções de uma classe é a reutilização de código, ou seja, escrever menos e fazer mais e essa é a principal função da orientação a objetos.

Por medidas de segurança, antes de fazermos qualquer coisa, faremos uma verificação para ver se a página que contém a classe está sendo chamada direta pela URL. Por exemplo, se eu tento acessar o arquivo dessa forma: http://www.seuwebsite.com.br/suaClasse.php

Essa verificação vai nos retornar ao index (Página principal), pois não é seguro um usuário conseguir acessar as classes dessa forma.

Para fazer uma verificação desse tipo é preciso usar os comandos abaixo na listagem 1.

Listagem 1: Verificação

 //Verificação de Segurança
 $url = $_SERVER["PHP_SELF"];
 if(preg_match("class.Upload.php", "$url"))
 {
 header("Location: ../index.php");
 }

Explicação do código:

A variável $url recebe o valor da URL atual. Usamos a função preg_match para NÃO fazer diferença entre minúsculas e maiúsculas em nossa comparação. Em seguida, é verificado se a URL digitada tem o mesmo nome do nosso arquivo.

Se positivo, usamos o header para enviar o usuário de volta para o index, ou para qualquer página que queira.

Após feita a verificação, já podemos começar a criação da nossa classe de upload.

Para esta classe, vamos usar 3 atributos, sendo eles: tipo, nome e tamanho.

Então nossa classe ficaria da seguinte forma:

Listagem 2: Classe Upload

 class Upload
 {
 var $tipo;
 var $nome;
 var $tamanho;
 }

Com os atributos criados, podemos recuperar os dados do arquivo enviado. No PHP as variáveis não necessitam de tipagem, ou seja, não é necessário tipar como integer, string ou qualquer outro tipo, basta declará-las.

Nosso próximo passo em nossa classe é criar as funções. Nossa primeira função será a função upload, que apenas será utilizada para instanciarmos o objeto.

Listagem 3: Criando função upload

 function Upload()
 {
 //criando o objeto
 }

Agora que a função está criada, podemos instanciar o objeto, usando o comando $arquivo = new Upload;

Porém, não existe nenhuma ação ainda, vamos criar nossa função principal.

Para esta função, serão necessários 3 atributos também, sendo eles:

• $arquivo - Arquivo que o nosso form nos enviou.
• $pasta - Pasta onde será salvo nosso arquivo (Lembre-se de aplicar permissões de escrita na pasta em que o arquivo será salvo).
• $tipo - O tipo na verdade, será uma lista (Array), contendo todos os tipos de arquivo permitidos.

Quando um arquivo for enviado ao servidor, se já houver outro arquivo com o mesmo nome, ele será substituido.

Iremos fazer então um hash (Um código), usando a encriptação MD5. Esse hash será gerado da junção do nome do arquivo com a data atual, então o nome do arquivo enviado ficará apenas um código extenso.

Por exemplo:

Arquivo Enviado: imagem_teste.jpg
Nome do arquivo depois de enviado ao servidor: 33ea8043909c3726e2eacbf4a82e5227.jpg

Com isso vamos evitar muitos erros a partir de caracteres especiais e nome de arquivos extensos e também evitaremos a substituição de arquivos em nosso servidor.

Vamos criar agora a função UploadImagem

Listagem 4: function UploadImagem

 function UploadImagem($arquivo, $pasta, $tipos)
 {
 
 }

A primeira coisa que iremos fazer, é verificar se algum arquivo foi enviado, pois sem arquivo, não conseguimos fazer nada.

Iremos verificar com o isset, se o arquivo foi enviado, caso não tenha sido enviado nada irá acontecer. Caso o arquivo tenha sido postado, iremos recuperar alguns atributos dele.

Listagem 5: Verificando se o arquivo foi enviado

 function UploadImagem($arquivo, $pasta, $tipos)
 {
 if(isset($arquivo))
 {
 $nomeOriginal = $arquivo["name"]; 
 $nomeFinal = md5($nomeOriginal . date("dmYHis"));
 $tipo = strrchr($arquivo["name"],".");
 $tamanho = $arquivo["size"];
 }
 }

Primeiramente, devemos saber que o arquivo vem em forma de array, contendo assim vários atributos.

A variável $nomeOriginal, que recebe o nome do arquivo é recuperada pela sin

Olá leitores da DevMedia, nesse artigo serão passadas para vocês algumas dicas muito importantes para se levar em consideração quando o assunto é design responsivo.

O que é design responsivo ?

Design Responsivo é uma técnica de estruturação HTML e CSS, que consiste em adaptar o site ao browser do usuário sem que seja necessário definir várias folhas de estilos especíificaspara cada resolução, ou seja, é um tipo de design onde o layout fica fluído e variante de acordo com a resolução do usuário.

Esse tipo de design responsivo teve origem em 2010 com o objetivo de melhorar a experiência de navegação dos usuários de páginas web.

Por que devemos usar Design Responsivo?

Nos tempos atuais nós sabemos que a quantidade de dispositivos novos com acesso à internet que surgiram, além dos desktops e notebooks, é imensa, como smartphones, tablets, câmeras fotográficas e até mesmo geladeiras.

Pensando nisso, os desenvolvedores precisam ter uma preocupação muito maior de tornar seus websites disponíveis para esse público, é aí então que surge a importância de um website ser bem visto em qualquer dispositivo, independente da sua resolução de tela.

Mais do que uma simples tendência de design, o design responsivo é um conjunto de ferramentas e técnicas modernas que definem como o conteúdo será exibido ao usuário.

Veja a imagem abaixo onde mostra a diferença da porcentagem de acessos por dispositivos móveis em diferentes regiões do mundo entre os anos de 2010 e 2012.

Figura 1: Diferença entre acesso via dispositivos móveis

Mantenha seu layout limpo

Isso pode parecer um pouco clichê, mas realmente não é. Muitos desenvolvedores criam seus websites com códigos sujos, muitas vezes gerados automaticamente por softwares e IDE’s que ajudam os iniciantes na criação dos projetos.

É extremamente importante que nessa nova fase de sites responsivos, que os desenvolvedores façam seus códigos limpos e que escrevam apenas códigos que serão usados de fato. Faça códigos o mais simples possível, evitando exageros desnecessários.

Evite:

• Div's desnecessárias
• Estilos CSS inlines(use sempre arquivos externos)
• JS ou arquivos Flash sem fallback
• position absolute ou posicionamentos float desnecessários
• Evite códigos redundantes ou códigos que não são 100% úteis

Procure usar:

• Doctype html5
• Use um Reset CSS
• Código simples e semântico
• Técnicas simples para elementos como barras de navegação, menus, etc.

Teste para saber se você está no caminho certo:

Remova todo e qualquer estilo CSS de seu site e veja em seu navegador preferido. Se mesmo assim o seu conteúdo continuar sendo fácil de ser lido e ordenado, você provavelmente está no caminho certo para um bom desenvolvimento de um site responsivo.

Use Media Queries

Para designs responsivos você precisa ter foco nas condições de width, onde dependendo da largura do conteúdo de seu cliente, ou seja, dependendo da resolução do dispositivo que seu cliente estiver acessando o website, irá ser carregada uma folha de estilos diferente ou uma folha de estilo específica.

Vamos ver alguns exemplos?

Abaixo vamos ver uns exemplos de como chamar diferentes folhas de estilo dependendo da resolução de cada dispositivo.

Listagem 1: Exemplo de diferentes CSS em diferentes resoluções

<style>
 @import url(tiny.css) (min-width:300px);
 @import url(small.css) (min-width:600px);
 @import url(big.css) (min-width:900px);
</style>
@media screen and (max-width: 300px) {
 /* estilos */
}
@media screen and (max-width: 600px) {
/* Estilos */
}

Também podemos ver alguns exemplos de resoluções abaixo.

Listagem 2: Largura de 200px até 640 px

@media screen and 
(min-width: 200px) and 
(max-width: 640px)

Listagem 3: Orientação Paisagem de pelo menos 600px:

@media screen and 
(min-width: 600px) and 
(orientation:landscape)

Listagem 4: Orientação retrato de menos de 380 px:

@media screen and 
(max-width: 380px) and 
(orientation:portrait)

Resoluções mais frequentes

Uma dúvida muito comum é de saber como definir qual tamanho de resolução você deve buscar. Na figura 2 é possível ver uma tabela em inglês que pode te ajudar a decidir na hora de desenvolver seus projetos.

Figura 2: Resoluções mais frequentes

Defina breakpoints

Resoluções comuns podem ser classificadas em seis grandes breakpoints, você pode trabalhar com elas da seguinte maneira:

As CSS (folhas de estilo em cascata) tem transformado a maneira com que os websites são projetados já há algum tempo. Elas te ajudam a elevar o nível de seu projeto com formas boas e atraentes.

Nesse artigo iremos ver algumas formas diferentes de se criar lindos formulários utilizando CSS.

Como criar lindos formulários sem usar tabelas

Nesse exemplo veremos como criar um ótimo formulário usando um código limpo de CSS apenas com tags label e input, parecido com a que usávamos na época das tabelas, mas sem utilizá-las agora.

Você pode usar todos os elementos de CSS/HTML para criar o formulário personalizado para seus projetos web.

Vamos à parte prática da brincadeira. Em primeiro lugar iremos precisar criar o HTML do formulário, precisamos criar uma estrutura básica que será nosso formulário final.

Listagem 1: Estrutura HTML

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Estilizando formulários com CSS - DevMedia</title>
</head> 
<body> 
<form> 
	<div class="box"> 
		<h1>Formulario de Contato :</h1>
 
		<label> 
			<span>Nome Completo</span>
 			<input type="text" class="input_text" name="nome" id="name"/>
 
		</label>
 
		<label>
 			<span>Email</span>
			<input type="text" class="input_text" name="email" id="email"/>
		 </label>
 
		<label>
 			<span>Assunto</span>
			<input type="text" class="input_text" name="assunto" id="subject"/>
		</label>
 
		<label>
			 <span>Mensagem</span>
			<textarea class="message" name="feedback" id="feedback"></textarea>
			<input type="button" class="button" value="Enviar" />
		</label>           
	</div>
</form> 
</body>
</html>

Com nossa estrutura criada podemos ver o quão feio está sem estilização nenhuma. Quando começarmos a aplicar o efeito CSS esse cenário será completamente diferente, iremos poder deixar o formulário da maneira que quisermos, vai depender da necessidade de cada projeto.

Figura 1: Formulário sem estilização

Vamos aplicar o código CSS ao nosso formulário e veremos como ficará o resultado final do formulário.

Listagem 2: Código CSS

*{ margin:0; padding:0;}

body{ font:100% normal Arial, Helvetica, sans-serif; background:#161712;}

form,input,select,textarea{margin:0; padding:0; color:#ffffff;}

div.box {
    margin:0 auto;
    width:500px;
    background:#222222;
    position:relative;
    top:50px;
    border:1px solid #262626;
}

div.box h1 { 
    color:#ffffff;
    font-size:18px;
    text-transform:uppercase;
    padd

Olá pessoal, no artigo de hoje vamos falar sobre as medias queries, mas antes vamos falar um pouco sobre o que vinha antes delas, as media types.

As Medias Types, basicamente definem pra qual tipo de media o css que você usa em seu site será direcionado, ou seja, para cada dispositivo diferente que você acessa um website, será necessário um css diferente também.

Além da media mais comum que é o caso de acessar um site do desktop e acessar de um smartphone ou tablet, existem muitas outras medias, como por exemplo:

• All :Para todos os dispositivos.
• Screen :Para monitores ou outros dispositivos com telas coloridas e com resolução adequada.
• Handheld: Para dispositivos de mão. Normalmente com telas pequenas e banda limitada.
• Embossed: Para dispositivos que “imprimem” em braille.
• Tty: Para dispositivos que utilizam uma grade fixa para exibição de caracteres, como por exemplo, teletypes, terminais, dispositivos portáteis com display limitado.
• Print: Para impressão em papel.
• Braille: Para dispositivos táteis.
• Projection: Para apresentações, como PowerPoint.
• TV: Para dispositivos como televisores, ou seja, com baixa resolução, quantidade de cores e scroll limitado.
• Speech: Para sintetizadores de voz.

A forma de se utilizar essas medias types pode ser vista no código abaixo na listagem 1:

Listagem 1: Como utilizar as Media Type

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title>Exemplo de Media Type - DevMedia</title>

    <link rel="stylesheet" "estilo.css" type="text/css" media="handheld" />    

</head>

<body>


</body>
</html>

Como podemos observar, a tag link está chamando um arquivo css usando a media handheld, ou seja, caso você acesse de um dispositivo móvel, smartphone, tablet’s, esse será o css chamado e carregado pelo website.

Esse css só será carregado nesse tipo de dispositivo, para cada dispositivo diferente que acessamos, temos que definir um css específico para ele, como por exemplo se quisermos o mais comum que é acessar de um desktop usamos a media type screen.

Listagem 2: Acessando de um d

Olá pessoal, nesse artigo iremos conhecer alguns excelentes plugins da biblioteca javascript mais famosa do mundo, a jQuery.

JQuery é uma linguagem muito popular entre os programadores por causa de suas surpreendentes funcionalidades. É a biblioteca Javascript mais famosa e mais utilizada em todo mundo, por isso também é a que mais possui plugins e variações de possibilidades para se desenvolver.

Ela funciona como uma linguagem de script. É por isso que, neste artigo, vou mostrar alguns plug-ins de jQuery que salvam um tremendo esforço dos programadores.

jQuery Avgrund

Não é tão rico em recursos, mas tem o fator surpreendente que as suas necessidades de aplicativos web. A caixa de diálogo é mostrada pela animação que traz em um ponto focalizado, enquanto o fundo é borrado e escurecido.

Formulários são tediosos e chatos, todo mundo odeia preenchê-los. Esse plugin procura melhorar a forma como essa funcionalidade seja útil, processando a validação do lado no cliente(cliente-side).

Figura 1: Avgrund jQuery

Alertify.js

Alertify.js é outro tipo de plug-in jQuery. É uma pequena biblioteca para apresentar um bonito diálogo através da moldura da janela e mostrar notificações. É fácil de personalizar com uma folha de estilo em cascata, tem uma API simples e não depende de bibliotecas de terceiros, mas pode trabalhar remotamente com eles.

Listagem 1: Alertify

/ / Diálogo de alerta
alertify.alert ("Mensagem");
 
/ / Confirmar diálogo
alertify.confirm ("Mensagem", function (e) {
    if (e) {
        / / Usuário clicou em "ok"
    } else {
        / / Usuário clicou em "cancel"
    }
});
 

Figura 2: Alertify.js

iCheck:

iCheck é outro tipo de plug-in jQuery. É um plugin que muda o controle de quadro do seu navegador e com isso pode te ajudar muito. É perfeitamente customizável e funciona no celular. Para usá-lo, inclua o JavaScript e CSS em sua página, e converta todo o seu rádio e caixas de seleção com algumas linhas de jQuery. Portanto, este é um plugin muito utilizado ultimamente para customizar radiobuttons e checkboxes.

Listagem 2: iCheck

 $(document).ready(function(){
    $('input').iCheck({
        checkboxClass: ' icheckbox_minimal ',
        radioClass: 'iradio_minimal'
    });
});


 

Figura 3: iCheck

jQuery File Upload

O upload do arquivo é uma característica importante para qualquer linguagem de programação. O jQuery File Upload fornece um excelente recurso sobre os desenvolvedores. Possui um widget com vários arquivos de variedades, drag and drops, barras de progresso e imagens de visualização. Portanto, é um surpreendente plug-in feito em jQuery. Se você trabalha com qualquer plataforma de servidor como PHP, Python e Ruby on Rails, Java e Node.js, você vai ter mais flexibilidade no seu desenvolvimento utilizando-o.

Figura 4: jQuery File Upload

jQuery Knob

JQuery Knob é outro import

Olá pessoal, nesse artigo iremos ver algumas dicas de como utilizarmos de testes unitários pode ser extremamente útil no desenvolvimento front-end e como podem facilitar e muito a vida dos desenvolvedores.

A criação de programas complexos é apenas uma questão de dividi-los em unidades menores e depois juntá-las, assim como um quebra-cabeças, onde pegamos minúsculas peças e juntamos todas a fim de criar uma linda figura, quadro, etc.

O teste unitário é basicamente o teste dessas unidades menores, aquelas que iremos juntar. Caso nunca tenha usado dos testes unitários antes eu sugiro que use, pois vale a pena.

Figura 1: Testes Unitários

O que fazem?

Basicamente os testes unitários ajudam você a pensar com as expectativas de seu código de uma forma organizada, minimizam o risco e o esforço ao mudar o código e incentivam o design modular.

Com a leitura desse artigo você poderá caminhar na direção certa para começar com testes unitários em JavaScript no navegador, e vai te ter algumas dicas para ter certeza de que eles sejam executados da melhor forma possível , seja para o usuário ou para o servidor.

Escolha de um Framework

Existem frameworks de testes unitários bons o suficiente para que você não tenha que construir o seu próprio. Um exemplo muito bom é o QUnit, que é usado pela suíte de produtos do jQuery, é fácil de usar e tem um tutorial muito bom no site oficial, com ele ficará tudo mais fácil, não deixe de conferir.

Existem outras opções também, sugiro que olhe todas e escolha a que se adequar melhor com sua necessidade.

• Jasmine
• Mocha
• RhinoUnit

O mais importante é você escolher um, estudar sobre ele e começar a usá-lo. Com isso praticamente todo o trabalho já terá sido feito. Leia, estude e teste qual framework vai atender melhor suas expectativas.

Lembre-se que cada desenvolvedor possui suas particularidades e suas preferências. Eu, por exemplo, prefiro o dreamweaver do que qualquer outra IDE de desenvolvimento.

Faça testes unitários

A ideia de teste unitário é testar uma pequena unidade autônoma de código antes de integrá-la ao sistema maior.

Se você estiver escrevendo o código a partir do zero, ou se o código já existe, é possível que seja necessário fazer uma certa quantidade de ref

Muita gente sempre pergunta sobre como funcionam os atributos margin e padding e é especialmente para essas pessoas que esse artigo foi escrito, para ver se conseguem tirar essa dúvida de uma vez por todas.

Pra que serve?

Basicamente esses atributos são atributos de recuo e/ou espaçamento, por exemplo: recuo de listas, espaçamento padrão de navegadores, etc.

Pra começar vamos considerar um espaço ao redor do conteúdo de uma página. Normalmente os navegadores possuem por padrão um espaço de 8px de espaço entre o conteúdo da página e as bordas da janela do navegador, por padrão.

Como estilizar?

Vamos começar a ver como utilizar essas propriedades, na listagem 1 veremos uma declaração simples na tag body, iremos zerar essas propriedades, já que os navegadores possuem cada um seu próprio valor para isso, então iremos zerar e deixar todos com os mesmos valores de margin e padding.

Listagem 1: Declaração básica

body{margin: 0; padding: 0;}

O código acima vai remover o espaço de todos os navegadores, deixando eles com um valor padrão.

Outro exemplo de utilização é o uso em listas, podemos definir o recuo em listas, ordenadas ou desordenadas, usando margin ou padding, isso vai depender do navegador que você estiver usando, portanto sugiro que ao usar essas propriedades, faça testes e veja qual se aplicará melhor para você.

Listagem 2: Recuo em listas

ul, ol{margin-left: 0;}

O código acima irá remover todo o espaçamento da esquerda das listas. Isso irá funcionar na maioria dos navegadores, mas não em todos. Caso queira que fique mais próximo possível em todos os navegadores, precisamos adicionar o padding em nosso código.

Listagem 3: Recuo em listas em todos navegadores

ul, ol{margin-left: 0; padding-left:0;}

É importante deixar claro que essas propriedades não servem apenas para se remover os recuos, mas também podem ser usadas para inserirmos espaçamentos.

Na maioria dos casos, não importa como utilizamos isso. Se você quiser atribuir um background nas suas listas, elas irão começar a importar o recuo. Isso acontece porque os marcadores(bullets, quadrados, letras e números) são inseridos do lado esquerdo da lista. Dessa forma eles irão remover o padding e margin ou qualquer outro espaço que existir do lado esquerdo.

Recuo Negativo de listas

Agora iremos falar aqui de técnicas que fazem a primeira linha de um item de lista ficar deslocada à esquerda do resto do texto.

Esse é um efeito interessante, porque nos permite distinguir os itens de lista sem ser necessário deixar a página tumultuada com marcadores ou qualquer outra coisa usada pra delimitar listas, além de ser muito fácil de se fazer, como veremos a seguir.

Listagem 4: Usando recuo negativo

<html>
<head>
	<title>Entendendo Margin e Padding - Devmedia</title>
	<style type="text/css">
	ul{text-indent: -2em; list-style: none;}
	</style>
</head>
<body>
<p>Segue a lista ab

Olá pessoal, estamos de volta com mais novidades no desenvolvimento front-end. Neste artigo vamos ver um pouco sobre um módulo CSS, o CSS3 Grid Layout, que nos permite definir uma grade de elementos e local sobre a ele. CSS3 Grid Layout é um módulo criado pela Microsoft, e implementado usando o prefixo ms-no IE10.

Se você não possui o IE10, existe uma maneira de ver e testar esses exemplos, para isso, se inscreva para criar uma conta no Browserstack e teste gratuitamente o browser que quiser.

O que é CSS3 Grid System?

O sistema de grids do CSS3 visa permitir que os projetos possam ser divididos em um conteúdo de grade pelos desenvolvedores. Ao invés de tentar fabricar uma grade de carros alegóricos, você pode declarar uma grade real em um elemento de recipiente e então usar isso para posicionar os elementos no interior. Mais importante ainda, a ordem de origem desses elementos não importa.

Declarando um GRID

Declaramos uma grade usando um novo valor para a propriedade display: display: grade. Como estamos usando a implementação IE10 aqui, precisamos que o valor de prefixo: display:-ms-grade;.

Uma vez que nós declaramos nosso grid, montamos as colunas e linhas usando a grid-colums e grid-rows.

Listagem 1: Declarando um grid

.wrapper {
    display: -ms-grid;
    -ms-grid-columns: 200px 20px auto 20px 200px;
    -ms-grid-rows: auto 1fr;
}

No exemplo acima, declaramos uma grade sobre o elemento wrapper.. Usamos a propriedade de grid-columns para criar uma grade com uma coluna de 200 pixels de largura, um pixel-gutter de 20px, uma coluna de largura auto e flexível que vai esticar para preencher o espaço disponível, um outro pixel-gutter de 20 pixels de largura e uns 200px de barra lateral: um layout de largura flexível com duas barras laterais de largura fixa.

Usando a propriedade da grid-rows que eu criei duas linhas: a primeira é definida como auto para que ele irá esticar para preencher o que eu colocar nela; segunda linha é definida como 1FR, um novo valor usado em grades que significa uma unidade de fração. Neste caso, uma unidade de fracção do espaço disponível, de forma eficaz o espaço que está à esquerda.

Posicionando itens no grid

Agora eu tenho um grid simples onde eu posso incluir itens a ele. Se eu tiver um <div> com uma classe .main que eu queira colocar na segunda linha, e a coluna flexível setada como auto vai usar o css a seguir:

Listagem 2: CSS do grid

.content {
    -ms-grid-column: 3;
    -ms-grid-row: 2;
    -ms-grid-row-span: 1;
}

Criando um sistema de Grid

Assim que eu comecei a estudar CSS3 grid system, eu queria ver se eu poderia usá-lo para replicar um sistema de grade flexível como este: resp

Schema em grego significa plano de forma, ou modelo. Já schema.org é uma série de tags XML usado para fornecer informações adicionais sobre o conteúdo da Internet para os motores de busca. Ou seja, pequenos trechos de código que ajuda muito quando as pessoas facilmente encontrar seu site, entre outros tantos na web.

A idéia de criar tags XML que apresentam informações sobre o significado de um conteúdo não é novo. Antigamente existiam vários outros como os microdados, microformatos e RDFa.

Mas essa pluralidade de línguas era precisamente o que dificultava a adoção pelos desenvolvedores. Ele surgiu a partir de uma ação colaborativa entre principais motores de busca do mundo, o Google, Bing, Yahoo! e Yandex, motor de busca russo.

A adoção de um modelo mais "universal" eliminou a ramificação causada ​​pelo uso de diferentes formatos, tornando mais fácil a vida dos desenvolvedores (que não precisam mais se desdobrar entre várias linguagens diferentes) e, acima de tudo, os usuários.

Figura 1: schema.org

Todo mundo sabe que cada linguagem possui a sua particularidade, seja ela o Inglês, Espanhol, etc. Mas os motores de busca não podem compreender totalmente as particularidades de cada idioma.

Para que todas as pessoas possam encontrar facilmente a informação na Internet, nós desenvolvedores precisam dizer aos motores de busca o que determinado conteúdo significa. E nós podemos fazer isso através das tags propostas pelos schema.org.

Ao utilizar as normas estabelecidas pelo schema, os motores de busca vão saber o número do telefone de sua empresa, por exemplo, independentemente do contexto. E pode mostrar essa informação no corpo dos resultados da pesquisa, facilitando a tarefa do usuário que pesquisar ou precisar de informações sobre o site. E isso não funciona apenas para números de telefone. Você pode selecionar uma variedade de dados, tais como nome, endereço, e-mail, etc.

Rich Snippets

Outra grande vantagem é chamada de Rich Snippets, a qual você provavelmente já ouviu dizerem por aí. São resultados de pesquisa que contêm informações adicionais e muitas vezes ganham formas, cores e símbolos diferentes. Esta informação vem precisamente de diferentes tags XML como aprendemos neste post.

Isso acontece porque um conceito da teoria da percepção (gestalt) chamado segregação que basicamente diz que tudo é diferente chama mais atenção. Um resultado que mais se destaca consequentemente receber mais visitas. Atualmente Google suporta rich snippets para as pessoas, eventos, opiniões, produtos, receitas e estrutura de navegação (breadcrumbs).

Para um melhor entendimento, vamos ver como funciona na prática, vamos fazer uma pesquisa no google e veja como o resultado é exibido com rich snippets.

Figura 2: Exemplo de Rich Snippet

Entendendo o funcionamento do Schema

Se você já participou alguma vez de uma mudança, sabe por experiência que se não marcarmos e rotularmos as caixas de roupas, livros, louças, etc, pode terminar sem encontrar um par de meias limpas em sua nova casa.

É melhor deixar os objetos em caixas que têm algum elemento em comum, eles vêm do mesmo ambiente (quarto, cozinha, banheiro) ou têm a mesma função (sapatos, brinquedos, ferramentas). Cada caixa pode então ser considerada com

Olá pessoal, nesse artigo iremos aprender a centralizar um conteúdo dentro de uma div, ou se preferirmos, centralizar a div em relação à página.

A maneira mais comum de se apresentar um website é com ele centralizado na página, independentemente da resolução da tela do usuário. Dessa forma a visualização do website fica muito mais agradável do que se ele estivesse no canto da página.

Imagine um usuário acessando o seu site de uma televisão de 42” e esse site ficando todo à esquerda da tela, por exemplo. Ficaria muito ruim de navegar, não acham ?

Para mostrar uma forma de centralizar essa div iremos usar exemplos simples e cotidianos.

Listagem 1: Centralizando uma div

<html>
<head>
	<title>Centralizando Div e conteúdos com CSS - DevMedia</title>
</head>
<body>

<div id="conteudo">

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum magna leo, vestibulum in imperdiet dignissim, mattis eget tortor. Donec nulla metus, luctus nec feugiat sed, hendrerit et leo. Vivamus iaculis varius elit eget auctor. Fusce blandit, est eget sodales volutpat, nibh tellus vehicula leo, et pellentesque lectus nunc eget dui. Aliquam dictum, ipsum a aliquam auctor, risus magna lobortis tellus, vel dignissim leo elit ac purus. Nam nulla arcu, condimentum et tincidunt non, rhoncus id augue. Aliquam vel turpis orci, eu scelerisque odio.</p>

<p>Donec pulvinar ornare ante, pulvinar elementum augue laoreet vitae. Donec euismod consectetur elementum. Suspendisse neque quam, volutpat sit amet sagittis nec, hendrerit ut ligula. Nunc consequat nunc sit amet nulla sodales sed consequat tortor pretium. Vestibulum euismod augue quis erat egestas ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus aliquam pretium massa ut auctor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla facilisi. Morbi non urna lacus, non commodo nisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aliquam in libero eget nibh tristique facilisis ac et magna. Praesent in velit quis neque feugiat viverra sed ut ipsum. Praesent ultrices eros vitae neque accumsan fringilla.</p>

<p>Quisque congue lacus in augue fermentum aliquam. Curabitur lacinia nulla vel lorem scelerisque varius. Nam pharetra laoreet commodo. Aliquam gravida arcu sit amet ante mollis ornare. Praesent scelerisque aliquet pretium. Donec ultrices eleifend augue, nec porta erat luctus condimentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean risus ipsum, semper vel scelerisque eu, hendrerit sed leo. Nulla feugiat faucibus felis ut molestie. Proin sit amet nisl non justo venenatis auctor. Proin ac est orci, at placerat ante. Maecenas risus lacus, commodo id feugiat non, semper vel nisi. Fusce nec commodo magna. Praesent luctus ullamcorper ligula eget condimentum. Aenean vel ligula urna. Curabitur et erat in metus sagittis egestas.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum magna leo, vestibulum in imperdiet dignissim, mattis eget tortor. Donec nulla metus, luctus nec feugiat sed, hendrerit et leo. Vivamus iaculis varius elit eget auctor. Fusce blandit, est eget sodales volutpat, nibh tellus vehicula leo, et pellentesque lectus nunc eget dui. Aliquam dictum, ipsum a aliquam auctor, risus magna lobortis tellus, vel dignissim leo elit ac purus. Nam nulla arcu, condimentum et tincidunt non, rhoncus id augue. Aliquam vel turpis orci, eu scelerisque odio.</p>

<p>Donec pulvinar ornare ante, pulvinar elementum augue laoreet vitae. Donec euismod consectetur elementum. Suspendisse neque quam, volutpat sit amet sagittis nec, hendrerit ut ligula. Nunc consequat nunc sit amet nulla sodales sed consequat tortor pretium. Vestibulum euismod augue quis erat egestas ultricies. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus aliquam pretium massa ut auctor. Pellentesque habitant morbi tristiq

Olá pessoal, nesse artigo vamos aprender a trabalhar um pouco com Java.

O Java é uma das mais poderosas ferramentas de desenvolvimento do mundo, ganhando cada vez mais adeptos e fãs.

Acesso a dados com JDBC

Sem dúvida alguma o acesso a dados é um dos recursos mais utilizados na área de desenvolvimento. Praticamente todo o sistema precisa de um banco de dados, havendo raras exceções.

O Java, diferente de linguagens como PHP, não suporta o acesso a banco de dados diretamente, para isso ele usa uma API (conjunto de classes e interfaces) para fazer o serviço. A JDBC (Java Database Connectivity), faz o envio de instruções SQL para qualquer banco de dados relacional, desde que haja um driver que corresponda ao mesmo presente.

Figura 1: Esquema de funcionamento do JDBC

Existem quatro tipos de drivers JDBC: 1, 2, 3 e 4, são eles:

Tipo 1: Ponte JDBC-ODBC

É o tipo mais simples, mas restrito à plataforma Windows. Utiliza ODBC para conectar-se com o banco de dados, convertendo métodos JDBC em chamadas às funções do ODBC. Esta ponte é normalmente usada quando não há um driver puro-Java (tipo 4) para determinado banco de dados, pois seu uso é desencorajado devido à dependência de plataforma.

Tipo 2: Driver API-Nativo

O driver API-Nativo traduz as chamadas JDBC para as chamadas da API cliente do banco de dados usado. Como a Ponte JDBC-ODBC, pode precisar de software extra instalado na máquina cliente.

Tipo 3: Driver de Protocolo de Rede

Traduz a chamada JDBC para um protocolo de rede independente do banco de dados utilizado, que é traduzido para o protocolo do banco de dados por um servidor. Por utilizar um protocolo independente, pode conectar as aplicações clientes Java a vários bancos de dados diferentes. É o modelo mais flexível.

Tipo 4: Driver nativo

Converte as chamadas JDBC diretamente no protocolo do banco de dados. Implementado em Java, normalmente é independente de plataforma e escrito pelos próprios desenvolvedores. É o tipo mais recomendado para ser usado.

Neste artigo vamos usar o tipo 4, por ser o mais recomendado, pois ele converte as chamadas diretamente no protocolo do banco de dados em questão, dando assim uma performance melhor, além, é claro, de ser o mais simples de se usar.

Muitos podem encontrar uma certa semelhança entre JDBC e ODBC; estão absolutamente corretos, podemos dizer a "grosso modo" que as duas seguem a mesma ideia. Ambas funcionam como meio de comunicação Banco X Aplicação, porém, ODBC é uma aplicação Windows restrita apenas a ele, enquanto a JDBC, por ser escrita em Java, é multiplataforma.

Outra das vantagens da JDBC é o fato dela funcionar como uma camada de abstração de dados. Independente do SGBD utilizado, a API será a mesma, facilitando muito a vida dos programadores caso haja a necessidade de uma migração de banco.

Agora vamos ver como se conectar por meio do JDBC a uma base de dados Oracle.

Listagem 1: Conectando a uma base Oracle

Connection connection = null;  
    try {  
        // Load the JDBC driver  
        String driverName = "oracle.jdbc.driver.OracleDriver";  
        Class.forName(driverName);  
      
        // Create a connection to the database  
        String serverName = "127.0.0.1";  
        String portNumber = "1521";  
        String sid = "mydatabase";  
        String url = "jdbc:oracle:thin:@" + serverName + ":" + portNumber + ":" + sid;  
        String username = "username";  
        String password = "password";  
        connection = DriverManager.getConnection(url, username, password);  
    } catch (ClassNotFoundException e) {  
        // Could not find the database driver  
    } cat

Olá pessoal, no artigo de hoje irei mostrar um pouco sobre o uso de sombras nos textos usando CSS 3.

Este é um recurso bem simples que foi incorporado ao css 3 e que é bastante interessante para dar aquele efeito sombreado ao texto.

Text-shadow

O text-shadow é a propriedade responsável por adicionar sombra a um texto por meio do CSS3. Como poderemos ver na listagem 1, a sua declaração é bem simples, no nosso exemplo iremos dar uma sombra preta a um elemento <h1> cinza.

Vamos criar um documento HTML e adicionar um elemento <h1>, nele iremos aplicar o efeito text-shadow, como mostra a listagem a seguir:

Listagem 1 : Aplicando Text-shadow

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aplicando Text-Shadow</title>
<style type="text/css">
h1{
	text-shadow: #000 2px 3px 2px;
	}
</style>
</head>
<body>
<h1>text-shadow</h1>
</body>
</html>

Com esse efeito, nosso exemplo deverá ficar da seguinte forma:

No nosso exemplo, #000 é a cor da sombra, o primeiro valor (2px) é a distância horizontal da sombra em relação ao elemento, o segundo valor (3px) é a distância vertical da sombra em relação ao elemento e o terceiro valor (2px) é o raio da sombra (efeito blur).

Como em qualquer outra declaração em CSS, podemos utilizar qualquer unidade de medida para definir a distância e o raio da sombra, não apenas pixels, permitindo ao desenvolvedor utilizar a que mais agradar e mais atender às suas necessidades.

Um Abraço e até o próximo artigo

Ricardo Arrigoni - Desenvolvedor Front-end e Analista SEO

Olá Pessoal, nesse artigo irei mostrar algumas propriedades CSS que utilizamos para estilizar as fontes dos nossos textos escritos em HTML.

No CSS 2, temos as seguintes propriedades:

• font-family
• font-style
• font-variant
• font-weight
• font-size
• font

Vamos começar falando do font-family:

Font-family

A propriedade font-family é usada para definir uma lista de fontes e sua prioridade para apresentação de um elemento em uma página. Se a primeira fonte da lista não estiver instalada na máquina do usuário, deverá ser usada a segunda e assim por diante até ser encontrada uma fonte instalada, ou seja, no caso de escolhermos a família font-family:Arial, Helvetica, sans-serif; o navegador irá procurar pela fonte Arial, caso não encontre, vai procurar por Helvetica, caso não encontre de novo ele usará a sans-serif.

No exemplo a seguir irei mostrar como aplicar esse estilo em uma tag

:

<style type="text/css">
p{
	font-family:Arial, Helvetica, sans-serif;
	}
</style>

Font-style

A propriedade font-style define a escolha da fonte em normal, italic ou oblique.

No exemplo a seguir, vou mostrar como usar o font-style italic, mas você pode usar qualquer uma dessas 3.

Listagem 2: Font-style

<style type="text

Os Seletores são, na verdade, a essência da CSS. Sem eles, não teríamos como atribuir estilos aos elementos a não ser embutindo-os nos atributos de cada elemento, e isso seria terrível.

Tendo a oportunidade de selecionar os tipos ou as famílias inteiras de elementos que serão estilizados, podemos aplicar muitos estilos com apenas algumas linhas de CSS.

Neste artigo irei mostrar como usar os seletores de maneira inteligente.

Tipos de pseudoitens:

Há dois tipos de pseudoitens em CSS: pseudoclasses e pseudoelementos.

As pseudoclasses no CSS 2.1 são:

• :link - Link não visitado
• :visited - Link visitado
• :hover - Elemento com o mouse posicionado sobre ele
• :focus - Elemento realçado
• :active - Elemento ativo(como um link ao ser clicado)
• :first-child - Elemento que é o primeiro filho de outro elemento
• :lang() - Elemento baseado no valor de seu atributo lang

Os pseudoelementos na CSS2.1 são:

• ::first-line
• ::first-letter
• ::before
• ::after

Qual a diferença afinal? A diferença está no modo como os pseudoitens afetam o documento.

As pseudoclasses atuam como se adicionassem classes ao documento.

Os pseudoelementos agem como se levassem os elementos a serem inseridos no documento.

No pr

Olá pessoal, nesse artigo irei falar sobre a propriedade border do html, essa propriedade é responsável por adicionar bordas em qualquer elemento html, seja ele uma div, uma imagem, um box, ou seja, qualquer elemento.
Abaixo irei listas suas principais propriedades do atributo border.

• border-width:----------------espessura da borda
• border-style:----------------estilo da borda
• border-color:----------------cor da borda
• border-top-width:------------espessura da borda superior
• border-top-style:------------estilo da borda superior
• border-top-color:------------cor da borda superior
• border-right-width:----------espessura da borda direita
• border-right-style:----------estilo da borda direita
• border-right-color:----------cor da borda direita
• border-bottom-width:---------espessura da borda inferior
• border-bottom-style:---------estilo da borda inferior
• border-bottom-color:---------cor da borda inferior
• border-left-width:-----------espessura da borda esquerda
• border-left-style:-----------estilo da borda esquerda
• border-left-color:-----------cor da bord ...

Olá pessoal, hoje vamos falar sobre algumas das principais tags do HTML.

Como sabemos o Html é uma linguagem de marcação e por isso é escrita por meio de tag’s, essas tag’s sempre precisam estar entre os “” e sempre que abertas devem ser fechadas, como mostra o exemplo:

Listagem 1: Abrindo e fechando tag’s HTML

<HTML>
</HTML>

Como podemos ver a tag foi iniciada com e fechada com e esse padrão irá se repetir para todas as outras tag’s.

Abaixo vou listar algumas das tag’s mais utilizadas:

Listagem 2: Listagem de Tag’s mais utilizadas

<HTML></HTML> <!--  É a principal tag, é com ela que você diz para o navegador a linguagem que você está usando--> 
<head></head> <!--  É o cabeçalho do código, é dentro dela que colocamos scripts, links para scripts externos, metatags-->
<body></body><!-- É o corpo do código, é dentro dela que ficam todo o código da página -->
<strong></strong> <!-- Tag para colocar um texto em Negrito -->
<i></i> <!-- Tag para colocar um texto em Itálico -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

Olá pessoal, nesse artigo irei ensinar uma coisa bem simples, mas essencial para desenvolver projetos em php, a conexão com o banco de dados.

Para fazer isso é bem simples, primeiro vamos abrir um editor qualquer php, pode ser o Adobe Dreamweaver, Eclipse, Notepad++. Iremos usar o Dreamweaver nesse artigo.

Primeiro crie um documento novo no Dreamweaver e escolha o php:

Após isso vai abrir um arquivo idêntico ao que criamos quando clicamos em html, como mostra a imagem a seguir:

Agora vamos apagar todo o código que está na tela, isso mesmo, apagar tudo, não iremos precisar do código html nesse artigo.

Após apagar tudo, vamos escrever o seguinte código:

<?php
//Aqui colocamos o servidor em que está o nosso banco de dados, no nosso exemplo é a conexão com um servidor local, portanto localhost
$servidor = "localhost";
//Aqui é o nome de usuário do seu banco de dados, root é o servidor inicial e básico de todo servidor, mas recomenda-se não usar o usuario root e sim criar um novo usuário
$usuario = "root";
//Aqui coloca

Olá pessoal, nesse artigo vamos entender como funcionam as listas (ordenadas, desordenadas e de definições).

As listas são muito importantes quando queremos listar alguns itens no site e também para a criação de menu de navegação.

As listas ordenadas, como o próprio nome já diz, os itens serão listados de forma ordenada, seja por número, letra, ou algarismos romanos.

Uma lista ordenada começa com a tag “

” e seus respectivos itens da lista ficam dentro da tag “
1. ”. Por padrão as listas ordenadas são ordenadas por números, mas também iremos ver como ordena-la por outros métodos.

   Vamos ao código:

   <html>
   <head>
   <title>Listas em HTML</title>
   </head>
   
   <body>
   <ol>
   <li>Nome</li>
   <li>Telefone</li>
   <li>Endereço</li>
   <li>País</li>
   </ol>
   </body>
   </html>
    

   Aparecerá assim no site:

   
   

   Como havia dito, podemos ordenar também por a,b,c,d, etc. Caso queira que seja ordenada por letras maiúsculas, basta em colocar

   .

   <html>
   <head>
   <title>Listas em HTML</title>
   </head>
   
   <body>
   <ol type="a">
   <li>Nome</li>
   <li>Telefone</li>
   <li>Endereço</li>
   <li>País</li>
   </ol>
   </body>
   </html>
   

   Ficará assim no site:

   ...