Web-Site Front-End Analysis Project #2

Tamanho: px
Começar a partir da página:

Download "Web-Site Front-End Analysis Project #2"

Transcrição

1 Web-Site Front-End Analysis Project #2 Applications for the Internet 2008/2009 Author: Rui Gaspar:

2 Índice 2 Índice 1 Introdução Escolha dos Web-Sites Regras Rule 1 - Reduzir o número de HTTP Requests Rule 2 Usar CDN s (Content Delivery Network) Rule 3 - Adicionar Expires Header Rule 4 Utilize Gzip Rule 5 - Colocar Stylesheets no topo da página Rule 6 Colocar os Scripts no fim da página Rule 7 Evitar expressões em CSS Rule 8 - Colocar JavaScript e CSS no código HTML Rule 9 Reduzir os acessos ao DNS Rule 10 Minimizar o JavaScript Rule 11 Evitar Redireccionamentos Rule 12 Remover Scripts Duplicados Rule 13 - Configure ETags Ferramentas utilizadas IBM Page Detailer YSlow Análise aos WebSites ZeroZero.pt Avaliação YSlow Análise Regra a Regra Comentário Final Publico.pt Avaliação YSlow Análise Regra a Regra Comentário Final API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

3 Índice Cm-Condeixa.pt Avaliação YSlow Análise Regra a Regra Comentário Final Hi5.com Avaliação YSlow Análise Regra a Regra Comentário Final Uefa.com Avaliação YSlow Análise Regra a Regra Comentário Final Conclusões Planeamento Anexos Page Detailer Zerozero Page Detailer Publico Page Detailer Cm-Condeixa Page Detailer Hi Page Detailer Uefa YSlow Zerozero YSlow Publico YSlow Cm-Condeixa YSlow Hi YSlow Uefa API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

4 Introdução 4 Índice de figuras Figura 1 Estatísticas dos tipos de ficheiros do site 14 Figura 2 - Botões de topo do site 15 Figura 3 Estatísticas dos tipos de ficheiros do site 18 Figura 4 DNS Lookup com Redirect do site publico.pt para publico.clix.pt Figura 5 Estatísticas dos tipos de ficheiros do site 23 Figura 6 Atraso introduzido pelo JavaScript Figura 7 Estatísticas dos tipos de ficheiros do site 28 Figura 8 Tempo de carregamento dos JavaScripts no Hi5.com Figura 9 Estatísticas dos tipos de ficheiros do site 32 API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

5 Introdução 5 1 Introdução Com o crescente volume de utilização da internet e da expansão dos sites, um dos factores que muitas vezes dita o sucesso ou insucesso de um website é o seu desempenho. Um utilizador não está para esperar 10 segundos que um site abra sem lhe dar algum tipo de feedback. Por este motivo é interessante analisar e avaliar como são feitos alguns websites relativamente às boas políticas de programação, design e organização das componentes. Para esta análise seguimos as regras que Steve Souders aconselha para a criação de websites. Utilizamos também duas ferramentas para ajudar a avaliar estes pontos e fizemos uma descrição e comentário aos 5 websites escolhidos. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

6 Escolha dos Web-Sites 6 2 Escolha dos Web-Sites Para a escolha dos websites, escolhemos de entre os 5, 3 portugueses, dos quais um deles mais desconhecido e os restantes internacionais mais conhecidos e populares API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

7 Escolha dos Web-Sites API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

8 Escolha dos Web-Sites API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

9 Regras 9 3 Regras 3.1 Rule 1 - Reduzir o número de HTTP Requests Quanto menor for o numero de requests necessários para descarregar os componentes de uma página maior o desempenho da mesma. Uma das técnicas consiste na junção dos vários ficheiros JavaScript ou StyleSheet em menos ficheiros. Outra técnica é em vez de utilizar várias imagens por exemplo vários icons para vários botões, usar apenas uma imagem e usar a técnica de Image Map para definir a zona de selecção do botão. 3.2 Rule 2 Usar CDN s (Content Delivery Network) Consiste em usar vários servidores mais próximos do cliente com o conteúdo estático e principalmente de maiores dimensões, com o objectivo de libertar o servidor principal de trabalho repetitivo e pesado ficando liberto para atender novos clientes. Este processo tem que ser totalmente transparente para o cliente final. 3.3 Rule 3 - Adicionar Expires Header Como os browsers podem fazer cache de dados, podemos colocar nas páginas tags que indicam durante quanto tempo aquele conteúdo é valido. Assim, o cliente deixa de ter necessidade de pedir ao servidor o mesmo conteúdo sempre que faz um refresh ao site ou enquanto navega pelo site e existem componentes em comum entre as diferentes páginas. 3.4 Rule 4 Utilize Gzip Quando uma página contém muitos elementos (imagens, css, etc.) pode-se comprimir todo este conteúdo e enviar para o cliente com muito menos dimensão. Actualmente a maioria dos browsers já suportam esta funcionalidade. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

10 Regras Rule 5 - Colocar Stylesheets no topo da página Colocar os Stylesheets no topo da página permite ao utilizador conseguir visualizar pelo menos a estrutura do site, enquanto este é descarregado. O que proporciona ao utilizador um feedback que muitas vezes pode ditar o sucesso do site. 3.6 Rule 6 Colocar os Scripts no fim da página Ao contrário dos CSS, os scripts devem ser colocados no final da página. Ao colocar no final da página, estes serão os últimos elementos a serem carregados, e vão permitir que o conteúdo do site seja descarregado em primeiro lugar. Se algum script interferir com o conteúdo do site enquanto este está a ser descarregado ou que o programador pretenda que um certo script seja logo disponibilizado para o utilizador, então deve-o colocar na tag <HEAD>. 3.7 Rule 7 Evitar expressões em CSS O principal problema de usar expressões em CSS é o facto de na maioria dos casos estas expressões serem avaliadas mais vezes do que necessário. Por exemplo: Quando o CSS avalia determinada condição desnecessariamente sempre que o rato se move. Quando se define uma cor de fundo dinâmica que é alterada todos os dias. Assim, esta verificação tem que ser feita constantemente, quando apenas bastava um script em php, jsp, etc. para resolver este problema. 3.8 Rule 8 - Colocar JavaScript e CSS no código HTML Ao colocar os CSS e JavaScripts no código HTML, faz com que não seja necessário fazer mais requests para os descarregar. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

11 Regras 11 O ponto contra desta regra, é o facto de não ser possível fazer caching dos ficheiros. Se num site a sua utilização for maioritariamente na home page apenas com um acesso, a colocação dos JavaScript e CSS embutido no HTML terá vantagem, uma vez que são necessários menos requests. Por outro lado, se os utilizadores usarem várias páginas do site, é aconselhado o uso dos JavaScripts e CSS em ficheiros á parte, para facilitar o processo de caching. Na primeira visita ao site, o utilizador poderá ter que fazer mais requests, mas depois deixará de ter que fazer download dos ficheiros JavaScript ou CSS uma vez que ficam em cache, 3.9 Rule 9 Reduzir os acessos ao DNS A redução de diferentes endereços no site, reduz o número de acesso ao servidor de DNS. Por exemplo, se tem referências para objectos noutros sites, é preferível incorpora-los no próprio site. Com este processo reduz o número de acessos ao servidor de DNS para resolver o endereço ip dos objectos externos Rule 10 Minimizar o JavaScript Uma boa programação, implica um código bem estruturado. Mas quando se publica um site, os caracteres de espaço e de tabulações usados para estruturar o código, ocupam espaço. Um bom método é limpar o JavaScript desses caracteres desnecessários para a publicação, diminuindo visivelmente o tamanho dos ficheiros e por consequente o aumento da velocidade do site Rule 11 Evitar Redireccionamentos Evitar o redireccionamento entre páginas aumenta o desempenho do site e retira a sensação ao utilizador que está a ser mandado de uma página para a outra. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

12 Regras Rule 12 Remover Scripts Duplicados Durante o desenvolvimento de um site, é muito comum existirem vários intervenientes. Com esta situação também se torna comum existirem Scripts com código duplicado, o que por razões óbvias, diminui o desempenho do site Rule 13 - Configure ETags As ETags são Strings que identificam especificamente um determinado componente univocamente. É usado para verificar se um determinado componente em cache corresponde ao componente existente no servidor. O uso de ETags em sites que não usem por exemplo vários clusters é uma boa opção, agora, se a infra-estrutura do site possuir vários clusters, é conveniente não existir ETags, uma vez que se existir informação replicada, em cada cluster vai existir uma ETag diferente para o mesmo ficheiro. Por esse motivo é preferível que em sistemas com vários clusters que não se utilizem ETags. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

