Bem, hoje vou falar um pouco sobre meu projeto final da faculdade que foi sobre acessibilidade.

Para as pesssoas que estudam acessibilidade para web, eu penso que elas ficam mais impressionadas com a programação de um formulário, com isso hoje vou explicar passo a passo como fazer um formulário acessível.

Os programadores normalmente constroem os formulários em listas, fazendo assim o seu primeiro erro. A forma mais correta e acessível de fazer um formulário é separando suas linhas ( label e input) por div, sendo assim mais acessível para os usuário com deficiente e facilitando o uso da tecla TAB. Abaixo vou … Continue Reading

Bom, como já expliquei a algum tempo existe uma forma de colocar pngs com transparência no ie 6, mas agora a minha primeira explicação a tag utilizada era para por no css, agora eu vou explica outra maneira de por essa transparência, só que agora direto no html. Iremos fazer isso com um js, um script no html e uma class na tag “img”, mole mole …

Para começar precisamos fazer o download desse JS DD_belatedPNG.js .

Depois de feito esse download colocaremos ele na raiz ou em qualquer pasta dentro da raiz do site. E assim chamaremos … Continue Reading

Vou colocar 4 exemplos de menus, dois na horizontal e dois na vertical. Um usando lista e outro usando apenas a tag a.

Os 4 tipos de menus

Os dois primeiros exemplos vou fazer em lista:

1 ) primeiro de menu feito em lista na horizontal:
<!– código html!–>
<div id=”menu-lista-horizontal”>

<ul>

<li><a href=”#”>link 1</a></li>

<li><a href=”#”>link 2</a></li>

<li><a href=”#”>link 3</a></li>

<li><a href=”#”>link 4</a></li>

</ul>

</div>
/* código css */
#menu-lista-horizontal{ width:400px; margin:20px 20px;} -  aqui especifiquei o tamanho do menu, colocando margin top, right, botton e left.

#menu-lista-horizontal ul li{display:inline;float:left;} – display:inline e float:left, faz com que o texto se mova para o seu lado esquerdo.

#menu-lista-horizontal ul li a{padding: 0 5px ; color:#000;} … Continue Reading

Como eu, muitas outras pessoas já devem ter passado por isso. Ralei muito para colocar o background em png transparente no ie6.

Em outros browsers como ie7 , firefox, safari entre outros, já aceitam o método normal de colocar no css background transparente com formato em png, um exemplo:

background: transparent url(../imagens/background-menu.png) no-repeat top left;

transparent – para não aparecer seu fundo (que seria fundo branco, clássico);

no-repeat – serve para não repetir a imagem mais de uma vez, você pode por repeat-x ou repeat-y. Nesses dois casos a imagem iram se repetir respectivamente na horizontal e na vertical;

top left – isso significa o … Continue Reading

A pedidos do meu amigo ratinho, estou postando um formulario php. Mesmo não sabendo muito bem fazer, quebrei muita a cabeça para deixar isso funcionando, e com isso vou tentar passar um pouco o que eu consegui fazer.

Para explicar esse post vou por o formulario do meu site, nele só existe 3 campos de textos para o usuário preencher. O campo nome, email e mensagem.

<form action=”formulario.php” method=”post” >
<ul>
<li>
<label>Nome:</label><input name=”nome” type=”text” />
</li>
<li>
<label>E-mail:</label><input name=”email” type=”text” />
</li>
<li>
<label>Mensagem:</label><textarea name=”mensagem” type=”text” ></textarea>
</li>
<li>
<input type=”submit” value=”Enviar”  />
</li>
</ul>
</form>

Para começar qualquer formulário é essencial a tag form. Nela coloquei os atributos action onde linko a página php, na qual … Continue Reading

Muitas das tags, já tem seu valor pré-definido. Por isso usamos a técnica de css reset. Com essa técnica iremos zerar esse valores pré-definido, como já falado. Agora vou falar um pouco de css de algumas tags, como de lista e de links e também vamos falar como colocar estilo diferentes nas tags  só colocando class.

Vamos começar com as listas!

- como já falei no post anterior, para começar uma lista, precisamos colocar a tag “ul” ou “ol” (lista ordenada – numerada) consequemente depois colocamos o li, no qual identifica cada linha dessa lista.

podemos ter dois tipos de lista…

- a lista … Continue Reading

Nesse post vou explicar um pouco para que cada tag no html!

<html></html> – Tag que inicia o documento, dizendo qual vai ser a programção do documento;

<head></head> – é no head, que será posto o título do documento, as metas tags, vai linkar o css, linkar o js e colocar script de javascripts.

<body></body> – no body é onde você vai começar a programar seu html. Nele encontramos o corpo do documento html.

<title></title> – indica o título do documento html, ele se encontrar dentro da tag head. Cada página do seu site pode ter um title, podendo assim melhor a procura do … Continue Reading

Quando desenvolvemos nosso código usamos muitos  id e class.

Para que servem eles?

Eles são muito importantes para editarmos as tags no css (na folha de estilo), mas também necessitamos para usarmos outras linguagens, principalmente a javascript.

Mas quais são as diferença entre elas?
“ID”

• elas são únicas (exemplo: id”nav nav1″)

• cada página pode ter apenas um elemento com aquele ID (se tiver mais de 2 ids iguais na mesma página, sua página não irá passar pelo validador W3C)
• no CSS ela é identificada com um # antes do nome da id (exemplo: (no html <div id=”nav”></div>) no CSS (#nav{color:#fff;}))

É normal que os iniciantes no html usa-se … Continue Reading

Vamos la galera, agora vamos começar a desenvolver o nosso html. Vou falar coisa boba, mas vou colocar tudo explicadinho. Vamos trabalhar com a ferramenta Adobe Dreamweaver CS4. Abrindo ela, coloca file – new, depois para começar vamos escolher html. Fazendo isso, vai abrir automaticamente um código como esse abaixo.

<!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>Untitled Document</title>

</head>

<body>
</body>
</html>

Vamos explicar um pouco disso…

Tag head – essa tag irá conter todas as informações do seu site, é nessa tag que os buscadores lêem seu site.

Coisas importantes que incluiremos nela:

- Untitled Document – esse tittle é o título … Continue Reading

Já começamos falando um pouco sobre metas tags, explicando que elas são bastante importante para o seu site. Então vamos da uma recapitulada no ponto das metas tags, as principais são description, keywords, author e language. Cada uma serve para uma informação, description (para descrever o seu site, colocando slogan, entre outras informações que o convém), a Keywords (são as palavras chaves para o seu site, exemplo, se seu domínio for marcuscarnevale.com, você pode por marcus carnevela, carnevale marcus, pode por palavras ligadas ao site no singular ou no plural, entre outras, mas sempre lembrando que alguns buscadores não levam … Continue Reading