Web Como Um Todo!: web como um todo

Mostrando postagens com marcador web como um todo. Mostrar todas as postagens

4 de nov. de 2010

Vídeo: Stop Motion - Google Street View

Pra quem aprecia coisas legais da internet e novidades, esse vídeo Stop motion vai te empolgar. Vale a pena conferir!

10 de abr. de 2010

Centralizar Página ou Div

Olá Pessoal,

Hoje vou mostrar aqui uma técnica para centralizar a página no meio da tela. Uma técnica muito comum é ativar a propriedade align="center" da tag div, porém não recomendo pois fica mais pra uma P.O.G, então vamos fazer isso com CSS, separando layout de conteúdo ;)

Vamos pensar na estrutura do site

Bom pelo que pode ser visto na imagem acima, teremos uma div principal que preencherá toda a tela e uma div conteúdo.

Vejamos como o HTML fica neste caso



<!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>Web Como Um Todo!</title>

</head>



<body>

<div id="principal">

<div id="conteudo">

Conteúdo aqui!

</div>

</div>

</body>

</html>

Show! Já temos o conteúdo(HTML), agora é hora de definir o layout(CSS).



#principal{

width: 100%;

}



#conteudo{

width:500px;

margin:0 auto;

border: 1px solid #000000;

}

Repare que definimos estilos para as duas DIVs, na div PRINCIPAL definimos a largura em 100%, ou seja, a largura de toda tela será preenchida. No div CONTEUDO foi definido a largura para width:500px; (apenas para exemplo, você pode definir a largura que desejar), uma borda border: 1px solid #000000; (para melhor visualizar o efeito) e o grande responsável pelo alinhamento do div na tela a propriedade margin: 0 auto;

4 de mar. de 2010

Menu CSS Vertical (efeito flash)

Olá, hoje você VAI aprender como é simples fazer um menu CSS com estilo flash, algo que fica simples, leve(devemos nos preocupar sempre com isso, pois AINDA temos muitos usuários sem banda larga no Brasil), acessível, ou seja, respeitando os padrões do W3C.

Primeiramente vamos criar um documento HTML básico como este abaixo(chame de wcut-menu.html):



<!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>Web Como um todo! me ensinou - Meu primeiro Menu CSS Vertical</title>

</head>



<body>

</body>

</html>

Em seguida, insira o código de uma lista comum HTML:



<!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>Web Como um todo! me ensinou - Meu primeiro Menu CSS Vertical</title>

</head>

<body>

<ul id="wcut-menu">

<li><a href="#" title="home">home</a></li>

<li><a href="#" title="release">release</a></li>

<li><a href="#" title="produtos">produtos</a></li>

<li><a href="#" title="contato">contato</a></li>

</ul>



</body>

</html>

Note que foi incluído um identificador para esta lista (atributo id), e também foi utilizado o atributo title para atender aos Padrões W3C para melhor acessibilidade.

Veja como o exemplo ficou:

Reparou as bolinhas e a cor horrível né?

Então chegou a hora de brincar com o CSS e alterar o estilo da lista. Crie uma folha de estilos (CSS), nomeie para wcut.css e insira o código abaixo:



@charset "utf-8";

/* CSS Document */



#wcut-menu{

font-family:Arial, Helvetica, sans-serif; /* Define-se a família da fonte */

border: 1px solid #000000; /* Define as propriedades da borda do elemento */

width: 200px; /* Define a largura do elemento em pixels(px) */

list-style-type:none; /* Retira os marcadores (bolinhas) da lista  */

text-align:center; /* Centraliza o texto dentro do menu */

padding-left:0px; /* Elimina os espaços da esquerda */

}

Agora adicione esta linha entre as tags <head> e </head>



<link rel="stylesheet" href="wcut.css" type="text/css" />

Agora sim, já deu uma melhorada tente entender qual impacto cada linha de CSS teve.

Vamos agora editar cada item da lista (tag li no HTML)



#wcut-menu li a{

display:block; /* Exibe o link em bloco (ocupa toda área) */

color:#663300; /* Altera a cor do elemento */

text-decoration:none; /* Retira o sublinhado do link  */

}

Agora, você vai aprender uma propriedade do CSS que será muito útil em efeitos, adicione a linha abaixo em seu arquivo CSS