13 Ferramentas utilizadas 13 4 Ferramentas utilizadas 4.1 IBM Page Detailer Esta ferramenta permite visualizar todos os componentes que uma página possui e os seus detalhes como o seu tempo de download, tamanho, header, bem como visualizar o progresso de download de todos os componentes em árvore. 4.2 YSlow O YSlow é um plugin que corre no Firefox por cima da ferramenta Firebug. Este plugin simula e avalia segundo as regras de Steve Souders das boas práticas de desenvolvimento de um website. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

14 Análise aos WebSites 14 5 Análise aos WebSites 5.1 ZeroZero.pt Avaliação YSlow Regra Total Avaliação (A-F) F F F F C C A - F F A A F F Tabela 1 - Avaliação do site segundo Steve Saunders através do YSlow Figura 1 Estatísticas dos tipos de ficheiros do site Análise Regra a Regra Regra 1 A primeira regra de Steve Souders neste site é completamente esquecida. O site tem 12 ficheiros JavaScript, 17 ficheiros StyleSheets e 29 imagens de background que na maioria dos API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

15 Análise aos WebSites 15 casos são imagens brancas com uma linha desenhada, que podia ser facilmente substituída por um elemento style num css. Quanto aos ficheiros JavaScript e StyleSheets, estes poderiam ser agrupas em 2 ficheiros ou a pouco mais ficheiros, o que iria diminuir o número de requests ao site. Outra falha neste ponto é o grande abuso da utilização de pequenos ícones como por exemplo no menu de topo como mostra a figura seguinte que poderiam ser facilmente substituídos por uma ou duas imagens usando Image Maps ao invés de 9 imagens pequenas. Figura 2 - Botões de topo do site Regra 2 Não há qualquer uso de CDN s para aproximar (fisicamente) o conteúdo estático do cliente evitando ter que ir sempre ao servidor central Regra 3 Apesar de a maior parte dos ficheiros possuírem a data em que expiram (normalmente com a duração de 1 mês), existem muito outros que não tem qualquer indicação dessa data. Acontece isso com muitas das imagens das bandeiras dos países e dos clubes. Problema este que poderia ser facilmente resolvido com a introdução da data de expiração nesses elementos Regra 4 Apesar de a classificação dada pelo YSlow a esta regra ser a pior (F), temos que ter em conta que os componentes que não tem activa a compressão são componentes de publicidade e alguns que até são externos ao zerozero, como por exemplo os elementos vindos de No entanto, também existem componentes de publicidade próprios que não tem a compressão activa. Por esse motivo uma classificação de C ou D nesta regra seria o mais adequado. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

16 Análise aos WebSites Regra 5 Esta regra, a semelhança da regra anterior, deveria ter uma cotação diferente. O YSlow atribui-lhe uma classificação de C, uma vez que encontrou 2 ficheiros css fora do header da página. Mas mais uma vez estes css pertencem ao sistema de publicidade, mais propriamente a Por esse motivo, considerando apenas o site zerozero, este deveria ter levado nota A Regra 6 Relativamente aos JavaScripts presentes, a maior parte deles são incluídos no Header da página. Apesar de alguns precisarem de ser logo incluídos, como é o caso do prototype, existem outros que poderiam ser deslocados para o final da página, como é o caso do script functions.js que apenas serve para alterar a imagem de um botão quando se passa com o rato por cima. CSS Regra 7 Quanto às expressões CSS nada a apontar, não existem estas expressões nos ficheiros Regra 8 Não existe código JavaScript ou CSS dentro do HTML da página Regra 9 Esta página tem um inúmero número de referências para sites externos o que faz com que seja necessário existir vários DNS lookups. A maior parte destas ligações a sites externos dizem respeito a sites de publicidade (pub.betclick.com, googleads.g.doubleclick.net, etc.) e a sites de vídeos (videos.sapo.pt, youtube.com). Por esse motivo será muito difícil manter os mesmos serviços não recorrendo a estas ligações. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

17 Análise aos WebSites Regra 10 Um outro erro que poderia ser resolvido facilmente e aumentando o desempenho do site era a minimização dos JavaScripts. Existem 8 dos 12 JavaScripts que poderiam ser facilmente minimizados e assim diminuir bastante o seu tamanho. outras Regra 11 Nada a apontar neste ponto, não existem redireccionamentos de umas páginas para as Regra 12 Também nada a apontar neste ponto, não existem funções duplicadas dentro dos ficheiros JavaScript Regra 13 Mais um ponto a ser corrigido é a configuração de ETagas dos componentes do site. A esmagadora maioria dos componentes do zerozero possuem as ETags configuradas, se o servidor do site possuir clusters, convêm retirar todas as ETags, caso contrário, convêm adicionar ETags aos componentes que não possuem para melhorar a eficiência dos sistemas de caching Comentário Final Este site contém vários pontos que segundo as regras de Steve Saunders estão desajustados para um site ter um bom desempenho. Alguns desses pontos poderiam ser facilmente resolvidos enquanto outros não pertencendo directamente ao zerozero, a sua resolução passaria para além do site. Em geral o site tem um grande número de erros que mereciam ser resolvidos. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

18 Análise aos WebSites Publico.pt Avaliação YSlow Regra Total Avaliação (A-F) F F F F B C A - F F A C F F Tabela 2 - Avaliação do site segundo Steve Saunders através do YSlow Figura 3 Estatísticas dos tipos de ficheiros do site Análise Regra a Regra Regra 1 Apesar de não haver neste site nenhuma imagem de backgroud, o que é um ponto positivo, existe um elevado número de JavaScripts. Mais propriamente 32 JavaScripts e 5 StyleSheets. A junção, principalmente dos ficheiros JavaScripts em menos ficheiros poderia diminuir consideravelmente o número de HTTP Requests. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

19 Análise aos WebSites Regra 2 Também este site não faz uso de qualquer CDN para aproximar o conteúdo estático do cliente final. Uma razão para o não uso desta técnica neste site poderá ser o público-alvo do site. Uma vez sendo um site de notícias portuguesas, a maioria dos utilizadores estarão em território nacional, o que pode levar á não adopção desta técnica Regra 3 A maior parte dos componentes não possuem data de expiração. Apenas 7 possuem um tempo de expiração de 24 horas (86400 segundos). Poderiam ser adicionadas datas aos componentes em falta a fim de melhorar o desempenho do sistema de cache, não apenas dos browsers, mas de todos os sistemas que fazem caching até ao cliente final Regra 4 Mais um ponto que não obedece totalmente as regras de Steve Saunders. Apesar de existirem vários componentes com o suporte para compressão activo, muitos outros não permitem esta compreensão, e uma vez sendo na sua maioria ficheiros JavaScript e css, poderiam muito bem ter a opção de compressão activa sem perca de qualidade como é o caso das imagens que podem perder qualidade quando se comprimem Regra 5 Á semelhança do que acontece com o site anterior, este ponto também merecia nota máxima, uma vez que apenas um css não se encontra no header do HTML e é um css que pertence ao sistema de publicidade que é totalmente independente do publico.pt Regra 6 Neste ponto existem várias falhas. Existem vários JavaScripts que são colocados no inicio que poderia ser colocados no final do documento HTML, com a excepção do ficheiro anylink.js que possui elementos que permitem o utilizador interagir com o menu de topo, e API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

