Código

Dicas, links e sites úteis para / sobre / em: Biblioteca de código, Codificação, HTML, HTML 5, CSS, CSS 3, Jquery, Javascript

Precisa de serviços em webdesign, design gráfico e pacote Office – MS (Microsoft) / Open Office – no Rio de Janeiro (RJ)? Fale com Wallace Vianna, designer.

Código: onde aprender ou tirar dúvidas

Code Academy (aprenda código, online: JavaScript, HTML/CSS, PHP, Python, Ruby, APIs; além de outros cursos relcionados)

Code Pen (site com editor e visualizador de código, para compartilhamento online ou trabalhos colaborativos)

CSS Tricks (blog/jornal sobre CSS)

CSS DSGN (gakeria/portfolio sobre sites interessantes com CSS)

(Team) Tree House (site pago com videoaulas sobre web, design, negócios, código, etc)

Bibliotecas de código

PHP

Formulários PHP (gratuitos e pagos)

Se sua hospedagem de site não oferece formulário de contato (!) eis uma dica útil, para designers ou desenvolvedores.

  • Com versão gratuita (estrutura em HTML e código PHP) e paga (código PHP e design).
  • Com crítica de campos pronta, em PHP também.
  • Personalizável.
  • Funciona na maioria das hospedagem de sites com PHP

#ValeAdica: Free Contact Form

Bibliotecas Javascript / AJAX

(Outras bibliotecas nos tópicos abaixo: HTML, CSS)

Relação de links comentados sobre bibliotecas AJAX : Dojo, Jquery, MooTools, Prototype, Rico, Script.aculo.us, Yahoo! UI Library

Biblioteca AJAX YAHOO: YU2 e YU3

Bibliotecas Google  (maps, youtube, comércio eletrônico, etc) aplicativos e serviços para seu site: Developers Google

Jquery para design responsivo: links e dicas do Template Monster

Dicas, scripts e ferramentas para Javascript

Javascript world
Site oficial de grande autor sobre Javascript,Tom Negrino.

Javascript kit
Site com muitos tutoriais, scripts e soluções em Javascript para webdesign/developer

Testadores Javascript (online ou no navegador)
Jslint
Melhores ferramentas para depurar Javascript
(Lista em matéria do Template Monster, em inglês)

Detectar / checar navegadores

Seguem links com soluções simples para detectar navegadores de internet, que podem ser usadas como estão ou serem modificadas conforme a necessidade.

Javascript Kit: detectando Firefox, IE, Opera (com versão do navegador).

Echoecho.com: detecta navegador Mozilla e IE, redireciona página, exibe caixa/quadro de alerta (com versão); veja código do link sample page para quadro de alerta.

Pageresource.comdetecta Mozilla, IE (com versão) e exibe quadro/caixa de alerta.

Ehow.com: detecta Safari, Firefox, IE (sem versão, mas pode-se acrescentar Google Chrome e Opera ao código).

NetMechanic.com: detecta WebTV, Mozilla, IE (sem versão) e redireciona página.

Prós e contras dos diferentes métodos de detecção: W3Schools e Javascripter.net.

Codificação

Javascript

Keycode e Charcode

Dicas para entender como os navegadores interpretam o Key e Char Code do Javascript.

Coversores de códigos de teclas/caracteres:

CambiaResearch.com e Asquare.net

Convertendo Key/Char code no Mozilla, IE e Jquery: discussão e conversor online

KeyCode no Mozilla (Firefox, Google Chrome) e Internet Explorer (IE)

Autor: Rodolfo Andrade com adendos meus (itálicos) Fonte: Yahoo respostas

O Firefox e o IE são diferentes ao tratar o keyCode (ou charCode). Leia nestes links uma explicação breve e outra detalhada sobre keycode (código de tecla) e charcode (código de caractere ASCII/unicode).
Para isso, você pode declarar uma varíavel que pega o keyCode e, caso ele não exista, pega o charCode.
Exemplo: Copie e cole o código abaixo entre as tags/marcações <body></body> de seu HTML:

