Web Como Um Todo!: desenvolvimento

Mostrando postagens com marcador desenvolvimento. Mostrar todas as postagens

12 de abr. de 2010

Como saber se um site está fora do Ar (status)?

Já tentou acessar um site que você desenvolveu e aparece aquela mensagem ~~idiota~~ linda que o site está fora do ar, aí fica a dúvida "Seria minha internet ou é o servidor?". Pois é meu amigo seus ~~pôbremas~~ problemas acabaram abaixo alguns sites que podem te ajudar a ver se seu site está online.

Down for everyone or Just me? (Fora do ar pra todos ou só pra mim?)
Ding It's Up - Esse te avisa quando o site voltar.

9 de mar. de 2010

Página com fundo degradê

Hoje você VAI aprender como é simples fazer um efeito de fundo degradê em um site com uma pequena imagem de 1 pixel, com HTML e CSS.

Você irá precisar de Photoshop, esta é uma ótima ferramenta para auxiliar o web designer, destaquei a palavra auxiliar pois existem muitos web designers que apenas utilizam o photoshop e geram o html através do photoshop, assasinando todos os padrões web, pois infelizmente o photshop gera um html bem fraco.

Então, vamos abrir o Photoshop neste caso estou usando a versão CS3, mas qualquer versão você poderá fazer.

Crie um documento com as resoluções (1024x768), foi escolhida esta resolução pois atualmente 80% da internet utiliza esta resolução.

Deixe a cor #7fa6ee como primária na sua paleta

Em seguida você irá escolher a ferramenta

Faça um "traço" com a ferramente na imagem da forma como mostra abaixo, isto definirá a área de degradê (Se for necessário clique na imagem para ampliar).

Ao soltar o mouse o photohop criará veja como ficou

Agora é a hora de diminuir esta imagem para que sua página com fundo degradê não fique pesada. Para isso acesse Image->Image Size... (crtl + alt + i).

Ao clicar uma janela é aberta, altere o width (largura) da imagem para 1

Agora depois de alterar a largura da imagem é só salva, agora vai uma das melhores dicas para você deixar seu site leve, SEMPRE salve as imagens em File -> Save for Web & Devices repare o parâmetros Preset para GIF para definir o tipo da imagem e salve-o com fundo.gif.

Agora que já temos a imagem de fundo, vamos por a mão na massa. Crie um documento HTML em branco.



<!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 fundo degradê Vertical</title>

</head>



<body>

<a href="http://webcomoumtodo.blogspot.com" title="Web Como Um Todo!">Web Como Um Todo!</a>

</body>

</html>

Crie um documento CSS denominado wcut.css com o código abaixo, onde definirá propriedade do fundo da tag body



@charset "utf-8";

/* CSS Document */



body{

background:transparent url(fundo.gif) repeat-x 0 0;

}

Agora é só incluir a referência ao documento css na página HTML, insira a linha abaixo entre as tags <head> e </head>



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

Pronto! Seu fundo degradê para seu site está pronto! É só abrir o arquivo para conferir o resultado. Veja aqui o Resultado Final deste tutorial.

7 de mar. de 2010

Menu CSS Horizontal (efeito flash)

Olá, hoje você VAI aprender como é simples fazer um menu CSS horizontal com estilo flash respeitando os padrões do W3C.

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



<!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 wcut002.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 */      

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

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

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

}



#wcut-menu li{

    display:inline; /* exibe os elementos em linha (horizontalmente) */

}

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



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

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

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



#wcut-menu li a{

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

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

    height:30px;

    display:inline-block; /* preenche toda a área como link (em linha) */

}

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

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!

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.

18 de ago. de 2009

Tabela de Acentuação e Caracteres Especiais em HTML

Bom dia!

No HTML não podemos/devemos colocar os acentos normalmente no código HTML, pois provavelmente não será interpretado pelo servidor, então devems usar os códigos HTML's devidos para isso...

ACENTOS

á	á	Á	Á	ã	ã	Ã	Ã
â	â	Â	Â	à	à	À	À
é	é	É	É	ê	ê	Ê	Ê
í	í	Í	Í	ó	ó	Ó	Ó
õ	õ	Õ	Õ	ô	ô	Ô	Ô
ú	ú	Ú	Ú	ü	ü	Ü	Ü
ç	ç	Ç	Ç

CARACTERES ESPECIAIS

	espaço