20 Análise aos WebSites 20 colocando este ficheiro no final, iria impedir a utilização desse menu até que este ficheiro fosse carregado Regra 7 Quanto às expressões CSS segundo as regras de Steve Souders nada a apontar, não existem estas expressões nos ficheiros CSS Regra 8 Existe código Stylesheet dentro do código HTML da página que poderia ser colocado junto dos restantes ficheiros css a fim de possibilitar o uso de cache. <style id="ctl00_mystyle" type="text/css"> body { background-color: #FFFFFF; height: 100%; margin: 0px; }.firstcontainer { text-align:center; width:auto; height:100% }.secondcontainer { width:994px; height:100%; margin:auto; text-align:left; }.barraesq { width:680px; height:100%; background-color:#ffffff; border-right:1px dotted #CCCCCC; float: left; left: 0; padding:0; }.barradrt { --width:310px; height:100%; background-color:#ffffff; }.barratotal { width:auto; height:100%; background-color:#ffffff; } </style> API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

21 Análise aos WebSites Regra 9 Existe um grande número de DNS lookups no site mais propriamente 14. Como cada descoberta do ip através do servidor de DNS consome algum tempo, quando temos 14 chamadas a esse servidor, temos um grande período de inactividade que poderia ser aproveitado para processar informação útil para o utilizador Regra 10 Existem vários ficheiros JavaScript que não estão minimizados. Estes ficheiros apesar de muitos pertencerem aos sistemas de publicidade, muitos deles também são da responsabilidade do publico.pt. Estes últimos poderiam passar por um processo de minimização para assim diminuir o seu tamanho e aumentar a sua velocidade de download Regra 11 Neste ponto existe um redireccionamento que a ferramenta YSlow não conseguiu avaliar. O redireccionamento é feito de para Não sabemos até que ponto este redireccionamento poderia não ser feito, mas considerando o site publico.pt a pagina de entrada, ao invés do site publico.clix.pt vemos que só para fazer o redireccionamento de uma página para a outra temos um período de inactividade de informação útil para o utilizador de cerca de 0.2 segundos. Tempo este que era utilizado a fazer o lookup do DNS e do redirect para o novo endereço como mostra a figura seguinte. Figura 4 DNS Lookup com Redirect do site publico.pt para publico.clix.pt API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

22 Análise aos WebSites Regra 12 Existem 2 ficheiros que contem 4 componentes JavaScript redundantes. Estas redundâncias poderiam facilmente ser corrigidas a fim de diminuir o tamanho do ficheiro e assim conseguir um melhor desempenho Regra 13 A maioria dos componentes não possui ETagas configuradas. Mais uma vez o conselho é semelhante ao do site anterior. Se o site usar um cluster convêm retirar as Etags, caso contrario adicionar ETags aos restantes componentes Comentário Final Como sendo um dos maiores sites nacionais de notícias, existem muitos pontos que mereciam ser melhorados. Alguns, como o uso de CDN s talvez não seja possível, mas existem outros pontos de fácil resolução e que aumentaria significativamente o desempenho do site. Como por exemplo o uso de mecanismos para cache-control, de limpeza e agrupamento de código. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

23 Análise aos WebSites Cm-Condeixa.pt Avaliação YSlow Regra Total Avaliação (A-F) C F F F C A A - A F A B F F Tabela 3 - Avaliação do site segundo Steve Saunders através do YSlow Figura 5 Estatísticas dos tipos de ficheiros do site Análise Regra a Regra Regra 1 Apesar de comparando com os sites analisados anteriormente ter um número muito inferior de ficheiros JavaScript e StyleSheets, anda contem um número elevado de ficheiros que poderiam ser agrupados. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

24 Análise aos WebSites Regra 2 Mais uma vez, não existe qualquer uso de tecnologias CDN s. Comparativamente a outros sites nacionais, este ainda tem menos razões para usar uma CDN. Não se justifica o uso destas infra-estruturas para u site que tem como público-alvo os habitantes de uma região Regra 3 Não existem data de expiração em qualquer ficheiro do site da câmara municipal de Condeixa. Apenas um, relativo à gestão dos acessos ao site, fornecido pelo Google é que possui esta característica. Apesar de este ponto não ir de encontro a linha seguida por Steve Saunders, poderá ser uma boa opção. Não colocar data ou um tempo para expiração dos componentes e colocar uma ETag que identifique unicamente cada componente pode melhorar o desempenho do site quando não se tem uma infra-estrutura com clusters Regra 4 Existe alguns ficheiros que não suportam compressão que deveria ser alterados de modo a permitirem esta compressão, uma vez que alguns deles são ficheiros de grandes dimensões, como alguns HTML s que ocupam 38 e 19 Kb cada, bem como alguns JavaScripts e CSS que ocupam 4 e 5 Kb. Activando a compressão nestes ficheiros que contem texto, conseguia-se facilmente passar de 38Kb para 5Kb por exemplo no ficheiro HTML inicial Regra 5 Um dos possíveis erros desta página é usar IFrames o que implica cada IFrame ter que ter o seu próprio JavaScript e StyleSheet. Por esse motivo existem ficheiros css fora do HEAD do HTML da página inicial. Esta situação poderia ser resolvida, removendo as IFrames e introduzindo o código nos ficheiros HTML gerais. Mas como tudo tem contras, o contra desta operação é que impossibilita a hipótese de poder fazer cache destes componentes, uma vez que os IFrames são usados nos menus laterais e barra de topo que durante todo o site nunca se alteram. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

25 Análise aos WebSites Regra 6 Neste ponto o YSlow dá nota máxima ao site, porque não tem qualquer java script no inicio do site. Mas com o uso dos IFrames como no visto no ponto anterior o JavaScript e os StyleSheet tem que ser carregados dentro do IFrame. A figura seguinte mostra o atraso que o ficheiro JavaScript introduz em todo o desempenho do site. Se este JavaScript estivesse mesmo no final do HTML já não teria este atraso que se torna visível para o utilizador. Mas como foi descrito no ponto anterior, a solução passaria por remover as IFrames com todos os pontos a favor e contra que esta acção acarreta. JavaScript Atraso Regra 7 Figura 6 Atraso introduzido pelo JavaScript. Mais uma vez não existem expressões CSS, por esse motivo nada a apontar Regra 8 Este site também possui um pequeno código CSS dentro do HTML que poderia ser colocado num dos ficheiros CSS e possibilitar o seu caching. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

26 Análise aos WebSites 26 <style type="text/css"> <!-- body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #FFFFFF; background-image: url(img/fundo03.jpg); background-position:center; background-position:top; background-attachment:fixed; }.style1 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #515858; font-size: 10px; }.style7 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 10px; color: #FFFFFF; } --> </style> Regra 9 Não existe qualquer DNS lookup, por esse motivo nada a apontar Regra 10 Existem dois ficheiros JavaScript internos ao site da Câmara Municipal de Condeixa que não estão minimizados e um externo ao site. Como este ultimo não de pode fazer nada, já quanto aos outros podem ser facilmente minimizados e aumentar assim o desempenho do site. outras Regra 11 Nada a apontar neste ponto, não existem redireccionamentos de umas páginas para as API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

27 Análise aos WebSites Regra 12 Existem duas componentes JavaScripts redundantes dentro dos ficheiros js. Estas redundâncias poderiam ser removidas Regra 13 A esmagadora maioria dos componentes possui as ETags bem configuradas. Se o site apenas possuir um cluster (que é o mais provável), a opção está correcta em adoptar esta técnica para facilitar o processo de caching Comentário Final Um site que possui alguns pontos muito bem estruturados do ponto de vista do desempenho, mas que tem algumas carências principalmente no que diz respeito á compressão que não esta activa para alguns componentes e aos JavaScripts que não estão minimizados e tem algum componentes redundantes que poderiam ser corrigidos. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

28 Análise aos WebSites Hi5.com Avaliação YSlow Regra Total Avaliação (A-F) D F C C A C B - B A A B F D Tabela 4 - Avaliação do site segundo Steve Saunders através do YSlow Análise Regra a Regra Figura 7 Estatísticas dos tipos de ficheiros do site Regra 1 Apesar de não conter um grande número de ficheiros JavaScript, StyleSheet e Imagens de Fundo CSS, possui ainda um grande número de ficheiros que poderiam ser reduzidos, como o caso dos JavaScript. Como existem 7 javascripts e a maior parte da responsabilidade do site, poderiam ser agrupados em menos a fim de diminuir o número de requests. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

29 Análise aos WebSites Regra 2 Como o YSlow apenas conhece por defeito as CDN s do Yahoo, não podemos avaliar com certeza se o Hi5 usa ou não usa CDN s para aproximar as componentes estáticas dos clientes Regra 3 Neste ponto, o YSlow avalia o hi5 com nota C uma vez que encontrou 2 componentes que não possuíam uma data de expiração e um deles até uma data inválida tinha. Mas estes dois componentes não pertencem ao Hi5, mas sim ao sistema de publicidade do sapo. Por esse motivo a avaliação do site Hi5 isoladamente deveria ser A Regra 4 Mais uma vez existem componentes de publicidade do sapo que foram avaliados neste ponto pelo YSlow que não deveriam ser avaliados. No entanto o HTML da página inicial do hi5 não suporta compressão e como este HTML tem um tamanho de 56Kb, justificava-se o uso de compressão num ficheiro de texto deste tamanho Regra 5 Os CSS do hi5 estão colocados no inicio da página, por isso nada a apontar Regra 6 Já neste ponto existem JavaScripts que estão locados no HEAD do HTML que poderiam ser movidos mais para baixo e assim aumentar a velocidade com que o utilizador começasse a visualizar o site. Podemos ver na imagem seguinte que só o carregamento de 4 JavaScripts demora cerca de 2.9 segundos (1/4 do tempo total do site) em que o utilizador não vê nada. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

30 Análise aos WebSites Segundos Tempo de carregamento dos JavaScripts Figura 8 Tempo de carregamento dos JavaScripts no Hi5.com Regra 7 Existe uma expressão CSS que faz com que a avaliação desta regra seja B. Esta expressão tem o objectivo de quando é criado um overlay JavaScript, a altura do overlay não ultrapasse a altura da página para evitar possíveis escalonamentos das páginas e que os conteúdos fiquem deformados quando de abre esse overlay. Esta funcionalidade tem que ser feita ao nível do css e processada sempre que é criado um overlay. Como esta expressão não é constantemente avaliada, penso que não consistirá num problema para a máquina do cliente Regra 8 Existe um grande número de JavaScript e CSS embutido no HTML da página que impossibilita o seu processo de caching. Estes scripts deveriam ser colocados dentro de um ficheiro. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

31 Análise aos WebSites Regra 9 Existem 8 DNS lookups, dos quais 3 são referentes a subpáginas do hi5 onde o tempo de procura do ip através do servidor de DNS pode torna-se visível para o cliente final. Uma redução destes endereços poderia aumentar a velocidade do site Regra 10 Os JavaScripts do Hi5.com estão todos minimizados, nada a apontar Regra 11 Também nada a apontar neste ponto, não existem redireccionamentos de umas páginas para as outras. resolvido Regra 12 Existe um ficheiro JavaScript que contém um componente duplicado que poderia ser Regra 13 Praticamente todos os componentes possuem ETags. A eliminação destas ETgas se for usada uma CDN (que é muito provável, visto a popularidade do site) poderá melhorar o desempenho do sistema de caching Comentário Final Tendo em conta a popularidade do site existem vários pontos que mereciam ser revistos. Os pontos principais a corrigir serão o grande número de ficheiros JavaScript e css que poderia ser agrupados e a colocação dos JavaScripts fora do código HTML e no final do as suas chamadas no final do mesmo. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

32 Análise aos WebSites Uefa.com Avaliação YSlow Regra Total Avaliação (A-F) F F F A A B A - B C A A F F Tabela 5 - Avaliação do site segundo Steve Saunders através do YSlow Figura 9 Estatísticas dos tipos de ficheiros do site Análise Regra a Regra Regra 1 A primeira regra de Steve Sounders diz que devemos reduzir ao máximo o número de requests, e neste ponto o site da UEFA mostra preocupação relativamente aos ficheiros JavaScript e Stylesheet. Já não acontece o mesmo com as imagens em css, possuindo 19 imagens. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

33 Análise aos WebSites 33 Analisando o layout do site, consideramos que 19 imagens poderão ser um número excessivo dentro do css, que se destinam a efeitos de layout. Uma solução para este problema poderia passar pela junção de várias imagens numa só e usar as características backgroundimage e background-position dos CSS para definir que sub-imagem se pretende apresentar em cada local Regra 2 Mais uma vez não temos dados relativamente ao uso de CDN s, mas pela dimensão do site e da UEFA, justifica-se o uso de CDN s não apenas pela Europa, mas por todo o mundo onde o futebol é o desporto rei Regra 3 Cerca de metade dos ficheiros do site não possuem qualquer tipo de data de expiração, quer o uso de Expires ou Max-Age. Situação que poderia ser facilmente resolvida com a adição de um destes elementos nos componentes em falta Regra 4 Relativamente ao uso de técnicas de compressão como Gzip nos componentes do site é bem conseguida. Todos os ficheiros que não são imagens permitem o uso de compressão como ficheiros JavaScript, StyleSheets e HTML. As imagens, não permitem compressão para não perderem qualidade com este tipo de mecanismos Regra 5 Os CSS são os primeiros elementos a serem carregados, por isso nada a apontar Regra 6 Relativamente aos JavaScripts, dois deles são descarregados logo no inicio da página. Um deles é o prototype que tem que ser iniciado logo, para o utilizador poder usar os menus e API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

34 Análise aos WebSites 34 as ferramentas que este disponibiliza, o outro é um script que permite o utilizar ver vídeos e áudio num popup. Este ultimo também não convêm ser colocado no final, uma vez que colocado no inicio permite que o cliente clique nos vídeos e nas componentes de áudio enquanto o site ainda esta a ser carregado Regra 7 Não existem expressões CSS, por esse motivo nada a apontar Regra 8 Há semelhança do Hi5, este site também possui uma grande quantidade de JavaScript e CSS embutidos no HTML que deveriam ser retirados Regra 9 Existem alguns DNS lookups. A maioria deles referentes a subdomínios do site da UEFA que poderiam ser revistos de forma a juntar tudo no mesmo domínio, a fim de evitar DNS lookups Regra 10 Existem 2 ficheiros não minimizados referentes ao site da UEFA e um relativo ao sistema de publicidade. Os JavaScripts referentes ao site da UEFA deveriam ser minimizados para assim diminuir o seu tamanho e aumentar a velocidade de transferência Regra 11 Não existe redireccionamentos entre páginas, por esse motivo, nada a apontar. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

35 Análise aos WebSites Regra 12 Também nada a apontar neste ponto, não existem funções duplicadas dentro dos ficheiros JavaScript Regra 13 Praticamente todos os componentes possuem ETags. Se o servidor do site usar um cluster, esta utilização não é recomendada Comentário Final O desempenho do site da UEFA tem vários problemas a este nível. Os de maior relevo dizem respeito à falta de adição do tempo de expiração de cada componente bem como a configuração das ETags. Tem também outros problemas de maior relevância, mas que também poderiam aumentar o desempenho do site, como a colocação dos JavaScripts no final do documento HTML e a redução dos DNS lookups. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

36 Conclusões 36 6 Conclusões Com esta análise, verificamos que existem vários websites que não apostam em políticas desempenho. Testamos websites dos mais populares da internet e até nesses verificamos que simples métodos que aumentariam em muito o desempenho do site não são adoptadas. Relativamente aos sites nacionais, estas políticas são ainda mais escacas. Já nos sites internacionais que testamos, verificamos que algumas simples operações de optimização são feitas, como por exemplo a minimização dos JavaScripts mas não de uma forma consistente em todos os ficheiros, outras políticas mais complexas muitas vezes são postas de parte. Outro ponto que verificamos que algumas vezes os responsáveis pelos sites até se preocupam com o desempenho, mas quase sempre os sistemas de publicidade mais comuns na internet não utilizavam sistemas de optimização do desempenho, colocando em risco o trabalho dos responsáveis do próprio website. Por tudo isto, verificamos que existe ainda muito a fazer na área do desempenho dos websites. API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

37 Planeamento 37 7 Planeamento API - MEI - DEI - UC Quinta-Feira, 9 de Abril de

[Análise Performance Antiga Plataforma]

[Análise Performance Antiga Plataforma] Resumo do documento: Este documento tem com objectivo avaliar o desempenho da antiga aplicação de forma a ver o seu comportamento. Palavras-Chave: Performance Histórico de versões: Versão Data Realizado

Leia mais

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto)

