54 / 68
CODE/
GSS
PRO-
GRAMAÇÃO GSS
120
MINUTOS
54
DICAS PARA PROGRAMAR DE UMA
MANEIRA FÁCIL E DESCOMPLICADA
oje quase todo
designer ou
programador web
conhece, além do
HTML padrão, elementos
avançados como HTML5
e CSS. Esses conjuntos de
padrões permitem avançar
a capacidade do código de
formatação padrão HTML
e incluem recursos que as
primeiras páginas da web
nunca sonharam.
O CSS, em especial, vem se
tornando um recurso fundamental,
pois permite elementos dinâmicos,
ajustes de resolução em tempo
UHDO OD\RXWV UHVSRQVLYRV 0DV
como tudo, em algum momento,
é preciso seguir em frente e
evoluir. Novas necessidades, novos
recursos, novos elementos de
design são desenvolvidos e até
mesmo o CSS começa a apresentar
suas limitações.
Assim apareceu o GSS, Grid
6\VWHP 6KHHWV (OH DYDQ©D DLQGD
mais nas capacidades de desenho
e programação para web. A seguir,
você confere os conceitos desse
novo padrão, sua instalação e
recursos básicos, especialmente
suas vantagens sobre o CSS.
INSTALAÇÃO
Acesse este endereço e baixe o
arquivo zipado na coluna da direita
da página:
KWWS OZJR WR V
.
Descompacte o arquivo em um
diretório de testes. Todo sistema
de pastas e arquivos será criado a
partir do arquivo comprimido.
USE O GSS
O GSS trabalha com o Web
Workers, se seu navegador
suportá-lo. Assim, precisa de dois
arquivos JS para começar:
JVV MV
worker.js
Use o GSS_CONFIG objeto
SDUD GHíQLU R HQGHUH©R HOHWU¶QLFR
(URL) de trabalho:
<script>
GSS_CONFIG = {
worker : "../gss/dist/
worker.js"
}
</script>
<script src= "../gss/dist/
gss.js" ></script>
Em seguida, é preciso
referenciar o arquivo .GSS como faz
com os arquivos .CSS:
<Link rel = "stylesheet"
type = "text / GSS" href =
"folha_de_estilo.gss" > </
link>
Ajuste o path de cada arquivo
e instrução para seu diretório e
domínio.
O QUE O GSS FAZ
Agora, deve-se criar um
primeiro exemplo para testar
a aplicação de restrições
do GSS instalado. Como seu
foco é justamente facilitar
o posicionamento, a partir
de um “grid”, comece com o
posicionamento em tela de dois
HOHPHQWRV JU£íFRV
O código a seguir deve ser
digitado em um arquivo chamado
teste_gss.html
:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1">
<title>Teste GSS</title>
<!-- Styles -->
<link rel="stylesheet"
type="text/css" href="meu_
css.css">
<link rel="stylesheet"
type="text/gss"
href="estrutura.gss">
<!-- GSS -->
<script>
GSS_CONFIG = {
useWorker: true,
worker: "bower_
components/gss/dist/worker.js",
H
Logotipo do GSS: padrão
pode tomar o lugar do
CSS, já que agrada a
programadores e designers
G
RID
S
YSTEM
S
HEETS
Conheça o GSS. Ele avança ainda mais nas capacidades de desenho e programação
para web em relação às folhas de estilo tradicionais
Por Homero Ottoni
REVISTA LOCAWEB