Digite a tecla desejada e veja o KeyCode (Firefox) ou CharCode (IE) em JS
<input type=text name=teste id=teste onKeyDown=”javascript:MostraTecla(event)>

function MostraTecla(event){
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
alert (keyCode)
}

Veja este código no Firefox e no IE.

(Formulários online na web/internet, em) CGI

Sei que o CGI como linguagem de programação script está para os formulários online como a internet discada está para a  móvel, mas se ainda assim for útil para você de alguma forma (resolver um problema pontual em seu site ou usar como alternativa a formulários online gratuitos *), eis o famoso link do Matt’s Script Archive, com (quase) tudo o que você precisa saber para fazer um formulário nesta linguagem de script.
Em tempo: já esbarrei na internet com soluções para problemas do CGI como acentuação/caracteres latinos em mensagens; posto aqui assim que reencontrar esses links.

Enquanto isso, vamos usando PHP, Jquery (JAVA e até ASP.NET!) para fazer formulários mais elaborados (do ponto de vista da funcionalidade).

(*) ainda vou escrever um artigo sobre esse assunto!

HTML

Código HTML que não aparece no Internet Explorer (IE)

Coloquei um link para essa dica  também na seção Dreamweaver, (já que é um editor de HTML).

O IE eventualmente não exibe (ou exibe incorretamente) código HTML gerado

  • por produtos da Macromedia (atual adobe) como o Fireworks,
  • pelo seu navegador ao salvar páginas da internet,
    ou
  • com certos cabeçalhos de HTML

Exemplos: você

  •  inseriu uma marcação <iframe> (ou iframes aninhados) em sua página, e ele(s) não aparece(m).
  •  criou alinhamento vertical em tabelas aninhadas e o alinhamento não funciona.

Para resolver essas questões, basta você apagar as seguintes marcações:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
Esse cabeçalho interfere quando você precisa centralizar tabelas vertical e horizontalmente. Se seu layout é centralizado com tabelas, remover esse cabeçalho resolve seu problema, embora possa criar um código HTML inválido (gerando mensagens de erro no IE).

<!– saved from url=(00XX)about:internet –>
Esse comentário/marcação normalmente se aplica à mesma situação acima.

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
Idem acima. Basta deixar apenas a tag <HTML> no código.

<!–Fireworks X Dreamweaver X target.  Created [DIA] [MÊS] [DIA] [HORA] GMT[FUSO HORÁRIO] [ANO]–>
Esse comentário/marcação  pode impedir que sua marcação apareça no IE. Remova se o Iframe aparecer corretamente em outros navegadores.

<!– fwtable fwsrc=”NomeDoArquivo.png” fwbase=”NomeDoArquivo.jpg” fwstyle=”Dreamweaver” fwdocid = “1418145021” fwnested=”0″ –> 
Idem da situação anterior.

Devem haver outras situações em que o IE não exibe código HTML legítimo, quem souber, poste por aqui.

Doctype e modos de renderização nos navegadores de internet

Dicas para compreender como os principais navegadores (IE, Mozilla e Chrome) renderizam as páginas da web, através de seus motores (engines) de renderização.

Resumo: O HTML pode ser renderizado de 3 modos: “modo padrão/standard mode”, “modo quase padrão/almost standard mode, ou modo estrito/strict mode” e “modo peculiar/quirck mode”.
Conhecer os modos de renderização e como eles são suportados em diferentes navegadores é fundamental para o trabalho de projetistas de internet (webdesigners e desenvolvedores).

Artigo da Wikipedia,  em inglês.

Simplificando o HTML

Haml (HTML abstraction markup language).
Linguagem de marcação leve usada para descrever XHTML de qualquer página web sem o uso da tradicional codificação inline/em linha.
Funciona em Ruby on Rails.
Definição da WikipédiaSite Haml