HTML. (Hypertext Markup Language Linguagem de Marcação de Hipertexto) HTML (Hypertext Markup Language Linguagem de Marcação de Hipertexto) CSS - Cascading Style Sheets CSS serve para definir propriedades de apresentação/formatação a aplicar em tags HTML. A sua utilização

Leia mais

Manual do Gestor de Templates

Manual do Gestor de Templates Manual do Gestor de Templates Versão - Revisão 2 200.07.09 Índice Introdução... 3 2 O que muda com o Gestor de Templates... 3 3 Implicação da utilização do Gestor de Templates... 4 4 Lista de Funcionalidades...

Leia mais

Instruções para Administração do Site do Jornal de Oleiros... 2 Recomendações e Sugestões Técnicas... 2 Aceder à Zona de Administração do Site...

Instruções para Administração do Site do Jornal de Oleiros... 2 Recomendações e Sugestões Técnicas... 2 Aceder à Zona de Administração do Site... Instruções para Administração do Site do Jornal de Oleiros... 2 Recomendações e Sugestões Técnicas... 2 Aceder à Zona de Administração do Site... 2 Gerir Notícias no Site... 4 Inserir uma Notícia no Site...

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução O Gmail possui duas versões distintas para seu webmail: uma mais recente, que é a versão atual utilizada pelos usuários de Gmail, e

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Introdução Nesta sexta e penúltima edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos dos clientes

Leia mais

TECNOLOGIAS DA INFORMAÇÃO E COMUNICAÇÃO INTRODUÇÃO AO MACROMEDIA DREAMWEAVER MX 2004 O Macromedia Dreamweaver MX 2004 é um software que permite a criação de páginas de Internet profissionais, estáticas

Leia mais

MANUAL DE BOAS PRÁTICAS

MANUAL DE BOAS PRÁTICAS MANUAL DE BOAS PRÁTICAS Este manual é de uso exclusivo de clientes, parceiros, fornecedores e colaboradores da Dinamize. No caso de dúvidas, entre em contato através do e-mail suporte@dinamize.com. HTML

