A equipe da Turbosite reuniu dois artigo para explicar melhor essa diferença. Reunimos conteúdo do blog Debug True e do blog Ferramentas Blog, abaixo você pode conferir

Layout Responsivos

Os layouts responsivos são aqueles que precisam ter uma atenção maior da área de UX, quando é analisada toda a usabilidade do site, contemplando todos os dispositivos e se possível partindo do princípio “mobile first”, onde toda a arquitetura começa sendo pensada a partir do menor dispositivo utilizável seguindo em ordem crescente e adequando as informações.

O layout não segue a mesma estrutura em todos os dispositivos, muitos trocam as informações de lugar para melhor visualização, as vezes escondem e mostram a partir de um click, mudam os tamanhos das fontes, ícones e qualquer outro elemento. Para esse tipo de desenvolvimento são utilizadas as media queries css e algumas libs como bootstrap,  groundwork e o LazyLoad.

A seguir você confere 3 estados diferentes para layout e sua respectiva reação com a página.

1. Monitores com resolução de 1024px de largura ou superior e Internet Explorer 8 e inferior. Foi declarado uma largura absoluta de 960 px para o corpo do site.
2. Largura igual ou inferir a 900px. Aqui declaramos que existem apenas larguras relativas de 100%.
3. Largura igual ou inferir a 400px. Ocultamos a sidebar do lado esquerdo (apenas para ilustrar o exemplo).

Neste exemplo podemos ver claramente como o efeito cascata do CSS funciona corretamente com o Media Queries, desta forma o CSS que fizemos como padrão é mantido normalmente por todo o documento, sendo alterado apenas quando declaramos alguma modificação com o Media Queries.

Note também que o css declarado para a largura de janela de 900px é mantido para o de 400px.

Layouts Fluídos

Os layouts fluídos são aqueles que acompanham o tamanho da tela, apenas aumentando e diminuindo, não trocando estrutura e não pensando muito na usabilidade, vamos pensar em acessar um site em uma tv de 50″ e acessar o mesmo site em um celular onde esse site é visto da mesma forma pelos 2 dispositivos, é claro que ficará horrível em um dos casos se não nos dois, para construir esse tipo de layout não se pensa muito em “px” e sim em “%”, para que o elemento se estique de acordo com o pai tendo assim a sua “fluidez”. Aqui tem um exemplo simples de como ele funciona: 960.gs.

Para ilustra melhor o que estamos dizendo, a imagem a seguir exemplifica um layout construído em “%”.

Veja que caso o usuário tenha a tela muito grande o texto ficará praticamente em apenas uma linha e quando diminuímos a tela o texto fica totalmente espremido na sidebar.

Layouts Fluídos Híbridos

Temos também os layouts fluídos híbridos onde seguem o mesmo padrão dos fluídos, porém com uma limitação de largura, nesse caso utilizamos o “max-width” e “min-width” assim conseguimos ter certo controle do layout.

Para demonstrar como funciona o Fluído Híbrido, é aplicado um max-width de 960px e min-width de 600px no exemplo anterior.

Para conferir na prática a diferença entre cada layout, na lista abaixo abaixo você pode acessar um exemplo de página para cada tipo layout. Apenas altere o zoom da página para testemunhar o efeito de cada layout em diferentes resoluções de tela.

• Página Responsiva;
• Página com layout Fluído;
• Página com layout Fluído Híbrido.

A forma de utilizar é muito simples, basta adicionar o arquivo css animation e inserir a classe ao objeto que deve ser animado, exemplo:

Inserção do CSS das animações:

<link rel="stylesheet" href="css/animations.css">

Adicionando classe ao objeto que será animado:

<div id="object" class="slideUp">

Abaixo você pode conferir o resultado das animações, clique nos links para ver os diversos efeitos:

CSS:

Javascript:

Html:

Para fazer com que a animação seja ativada quando o usuário ver o item, você deve colocar este código em Javascript e css, sendo que, deve ser carregado o Jquery antes:

CSS:

#object{
	background-color: #fe5652;
	visibility: hidden;
}

JS:

<script>
	$(window).scroll(function() {
		$('#animatedElement').each(function(){
		var imagePos = $(this).offset().top;

		var topOfWindow = $(window).scrollTop();
			if (imagePos < topOfWindow+400) {
				$(this).addClass("slideUp");
			}
		});
	});
</script>

Para ver o exemplo, acessem este LINK.