HTML5

Biblioteca de código HTML5 para fazer navegadores antigos reconhecerem marcações/tags HTML5: HTML5SHIV: Front End Brasil.com.br

Marcações/tags para ativar automaticamente modo de compatibilidade do Internet Explorer (X-UA-Compatible): Wikipedia (explicação em inglês) e Acid Martin (tutorial em inglês)

HTML 5 BoilerPlate: biblioteca de código para HTML5 (css reset, CSS e JS)
Explicação rápida (ingl.) • Primeiros passos •  Download

Outras dicas e links úteis sobre HTML

Tabela de caracteres para formulários em HTML (accept-charset)

Validadores do W3C (HTML, CSS, site como um todo: links e semântica do código, XML, etc)

CSS

Menu horizontal com CSS

Objetivos: 
Ensinar a fazer menus verticais simples, usando HTML e CSS.

Pré-requisitos:
Curso básico de HTML, Dreamweaver e CSS
ou saber
– usar os painéis (CSS Styles, Code) do Dreamweaver
– inserir tags DIV
– criar, salvar e visualizar páginas HTML
– criar folhas de estilo externas
– criar listas
– criar regras de CSS para TAGS, IDentificadores e Classes

Observações:
o desenho desta lista é baseado num tutorial do Dreamweaver MX (à época, um menu com imagens e Javascript, adaptado aqui para CSS).
Um exemplo pronto deste menu está disponível nos aqruivos do grupo Wallyvianna no Google Grupos: (tutorial+Dreamweaver+CSS+menu+horizontal+versao2+ATUALIZADO.zip)

Etapa1: Criando a página HYML e o conteúdo do menu

1) Crie uma página HTML nova, e salve como index.html.

Digite os tópicos deste menu, com quebras de parágrafo, no Dreamweaver:

INICIO

VIAGENS

RESERVAS

PASSEIOS

CONTATO

De forma que fique no seu navegador assim:

01

2) Aplique uma lista não-ordenada:

  • INICIO
  • VIAGENS
  • RESERVAS
  • PASSEIOS
  • CONTATO

ou digite a lista dentro da tag <BODY> </BODY> de forma que fique assim:

<ul>
<li>INICIO </li>
<li>VIAGENS </li>
<li>RESERVAS </li>
<li>PASSEIOS </li>
<li>CONTATO</li>
</ul>
<br>

02

Depois insira os links:

<ul>
<li><a href=”index.html”>INICIO</a></li>
<li><a href=”viagens.html”>VIAGENS</a> </li>
<li><a href=”reservas.html”>RESERVAS</a> </li>
<li><a href=”passeios.html”>PASSEIOS</a> </li>
<li><a href=”contato.html”>CONTATO</a> </li>
</ul>
<br>

03

Etapa 2: criando e vinculando a folha de estilos

3) Para que possa utiizar esse meu em mais de uma página, crie uma folha de estilos externa, um arquivo de texto vazio, com o nome estilos.css;

Se estiver usando o Bloco de notas do Windows, na página index.html crie um vínculo (link) com a folha de estilos (por enquanto vazia) usando o painel CSS Styles do Dreamweaver ou inserindo na tag <HEAD> </HEAD> o código

<head>
<link href=”estilos.css” rel=”stylesheet” type=”text/css”>
</head>

Se estiver usando o Dreamweaver até a versão CS3, crie uma regra de CSS que seja um ID (identificador);
Se for o Dreamweaver versão CS4, crie uma regra Composta (compound)
em ambos os casos, crie a regra com este nome:

#nav , #nav *

e aplique as propriedades a seguir:

Etapa 3: estruturando o menu

4) a seguinte regra de CSS:

#nav , #nav * {
margin: 0;
padding: 0;
clear: right;
}

remove a margem da lista e marcadores em todos os navegadores.

04

5) Procure na página index.html a lista de seu menu <UL> e insira nela um ID (identificador):

<ul id=”nav”>