&	e comercial	&
>	maior que	>
<	menor que	<
ˆ	acento circunflexo	&circ;
˜	acento til	&tilde;
¨	acento trema	¨
´	acento agudo	&cute;
¸	cedilha	¸
"	aspas duplas	"
" e "	aspas duplas (esquerda e direita)	“ e ”
‘ e ’	aspas simples (esquerda e direita)	‘ e ’
‹ e ›	aspas angulares simples (esquerda e direita)	&lsaquo; e &rsaquo;
« e »	aspas angulares duplas (esquerda e direita)	« e »
º	ordenal masculino	º
ª	ordinal feminino	ª
–	travessão 'en'	–
—	travessão 'em'	—
	hífen oculto
¯	macron	¯
…	reticências	…
¦	barra vertical	¦
•	marcador (bullet)	•
¶	parágrafo	¶

CARACTERES COMERCIAIS

©	copyright	©
®	marca registrada	&reg
™	trade mark	™
£	libra esterlina	£
¢	centavo	¢
€	euro	€
¥	iene (yen)	¥
¤	símbolo monetário	¤

31 de jul. de 2009

HTML Básico - Reconhecendo o território

Neste artigo temos o básico do HTML para desenvover sua Primeira Web Page, comentando algumas tags do HTML e explicando um pouco sobre atributos...

HTML Break Lines (Pulos de Linha)

Pulos de linhas são definidos pela tag <br />

Esta frase continua na <br /> outra linha

HTML Rules (Linhas)

A tag <hr> cria uma linha horizontal.

Texto
<hr />
texto depois da linha

Tags de formatacao de textos

Tag	Description
<b>	Defines bold text
<big>	Defines big text
<em>	Defines emphasized text
<i>	Defines italic text
<small>	Defines small text
<strong>	Defines strong text
<sub>	Defines subscripted text
<sup>	Defines superscripted text
<ins>	Defines inserted text
<del>	Defines deleted text
<s>	Deprecated. Use <del> instead
<strike>	Deprecated. Use <del> instead
<u>	Deprecated. Use styles instead

HTML Paragraphs

Parágrafos são definidos pela tag <p>

<p>Este é um parágrafo</p>

HTML links

Links HTML são definidos pela tag <a>

<a href="http://www.wikipedia.org"> Clique aqui! </a>

HTML Headings ( cabeçalhos )

Cabeçalhos são definidos pelas tags <h1> até <h6>

<h1>Este é um cabeçalho</h1>
<h2>Este é um cabeçalho</h2>
<h3>Este é um cabeçalho</h3>

HTML Images

As imagens são definidas pela tag <img>

Comentários HTML

Os comentários são trechos que inseridos são visualizados apenas no código. Mas para que inserir algo que o usuário não vê?
Inserindo comentários você estará se ajudando na hora de fazer alguma manutenção na página, porém não se lembrava porque inseriu alguma tag.

Atributos

Perceba que existem atributos nas tags... ? ... Como assim atributos?

Veja na tag <img> existem 3 atributos src (caminho), width (largura) e height (altura), que possuem seus respectivos valores.

Atributos providenciam alguma informação para o elemento (que está entre a Tag), usa-se sempre nome="valor"

Por convenção também sempre coloque os atributos em letra minúscula e o valor entre aspas.

Existem diversos atributos que podem ser acrescentados as tags, confira aqui nesta lista todos eles caso esteja curioso.

Dúvidas? Comentem todas!

30 de jul. de 2009

O que é HTML ?

HTML é uma linguagem para descrição de Web Pages, acrônimo para a expressão inglesa HyperText Markup Language (Linguagem de Marcação de Hipertexto), ou seja, NÃO é uma linguagem de programação, é apenas uma "linguagem de formatação", e para isso utilizaremos as 'TAGS' (nome dado para as "etiquetas marcadoras" do HTML)

TAGs

'TAGs' são palavras chaves que vem entre os sinais de "<" (menor que) e ">" (maior que). Exemplo: <html>

As tags, devem aparecer em pares como <b> (indica o início) e </b>(indica o final) (<b> é a tag que indica que a palavra que estiver entre "<b>" e "</b>" será marcado com negrito.

Abaixo um exemplo bem básico de HTML para se entender melhor.

<html>
<body>

<h1>Meu primeiro h1</h1>

<p>Meu primeiro parágrafo</p>

</body>
</html>

Explicaçao do código:

O texto entre as tags <html> e </html> descrevem a página Web.
O texto entre as tags <body> e </body> é a área visível da página.
O texto entre as tags <h1> e </h1> é mostrado como um cabeçalho.
O texto entre as tags <p> e </p> é mostrado como um parágrafo.

Bibliografia

Wikipedia
W3c

Web Como Um Todo!