Esperamos que tenham gostado e aprendido, dúvidas e sugestões deixem nos comentários, isto incentiva-nos a sempre compartilhar conhecimento cada vez mais!

“Hoje não pensamos que estamos assistindo um vídeo e áudio de forma nativa no navegador, e muito menos acessando um navegador em um telefone. Nós esperamos ser capazes de compartilhar fotos, fazer compras, ler notícias e procurar informações em qualquer lugar, em qualquer dispositivo. Embora eles permanecem invisíveis para a maioria dos usuários, HTML5 e a Plataforma Aberta da Web está guiando estas crescentes expectativas dos usuários. “

Tim Berners-Lee, diretor do W3C

O vídeo abaixo, publicação da W3C, mostra o árduo trabalho da equipe  para criar os padrões da Web.

Hoje, se você tem interesse em criar uma  página acessível à vários ambientes, apenas adaptar o layout à variações de resolução não basta. Algumas metodologias devem ser revistas para uma completa adequação. Eventos gerenciados pelo DOM, como key press, mouse over e mouse out, não funcionam muito bem em dispositivos móveis. Enquanto conteúdos que são ativados por meio de alguma ação, não serão bem aproveitados para usuários com alguma deficiência, por exemplo.

Alguns tópicos serão levantados durante esse artigo, envolvendo questões quanto á portabilidade e acessibilidade.

Independência de dispositivo

Eventos que funcionam somente pelo mouse são um grande problema para a acessibilidade, pois nem todas as pessoas conseguem utilizar o mouse. Quem utiliza leitor de tela, por exemplo, navega exclusivamente pelo teclado. Pessoas com determinados tipos de deficiência física poderão não ter a habilidade de usar o mouse convencional e poderão utilizar teclados e mouses adaptados. Por isso, todas as funções de uma página devem ser dispositivo-independentes, ou seja, devem funcionar pelo mouse, teclado ou outro dispositivo. Além disso, o foco do teclado não deve ficar fixado ou “preso” em algum elemento, pois o usuário deve poder percorrer toda a página pelo teclado facilmente. Valendo lembrar que em dispositivos móveis, muitos eventos são inexistentes.

Como exemplo, aquele popover que aparece na página, coma opção de fechar ao click de um botão gera uma excelente usabilidade, mas uma acessibilidade terrível para usuários que não conseguem alcançar aquele botão. Uma simples adição de código aplica à tecla “ESC” do teclado a ação de fechar o popover.

window.onload = function(){
	document.onkeydown = function(e){
		// tecla ESC
		if(e.keyCode==13){
			fecha_popover();
		}
	}
}

Se forem utilizados eventos de JavaScript específicos para mouse, devem ser utilizados os correspondentes para teclado:

Adequar a navegação da página pela tecla “TAB” do teclado é outra dica importante. Ordene o conteúdo da sua página para que este tipo de navegação passe apenas por conteúdos utilizáveis, como formulários e links.

Por fim, sempre teste o site navegando por todo o conteúdo somente pelo teclado, com setas e “TAB”, e em diferentes navegadores.

Alterações temporais do conteúdo

É muito comum a utilização de conteúdos que se movem, como os slideshows. Esse tipo de elemento não deve mover-se automaticamente, pois o usuário é quem deve decidir se quer “rolar” o conteúdo ou não. Assim, devem ser oferecidos controles para iniciar, pausar e reiniciar tais rolagens. Esses controles devem ser acessíveis também pelo teclado e devem estar bem descritos, para quem utiliza leitor de tela.

Atualização e redirecionamento automáticos

Quando ocorre uma mudança, atualização ou redirecionamento repentino na página, o usuário pode sentir-se confuso ou desorientado, especialmente se estiver utilizando algum recurso de Tecnologia Assistiva, como um leitor de tela, por exemplo. Isso ocorre em páginas com atualização ou redirecionamento automáticos. A atualização automática periódica – muito utilizada por canais de notícias – é comumente realizada através do uso do o atributo http-equiv com conteúdo “refresh” do elemento meta no HEAD do documento.

Em páginas onde a atualização é absolutamente necessária, o usuário deverá ser informado que a página é atualizada automaticamente.

Quanto ao redirecionamento automático, o mesmo deve ocorrer de forma transparente para o usuário. Ou seja, não devem ser utilizadas marcações para redirecionar a uma nova página, como o uso do atributo http-equiv com conteúdo “refresh” do elemento META.

Limite de tempo