para que a formatação a seguir seja aplicada apenas nesta lista.

6) Digite na folha de estilos a formatação inicial desta lista:

#nav {
list-style-type: none;
width: 470px
float: left;
font-family: arial;
}

Descrevendo esta regra de CSS, linha por linha:

1ª linha: remove marcadores da lista
2ª linha: define largura do menu de navegao com precisao (470 pixels)
3ª linha: alinha o menu a esquerda da pagina
4ª linha: define fonte do menu de navegação (arial)

05

7) Volte ao arquivo estilos.css e acrescente esta nova regra de CSS para formatar os tópicos da lista (<LI>):

#nav li {
float: left;
}

Seu arquivo estilos.css irá ficar assim:

#nav {
list-style-type: none;
width: 470px
float: left;
font-family: arial;
}

#nav li {
float: left;
}

Essa última regra de CSS faz o menu de lista (vertical) ficar horizontal, flutuando cada item da lista à esquerda

06

Etapa 4: Formatando o menu

acrescente ao arquivo estilos.css esta regra nova, que formata os links antes de clicar = texto laranja, fundo marrom

Atenção: os comentários agora estarão dentro das marcações /* e */, antes de cada parâmetro, facilitando a leitura e o entendimento de cada linha. Digitar esses comentários é opcional; eles não aparecerão na página HTML e nem interferem com o funcionamento do código CSS.

#nav li a {

/* faz com que os links sejam clicaveis em toda sua extensao (margens e espacamentos inclusos) e nao apenas nos caracteres HTML*/
display: block;

/* tira o sublinhado dos links, para que tenham aparencia de botoes */
text-decoration: none;

07

/* inclui borda de 1px marrom, para que os links tenham o mesmo tamanho, antes de clicar e ao passar o cursor sobre (que possui uma borda branca) */
border: 1px solid rgb(102,0,0);
background-color: rgb(102,0,0);

08

/* espaçamento definido proporcionalmente ao tamanho da fonte, para ser sempre proporcional a fonte visualizada */
padding: 0.25em 0.5em 0.25em 0.75em;
color: #EE8848;

}

09

/* formata os links visitados = texto branco, fundo cinza medio */

#nav li a:visited {
color: rgb(255,255,255);
background-color: rgb(102,102,102);
}

/* formata os links ao passar o cursor sobre = texto branco, fundo cinza medio, borda branca */

#nav li a:hover {
color: rgb(255,255,255);
background-color: rgb(102,102,102);
border: 1px solid rgb(255,255,255);
}

10

/* formata os links ativos ou de onde se veio por ultimo = texto cinza escuro, fundo cinza medio */

#nav li a:active {
color: rgb(54,54,54);
background-color: rgb(102,102,102);
}

A formatação de links termina aqui. A próxima regra de CSS faz com que o menu (tag <LI>) fique alinhado à esquerda da página.

ul {
float: left;
}

Etapa 5: aplicando HACKS (remendos) para outros navegadores

/* hack para IE */

  • holly hack */

/* codificacao para IE5 para mac /
/
*/

/* remove eventuais espaços em branco entre os topicos da lista /
*html #nav li a {
height:1%;
}
/
*/

Pode baixar o código daqui.

Etapa 7: Formatando o link que indica a página atual

A navegação de hipertexto tem limitações: os estados dos links são basicamente LINK (página não-visitada), ACTIVE (página atual) e VISITED (página visitada) (não vou citar aqui o HOVER, ao passar o cursor sobre o link, pois este estado mão faz parte da navegação hipertextual).
Se a página que você estiver for uma página visitada, o navegador irá exibir a cor de página visitada, por mais que você deseje uma indicação da página em que está.

Assim sendo, vamos criar uma formatação que sinalize esta situação – qual é página atual, no caso, index.html – para tornar a navegação mais intuitiva, como um sinal ou placa de trânsito.

Insira na tag <BODY> um ID (identificador) com o nome da página: #index

