Montando uma página com tableless

Fonte: http://ronnyroriz.wordpress.com/2007/10/13/montando-uma-pagina-com-tableless/


Neste artigo vamos aprender a montar uma página usando tableless. O artigo mostrará passo a passo como você proceder.
Bem vamos lá, sem muito “enrolação”.
Abaixo os passos de criação da página:

PASSO 1 – “CRIANDO UM ARQUIVO .CSS”:
Vamos criar nosso arquivo com extensão “.css” e daremos o nome de “style.css”, ainda colocaremos o mesmo dentro de uma pasta chamada css. Conforme abaixo:

PASSO 2 – “ESTRUTURANDO O SITE”:
Agora vamos fazer a estrutura que queremos. Que será um topo, uma barra de navegação na esquerda do site e um conteúdo com o restante. Conforme a figura abaixo:

PASSO 3 – “CRIANDO O ARQUIVO INDEX.HTML”:
Depois de escolhida a estrutura, vamos ao arquivo index.html
OBS: Você deve criar este arquivo na raiz de seu site ou seja no mesmo nível em que se encontra a pasta css. Conforme figura:

Criamos a referência do estilo da seguinte maneira:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=windows-1250″>
<meta name=”generator” content=”PSPad editor, http://www.pspad.com”&gt;
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
<title></title>
</head>
<body>

</body>
</html>

Agora vamos a criação das divs. Dentro das tags <body> escreva:

<div>
<div id=”body”>
<div id=”top”>
Cabeçalho
</div>
<div id=”midle”>
<div id=”menu”>
<ul>
<li>Menu 1</li>
<li>Menu 2</li>
<li>Menu 3</li>
</ul>
</div>
<div id=”content”>
<blockquote>Conteúdo aqui</blockquote>
</div>
</div>
</div>
</div>

Onde: id=”body” é igual ao corpo externo da página; “top” é igual ao cabeçalho do site; “midle” é igual a todo conteúdo abaixo do topo; “menu” são os menus e “content” é igual ao conteúdo.

Vamos agora ao css para atribuir os estilos para estes objetos.

body { margin:0px; padding:0px; font-family:"Trebuchet MS",Arial, Helvetica, sans-serif; font-size:12pt; }

#body { width:779px; }

#top { width:779px; text-align:center; padding:50px 0px 50px 0px; float:left; background-color:#000000; color:#FFFFFF; font-size:22pt; }
#midle { width:779px; float:left }
#menu { width:150px; float:left; background-color:#CCCCCC; }
#content{ width:625px; padding:20px 0px 20px 0px; float:left; border:2px solid #CCCCCC;}

Após feito isto é só apreciar seu código.

O resultado final é algo parecido com isto:

Isso aí pessoal, até a próxima.

Nícolas Müller – Portal Oficina da NET

Anúncios

Como viver no home office sem se atrapalhar

16 de dezembro de 2004, 0:00

Você um dia vai trabalhar em casa (se já não trabalha). A primeira coisa é não misturar os canais e saber transitar bem entre estar em casa e trabalhar em casa. Veja algumas idéias.

 

Por Alexandre Bobeda

Acordar cedo, tomar banho, tomar café, ler um jornal e ficar de pijama! Pode ser? Atualmente, sem sombra de dúvida, e você ainda poderá ser bem visto por isso.

Trabalhar em casa, também chamado de home–office ou teletrabalho é o novo–velho hype do mundo corporativo e da mídia que o sustenta de tempos em tempos. Como não poderia deixar passar em branco, sendo algo tão próximo de mim, tenho visto em diferentes publicações, desde aquelas que tratam de negócios àquelas que tratam de “estilo de vida” ou “decoração”, passando pelas de “vida saudável” e afins, parece que essa modalidade de trabalho – resultado da mudança de paradigmas no mundo do trabalho e da relação empresa–profissional em tempos globalizados – foi eleita a tendência da temporada a ser redescoberta, rediscutida e redefinida.

Hoje já se fala em “projetos para home–office”, “móveis para home–office”, “gadgets para home–office”, “iluminação para home–office” etc. Coisas comuns a uma prática que começa a se popularizar por aqui, mas que ainda não é completamente entendida.