Em uma página onde há limite de tempo para realizar uma tarefa deve haver a opção de desligar, ajustar ou prolongar esse limite. Essa recomendação não se aplica a eventos em que o limite de tempo é absolutamente necessário. Deve-se lembrar que, em ambos os casos, o limite de tempo deve ser informado.

Ao especificar o tempo limite para o usuário conclua a ação, não se deve tomar como modelo um desktop conectado a teclado e mouse convencionais. Dispositivos móveis mostram uma ergonomia mais precária, comparadas ao desktop, exigindo um esforço maior e mais prolongado para resolver algumas ações. Deficiências motoras retardam a conclusão de alguns trabalhos na página da web. É importante adequar o tempo levando em conta o dispositivo que o usuário esteja utilizando, e a dificuldade que usuários possam ter concluir trabalhos convencionais.

Intermitência de tela

Não apenas pela acessibilidade, mas também pelo bom gosto. Não devem ser utilizados efeitos visuais piscantes, intermitentes ou cintilantes. Em pessoas com epilepsia fotosensitiva, o cintilar ou piscar pode desencadear um ataque epilético. Além disso, elementos piscantes podem causar desconforto, desatenção e confusão para os usuários.

A importância do contraste para usuários com Daltonismo

A deficiência de cor vermelho/verde é o tipo mais comum de Daltonismo. Por isso, deve-se evitar a utilização de contrastes entre essas duas cores.

• Utilizando combinação de cores verde/vermelho: com a deficiência de cor não é possível perceber o contraste entre as cores.

• Utilizando combinação de cores verde/lilás: mesmo com a deficiência de cor, ainda é possível perceber o contraste.

Elementos ocultos na tela

É bastante comum, e deixa a página “inteligente”, ocultar texto que devem ser mostrar apenas se o usuário desejar velos. Mutas vezes por alguma ação do mouse over  aplicada a um ícone de ajuda, por exemplo, para configurar uma capacidade de aprendizagem. Porém, dependendo método aplicado ao elemento para esconde-lo da página, aplicativos de leitores de tela não conseguem alcançar o conteúdo. Dependendo do método, a acessibilidade à aquela ajuda, não exite.

Abaixo é mostrado os diferentes métodos para esconder um elemento da página, e sua reação aos aplicativos leitores de tela.

Elementos ocultos na tela

Por fim, para a avaliar se sua página é Web acessível, existem ferramentas automáticas que auxiliam na avaliação de acessibilidade. O aplicativo eMAG sugere um passo a passo para avaliar a acessibilidade de um site:

1. Validar os códigos de conteúdo HTML e folhas de estilo;
2. Verificar o fluxo de leitura da página, utilizando um navegador textual ou um software leitor de tela;
3. Checar o fluxo de leitura das páginas sem estilos, sem scripts e sem as imagens;
4. Verificar as funcionalidades disponíveis na barra de acessibilidade, como atalhos e contraste;
5. Efetuar a validação automática de acessibilidade, através de avaliadores automáticos;
6. Realizar a validação manual, com uso de checklists de validação humana.

Um recurso bastante útil na avaliação de acessibilidade de um site são as extensões para navegadores para análise de acessibilidade:

• Para Firefox: Accessibility Evaluation Toolbar (link para um novo site)
• Para Google Chrome: Accessibility Developer Tools (link para um novo site)
• Para Internet Explorer: Web Accessibility Toolbar for Internet Explorer (link para um novo site)

Artigo Retirado de Curso eMAG – gov.br

PLANEJAMENTO

Na grande maioria dos projetos web, tudo se inicia pela Arquitetura de Informação (UX) e mesmo que talvez esta não seja a sua área, eventualmente organizar e entender um website por inteiro, também possa ser uma necessidade.

Sem considerar todos os argumentos aplicados às melhores metodologias, criar um sitemap* pode ser algo bastante útil então, a dica é, uma das ferramentas online que trabalha bem com esse tipo de documento é o Coggle.it que ainda está em sua versão beta, mas já pode ser usado e aplicado.

*Sitemap: organograma contendo todas as páginas que o site/portal irá conter. Este documento especifica as várias telas. Geralmente é produzido no início do projeto e refinada durante todas as etapas conforme as demandas posteriores. Referência: http://webinsider.com.br

Outra ferramenta para o planejamento de projetos, especial para brainstorms e referências (para os designers de plantão) é o Mural.ly, que além de funcional tem uma interface de fácil uso que te permite, literalmente, arrastar um website para o seu mural de ideias.

DESIGN

