ANÁLISE DE PÁGINAS WEB

ANÁLISE DE PÁGINAS WEB Ficha de Exercícios. Comunicações Digitais e Internet Ciências da Comunicação, U.Porto 2012/13 OBJETIVOS Existem diversas ferramentas desenhadas para auxiliar o trabalho de produção e escrita de documentos web. Nesta ficha vamos conhecer as ferramentas disponíveis no Google Chrome, bem como algumas bookmarklets existentes. CHROME WEB DEVELOPER a) Usando o Google Chrome, aceder à página do JPN ( http://jpn.icicom.up.pt ). b) Abrir as Developer Tools através do menu em: View à Developer à Developer Tools. Em alternativa, usar o botão disponível no lado superior direito da janela (
opção Tools à Developer Tools. ) e escolher a Destacar a janela com as Developer Tools usando o botão disponível no canto inferior esquerdo da janela (
). c) No primeiro painel disponível (painel Elements), observar o código HTML da página de entrada do JPN. Neste painel é possível expandir ou fechar os vários elementos HTML. Quando um elemento HTML é selecionado, o painel à direita apresenta vários detalhes sobre esse elemento. A janela do Google Chrome reflete a seleção que é feita neste painel, o elemento HTML selecionado é destacado na página apresentada (colocar as janelas lado a lado para observar). Esta função permite obter uma indicação visual clara dos elementos HTML usados para estruturar o documento. Com recurso à lupa que se encontra no canto inferior esquerdo da janela (
), é possível identificar o código HTML selecionando partes da página web. Experimentar a lupa sobre a página web tal como é apresentada no navegador. Explorar detalhadamente este painel com diferentes páginas. d) O segundo painel disponível (painel Resources) apresenta detalhes sobre todos os recursos utilizados na página. Os recursos são organizados em três tipos, as imagens (Images), os ficheiros com código JavaScript (Scripts), e os ficheiros com instruções CSS (Stylesheets). Este painel permite observar individualmente cada um dos recursos, independentemente do código HTML. É particularmente útil para gestão das imagens. Qual é o maior recurso (em bytes) da página de entrada do JPN. e) O terceiro painel disponível (painel Network) apresenta informações sobre a transferência de cada um dos recursos utilizados na página. Neste painel, é possível saber quanto tempo demorou a transferência de cada recurso individual e quanto tempo demorou no total a transferência da página completa. A informação deste painel permite obter uma noção clara dos tempos envolvidos na transferência do documento web. Qual é o recurso que mais tempo demorou a ser transferido? Qual o tempo de transferência total da página de entrada do JPN? f)
O painel Audits permite auditar automaticamente vários aspetos da página. Após a execução do processo, várias sugestões de melhor são apresentadas. As sugestões com um impacto mais determinante são indicadas com um símbolo vermelho. Correr o processo de auditoria na página de entrada do JPN e ver os resultados. g) O último painel (Page Speed) permite testar o tempo total de carregamento e apresentação da página. Após o teste, são apresentadas sugestões tendo em vista a otimização da página. Correr o teste de velocidade para a página de entrada do JPN e ver os resultados obtidos. BOOKMARKLETS As bookmarklets são conjuntos de instruções armazenadas sob a forma de bookmark (ou favorito) no navegador web. As bookmarklets, por vezes também designadas por favelets, permitem adicionar funcionalidades aos navegadores web através da simples criação de uma nova bookmark. Seguem-­‐se alguns exemplos de bookmarklets particularmente úteis: a) Readability ( http://www.readability.com/bookmarklets ) A bookmarklet Readability isola o conteúdo relevante de uma página e apresenta-­‐o num formato desenhado para facilitar a leitura. Instalar a bookmarklet Readability e testar em várias páginas web. b) XRAY ( http://www.westciv.com/xray/ ) A bookmarklet XRAY permite analisar os elementos HTML usados na construção de uma página web. É particularmente útil para perceber que elementos foram usados na anotação do conteúdo e de que forma foram encaixados. Instalar a bookmarklet XRAY no Firefox ou no Internet Explorer e observar algumas páginas web. Ver como é possível identificar a forma como os elementos foram encaixados. ANALISAR JPN Fazer uma análise do código HTML de dois modelos do JPN, nomeadamente do modelo usado na página de entrada e do modelo usado para apresentar notícias. a) Aceder à página de entrada do JPN e descrever a forma como foi estruturado o código HTML para desenhar a página. Recorrer às ferramentas do Google Chrome ou à bookmarklet XRAY para esta tarefa. Quais são as principais áreas, em termos de HTML, da página de entrada? Que elementos HTML foram usados para anotar o conteúdo? Em concreto, que elementos foram usados para anotar o menu, os títulos, os sumários das notícias, e as listagens das notícias? b) Aceder a uma notícia do JPN e descrever a forma como foi estruturado o código HTML para desenhar a página. Em termos de estrutura geral, em que difere a página de uma notícia da página de entrada? Que elemento HTML se utiliza para anotar o título da notícia? Que elementos HTML são usados para os títulos interiores da notícia, para as imagens, e para os parágrafos? Que elementos HTML se usam nas caixas informativas? c) Obter uma imagem da página de entrada do JPN. Em Windows, usar ALT + Print Screen para copiar a janela ativa. Para se obter uma cópia da página completa, existe por exemplo o serviço web2PDF ( http://www.web2pdfconvert.com ). A melhor opção para obter imagens integrais das páginas é através de extensões para os navegadores web. Algumas das principais são: •
Google Chrome — Screen Capture https://chrome.google.com/webstore/detail/cpngackimfmofbokmjmljamhdncknp
mg •
Firefox — Screen Grab https://addons.mozilla.org/en-­‐US/firefox/addon/screengrab/ •
Firefox — Fireshot https://addons.mozilla.org/en-­‐US/firefox/addon/fireshot/ Num programa de edição de imagens, desenhar sobre a imagem da página as principais áreas identificadas no HTML. .