#wcut-menu li a:hover{

background-color:#663300;

color:#FFFFFF;

}

Eis que surge como mágica um efeito como menu flash

A propriedade :hover em frente ao identificador css (neste caso "#wcut-menu li a" que indica que busca um elemento 'a' dentro de uma tag 'li' dentro de um elemento identificado por wcut-menu ) faz com que o que está descrito dentro será setado somente quando o mouse passar pelo elemento.

Veja aqui o Resultado Final do tutorial

Bom, acho que isso já abre a mente de muitos, agora é só se divertir e criar. Qualquer dúvida é só comentar que respondemos. Pra quem quer se aprofundar mais no CSS este site descreve todas as propriedades do CSS, é só devorar.

Espero que tenha ajudado. Abraços!

3 de mar. de 2010

O que é W3C ?

W3C significa "World Wide Web Consortium" é um consórcio de empresas de tecnologia, atualmente com cerca de 500 membros. Fundado por Tim Berners-Lee em 1994 para levar a Web ao seu potencial máximo, por meio do desenvolvimento de protocolos comuns e fóruns abertos que promovem sua evolução e asseguram a sua interoperabilidade.

O W3C desenvolve padrões para a criação e a interpretação dos conteúdos para a Web. Sites desenvolvidos segundo esses padrões podem ser acessados e visualizados por qualquer pessoa ou tecnologia, independente de hardware ou software utilizados, como celulares (em Portugal, telemóvel), PDAs, de maneira rápida e compatível com os novos padrões e tecnologias que possam surgir com a evolução da internet.

Para alcançar seus objetivos, a W3C possui diversos comitês que estudam as tecnologias existentes para a apresentação de conteúdo na Internet e criam padrões de recomendação para utilizar essas tecnologias. Com a padronização, os programas conseguem acessar facilmente os códigos e entender onde deve ser aplicado cada conhecimento expresso no documento.

Padrões seus como HTML, XHTML e CSS são muito populares, contudo, em muitos casos são usados de forma errônea devido ao desconhecimento da especificação.

É um dever de todo desenvolvedor Web respeitar e seguir os padrões de acessibilidade do W3C, pois de outro modo poderá impor barreiras tecnológicas a diversas pessoas, desestimulando e até mesmo impedindo o acesso a suas páginas.

13 de out. de 2009

O que é CSS ?

CSS é a abriviação de Cascading Style Sheets (Folhas de estilos em cascata)
Definem como/onde mostrar os elementos HTML
Vieram com o HTML 4.0 para solução de alguns problemas
Estilos podem ser armazenados em arquivos separados

Porque foi inventado?

Pense em um site grande como R7.com, onde as seções (Notícias, entretenimento, vídeos, etc..) tem sua cor definida e quando se entra em uma seção todos os links e textos são da mesma cor. Imagine se o diretor de marketing resolve modificar a cor da seção "entretenimento" porque a cor atual não agrada aos leitores.

Até aí tudo bem, agora imagine-se no lugar do desenvolvedor responsável pela mudança (credo!), ter que alterar todas as tags font para alterar as cores das fontes de cada elemento. Imagine o trabalho e o tempo que isso iria levar.

Graças a pesadelos como este o CSS foi inventado para poder separar as camadas de conteúdo (HTML) e interface (CSS), ou seja, você atribui estilos para seus elemento HTML sem ter que modificar NADA no código HTML.

Separar camadas de apresentação e conteúdo

Uma prática muito comun no HTML é a utilização de tabelas para formatar o layout do site.

Assim como a tag font que era usada para formatar a fonte do texto (tamanho, cor). Porém estas não são uma boa prática, pois o layout da página não deve ser definido no próprio HTML e sim em um folha de estilos (CSS).

A versão 4.0 do HTML foi criada para ser removido toda a formatação do documento HTML e armazenar isto em uma folha de estilo.

Nesta versão a apresentação da página foi separada de sua estrutura, tendo assim total controle do layout (cores e posição dos elementos) sem modificar nada no conteúdo do documento.

Este post foi somente para deixar bem claro que o conteúdo deve ser separado do layout, nos próximos post falarei mais sobre CSS.

Web Como Um Todo!