Mais do que ser vista como uma idéia já bem adiantada e que funciona em países adiantados, o home–office é uma forma inteligente de ter o seu trabalho bem feito, com mais liberdade e economia de tempo e dinheiro em investimentos muito diversos de um “office” convencional. Sem trânsito, sinal fechado, chefe chato ou traje social.

Então, sem dar muita atenção a visões equivocadas ou românticas do “escritório em casa” e tendo em mente que o mais importante é ter um canto reservado e organizado em sua casa para trabalhar, existem apenas algumas coisas que você precisa saber:

1) A primeira coisa a saber é que todos precisamos de horários e de disciplina para o nosso home–office. Não é porque estamos em casa, trabalhando, que vamos começar quando bem entendemos necessário ou quando “dá tempo”. Jamais. É preciso lembrar definitivamente que as tarefas e responsabilidades assumidas estão relacionadas com o mundo lá fora, do trabalho comum, nas empresas com horários ajustados. Logo, natural e razoável que tenhamos um horário definido para que possamos estar disponíveis e ativos, realizando o trabalho de forma eficiente e organizada. Da mesma forma, trabalhar além da conta ou responder a e–mails fora de horários aceitáveis não traz retorno algum.

2) Quem disse que não se pode ligar o som e ouvir música? Bom, se é para se distrair, melhor mesmo que não o faça, mas saiba que existem empresas que permitem que se ouça música enquanto trabalha. Se você gosta e pode realizar suas tarefas com o som ligado, por que não?! É uma ótima maneira de trabalhar em casa sem a sensação de que se está sozinho ou isolado. Faça sua trilha–sonora, mas seja prudente!

3) Um bom lugar na casa é tudo o que se precisa, na prática. Se tiver que ser um canto em seu quarto, tudo bem, mas que seja um local agradável, bem arrumado e preparado para o trabalho. Alguns preferem um quarto à parte na casa, como um escritório mesmo, enquanto outros apenas adaptam o próprio quarto ou a sala da casa com um espaço para o home–office. O que importa é que seja um lugar seu, onde se fique à vontade e se tenha vontade de estar para trabalhar.

4) Dividir o “estar em casa” do “trabalhar em casa” é algo fundamental e que tem a ver com aquilo já mencionado, dos horários para o trabalho. Se você mora com outras pessoas, faça–os saber que em determinada hora você está em casa, mas não disponível para tudo, apenas trabalhando. Se tiver que ter inclusive outra linha telefônica para facilitar as coisas, melhor.

5) O escritório ideal não existe! Apenas o que for compatível com seu bolso, suas necessidades e seu trabalho é que deve existir. Portanto, baseie seu home–office naquilo que realmente é mais importante para você (e não para as revistas de decoração!): se um computador com impressora ou um notebook ou um handheld, celular, fax, scanner, móveis, estantes etc. É só pensar no que é preciso ter para fazer o trabalho: uns precisam de muito, outros, de muito pouco.

6) Os gastos, geralmente, são todos seus. Assim, é altamente recomendável ser capaz de otimizar o que se tem para o trabalho de forma a não extrapolar orçamentos ou seus próprios custos. Com as facilidades tecnológicas de hoje, normalmente se resolve tudo via e–mail ou pela internet, bem como planos de VoIP para quem faz muitas chamadas interurbanas e banda larga para acesso à internet. São detalhes que têm um peso enorme nas contas de um home–office.

7) Sair de casa também é essencial. Nada de apenas ficar trabalhando, usando o PC ou a internet e vendo DVDs no sofá: faz bem à mente, ao corpo e ao espírito dar umas voltas de vez em quando, ver o que está acontecendo, ir ao cinema, conversar com amigos e coisas do tipo. Isolamento faz mal à saúde!

8) Por fim, seja o mesmo profissional de sempre: dedicado, responsável, antenado e preocupado em fazer o melhor por seus clientes. Afinal, mais do que em qualquer outro momento, é seu nome e sua reputação profissional que estão em evidência. [Webinsider]

Entenda a Web 2.0

Entenda a Web 2.0

Julio Preuss – 02/01/2007 – 14:47

Responda rápido: o que têm em comum os sites/serviços GMail, BitTorrent, Delicious, FlickR e YouTube, todos já abordados em nossos tutoriais? Acertou quem respondeu que são representantes célebres da chamada Web 2.0, uma nova encarnação da Internet que tem recebido tanta atenção da mídia e de investidores que já começa a ser tratada como uma segunda “bolha”.

É importante não confundir Web 2.0 com a tão falada e tão pouco vista Internet 2 – a rede super-rápida que interliga instituições acadêmicas e governamentais e eventualmente substituiria a infraestrutura atual. A Internet 2 é isso: infra-estrutura. A Web 2.0 é um conceito, uma série de princípios que definem um novo tipo de site, de serviço, de experiência online.

A origem do termo remonta a 2004, quando representantes da editora O’Reilly e da promotora de eventos MediaLive realizaram uma sessão de “brainstorming” para conceber um congresso sobre Internet. Dale Dougherty, vice-presidente da O’Reilly, teria então saído com a idéia da Web 2.0. A primeira conferência, realizada em outubro daquele ano, foi um sucesso – assim como as edições de 2005 e 2006. Mas o que “pegou” mesmo foi o nome, que já aparece mais de 100 milhões de vezes no Google!

“A rede é o computador”

A primeira definição do que seria a Web 2.0 dizia que ela é “a web como plataforma”. Em outras palavras, que os programas passam a rodar na própria Internet (na verdade, nos servidores das empresas que os desenvolveram), e não mais nos computadores dos internautas. Quem abandonou o Outlook Express ou equivalente depois que começou a usar o Gmail sabe do que estamos falando.

O já mencionado serviço de armazenamento remoto de listas de favoritos Del.icio.us é um exemplo ainda melhor: em vez de guardar seus bookmarks no navegador, ele os armazena nos servidores da empresa, tornando-os disponíveis em qualquer computador do mundo conectado à Internet. Em 2004, só isso bastaria para que fosse classificado como um produto Web 2.0.

Quase um ano depois da realização da primeira conferência, no entanto, Tim O’Reilly, presidente da empresa que leva seu sobrenome, publicou um artigo que expande o conceito de Web 2.0. (Para quem tem dificuldade com o inglês, aqui está “O que é a Web 2.0” em português” em português). O texto é, até hoje, o primeiro resultado que o Google apresenta quando buscamos pela expressão “Web 2.0”.

Nele, Tim lista exemplos de tecnologias e ferramentas da Web tradicional e suas equivalentes na Web 2.0. Ficando apenas com os mais conhecidos do internauta amador, temos exemplos como as duplas Ofoto e FlickR, mp3.com e Napster, Britannica Online e Wikipedia e sites pessoais e blogs – onde o primeiro é sempre Web 1.0 e o segundo, 2.0.

Questão de princípios

Todos os exemplos listados acima permitem bastante participação dos usuários. Etiquetando e comentando fotos no FlickR, sendo eles mesmos os repositórios de músicas no finado Napster, escrevendo e editando os verbetes da Wikipedia e alimentando seus blogs com links para outros blogs, onde também podem deixar comentários.

A possibilidade dos usuários adicionarem valor é apenas um dos oito padrões de desenvolvimento Web 2.0 que Tim listou. O fato do valor da participação do usuário e dos “efeitos de rede” serem acumulado “por default”, sem que necessariamente nos demos conta, é um segundo ponto. A cooperação entre os próprios serviços, permitindo a criação dos chamados “mashups”, é um terceiro, e a geração de grandes bancos de dados que podem alimentar tanto os seus serviços, quanto os dos outros, é o quarto.

Os serviços da nova Web devem também contemplar a “Cauda Longa” (pequenos nichos de mercado que, juntos, representam um enorme volume), ser pouco restritivos nas licenças aplicadas ao seu conteúdo, oferecer software que rode em mais de uma plataforma e atualizar constantemente os programas, que jamais deixariam a “versão beta”. É só analisar os exemplos que listamos no primeiro parágrafo para concluir que quase tudo isso está presente em cada um deles.

Se a definição original da Web 2.0 lhe parecer muito simplista e a lista de princípios de Tim O’Reilly, muito complicada, talvez dê para resumir o conceito pelas palavras do programador Paul Graham. Num artigo publicado no fim de 2005, Graham enumerou três pontos que, em sua opinião, definiam a Web 2.0: Ajax (Asynchronous Javascript and XML, sobre a qual já falamos aqui), democracia e “não maltrate os usuários”. Nós, usuários, agradecemos!