Leia mais

Universidade Da Beira Interior

Universidade Da Beira Interior 1 Universidade Da Beira Interior Sistemas Distribuídos e Tolerância a Falhas Estudo da Tecnologia jquery Tiago Simões m3965 João Pereira m3873 12 De Março de 2011 2 Conteúdo 1. Apresentação da tecnologia...

Leia mais

Laboratório 4 Validação do Formulário

Laboratório 4 Validação do Formulário Laboratório 4 Validação do Formulário Introdução Agora que já definimos os nossos documentos usando xhtml e já os embelezámos através da utilização das CSS, está na hora de validar a informação que o utilizador

Leia mais

Usabilidade e Acessibilidade dos Museus Online. Ivo Gomes

Usabilidade e Acessibilidade dos Museus Online. Ivo Gomes Usabilidade e Acessibilidade dos Museus Online Ivo Gomes Análise aos websites dos Museus Nacionais Em colaboração com o Público Digital Análise aos websites dos Museus Nacionais O Público Digital pediu

Leia mais

CSS Cascading Style Sheets Folhas de Estilo em Cascata

CSS Cascading Style Sheets Folhas de Estilo em Cascata CSS Cascading Style Sheets Folhas de Estilo em Cascata Conjunto de instruções que controla a aparência de uma página Web 1. Regra CSS seletor { propriedade1: valor; propriedade2: valor; 2. Aplicação 2.1

Leia mais

Como Começar? Criação Páginas. Etapas. Apresentação INTERNET

Como Começar? Criação Páginas. Etapas. Apresentação INTERNET Como Começar? Criação Páginas Apresentação Etapas Como começar Para que um site tenha sucesso é necessário um correcto planeamento do mesmo. Todos os aspectos de desenho de um site devem ser pensados de

Leia mais

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013

Aula 4 Modelo CSS. Efeito cascata. Ordem em cascata. Declarações normais e importantes. Exemplo. Especificidade de um seletor 30/08/2013 Efeito cascata Aula 4 Modelo CSS Curso: Técnico em Informática / 2º módulo Disciplina: Desenvolvimento Web Professora: Luciana Balieiro Cosme Fontes das folhas de estilo Autor Usuário Agente do usuário

Leia mais

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens

Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Aula 03: Noções Fundamentais do CSS, Formatação de Fonte e Inserção de Imagens Tag para inserir imagens e HTML O modelo CSS Noções fundamentais e funcionamento do CSS Incluindo estilos em uma página Sintaxe

Leia mais

Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata

Mudança de formatos no HTML. CSS - Cascading Style Sheets. A prioridade para o efeito cascata. A prioridade para o efeito cascata Mudança de formatos no HTML título CSS - Cascading Style Sheets e os problemas do HTML Para mudar a cor de uma única linha de uma página seria relativamente fácil.

Leia mais

Ferramentas como, por exemplo, linhas de conexão, formas automáticas, sombras pendentes, WordArt, etc.

Ferramentas como, por exemplo, linhas de conexão, formas automáticas, sombras pendentes, WordArt, etc. Ambiente de trabalho Ambiente de trabalho Porquê criar páginas web? A World Wide Web é a melhor forma das pessoas comunicarem umas com as outras. Nos dias de hoje, é importante poder comunicar com outras

Leia mais

3.1.7. Definição do fundo da página

3.1.7. Definição do fundo da página 3.1.7. Definição do fundo da página 1 Definição do fundo da página A definição do fundo de uma página pode ser feita através da atribuição de uma cor ou de uma imagem Quando é feita através da utilização

Leia mais

MANUAL DE BOAS PRÁTICAS

MANUAL DE BOAS PRÁTICAS MANUAL DE BOAS PRÁTICAS Este manual é de uso exclusivo de clientes, parceiros, fornecedores e colaboradores da Dinamize. No caso de dúvidas, entre em contato através do e-mail suporte@dinamize.com. HTML

Leia mais

agosto 2006 Manual de boas práticas de HTML para a produção de templates versão 1.0 / 2007 www.virtualtarget.com.br

agosto 2006 Manual de boas práticas de HTML para a produção de templates versão 1.0 / 2007 www.virtualtarget.com.br manual do cliente agosto 2006 Manual de boas práticas de HTML para a produção de templates versão 1.0 / 2007 www.virtualtarget.com.br introdução Este manual foi desenvolvido para auxiliar os usuários da

Leia mais

CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13

CSS. Sérgio Nunes. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 CSS Sérgio Nunes Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 1 Objetivos Conhecer as origens e os objetivos da linguagem CSS. Conhecer a estrutura base de uma regra CSS. Compreender

Leia mais

Interface Pessoa Máquina

Interface Pessoa Máquina Interface Pessoa Máquina Relatório Consolidado do Protótipo PrintShirt Grupo 95 Sumário Executivo Os testes que puderam ser realizados à interface do PrintShirt foram bastante superficiais dado que o programa

Leia mais

Portal AEPQ Manual do utilizador

Portal AEPQ Manual do utilizador Pedro Gonçalves Luís Vieira Portal AEPQ Manual do utilizador Setembro 2008 Engenharia Informática - Portal AEPQ Manual do utilizador - ii - Conteúdo 1 Introdução... 1 1.1 Estrutura do manual... 3 1.2 Requisitos...

Leia mais

ZS Rest. Manual Avançado. Monitor de Publicidade. v2011

ZS Rest. Manual Avançado. Monitor de Publicidade. v2011 Manual Avançado Monitor de Publicidade v2011 1. Índice 2. INTRODUÇÃO... 2 3. HARDWARE... 3 1 4. DEFINIÇÃO... 4 b) Definição dos monitores... 4 c) Definições ZSRest... 4 d) Aspecto Monitor... 5 i. Sim 5

Leia mais

SLIDESHOWS PARA TODOS

SLIDESHOWS PARA TODOS 110 JULHO AGOSTO 2004 2004 / / EDIÇÃO 109 110 NO CD E DVD SLIDESHOWS PARA TODOS Aprenda organizar as suas fotos para uma posterior gravação num CD ou DVD. Tudo com excelentes efeitos visuais e com as suas

Leia mais

Apresentação de REDES DE COMUNICAÇÃO

Apresentação de REDES DE COMUNICAÇÃO Apresentação de REDES DE COMUNICAÇÃO Curso Profissional de Técnico de Gestão e Programação de Sistemas Informáticos MÓDULO VIII Serviços de Redes Duração: 20 tempos Conteúdos (1) 2 Caraterizar, instalar

Leia mais

Conteúdo Programático do Web Design

Conteúdo Programático do Web Design Conteúdo Programático do Web Design O Ambiente Macromedia Dreamweaver Instalação do Dreamweaver Arquivos Utilizados na Apostila A Inicialização de Dreamweaver Área de Trabalho Dreamweaver Criação de uma

Leia mais

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata

CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS CSS é a abreviatura para Cascading Style Sheets Folhas de Estilo em Cascata CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML. CSS controla fontes, cores, margens,

Leia mais

Templates. Existem vários frameworks e softwares para criação de templates, sendo os mais conhecidos: Gantry, T3 e Artisteer.

Templates. Existem vários frameworks e softwares para criação de templates, sendo os mais conhecidos: Gantry, T3 e Artisteer. Templates Template ou tema, é a camada de visão de qualquer programa orientado a objetos, isto mesmo, template não é uma exclusividade do Joomla! Fim manter um padrão de nomenclatura, irei utilizar o termo

Leia mais

Web Design. Prof. Felippe

Web Design. Prof. Felippe Web Design Prof. Felippe 2015 Sobre a disciplina Fornecer ao aluno subsídios para o projeto e desenvolvimento de interfaces de sistemas Web eficientes, amigáveis e intuitivas. Conceitos fundamentais sobre

Leia mais

ZS Rest. Manual Profissional. BackOffice Mapa de Mesas. v2011

ZS Rest. Manual Profissional. BackOffice Mapa de Mesas. v2011 Manual Profissional BackOffice Mapa de Mesas v2011 1 1. Índice 2. Introdução... 2 3. Iniciar ZSRest Backoffice... 3 4. Confirmar desenho de mesas... 4 b) Activar mapa de mesas... 4 c) Zonas... 4 5. Desenhar

Leia mais

UNIDADE 2: Sistema Operativo em Ambiente Gráfico

UNIDADE 2: Sistema Operativo em Ambiente Gráfico Ambiente Gráfico Configurações Acessórios O Sistema Operativo (SO) é o conjunto de programas fundamentais que permitem que o computador funcione e que comunique com o exterior. Actualmente o Windows é

Leia mais

Manual de Boas Práticas

Manual de Boas Práticas MINISTÉRIO DA EDUCAÇÃO E CIÊNCIA Serviços de Informática da Universidade Aberta Manual de Boas Práticas Temas: Cuidados a ter com os anexos do correio eletrónico (email) Navegar na internet de forma segura:

Leia mais

7. Cascading Style Sheets (CSS)

7. Cascading Style Sheets (CSS) 7. Cascading Style Sheets (CSS) O CSS (Folha de Estilo em Cascata) é um padrão de formatação para páginas web que vai além das limitações impostas pelo HTML. O Cascading Style Sheets não é exatamente uma

Leia mais

NTI Núcleo de Tecnologia de Informação / UNIFAL-MG Drupal Manual do Usuário DRUPAL MANUAL DO USUÁRIO

NTI Núcleo de Tecnologia de Informação / UNIFAL-MG Drupal Manual do Usuário DRUPAL MANUAL DO USUÁRIO DRUPAL MANUAL DO USUÁRIO Primeiros passos para inserir conteúdo no site. 1. Logar-se no site através de seu usuário e senha. 2. Criar um novo menu. 3. Ativar o menu criado, colocando-o em alguma região

Leia mais

Cabeçalho do documento

Cabeçalho do documento Cabeçalho do documento O cabeçalho de uma página HTML fica dentro das Tags e , e dentro dessas Tags podemos usar Tags , , , , e etc. A Tag TITLE Por exemplo

Leia mais

Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL.

Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL. Construindo um sistema simples de cadastro de fornecedores em PHP e MySQL. Procuraremos mostrar os principais procedimentos para fazer um cadastro de registros numa base de dados MySQL utilizando a linguagem

Leia mais

[Documentação de Utilização Correio Electrónico dos Estudantes da ESTG]

[Documentação de Utilização Correio Electrónico dos Estudantes da ESTG] [Documentação de Utilização Correio Electrónico dos Estudantes da ESTG] Unidade De Administração de Sistemas Serviços Informáticos Instituto Politécnico de Leiria 10-07-2009 Controlo do Documento Autor

Leia mais

ZSRest/ZSPos. Manual de Stocks. BackOffice

ZSRest/ZSPos. Manual de Stocks. BackOffice BackOffice 1 1. Índice 2. Introdução... 3 3. Iniciar o ZSRest/ZSPos FrontOffice... 4 4. Produto... 5 Activar gestão de stocks... 5 5. Armazém... 7 a) Adicionar Armazém... 8 b) Modificar Armazém... 8 c)

Leia mais

Manual de construção HTML5

Manual de construção HTML5 Estrutura: Estrutura do HTML e seus assets: Os assets devem estar no mesmo nível do HTML principal, ou seja, não devem existir pastas organizando os assets. Como enviar os arquivos para o SGR? Basta criar

Leia mais

BPstat. manual do utilizador. Banco de Portugal BPstat Estatísticas online Manual do Utilizador 1/24

BPstat. manual do utilizador. Banco de Portugal BPstat Estatísticas online Manual do Utilizador 1/24 BPstat manual do utilizador Banco de Portugal BPstat Estatísticas online Manual do Utilizador 1/24 BANCO DE PORTUGAL Av. Almirante Reis, 71 1150-012 Lisboa www.bportugal.pt Edição Departamento de Estatística

Leia mais

PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS

PROGRAMAÇÃO MANUAL DE INSTRUÇÕES SEJA BEM VINDO VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS VERSÃO 1.4 10/01/2013 UDS SOLUÇÕES DIGITAIS PROGRAMAÇÃO MANUAL DE INSTRUÇÕES Instruções, métodos e recomendações para desenvolvimento de sistemas na UDS. 1 Sumário Apresentação... 3 Estrutura de pastas:...

Leia mais

Observações importantes:

Observações importantes: Fundação CECIERJ - Vice Presidência de Educação Superior a Distância Curso de Tecnologia em Sistemas de Computação Disciplina Criação de Páginas de WEB AD1 1 semestre de 2014. Observações importantes:

Leia mais

Exemplo de uso correto da semântica HTML

<!DOCTYPE html> <html lang = pt-br> <head> <meta charset = UTF-8> <title> Exemplo de uso correto da semântica HTML </title> </ head > Para um navegador exibir corretamente uma página web, devemos informar explicitamente o tipo do documento. O tipo do documento é informado com a declaração . TAG

Leia mais

Primeiro de Tudo. Primeiros Passos. Login

Primeiro de Tudo. Primeiros Passos. Login 1 Primeiro de Tudo O sistema funciona de forma óptima no Firefox e Internet Explorer 8 + Nós recomendamos instalar a última versão atualizada dos seguintes browsers: Firefox or Internet Explorer como também

Leia mais

Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar

Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar Definindo um Layout de Website sem Tabelas Vou apresentar nesse post como fazer o código do layout de um website sem utilizar tabelas (tableless), e utilizando muito . Para continuar lendo esse post,

Leia mais

Manual de Access 2007

Manual de Access 2007 Manual de Access 2007 Índice Introdução... 4 Melhor que um conjunto de listas... 5 Amizades com relações... 6 A Estrutura de uma Base de Dados... 8 Ambiente do Microsoft Access 2007... 9 Separadores do

Leia mais

Estatísticas --------------------------------------------------------------------------------------------------------------- Manual do cliente

Estatísticas --------------------------------------------------------------------------------------------------------------- Manual do cliente Estatísticas --------------------------------------------------------------------------------------------------------------- Manual do cliente www.plugin.com.br 1 ÍNDICE O que é o PlugStats:...4 Acessando

Leia mais

Desenvolvendo Websites com PHP

Desenvolvendo Websites com PHP Desenvolvendo Websites com PHP Aprenda a criar Websites dinâmicos e interativos com PHP e bancos de dados Juliano Niederauer 19 Capítulo 1 O que é o PHP? O PHP é uma das linguagens mais utilizadas na Web.

Leia mais

Coleção - Análises de email marketing em clientes de email

Coleção - Análises de email marketing em clientes de email Coleção - Análises de email marketing em clientes de email Thunderbird e Terra Nesta terceira edição da Coletânea de Análises de Email Marketing em Clientes de Email, apresentamos os estudos do webmail

Leia mais

Plano de Aula - Dreamweaver CS6 - cód.5232 24 Horas/Aula

Plano de Aula - Dreamweaver CS6 - cód.5232 24 Horas/Aula Plano de Aula - Dreamweaver CS6 - cód.5232 24 Horas/Aula Aula 1 Capítulo 1 - Introdução ao Dreamweaver CS6 Aula 2 Continuação do Capítulo 1 - Introdução ao Dreamweaver CS6 Aula 3 Capítulo 2 - Site do Dreamweaver

Leia mais

UFCD 0152 Estrutura de um sítio para Internet

UFCD 0152 Estrutura de um sítio para Internet INSTITUTO DO EMPREGO E FORMAÇÃO PROFISSIONAL, IP DELEGAÇÃO REGIONAL DO NORTE CENTRO DE EMPREGO E FORMAÇÃO PROFISSIONAL DE VIANA DO CASTELO-SERVIÇO DE FORMAÇÃO PROFISSIONAL UFCD 0152 Estrutura de um sítio

Leia mais

Personalizando o Dreamweaver

Personalizando o Dreamweaver Personalizando o Dreamweaver - Acessando o painel de Preferências: O painel de preferências possui todas as configurações que o Dreamweaver oferece. Para quem é usuário de PC, poderá acessar pelo menu

Leia mais

Unidade 4 Concepção de WEBSITES. Fundamentos do planeamento de um website 1.1. Regras para um website eficaz 1.1.1.

Unidade 4 Concepção de WEBSITES. Fundamentos do planeamento de um website 1.1. Regras para um website eficaz 1.1.1. Unidade 4 Concepção de WEBSITES Fundamentos do planeamento de um website 1.1. Regras para um website eficaz 1.1.1. Sobre o conteúdo 1 Regras para um website eficaz sobre o conteúdo Um website é composto

Leia mais

ZS Rest. Manual de Iniciação. BackOffice

ZS Rest. Manual de Iniciação. BackOffice Manual de Iniciação BackOffice 1 1. Índice 2. Introdução... 2 3. Iniciar o ZSRest... 3 a) BackOffice:... 4 b) Acesso BackOffice:... 4 4. Zonas... 6 c) Criar Zona:... 7 d) Modificar Zona:... 8 e) Remover

Leia mais

[Documentação de Utilização Correio Electrónico dos Funcionários da ESTG]

[Documentação de Utilização Correio Electrónico dos Funcionários da ESTG] [Documentação de Utilização Correio Electrónico dos Funcionários da ESTG] Unidade De Administração de Sistemas Serviços Informáticos Instituto Politécnico de Leiria 09-06-2010 Controlo do Documento Autor