Nos dias de inspiração, o design de uma interface simplesmente flui sem paradas e pausas em branco, mas em alguns dias as coisas ficam um pouco mais difíceis e até mesmo escolher as melhores cores, torna-se uma coisa bastante complexa. Pensando nisso a ColorScheme e a ColorSchemer.com são ótimas ferramentas de paletas de cores para seu website. Você insere o código hexadecimal da cor principal e a ferramenta te mostra as demais combinações. Vale a pena.

Além de pensar em interface, com as técnicas de Design Responsivo, é inevitável em algum momento pensar em grids (mesmo que você seja um daqueles contra o uso deles  ). Para isso, existe o Grid Calculator e o Grid Pak onde você insere a medida de largura padrão de seu website e ele cria as medidas das colunas divididas igualmente. Você ainda pode fazer o download do grid em PSD e PNG.

FRONT-END

Essa talvez seja a etapa de um projeto melhor auxiliada neste quesito ferramentas. Graças ao perfil colaborativos dos Front-Ends do mundo, as possibilidades são quase infinitas (estamos chegando lá :D) e esta fase de transição HTML 4 -> HTML 5 e CSS 2 -> CSS3, proporciona ainda mais que novas ferramentas surjam.

Iniciando pelos auxiliadores de CSS3 :D. Sim! Eles são ótimos e poupam nossa memória em lembrar exatamente como as novas propriedades precisam ser declaradas para gerarem efeitos na interface.
A primeira dica fica para o Create CSS3, que é bastante completo e contém a maior parte das novas características mais usadas. A forma de usá-lo é bem simples: clica no item de seu interesse, configura com os dados necessários para você e voialá, um trecho de propriedades css pronto para ser implementado.

Ainda falando em css, que tal deixar o css feio, bonito? Isso mesmo! O Css Beautifier reorganiza a distribuição de linhas e tabs do seu arquivo css. Basicamente, ele deixa mais agradável a leitura.

Mas, se apenas deixar bonito não resolve e você também quer um css otimizado, no CSS Compressor, você copia, cola e sai um css minimizado e pronto para ser implementado. Aliás, você ainda pode determinar o nível das “facadas” que você dará nas linhas do seu arquivo.

Na mesma linha, porém um pouco mais completo, tem o CSS Minifier que também minimiza, tem API de integração e o bônus de outras 3 ferramentas, Javascript Minifier, PNG Crush (para redução de arquivos png) e o JPG Optimiser (para otimização de arquivos JPEG).

Aproveitando o bônus da ferramenta anterior, outra ferramenta que pode auxiliar na questão de performance de imagens, é o Image Optim, um software de fácil instalação para Mac, que reduz o peso de arquivos de imagens. Caso você não utilize um Mac, sem problema, ele possui uma versão Windows e outra Linux. Vale a pena.

Que tal testar seus códigos antes de implementá-los em seu projeto?
Isso lhe garante a segurança de saber se vai dar tudo certo na execução daquele javascript ou na inserção daquela propriedade no css.
Para isso, lhes apresento o CodePen, um editor de código live que funciona de forma bem direta e de fácil manuseio. Tem muita gente testando por lá ;).

Para os front-ends ligados nas novidades, a ferramenta indicada é o HTML5Please que vai informando quais novas tags e propriedades de HTML5 e CSS3 já podem ser implementadas neste período de transição.

E para fechar, front-end para site responsivo.
Quando um projeto também será responsivo (prática cada vez mais comum e mais profissional) esta estratégia precisa ser planejada antes de sua execução para que ao invés de gerar problemas você consiga gerar códigos bem feitos e o efeito esperado. Para isso, uma das preocupações que aparecerão será com as imagens do seu projeto e como elas responderão aos diferentes dispositivos. Neste aspecto, o Adaptive Images te auxilia detectando a resolução do usuário e apresentando a imagem com a melhor resolução possível ao dispositivo.

Completando a linha responsivo, outra preocupação é questão dos textos e sua adaptação à diferentes tamanhos de telas e neste caso, entra em cena o FitText, um script que fará seu font-size realmente flexível.

VALIDAÇÃO

Tudo pronto, tudo certinho, site publicado em ambiente de homologação ou até mesmo em ambiente final, que tal validar seu sites para ver se ele está de acordo com os padrões?

Para web standars tem o já conhecido (e as vezes temido) W3C Validator e outra opção não tão conhecida, mas funcional, o HTML Inspector.

Para os padrões de acessibilidade, você pode utilizar o A Checker que em alguns segundos diz quais padrões não estão sendo seguidos para que seu site seja acessível por navegadores textuais e de audio e ainda indica as melhores práticas para reverter os problemas.

Outra ferramenta importante para quem pensa em validações é a Webmaster Tools da Google, que permite verificar como o robô do buscador está se comportando em seu site, além de dizer quais páginas estão sendo indexadas. Além disso, te possibilita informar mudanças de URL ou até mesmo retorno de sites que foram invadidos. A ferramenta é robusta e de extrema valia. Confere lá!

Fonte: Tableless

Quer uma Hospedagem de Site Barata e confiável? www.turbosite.com.br

Parabéns, você chegou na última parte.

Então, agora eu já sei tudo?

Você aprendeu um bocado de coisas e já está em condições de construir seu website. No entanto o que você aprendeu é o básico e ainda há muita coisa a ser aperfeiçoada. Podemos dizer que você construiu uma base sólida para continuar e se aprofundar no assunto.

Nesta última lição, daremos umas dicas finais:

• Para começar, aconselhamos a escrever seus documentos HTML de forma ordenada e estruturada. Assim fazendo você estará não só mostrando aos outros que possui uma base sólida de conhecimento mas também estará facilitando a leitura, interpretação e manutenção do código.
• Siga as normas e valide seu código. Mas, não faça disto uma fonte de stress. Escreva um XHTML claro, use o DTD e valide suas páginas no validator.w3c.org.
• Coloque conteúdos nas suas páginas. Lembre-se que HTML é apenas a ferramenta que possibilita apresentar informação na Internet, assim é necessário que haja a informação a ser apresentada ou seja, o conteúdo.
• Páginas lindas e bem desenhadas são ótimas, mas as pessoas buscam informação na Internet.
• Evite encher suas páginas com imagens pesadas e outros “balangandans” que você encontra na Internet. Isto faz com suas páginas demorem a carregar e é frustante para o usuário. Páginas que demoram mais de 20 segundos para carregar podem perder até 50% dos seus visitantes.
• Lembre-se de cadastrar seu site nos sites de busca, de modo a que outras pessoas, além da sua família, possam encontrá-las e visitá-las. Na página de entrada dos sites para cadastro em mecanismos de busca você encontrará um link para adicionar seu site (O mais importante é o Google mas, existem outros tais como, DMOZ, Yahoo, AltaVista, AlltheWeb e Lycos).
• Neste tutorial você aprendeu a usar o Notepad, que é um simples e fácil editor de textos, contudo talvez você agora possa pensar em usar um editor mais sofisticado com mais possibilidades e ferramentas. Você encontra uma listagem e sumário de diferentes editores em Download.com.

Nesta parte você aprenderá mais alguns conceitos teóricos do HTML.

O que mais há para conhecer sobre HTML?

HTML pode ser escrito de várias maneiras. O navegador está apto a ler HTML escrito de várias maneiras. Podemos dizer que HTML tem muitos dialetos. Esta é a razão porquê alguns websites são apresentados de formas diversas em diferentes navegadores.

Desde o aparecimento da Internet tem sido feitas várias tentativas para se normatizar o HTML notadamente através do World Wide Web Consortium (W3C) fundado por Tim Berners-Lee (yep! o grande sujeito que inventou o HTML). Mas, este tem sido um árduo e longo caminho.

No passado – quando você tinha que comprar um navegador – Netscape dominava o mercado de navegadores. Àquela época as normas para o HTML estavam nas suas versões 2.0 e 3.2. Mas pelo fato de dominar 90% do mercado a Netscape não teria – e não teve – que se preocupar muito com normas. Pelo contrário, a Netscape inventava seus próprios elementos de marcação que não funcionavam em outros navegadores.

Por muitos anos a Microsoft ignorou completamente a Internet. Em determinado momento, resolveu competir com a Netscape e lançou seu navegador próprio. A primeira versão do navegador da Microsoft’s, o Internet Explorer, não era melhor do que o Netscape no suporte às normas do HTML. Mas, a Microsoft resolveu distribuir seu navegador gratuitamente (isto sempre agrada a todos) e o Internet Explorer em pouco tempo tornou-se o navegador mais usado e mais popular.

A partir das versões 4 e 5 a Microsoft anunciava que seus navegadores ofereciam cada vez maior suporte às normas HTML do W3C. A Netscape não se movimentou para atualizar seu navegador e continuou a colocar no mercado a velha e desatualizada versão 4.