<body id=”paginaindex”>

Insira no link “INICIO” uma classe com o mesmo nome:

<li><a href=”index.html” class=”inicio”>INICIO</a></li>

Crie na folha de estilos uma regra de CSS específica para esse link:

body#paginaindex a.inicio {
color: rgb(255,209,163);
}

Somente na página onde houver a tag <BODY> com ID #INDEX e link <A> com classe “INICIO” a formatação que indica a pagina atual será aplicada: link com fonte na cor amarela.

11

Experimente criar uma segiunda página (viagens.html) inserir este menu e adaptar o código de forma que fique assim:

12

novo-transp

Metodologias para escrever CSS

ITCSS – texto do site Willian Justen

RSCSS – texto do Site Willian Justen; site oficial RSCSS

SMACSS – Site oficial

SuitCSS – texto do GitHub, site de compartilhamento e versionamento de arquivos online

OOCSS – texto do Smashing Magazine.com

Semantic UI: biblioteca de elementos de interface digital e um exemplo prático de como usar metodologias para escrever CSS semântico.

Leitura crítica sobre semântica ou CSS semântico:
CSS Sustentável

novo-transp

Frameworks CSS

Lista de frameworks CSS da Wikipedia

Leitura crítica sobre Frameworks em CSS
Simone Amorim, texto no Medium.com;  telas de apresentação desse mesmo texto;

 

Dicas CSS

Para otimizar seu código CSS Clean CSS

Dicas de CSS para navegadores móveis (CSS Reset, fontes recomendadas e alinhamento de texto suportados)

CSS 3 em imagens 3D (exemplos): Chrome experiments

CSS-Resetbiblioteca para normalizar HTML 5 e HTML 4x (para navegadores novos e antigos): Normalize.com

Bootstrap – Bibliteca de CSS e Javascript (para design responsivo ou não).
Original, em inglês • Tradução para português do Brasil

Teste para verificar compatibilidade de navegadores de internet. Site do Acid2 Acid2 na Wikipédia

Frameworks para CSS

São novas sintaxes CSS (novo modo de escrever CSS, simplificado) que são TRADUZIDAS para CSS normal, agilizando o trabalho de codificação do CSS. Essas novas sintaxes CSS incluem recursos que o CSS ainda não implementou, e são traduzidas por pre-processadores de CSS (scripts em servidor – Rails, PHP, etc – ou local – Javascript p.ex.).

Less CSS – Compilador (Javascript) para CSS
Definição da Wikipedia •  Site oficial LS • Testador LS

Sass
Definição da Wikipédia • Sass

Stylus
Definição da Wikipédia • Stylus

Lista de outros frameworks para CSS (Wikipédia)

Lista de pre-processadores de CSS (pagos e gratuitos)

Hacks CSS

Dicas para resolver problemas de layout de página em navegadores diferentes.

Hacks para diferentes navegadores (IE, Firefox, Google Chrome, Safari, Opera): css-tricks.com – Browser specific hacks
Explicação de hacks listadas acima, para Google Chrome: evotech.net – css hack for google chrome and safari 3.1

Hacks CSS e Javascript para Android, Chrome, Firefox e IE: Browser Hacks.com

Javasvript para Hacks em diversos navegadores e sistemas operacionais: Blog Sameerast.com

Hacks para os principais navegadores: Thiago B. Fiorenza

Hacks ou comentários condicionais para IE: quirksmode.org – conditional comments

Acessibilidade

Warau – Site que reúne informações sobre boas práticas em acessibilidade

Web Semântica

Links da Wikipédia relacionados com Web Semântica, a qual tem como uma aplicação prática, melhorar o SEO/SEM de seu site (microdados e microformatos):

Web semântica (port. e ingl.), HTML Semântica (ingl.), Microdados (port. e ingl.), Microformatos (port. e ingl.)
Wallace Vianna é webdesigner e desenvolvedor web.
Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: