O que é o CSS?
Quem começa agora na concepção de páginas WEB, depara-se muitas vezes com a sigla CSS (Cascading Style Sheets) que em português significa folhas de estilo em cascata. Basicamente este termo significa que é um conjunto de regras de formatação ou de estilos a serem publicadas aos elementos estruturais de uma página WEB.A finalidade do CSS prende-se com o facto de retirar ao HTML todo o tipo de declarações que visem a formatação ou seja, o HTML irá contribuir para a estruturação e o CSS para a formatação.
Assim, as vantagens da utilização do CSS serão:
- Controle total sobre a formatação de um site disponÃvel apenas num arquivo;
- Maior facilidade na manutenção do site bem como na sua performance;
- Redução do tempo de carga do site;
- Adequação simplificada aos critérios de acessibilidade e usuabilidade;
- Aumento da portabilidade dos documentos WEB;
As CSS estão de acordo com as práticas recomenadas pelo W3C (World Wide Web Consortium) para projectos WEB. Este organismo normalizador aponta neste momento para a elaboração de documentos WEB acessÃveis, usáveis e portáteis fazendo assim que o CSS seja a solução para a obtenção destas 3 variáveis.
Para iniciar a programação em CSS é necessário um conheciméno prévio (básico) de HTML (Hyper Text Markup Language). Se ainda não está familiarizado com esta técnica, então visite este site que possuirá toda a informação necessária para aprender a usar HTML.
Para utilizar o CSS recomendo a visita deste site onde disponibiliza através de um tutorial as regras correctas (sintaxe) para um bom uso do CSS.
Por fim resta apenas dizer que ainda existem algumas limitações (temporárias) na utilização do CSS, sendo elas a incapacidade de alguns navegadores (Browsers) em dar suporte às especificações CSS definidas pela W3C. Aos poucos os fabricantes destes mesmos Browsers vão-se adequando às novas normas da W3C.
Para quem gosta de assistir a uma aulas em vÃdeo, deixo aqui um bom tutorial sobre CSS em Inglês:
Aqui vão alguns links espectaculares sobre sites de CSS:
http://www.cssbeauty.com/gallery/
http://www.webdesignerwall.com/
http://www.css-website.com/
http://www.csselite.com/Â
Bons Sites!
Pedro Santos
Dez dicas para um bom webdesign…
Após algum estudo sobre os tópicos mais importantes para a concepção de um bom Website, apresento uma compilação das 10 melhores dicas para um bom Web Design:
- Colocar o nome e o logotipo em todas as páginas e fazer no logo um link para a página inicial (excepto na própria página inicial onde o logotipo não deve jamais ter um link para a própria página).
- Disponibilizar uma opção de pesquisa se o site tiver mais de 100 páginas.
- Escrever cabeçalhos e tÃtulos simples e directos que expliquem claramente qual o conteúdo da página e que faça sentido quando é lido fora do contexto desta, através de uma busca.
- Estruturar a página para facilitar o scanning e ajudar os utilizadores a ignorar blocos maçadores da página num simples piscar de olhos: por exemplo através da utilização de agrupamentos e subtÃtulos a partir de uma longa lista poder-se-á chegar rapidamente a uma lista mais pequena e perceptivel.
- Em vez de colocar tudo sobre um produto ou um assunto numa única e infinita página, deve-se utilizar hipertexto para estruturar o espaço disponÃvel na página inicial que disponibiliza uma visualização e várias páginas secundárias que focalizam-se no seu tema especÃfico. O objectivo é permitir aos utilizadores evitar desperdiçar tempo nos sub-temas que não lhes interessam.
- Usar fotografias de produtos, mas evitar páginas cheias dessas mesmas fotografias com toda a famÃlia de produtos possÃveis. Deve-se então ter uma pequena fotografia de cada produto numa página individual e fazer um link dessa fotografia para uma ou mais fotografias de maior dimensão que mostre mais detalhes adequados ás necessidades dos utilizadores. Esta situação varia de acordo com o tipo de produto. Alguns produtos poderão ainda necessitar de fotografias com zoom ou rotativas. devendo estas opções ser remetidas para páginas secundárias. A primeira página que contém o produto deve ser rápida e limitada a um plano da fotografia reduzido.
- Utilizar uma imagem reduzida e relevante quando se preparam pequenas fotografias e imagens: em vez de simplesmente redimensionar a imagem original para uma pequena e ilegÃvel fotografia, deve-se fazer um zoom dos detalhes mais relevantes e utilizar uma solução combinada de corte e redimensionamento.
- Utilizar link’s com tÃtulos para permitir ao utilizador, visualizar antecipadamente para onde se encaminhar a cada link antes de clicar.
- Assegurar que todas as páginas importantes estão acessÃveis aos utilizadores com deficiências, especialmente aos invisuais.
- Fazer o mesmo que os outros fazem: se a maioria dos grandes websites fizer algo de certa forma, devemos segui-los desde que os utilizadores esperem que o site funcione da mesma forma. Deve-se ter em conta que os utilizadores gastam a maioria do seu tempo noutros sites, e é ai que criam expectativas acerca do funcionamento da web.
Para finalizar, espero que estas dicas possam servir de referência num futuro Website.
Bons Sites!
Pedro Santos
Melhorar o tempo de carregamento de uma página!
Uma das grandes preocupações no acesso de uma página é o tempo de acesso.
Quanto mais “pesada” é a página, mais lenta ela se torna. As causas poderão ser várias, um template mal estruturado, um código CCS não optimizado, muitos widgets na sidebar (botões gráficos na barra lateral), imagens não optimizadas em tamanho ou em definição, javascript, flash…Uma coisa é certa, ou a página é relativamente rápida ou então corre-se o risco de perder utilizadores dessa mesma página. Assim, existem muitas ferramentas para testar o carregamento de páginas, uma dessas ferramentas encontra-se no site SpeedTester.
A sua utilização é bastante simples, basta digitar o endereço do seu site/blog (URL), o código de confirmação e clicar em CHECK! Este site irá criar um relatório para o tempo de abertura da página analizada. O ideal é que a página abra em menos de 6 seg. para uma ligação telefónica (56k).
Para melhorar o tempo de acesso de um determinado podemos verificar o seguinte:
1-Optimizar as METATAGS
Utilize apenas as METATAGS importantes para a indexação do seu Site/Blog. As METATAGS mais importantes são as Metatag Title (nome do site), Description (descrição do site, conteúdo para as buscas) e Keywords (palavras-chave).Outras metatags importantes são a verificação de motores de busca (ex. Google e Yahoo!) e a metatag robots.Â
2-Eliminar os espaços em branco no código do template
É verdade! Os espaços em branco do template ocupam espaço no ficheiroÂ
3-Optimizar o código CSS (style) do template
Nos sites CleanCSS e/ou CSSTweaks é possÃvel optimizar o código CSS online. Há opções para optimização simples (somente abreviatura dos parâmetros), optimização normal (deixa cada classe numa única linha) e optimização profunda (deixa tudo numa única linha).
4-Deixar os códigos em javascript em arquivos externos (fora do template)
Em vez de adicionar os códigos javascript na secção HEAD do template, adicione páginas externas. Isto contribui para que o Site/Blog carregue mais rápidamente. Exemplo disso faça o seguinte: pegue no código javascript e coloque no bloco de notas. Salve o ficheiro com o nome de javascript.js e coloque esse arquivo na directoria do site. Por fim adicione o seguinte código na secção HEAD:
script language=JavaScript src=http://aprenderwebdesign.com/seu-javascript.js type=text/javascript
5-Deixar o arquivo CSS em arquivo Externo
Faz-se igualmente como no tópico anterior e coloca-se o código CSS no bloco de notas. De seguida grava-se o ficheiro “seu_estilo.css” e coloca-se na directoria do seu site. Por fim coloque na secção HEAD o seguinte código:
link rel=stylesheet type=text/css href=http://aprenderwebdesign.com/seu-estilo.css /
6-TABLELESS
Tabeless significa sem tabelas num template. As Tags TABLE, TR, TD não será mais utilizadas pois geram um enorme espaço branco no HTML e provocam o carregamento de um site mais lento. Utiliza sempre de preferência o trabalho com CSS
7-Diminuir os comentários do código do template
O template que possui vários comentários do tipo :/****inÃcio do cabeçalho***/, /***inÃcio do código***/, ???Se sabe o que cada código do template faz, não serão necessários esses comentários. Apague-os deixando o código mais leve.
8-Usar a barra “/” no fim dos directórios em endereços URL
Esta dica parece simples mas faz muita diferença! Abrir um Site/Blog com http://teublog.blogspot.com/ abre de forma mais rápida que http://teublog.blogspot.com/
9-Definir sempre a altura e largura das Imagens
Inserir uma imagem no Site/Blog sem os atributos de WIDTH e HEIGHT (largura e altura) obriga a quem navega “calcular” essas medidas, deixando o carregamento de páginas mais lento. Defina sempre esses parâmetros dentro da tag IMG SRV e veja o seu Site/Blog carregar de forma mais rápida!
10-Usar miniaturas nas imagens
Utilizar imagens em miniaturas deixa o Site/Blog com um look mais profissional e permite que a abertura das páginas se faça de um modo mais rápido. Se o leitor quiser visualizar a imagem no seu tamanho real, basta clicar sobre a miniatura. Tanto o Blogger como o WordPress têm suporte para o uso de miniaturas. Se pretende mostrar a imagem com o seu tamanho real utiliza a função “Resize” num editor de imagens do tipo Photoshop, GIMP, PSP…
11-Não usar Flash
Um efeito flash é muito engraçado mas será mesmo necessário? Lembre-se que a utilização deste tipo de animações “Consomem” espaço tornando o site mais “pesado”
Existem outras dicas para optimizar um Site/Blog, entretanto estas 11 são suficientes para melhorar o seu desempenho.
Boas Optimizações!
Pedro Santos
Criar a primeira página na internet…
O que é necessário para fazer páginas na internet? Há uns meses atrás fiz esta pergunta, precisava de fazer um site e nunca tinha trabalhado a sério nesta área. Assim, apás algum tempo de pesquisas apresento um resumo para quem está interessado em conceber um site e tem ainda muitas dúvidas.
Em primeiro lugar gostaria de apresentar algumas fontes de pesquisa bastante úteis. Um dos sites mais interessantes no ponto de vista de Informação em Português é o http://www.apostilando.com/ , este site aborda através de Tutoriais/Sebentas (apostilas denominação Brasileira) os diversos temas para quem pretende fazer um site. Estes Tutoriais encontram-se bastante bem descritos e aplicam-se a todos aqueles que se iniciam bem como para os utilizadores mais avançados. Outra maneira de aceder a informação de um modo diferente (e-learning) é através de aulas virtuais ou video aulas (designação Brasileira). Estas encontram-se espalhadas pela net entre eles no youtube.com , exemplo disso é esta aula: http://www.download-de-videos.com/ver.php?video=d76PlbaeRZM
Agora passo a descrever quais as ferramentas necessérias para construir um site:
1.Editor WEB
Dreamweaver(Pago) Frontpage(Pago) KOMPOZER(Gratuito)
2.Editor de imagens
Photoshop(Pago) ou GIMP(Gratuito)
3.Cliente de FTP
FILEZILLA(Gratuito)
4.WebServer (Apache+PHP+MySQL)
XAMMP(Gratuito)
Os requisitos para fazer uma página são:
1.Saber um pouco da linguagem HTML
2.Edição de imagem utilizando programas tipo Photoshop
3.Saber utilizar um cliente de FTP (File Transfer Protocol)
Começando com o HTML
Para começar é necessário editar um ficheiro em html (texto), esse ficheiro irá conter todo um conjunto de instruções que farão que o conteúdo de uma página apareça no seu Browser. Para mais informações acerca desta linguagem consulte este ficheiro: Primeiro arquivo HTML
É claro que se possuir o Dreamweaver ou o Frontpage esta tarefa poderá ser muito simplificada pois poderemos editar este ficheiro em modo Gráfico e construiremos uma página como se estivessemos editar um documento tipo no MS Word. Neste exemplo seguite é mostrado como se constroi um site em Dreamweaver em modo gráfico. TUTORIAL DE DREAMWEAVER
Edição de Imagem
Para utilizar um editor de imagem é preciso praticar umas quantas vezes até conseguirmos estar a vontade com este software. Existem muitos tutoriais na net sobre este tipo de software por isso não será difÃcil ficar à vontade para utilizar este programa. Aqui vai um link de um vÃdeo a exemplificar a utilização do GIMP e do PHOTOSHOP. GIMP TUTORIAL
PHOTOSHOP TUTORIAL
Publicação do Site
Um site para estar visÃvel necessita de estar instalado num servidor. Assim, podemos publicar o nosso site em dois tipos de servidores, servidores locais ou servidores remotos. Um servidor local é por exemplo o nosso computador com uma aplicação tipo APACHE em que permite transmformar o nosso computador num servidor de HTML. Para isso devemos instalar essa aplicação e instalar a nossa página numa directoria dentro da aplicação Apache. Ao executar o Apache temos a nossa aplicação disponÃvel no nosso servidor.
Se quiseremos ter a nossa página disponÃvel para toda a WEB temos que alugar um espaço num servidor remoto. Existem montes de empresas a disponibilizarem os seus serviços de modo a permitirem que os utilizadores possam disponibilizar as suas páginas na net. Neste blog ALOJAMENTO-WEB temos referência de várias empresas de alojamento de sites que permitem efectuar esse serviço. Na minha opinião tenho trabalhado com a WEBHS e tenho tido boa impressão do seu serviço. Ter em atenção que estas empresas oferecem vários pacotes consoante o tipo de utilização do cliente, estes diferem entre si do tráfego, capacidade, serviços prestados etc…
Para colocar o nosso site num servidor remoto precisamos de um cliente de FTP (File Transfer Protocol), no meu caso utilizo o Filezilla, para mim é o melhor software gratuito de FTP disponÃvel na net.
Nestes seguintes links estarão alguns tutoriais de ajuda para a utilização do Filezilla:
Como enviar arquivos para o servidor via FTP
Video Tutorial FTP (FileZilla)
Vários Videos Tutoriais do Filezilla
Espero que este Post tenha ajudado quem esteja iniciar-se nesta área, claro que tudo aqui que foi escrito foi tratado de uma forma muito superficial pelo que estou aberto a dúvidas e questões que possam ser tratadas ao meu nÃvel.
Bons Sites!
Pedro Santos
Primeiros Sites…
Neste momento tenho realizados 2 sites:
O primeiro é o http://www.impressaotua.com.pt/ 
Este site surgiu através de um pedido de um grupo de amigos que tinha um projecto e que necessitava de divulgação na WEB. Como esta esta banda é de excelente qualidade (penso que foi um bom ponto de partida a divulgação desta bem como do serviço prestado visto que o seu produto é bastante credÃvel e de boa qualidade) os resultados neste momento são muito positivos revelando que a web é um excelente meio de divulgação quando bem explorado.
O segundo site é o http://www.w3d.webhs.pt/
Este site surgiu no seguimento do anterior, isso nota-se pelo seu layout (aparência). Decidi criar este visto que o primeiro tinha sido bastante bem recebido e fiquei motivado de modo a representar-me na web. Neste momento posso dizer que o tempo médio utilizado na concepção de cada um dos sites foi cerca de uma semana.
Estes sites foram concebidos e publicados no princÃpio de Novembro de 2007.
Quanto aos passos da concepção e publicação destes sites irão ser publicados num próximo post.
Até breve!
Pedro Santos