O que vem a seguir é história. Nos dias atuais as normas HTML estão na sua versão 4.01 e no XHTML. Hoje em dia é o Internet Explorer que detém quase 90% do mercado. O Internet Explorer ainda tem seus elementos próprios, mas oferece suporte para as normas HTML do W3C. Os navegadores Mozilla, Opera e Netscape também suportam as normas.

Então, quando você codifica HTML de acordo com as normas do W3C, você está construindo um website para ser visualizado em todos os navegadores – não só agora mas também no futuro. E felizmente, tudo o que você aprendeu neste tutorial está de acordo com a mais nova versão do HTML, que é o XHTML.

Legal! Posso anunciar?

Devido a existência de diferentes tipos de HTML, você precisa informar ao navegador qual é o “dialeto” do HTML e no seu caso você aprendeu XHTML. Para informar ao navegador, você usa o Document Type Definition. O Document Type Definition deve ser escrito sempre no topo do documento:

Exemplo 1:

<!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" lang="pt-br">
 
<head>
<title>Título</title>
</head>
 
<body>
<p>texto texto</p>
</body>
 
</html>

  

Além do Document Type Definition (escrito na primeira linha no exemplo acima), que informa ao navegador que você está codificando XHTML, você precisa ainda adicionar informação extra na tag html, usando os atributos xmlns e lang.

xmlns é abreviação de “XML-Name-Space” e deve ter sempre o valor http://www.w3.org/1999/xhtml. Isto é tudo o que você precisa saber. Se você tem o hábito ou gosta de se aprofundar e conhecer coisas complicadas poderá ler mais sobre namespaces no site do W3C.

No atributo lang você específica em que língua (aqui trata-se de linguagem humana) o documento é escrito. As abreviaturas para as línguas existentes no mundo todo, estão nas ISO 639 standard . No exemplo acima a língua definida no atributo é o português do Brasil (“pt-br”).

Uma DTD informará ao navegador como deve ser lido e renderizado o HTML. Use o exemplo mostrado, como um template para todos os seus futuros documentos HTML.

O DTD é importaante ainda, para a validação da página.

Validação? Porquê deveria eu fazer isto?

Insira o DTD nas suas páginas e poderá verificar erros no seu HTML, usando o validador gratuito do W3C.

Para testar o validador faça o seguinte: crie uma página e publique na Internet. A seguir entre em validator.w3.org e lá digite o endereço (a URL) da sua página, depois clique no botão validar. Se seu HTML estiver correto, vai aparecer uma mensagem de congratulações. Se não, será apresentada uma lista de erros, informando o quê está errado e onde. Cometa alguns erros propositais no seu código para verificar o que acontece.

O validador não é útil somente no encontro de erros. Alguns navegadores tentam interpretar os erros cometidos pelos desenvolvedores e consertar o código mostrando a página corretamente. Em navegadores assim você nunca encontrará erros no próprio navegador. Já outros navegadores não aceitam o erro e apresentam a página arruinada ou mesmo nem apresentam. O validador então ajuda você a encontrar erros que você não tenha nem idéia de que existiam

Sempre valide suas páginas, para ter certeza que elas serão mostradas corretamente em todos os navegadores.

Até agora somente você conseguiu visualizar suas páginas. Chegou a hora de mostrá-las para o mundo todo.

O mundo está preparado para ver suas páginas?

O mundo está preparado sim – você, em breve, estará também. Para publicar seu trabalho na Internet, você precisa somente de espaço em um servidor e um programa FTP.

Se você costuma acessar a Internet já deve ter visto que existem vários serviços de hospedagem de sites. Seu endereço no servidor será alguma coisa parecida com http://home.servidor.com/nomedousuario. Você tem que ativar o serviço. Informe-se como fazer isto na documentação fornecida pelo serviço de hospedagem.

Para acessar o servidor você precisa conhecer o “Nome do seu servidor” (Por exemplo, ftp.seudominio.com.br) e ter um nome de usuário e senha.

Isto é tudo que eu preciso?

Para acessar o servidor e publicar as páginas você precisa de um programa FTP. Você não deve ter um programa destes ainda, mas existem vários deles na Internet para download e são gratuitos.

Existem muitos programas FTP. Um dos melhores é o FileZilla, e é gratuito . Você pode obter o FileZilla em filezilla.sourceforge.net.

Como eu faço o upload das páginas?

Abaixo fornecemos um exemplo de como fazer isto usando o serviço de hospedagem desejado e o programa CuteFTP. Este procedimento é mais ou menos igual para qualquer programa FTP.

Quando você abrir o CuteFTP você verá exatamente está tela:

Clique em FILE -> FTP Site ou se você tem afinidade com atalhos basta pressionar CTRL + N.

Então esta janela se abrirá:

Preencha com os dados corretos e na aba TYPE e configure como na imagem abaixo:

Depois clique na aba ACTIONS e defina onde está a pasta padrão localizada em seu computador para abrir juntamente com o FTP:

Pronto! Você está apito a conectar e utilizar seu FTP e hospedar suas páginas!

Para você que está começando agora na WEB venha para o TURBOSITE e descubra as vantagens de ser nosso cliente!

www.turbosite.com.br

Não seria ótimo se você pudesse dar à sua página o layout que ela merece?

Claro! mas como faço isto?

Para o layout da sua página use Cascading Style Sheets (CSS) – Folhas de Estilo em Cascata. Nesta lição você terá uma breve introdução às CSS. Depois você poderá aprender CSS desde o início no nosso tutorial CSS. Assim, considere esta parte apenas um aperitivo.

CSS é a melhor metade do HTML. Codificando, não há melhor parceria: HTML é responsável pelo trabalho pesado (a estrutura), enquanto CSS dá o toque de elegância (layout).

Como mostrado anteriormente, CSS pode ser adicionado com uso do atributo style. Por exemplo, você pode definir o tipo e o tamanho da fonte em um parágrafo:

Exemplo 1:

<p style="font-size:20px;">Este parágrafo em tamanho de fonte igual a 20px</p>
<p style="font-family:courier;">Este parágrafo em fonte Courier</p>
<p style="font-size:20px; font-family:courier">Este parágrafo em fonte Courier e tamanho 20px</p>

  

Será renderizado no navegador assim:

Este parágrafo em tamanho de fonte igual a 20px

Este parágrafo em fonte Courier

Este parágrafo em fonte Courier e tamanho 20px

No exemplo acima usamos o atributo style para definir o tipo de fonte usado (com a propriedade font-family) e o tamanho da fonte (com a propriedade font-size). Notar que no último parágrafo do exemplo definimos tanto o tipo como o tamanho da fonte separados por um ponto e vírgula.

Está parecendo que há uma grande quantidade de trabalho a executar

Uma das funcionalidades mais inteligentes das CSS é a possibilidade de controlar o layout de um arquivo central. Em lugar de se usar o atributo style em cada tag, você pode dizer ao navegador como deve ser o layout de todos os textos em uma página:

Exemplo 2:

<html>
 
  <head>
  <title>Minha primeira página CSS</title>	
 
  <style type="text/css">
	  h1 {font-size: 30px; font-family: arial}
	  h2 {font-size: 15px; font-family: courier}
	  p {font-size: 8px; font-family: times new roman}
  </style>
 
  </head>
 
  <body>
  <h1>Minha primeira página CSS</h1>
  <h2>Bem vindo à minha primeira página CSS</h2>
  <p>Aqui você verá como funciona CSS</p>
  </body>
 
</html>

No exemplo acima inserimos as CSS na seção head do documento, assim ela se aplica à página inteira . Para fazer isto use a tag <style type=”text/css”> que informa ao navegador que você está digitando CSS.

No exemplo, todos os cabeçalhos da página serão em fonte Arial e tamanho 30px. Todos os subtítulos serão em fonte Courier tamanho 15. E, todos os textos dos parágrafos serão em fonte Times New Roman tamanho 8.

Uma outra opção é a de digitar as CSS em um documento separado. Com as CSS em um documento separado você pode gerenciar o layout de muitas páginas ao mesmo tempo. Muito inteligente, pois você pode mudar de uma só vez, o tipo ou o tamanho da fonte de todo o site, quer ele tenha centenas ou milhares de páginas. Nós não nos aprofundaremos em CSS agora, mas você pode aprender tudo, no futuro, em nosso tutorial CSS.

O que mais posso fazer com CSS?

CSS faz muito mais do que definir tipos e tamanhos de fontes. Por exemplo, você pode adicionar cores e fundos. A seguir alguns exemplos para você praticar:

<p style="color:green;">Texto verde</p>
 
<h1 style="background-color: blue;">Cabeçalho com fundo azul</h1>
 
<body style="background-image: url('http://www.html.net/logo.png');">

  

CSS não é nada mais do que cores e tipos de fontes?