Leia mais

Microsoft Office FrontPage 2003

Microsoft Office FrontPage 2003 Instituto Politécnico de Tomar Escola Superior de Gestão Área Interdepartamental de Tecnologias de Informação e Comunicação Microsoft Office FrontPage 2003 1 Microsoft Office FrontPage 2003 O Microsoft

Leia mais

Responsive Web Design

Responsive Web Design Professor: http://jemaf.github.com DESENVOLVIMENTO DE APLICAÇÕES WEB - INFORMATICA - COLTEC/UFMG 2014 Introdução Atualmente, a web é acessada de qualquer lugar, em qualquer dispositivo. Acesso a web: Anos

Leia mais

DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0

DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0 DOCUMENTAÇÃO DO FRAMEWORK - versão 2.0 Índice 1 - Objetivo 2 - Descrição do ambiente 2.1. Tecnologias utilizadas 2.2. Estrutura de pastas 2.3. Bibliotecas já incluídas 3 - Características gerais 4 - Criando

Leia mais

ZS Rest. Manual Avançado. Gestão de Stocks Local. v2011

ZS Rest. Manual Avançado. Gestão de Stocks Local. v2011 Manual Avançado Gestão de Stocks Local v2011 1 1. Índice 2. Introdução... 3 3. Iniciar o ZSRest FrontOffice... 4 4. Produto... 5 b) Activar gestão de stocks... 5 i. Opção: Faz gestão de stocks... 5 ii.

Leia mais

Construção de um WebSite. Luís Ceia

Construção de um WebSite. Luís Ceia Construção de um WebSite Para a construção de um WebSite convém ter-se uma planificação cuidada. Para tal podemos considerar seis etapas fundamentais: 1. Planeamento 2. Desenvolvimento de Conteúdos 3.

Leia mais

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira

WEBDESIGN. Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira WEBDESIGN Professor: Paulo Marcos Trentin - paulo@paulotrentin.com.br http://www.paulotrentin.com.br Escola CDI de Videira Recursos avançados com CSS Uma vez entendido o uso básico e treinado muito, chegou

Leia mais

Centro de Competência Entre Mar e Serra. Guia

Centro de Competência Entre Mar e Serra. Guia SMART Notebook Software Guia O Software Notebook permite criar, organizar e guardar notas num quadro interactivo SMART Board (em modo projectado e não-projectado), num computador pessoal e, em seguida,

Leia mais

Meu site Plone está lento. O que fazer? Fabiano Weimar dos Santos xiru@xiru.org

Meu site Plone está lento. O que fazer? Fabiano Weimar dos Santos xiru@xiru.org Meu site Plone está lento. O que fazer? Fabiano Weimar dos Santos xiru@xiru.org 1 Roteiro Por que o Plone é Lento? Performance Tuning Dicas e Truques 2 Por que o Plone é Lento? Fato: qualquer software

Leia mais

TABLELESS E PROJETO ESTRUTURAL

TABLELESS E PROJETO ESTRUTURAL Barra Lateral 1 Barra Lateral 2 Barra Lateral 2 Barra Lateral Barra Lateral DISCIPLINA: FUNDAMENTOS E TECNOLOGIA EM WEB Professora: Adriana Silva TABLELESS E PROJETO ESTRUTURAL O termo TABLELESS refere-se

Leia mais

1) Criar o código HTML para construir a página representada pela imagem abaixo.

1) Criar o código HTML para construir a página representada pela imagem abaixo. 1) Criar o código HTML para construir a página representada pela imagem abaixo. 2) Código HTML puro (criar arquivo index.html): brasil Motores Motores diesel para uso automotivo, veicular, marítimo,

Leia mais

MELHORANDO O DESEMPENHO DO SEU WORDPRESS JULIAN FERNANDES TIAGO HILLEBRANDT

MELHORANDO O DESEMPENHO DO SEU WORDPRESS JULIAN FERNANDES TIAGO HILLEBRANDT MELHORANDO O DESEMPENHO DO SEU WORDPRESS JULIAN FERNANDES TIAGO HILLEBRANDT Julian Fernandes Technical Support Team Lead na Copyblogger Media, LLC Trabalha diariamente com uma estrutura com mais de 10.000

Leia mais

Introdução às Folhas de Estilo

Introdução às Folhas de Estilo Introdução às Folhas de Estilo Folhas de Estilo Cascading Style Sheets (CSS). Separa aparência e estrutura do documento. Permite maior controle sobre a apresentação das páginas Margens Tamanho / tipo de

Leia mais

Avaliação do site lisbonfancytour.pt

Avaliação do site lisbonfancytour.pt Avaliação do site lisbonfancytour.pt Gerado a 21 de Novembro de 2015 19:20 PM O resultado é de 59/100 Conteúdo SEO Título Transfers Lisboa Cumprimento : 16 Perfeito, o Título contém entre 10 e 70 caracteres.

Leia mais

Introdução à Cascading Style Sheets

Introdução à Cascading Style Sheets Estilo e Produtividade para Websites OVERVIEW História e Significado Por que usar? Como usar? Orientações ao Desenvolvedor O que é CSS? O que é CSS? Cascading Style sheets" ou "Folhas de Estilo Encadeadas

Leia mais

Manual de utilização do Moodle

Manual de utilização do Moodle Manual de utilização do Moodle Iniciação para docentes Universidade Atlântica Versão: 1 Data: Fevereiro 2010 Última revisão: Fevereiro 2010 Autor: Ricardo Gusmão Índice Introdução... 1 Registo no Moodle...

Leia mais

WWW - World Wide Web

WWW - World Wide Web WWW World Wide Web WWW Cap. 9.1 WWW - World Wide Web Idéia básica do WWW: Estratégia de acesso a uma teia (WEB) de documentos referenciados (linked) em computadores na Internet (ou Rede TCP/IP privada)

Leia mais

Apostila CSS - Introdução à folha de estilos

Apostila CSS - Introdução à folha de estilos Apostila CSS - Introdução à folha de estilos Este documento é propriedade intelectual do Núcleo de Educação a distância da NRsystem e distribuído sob os seguintes termos: 1. As apostilas publicadas pelo

Leia mais

Para iniciar a construção de WebQuest no Servidor PHP de webquests do Centro de Competência CRIE do CAPAG, aceda ao seguinte url:

Para iniciar a construção de WebQuest no Servidor PHP de webquests do Centro de Competência CRIE do CAPAG, aceda ao seguinte url: C e n tro d e C ompetênci a CRIE d o CA PAG Versão Beta 4 E l a b o r a d o p o r : M a r i a d e B a l s a m ã o M e n d e s G u i ã o d e P H P W e b Q u e s t V a m o s C r i a r W e b q u e s t s?

Leia mais

PACWEB Módulo de Pesquisa MANUAL DO UTILIZADOR

PACWEB Módulo de Pesquisa MANUAL DO UTILIZADOR MANUAL DO UTILIZADOR Versão 1.3 ÍNDICE 1. INTRODUÇÃO 2 2. INSTALAÇÃO E CONFIGURAÇÃO 3 2.1 INSTALAÇÃO 3 Instalar o Pacweb 3 Alterar o Ficheiro Default.htm 3 Criar um Virtual Directory 3 2.2 CONFIGURAÇÃO

Leia mais

Tecnologias da Informação e Comunicação: Internet

Tecnologias da Informação e Comunicação: Internet Tecnologias da Informação e Comunicação UNIDADE 3 Tecnologias da Informação e Comunicação: Internet Aula nº 2º Período Escola EB 2,3 de Taíde Ano lectivo 2009/2010 SUMÁRIO Introdução à Internet: história

Leia mais

[Sprint s Semanais] Resumo do documento:

[Sprint s Semanais] Resumo do documento: Resumo do documento: Este documento tem como objectivo especificar apresentar e descrever os sprints atribuídos semanalmente e a evolução dos mesmos. Palavras-Chave: Sprints semanais. Histórico de versões:

Leia mais

Otimização de infraestrutura. de websites. Fabiano Weimar dos Santos xiru@xiru.org

Otimização de infraestrutura. de websites. Fabiano Weimar dos Santos xiru@xiru.org Otimização de infraestrutura para hospedagem de websites Fabiano Weimar dos Santos xiru@xiru.org O que iremos ver? O Problema Fatos! Medindo Performance Ferramentas Dicas de Otimização de Performance O

Leia mais

Esqueceu o Nome de Usuário ou a Senha? Está tendo dificuldades para fazer login com um Nome de Usuário que contém caracteres especiais ou espaços?