Além de cores, tipos de fontes, etc., CSS pode ser usado para controlar a configuração e a apresentação da página (margens, flutuações, alinhamentos, larguras, alturas, etc.) Controlando os diferentes elementos com CSS você será capaz de criar layouts elegantes e precisos.

Exemplo 3:

<p style="padding:25px;border:1px solid red;">Eu amo CSS</p>

  

Será renderizado no navegador assim:

Eu amo CSS

Com a propriedade float um elemento poderá “flutuar” à esquerda ou à direita. O exemplo seguinte ilustra este princípio:

Exemplo 4:

<img src="bill.jpg" alt="Bill Gates" style= "float:left;" />
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
	sed diam nonummy nibh euismod tincidunt ut laoreet dolore
	magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
	quis nostrud exerci tation ullamcorper suscipit 
	lobortis nisl ut aliquip ex ea commodo consequat...</p>

  

<img src="https://www.turbosite.com.br/mkt/tutorial/html/turbosite_logo.png" alt="TURBOSITE" style= "float:left;" />
 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
	sed diam nonummy nibh euismod tincidunt ut laoreet dolore
	magna aliquam erat volutpat. Ut wisi enim ad minim veniam, 
	quis nostrud exerci tation ullamcorper suscipit 
	lobortis nisl ut aliquip ex ea commodo consequat...</p>

  

Será renderizado no navegador assim:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat…

No exemplo mostrado, um elemento (a imagem) flutua à esquerda e o outro elemento (o texto) preenche o espaço deixado à direita.

Com a propriedade position, você pode posicionar um elemento em qualquer lugar da página, com precisão:

Exemplo 5:

<img src="https://www.turbosite.com.br/mkt/tutorial/html/turbosite_logo.png" alt="TURBOSITE" style="position:absolute;bottom:50px;right:10px;" />
  

No exemplo mostrado a imagem foi posicionada a 50 pixels da borda inferior e a 10 pixels da borda direita do navegador. Você pode colocar em qualquer lugar na página. Tente você mesmo. Fácil e legal, eh?

Legal sim. Mas, fácil?

Você não aprende CSS em 10 minutos. E como foi dito acima, nesta parte você teve apenas uma breve introdução às CSS.

O título “Mais tabelas” pode sugerir uma lição enfadonha. Mas, veja as coisas pelo lado positivo, depois que você se tornar um mestre em tabelas nada mais do HTML poderá desafiá-lo.

O que mais existe?

Os dois atributos colspan e rowspan são usados para criar tabelas singulares.

Colspan é a abreviação para “column span”. Colspan é usada na tag <td> para indicar quantas colunas estarão contidas em uma célula.

Exemplo 1:

<table border="1">
  <tr>
    <td colspan="3">Célula 1</td>
  </tr>
  <tr>
    <td>Célula 2</td>
    <td>Célula 3</td>
    <td>Célula 4</td>
  </tr>
</table>

  

Será renderizado no navegador assim:

Definindo colspan em “3”, a célula na primeira linha conterá três colunas. Se você definir colspan em “2”, a célula conterá duas colunas e assim será necessário inserir mais uma célula na primeira linha para que tenhamos na primeira linha as colunas em acordo com as da segunda linha.

Exemplo 2:

<table border="1">
  <tr>
    <td colspan="2">Célula 1</td>
    <td>Célula 2</td>
  </tr>
  <tr>
    <td>Célula 3</td>
    <td>Célula 4</td>
    <td>Célula 5</td>
  </tr>
</table>

  

Será renderizado no navegador assim:

Que tal rowspan?

Como você já deve ter concluido, rowspan especifica quantas linhas estarão contidas em uma célula:

Exemplo 3:

<table border="1">
  <tr>
    <td rowspan="3">Célula 1</td>
    <td>Célula 2</td>
  </tr>
  <tr>
    <td>Célula 3</td>
  </tr>
  <tr>
    <td>Célula 4</td>
  </tr>
</table>

  

Será renderizado no navegador assim:

No exemplo acima rowspan é definido em “3” na Célula 1. Isto especifica que uma célula deve conter 3 linhas. Célula 1 e Célula 2 estão na mesma linha, enquanto Célula 3 e Célula 4 formam duas linhas independentes.

Confuso? Bem, isto na verdade não é descomplicado e você pode se perder. Assim, é sempre uma boa idéia, desenhar a tabela em uma folha de papel antes de começar a codificação HTML.

Não está confuso? Então vá em frente e crie algumas tabela com uso de colspan e rowspan.