Esqueceu o Nome de Usuário ou a Senha? Está tendo dificuldades para fazer login com um Nome de Usuário que contém caracteres especiais ou espaços? Manual de Resolução de Problemas Esqueceu o Nome de Usuário ou a Senha? Está tendo dificuldades para fazer login com um Nome de Usuário que contém caracteres especiais ou espaços? Não consegue iniciar

Leia mais

Numero de visitas 122 (1.96 visitas/visitante) 1,394 (11.42 Páginas/Visita)

Numero de visitas 122 (1.96 visitas/visitante) 1,394 (11.42 Páginas/Visita) Ultima Actualização: Mai - 7: Período considerado: OK Resumo Período Mês considerado Primeira NA visita Última visita - :53 Tráfego visualizado * Tráfego não visualizado * Visitantes únicos 6 Numero de

Leia mais

Asdasd asdasdasdas sadasdasdasd asdasdasdasd asdasdasdasd asdasdasdasd asdasdasdasd asdasdasdasd asdasdasdasdasdasd. 4. Componentes Multimédia

Asdasd asdasdasdas sadasdasdasd asdasdasdasd asdasdasdasd asdasdasdasd asdasdasdasd asdasdasdasd asdasdasdasdasdasd. 4. Componentes Multimédia Asdasd asdasdasdas sadasdasdasd asdasdasdasd asdasdasdasd asdasdasdasd asdasdasdasd asdasdasdasd asdasdasdasdasdasd 4. Componentes Multimédia 4 4 Componentes Multimédia 4.1 - Apresentação e Objectivos

Leia mais

Aplicações de Escritório Electrónico

Aplicações de Escritório Electrónico Universidade de Aveiro Escola Superior de Tecnologia e Gestão de Águeda Curso de Especialização Tecnológica em Práticas Administrativas e Tradução Aplicações de Escritório Electrónico Folha de trabalho

Leia mais

Manual para a produção de templates de email marketing

Manual para a produção de templates de email marketing Manual para a produção de templates de email marketing Introdução Este manual foi desenvolvido para auxiliar os usuários da Virtual Target a desevolverem o HTML de um template de forma a melhorar o resultado

Leia mais

Estrutura de um endereço de Internet

Estrutura de um endereço de Internet Barras do Internet Explorer Estrutura de um endereço de Internet Na Internet, cada servidor tem uma identificação única, correspondente ao endereço definido no IP (Internet Protocol). Esse endereço é composto

Leia mais

Objectivos Gerais da Aplicação 5 Requisitos Mínimos e Recomendados 5 Processo de Instalação 6

Objectivos Gerais da Aplicação 5 Requisitos Mínimos e Recomendados 5 Processo de Instalação 6 MANUAL DO UTILIZADOR A informação contida neste manual, pode ser alterada sem qualquer aviso prévio. A Estratega Software, apesar dos esforços constantes de actualização deste manual e do produto de software,

Leia mais

internet http://www.uarte.mct.pt internet... abrir o programa... pag.. 6 ecrã do internet explorer... ligações... escrever um endereço de internet...

internet http://www.uarte.mct.pt internet... abrir o programa... pag.. 6 ecrã do internet explorer... ligações... escrever um endereço de internet... internet 1 http://www.uarte.mct. internet...... pag.. 2 abrir o programa...... pag.. 3 ecrã do internet explorer... pag.. 4 ligações...... pag.. 5 escrever um endereço de internet... pag.. 6 voltar à página

Leia mais

Instalação e Manutenção de Microcomputadores (COI)

Instalação e Manutenção de Microcomputadores (COI) Instalação e Manutenção de Microcomputadores (COI) 4. Montagem do Computador Disco rígido limpeza; Disco rígido verificação de erros (modo gráfico); Disco rígido verificação de erros (linha de comandos;

Leia mais

Índice. 1. Introdução 3. 2. Instalação e desinstalação do GENIUS VOIP MOUSE 4. 2.2 IMs suportados pelo GENIUS VOIP MOUSE 5

Índice. 1. Introdução 3. 2. Instalação e desinstalação do GENIUS VOIP MOUSE 4. 2.2 IMs suportados pelo GENIUS VOIP MOUSE 5 Índice 1. Introdução 3 2. Instalação e desinstalação do GENIUS VOIP MOUSE 4 2.1 Requisitos do sistema 4 2.2 IMs suportados pelo GENIUS VOIP MOUSE 5 2.3 Website de cada IM para download 5 2.4 Instalação

Leia mais

INTRODUÇÃO AO ACTIONSCRIPT

INTRODUÇÃO AO ACTIONSCRIPT 6 INTRODUÇÃO AO ACTIONSCRIPT No capítulo anterior, aprendemos a criar animações lineares que são inseridas na timeline. Ao longo deste capítulo, iremos abordar a linguagem de programação ActionScript para

Leia mais

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.

#Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com. #Aula Nº 3 Estilo CSS webstandards.samus.com.br webstandards.samus.com.br/aulas/aula3.pdf Vinicius Fiorio Custódio samus@samus.com.br #Objetivo Apresentar os conceitos de utilização do CSS, Sintaxe, Seletores

Leia mais

FrontPage Express. Manuel Cabral Reis UTAD Departamento de Engenharias Curso de Ciências da Comunicação Disciplina de Introdução à Informática

FrontPage Express. Manuel Cabral Reis UTAD Departamento de Engenharias Curso de Ciências da Comunicação Disciplina de Introdução à Informática FrontPage Express Manuel Cabral Reis UTAD Departamento de Engenharias Curso de Ciências da Comunicação Disciplina de Introdução à Informática O que é o FrontePage Express Para aceder ao programa que vai

Leia mais

Reconhecer a estrutura de um sistema operativo. Definir um plano de instalação de um servidor de rede local.

Reconhecer a estrutura de um sistema operativo. Definir um plano de instalação de um servidor de rede local. FICHA TÉCNICA Exercício nº 7 Data de Aplicação 12/02/2009 NOME DO EXERCÍCIO Selecção de Hardware para Rede Local 773 DESTINATÁRIOS Duração Pré Requisitos Recursos / Equipamentos Orientações Pedagógicas

Leia mais

Acessibilidade na Web Cesár Bomfim Brasília 15 de Março

Acessibilidade na Web Cesár Bomfim Brasília 15 de Março Acessibilidade na Web Cesár Bomfim Brasília 15 de Março Avaliação Passos para Site Acessível -Seguir padrões Web; -Seguir as diretrizes e recomendações de acessibilidade; -Realizar avaliação de acessibilidade.

Leia mais

IPAHN Novo Portal 4 ª Revisão e Análise do CMS e Novo Portal Dezembro 2014

IPAHN Novo Portal 4 ª Revisão e Análise do CMS e Novo Portal Dezembro 2014 IPAHN Novo Portal 4 ª Revisão e Análise do CMS e Novo Portal Dezembro 2014 Relação de itens verificados e propostas de alteração que consideramos fundamental para a continuidade dos trabalhos de transição

Leia mais

CAUETEC INFORMÁTICA Rua Serra Talhada, 153 Vila Diana - 04835-150 São Paulo. Fone: 3441-6836 Site: www.cauetec.com.br E-mail: cauetec@cauetec.com.

CAUETEC INFORMÁTICA Rua Serra Talhada, 153 Vila Diana - 04835-150 São Paulo. Fone: 3441-6836 Site: www.cauetec.com.br E-mail: cauetec@cauetec.com. 3 de 13 Índice 1. Mapa CSS e legenda das principais imagens que compõe as paginas...4 a. Conhecimentos desejáveis:...4 b. Modelos Clássico e Fundo Fixo:...4 c. Para o designer o que muda entre o modelo

Leia mais

Aplicativos para Internet Aula 01

Aplicativos para Internet Aula 01 Aplicativos para Internet Aula 01 Arquitetura cliente/servidor Introdução ao HTML, CSS e JavaScript Prof. Erika Miranda Universidade de Mogi das Cruzes Uso da Internet http://www.ibope.com.br/pt-br/noticias/paginas/world-wide-web-ou-www-completa-22-anos-nesta-terca-feira.aspx

Leia mais

Trabalho Prático 1 Relatório Final

Trabalho Prático 1 Relatório Final Licenciatura em Engenharia Informática Departamento de Informática Desenvolvimento de Aplicações para a Web Ano lectivo 2012 / 2013 Trabalho Prático 1 Relatório Final Realizado por Antero Pires, n.º 33065

Leia mais

Guião de Exploração. Introdução

Guião de Exploração. Introdução Guião de Exploração Introdução Ter o Mundo em 3D dentro de um computador e visualizar a superfície terrestre como se de uma viagem aérea se tratasse é a experiência que todos os professores já tiveram.

Leia mais