AUTORES : Bruno Batista Boniati E Teresinha Letícia da Silva
Resumo das páginas 41-52 ( 5ª RESUMO)
Introduçao á linguagem de marcação
Os documentos disponíveis na internet , independente do conteúdo são formados por uma linguagem de marcação de hipertexto o HTML . Tal linguagem é usada para trabalhara estrutura de um site . Como o exemplo a seguir :
Estrutura básica de uma página HTML
Uma página em html é delimitada por uma tag no início e no fim . As tags podem ser apresentadas de forma hierárquica , uma dentro da outra . Como por exemplo as tagas e que representam , respectivamente , a área de cabeçalho e de corpo do documento . A parte do cabeçalho não possui infirmações visuais e é usada como seção de configuração é nessa parte que está presente , o título da página (tag ) por exemplo .
Formatação de parágrafos e blocos de texto
As tags <h1> , <h2> , <h3> , <h4>, <h5> e <h6> são utilizadas para demarcar a parte do documento que indica um cabeçalho (título ou subtítulo) . Quanto menor for o valor da tag maior será o destaque do cabeçalho . A tag <p> demarca o parágrafo atual .
O navegador ignora as quebras de linhas declaradas ao longo do documento html . Tal efeito é realizado com a declaração da tag <br> . A tag <hr> tem o mesmo efeito que a tag <br> , todavia seu efeito é divisão da página horizontalmente .
Formatação da fonte
A tag que mais atua sobre os atributos da fonte no documento html é a tag , essa tag define os atributos do texto em si , permitindo alterar o tamanho (size) , o tipo(face) e a cor (color) .
AUTORES : Bruno Batista Boniati E Teresinha Letícia da Silva
Resumo das páginas 29-40
O design é uma ferramenta de valor . Ou seja , o design trata de optar a melhor maneira de apresentar uma ideia . Com o surgimento da web um novo espaço surgiu o web design que se refere ao processo de criação e planejamento visual de websites. Envolve a combinação de diversos elementos, como layout, cores, gráficos, tipografia e imagens, para criar uma experiência visualmente atraente e funcional para os usuários na web.
O design e o projeto sáo duas interligadas , ou seja é necessário um certo nível de planejamento antes de criar um site por exemplo . É essencial de começo , desenvolver uma ideia e uma motivação em torno do que será apresentado . Depois que o objetivo é definido , é necessário criar e organizar o conteúdo . A definição do conteúdo do projeto é definido por dois fatores : a criação(concepção) e o design de informações .
Layout é maneira pela qual o conteúdo é organizado , ou seja refere-se ao design gráfico e a aparência visual . O desenvolvimento de uma página para a internet ou seja o layout é uma atividade significativa e prioritária , a partir dele o resto do trabalho será colocado em prática .
De maneira geral , o layout segue um padrão básico . A hierarquia de informações define qual a disposição das informações em uma pãgina web por exemplo . Partindo desse princípio, as informações mais importantes precisa ser posicionado em um lugar estratégico , para que dessa maneira o usuário interaga primeirio com aquilo que ele vê primeiro .
De uma forma geral , existe um certo padrão de layout muito utilizado na criação dos sites . Tal modelo é formado por determinados elementos de conteúdos tais como logotipo , banner padrão , menu administrativo , menu de navegação , conteúdo , anúncios e rodapé .
Publicado em
9º 85 á 94
Estas paginas os autores falam de alguns aplicativos como Web ,EJB do Java EE.
O mesmo diz que quando estes aplicativos invocam métodos de uma Servelt ou os callback de um EJB.
DI é uma das formas de implementar -lo ,mas não a única .O aplicativo Web usar o DAO.
A usar a Connection Factory alivia um poucos do problema ,mas não é uma boa solução.
A responsabilidades normais ligadas a Web ,como o manipular request e response ,agora também com está acoplada a Connection, connection Factorye DAO.
O segredo de DI é pensar em cada componente isoladamente,de uma maneiro quase egoísta com relação ao restante do sistema .
Um dos principais ,em importância e em uso é o Spring Framework,idealizada por Rod Johnson.
O “Impacto Social” da introdução de sistemas interativos abordado no capítulo 4. Enfatiza a necessidade de antecipar e registrar quaisquer efeitos que um novo sistema possa ter em um esforço para reduzir os riscos relacionados ao seu desenvolvimento e implementação. O roteiro para a elaboração de um documento de impacto social foi fornecido por Shneiderman e Rose (1997). É composto por uma descrição do novo sistema e seus benefícios, uma abordagem de preocupações e barreiras potenciais, além de detalhes sobre o processo de desenvolvimento.
Os propósitos do capítulo incluem apresentar ambientes de desenvolvimento baseados na manipulação direta, discutir projetos bem-sucedidos baseados em manipulação que transformaram o uso do computador e discutir sistemas que incluem características como visibilidade de objetos e a capacidade de ações rápidas, reversíveis e incrementais.
O capítulo inicial aborda os sistemas fundamentados. em manipulação direta, como editores de texto . Enfatiza a revolução trazida pelos processadores de texto e planilhas eletrônicas, mencionando o conceito WYSIWYG (What You See Is What You Get ) e a facilidade de manipulação direta de objetos . Planos eletrônicos, como o VisiCalc, são demonstrados como instrumentos que oferecem cálculos automáticos e transformam a maneira como os indivíduos interagem com informações.
Além disso, o capítulo abrange o gerenciamento espacial de dados, sendo ilustrado por aplicações militares que rastreiam navios através de mapas e zoom contínuo. Enfatiza a importância da manipulação direta na visualização e interação com dados espaciais , citando o Information Visualizer da Xerox como exemplo de ferramenta que permite a exploração animada e tridimensional de vários tipos de informação .
As páginas do livro da 64 e 69 falam sobre a crucial importância da revisão de especialistas e dos testes de usabilidade no desenvolvimento de sistemas interativos. Semelhante a práticas em outras áreas, como teatro e aeronáutica, onde ensaios e testes precedem estreias e produções em larga escala, projetistas de sistemas interativos devem conduzir variados testes, envolvendo usuários representativos e especialistas nas tarefas do sistema.
Diversas metodologias de revisão são discutidas, incluindo Avaliação Heurística, Revisão das guidelines, Inspeção de consistência, Passo a passo cognitivo (Cognitive Walkthrough) e Inspeção formal de usabilidade. Apesar da resistência inicial, gerentes reconhecem os benefícios dos testes de usabilidade, incluindo-os nos cronogramas de projetos. Grandes empresas, como a IBM, mantêm laboratórios de usabilidade.
Os testes de usabilidade normalmente compreendem uma lista de tarefas, questionários para medir a satisfação do usuário e filmagens para capturar reações durante a execução das tarefas. Dados quantitativos, como tempo de aprendizado, tempo de execução de tarefas, taxas de erro e satisfação do usuário, complementam os dados qualitativos obtidos em entrevistas.
Também falamos das metodologias de desenvolvimento de sistemas interativos, ressaltando a importância de considerar a usabilidade desde os estágios iniciais do projeto para reduzir custos e aumentar eficiência. Algumas metodologias, como a UML, são úteis para gerenciar projetos, mas nem sempre oferecem diretrizes para interfaces de qualidade.
A metodologia Logical User-Center Design, proposta por Kreitzberg (1996), divide o desenvolvimento em seis estágios, desde o desenvolvimento do conceito do produto até o suporte à implantação. Além disso, são discutidas três técnicas amplamente utilizadas no desenvolvimento de sistemas interativos: Observação etnográfica, Projeto participativo e Desenvolvimento baseado em cenários.
A observação etnográfica envolve a imersão dos projetistas nas atividades dos usuários, buscando compreender seu comportamento individual e contexto organizacional. Já o projeto participativo envolve o envolvimento ativo dos usuários em diversas fases do projeto, enquanto o desenvolvimento baseado em cenários foca na descrição de situações cotidianas para elícita requisitos. Em resumo destaca a importância da usabilidade no desenvolvimento de sistemas interativos, apresentando métodos e metodologias para garantir interfaces de qualidade.
Agora vou dar inicio á leitura do capítulo 5 que o livro nos fala de inserir imagens. As imagens são necessárias para melhorar a nossa página esteticamente, ou seja, torná-lo mais apelativo, por exemplo incluir um logotipo, uma fotografia, ilustração, diagrama, ou um gráfico. Portanto, para adicionar uma imagem a uma página web precisamos usar um < img> elemento e deve levar dois atributos: src, alt e título. Src informa informa ao navegador onde ele pode encontrar o arquivo de imagem. O alt fornece uma descrição de texto da imagem que descreve a imagem se não a conseguirmos ver. Já o título dá-nos informações adicionais sobre a imagem. Assim, quando os navegadores passaem o mouse sobre a imagem, aparecerá toda a informação. Depois disto, o livro falanos da importância da largura e altura das imagens, pois frequentemente estas levam mais tempo para carregar do que o código HTML que compõe o resto da página. Assim sendo, uma boa solução para especificar o tamanho da imagem é deixar a quantidade certa de espaço para a imagem. Desta forma, devemos inserir as imagens no nosso código, por exemplo, antes de um parágrafo, ou seja, o parágrafo começa em uma nova linha após a imagem. Outro exemplo é dentro do início de um parágrafo, isto é, a primeira linha de texto alinha-se com a parte inferior da imagem, ou então no meio de um parágrafo, a imagem é colocada entre as palavras do parágrafo. Seguidamente, o livro ensina-nos as três regras principais para criar uma imagem. A primeira regra é escolher corretamente o formato da da imagem, caso contrário, a imagem pode não aparecer tão nitida e o carregamento da página web torna-se mais lento. Assim, deveremos escolher o formato das nossas imagens em jpeg, gif, ou png. Outro fator importante é salvar a imagem na mesma largura e altura que esta aparecerá no site. Se esta for menor do que a largura ou a altura que especificamos, a imagem pode ficar distorcida, esticada com maior carregamento, e o mesmo acontece com a largura. A última regra é usar a resolução correta, ou seja, o número de pontos por polegada. Portanto, um problema é quando salvamos imagens em um resultado maior do que a capacidade da tela do computadoe, levando mais tempo para o download. De seguida, o livro encina-nos a como selecionar o melhor formato de imagem para diferentes tipos. Sempre que tivermos muitas cores diferentes em uma imagem, devemos usar um JPEG. Para imagens com poucas cores ou grandes áreas da mesma cor, ou seja, cor lisa, usamos GIF ou PNG. Quando quisermos adicionar um logotipo, uma ilustração ou diagramas, usamos o mesmo formato, pois estes costumam ter cores planas. Para concluir, se quisermos adicionar Gifs animados, que estes são vários quadros de uma imagem na sequência e, por conseguinte, pode ser utilizado para criar animações simples, devemos tomar atenção que cada quadro extra da imagem aumenta o tamanho do arquivo, e, portanto, pode aumentar o tempo que leva para o download.
2.3.3.1 ARQUITECTURA DE INFORMAÇÃO E SISTEMA DE NAVEGAÇÃO
A Arquitetura de Informação, de acordo com Robin Landa, é a organização hierárquica e lógica do conteúdo em websites ou produtos digitais para facilitar a navegação do utilizador. Ela visa proporcionar uma experiência positiva ao garantir uma disposição clara e acessível da informação. Isso é crucial, especialmente em websites com muita informação textual, como revistas online, arquivos e sites governamentais. A Arquitetura de Informação serve como guia para os designers na criação de uma interface gráfica, destacando a importância do sistema de navegação, que inclui múltiplos níveis de acesso. Desde um portal navegacional até a navegação global, secundária e as páginas individuais. A primeira interação do utilizador, muitas vezes através de uma Splash Screen, exibe a identidade visual do produto ou marca. A Home Page, por sua vez, é uma conexão crucial, transmitindo informações importantes e o aspecto gráfico do website. Os sistemas de navegação, compreendendo elementos visuais como tabs e botões, são representações de links interativos, devendo ser limpos, simples e consistentes para facilitar a rápida e eficiente navegação do utilizador.
Existem quatro tipos principais de sistemas de navegação:
Persistente: Sempre visível, geralmente localizado no lado esquerdo do ecrã, expondo todas as opções disponíveis.
Suspenso: Comumente encontrado na navegação horizontal, mostrando apenas os menus primários.
Deslizante: Escondido e ativado pelo utilizador quando necessário, assemelha-se a uma variação do menu suspenso.
Separadores: Constantemente presentes, localizados perto da parte superior do ecrã, metaforicamente baseados nos separadores de pastas ou blocos de notas.
Embora Robin Landa faça referência principalmente a websites, a Arquitetura de Informação é crucial não apenas para websites, mas também para qualquer produto digital. As regras mencionadas para websites são aplicáveis em produtos digitais, sendo os sistemas de navegação essenciais para uma navegação clara e simples entre funcionalidades.
2.3.4 OS ELEMENTOS E OS PRINCÍPIOS
DO GRAFISMO NO DESIGN DE INTERFACES
2 . 3 . 4 .1 COR
As cores desempenham um papel crucial no design, influenciando sentimentos, experiências e significados. Um designer deve entender a teoria das cores e como ela afeta a percepção e a diferenciação de marcas. As cores são usadas para evocar emoções, expressar personalidade e transmitir mensagens. No design digital, a cor é essencial na linguagem visual da interface, sendo fundamental para transmitir informações e grafismos.
Existem sistemas precisos de identificação de cores no ambiente digital, como o Hexadecimal, RGB e RGBA. É importante que os designers usem cores com moderação, integrando-as bem com outros elementos visuais para destacar elementos importantes, indicar relacionamentos e comunicar informações sem sobrecarregar visualmente o utilizador. O uso excessivo de cores pode confundir e distrair o utilizador, tornando-o mais lento e disperso ao tentar decifrar significados.
Uso de cores complementares saturadas
As cores complementares são o inverso umas das outras nos ecrãs. Essas cores, quando altamente saturadas e posicionadas ao lado uma da outra, podem criar situações de difícil percepção ou de concentração.
Saturação excessiva
As cores altamente saturadas tendem a parecer berrantes e a chamar muita atenção. De uma forma moderada, as cores saturadas podem ser usadas em pequenas amostras para capturar a atenção do utiliza- dor, mas devem ser sempre usadas com moderação.
Contrastes inadequados
Quando as cores dos objectos diferem das cores do fundo apenas na tonalidade, mas não na saturação ou brilho, tornam-se difíceis de perceber. Os objectos e o fundo devem variar em brilho ou saturação. O autor refere ainda que, o texto de cor em fundos com cor também devem ser evitados, sempre que possível.
Falta de atenção ao Daltonismo
É necessário ter algum cuidado ao usar tons de vermelho e verde (em particular), para comunicar informações importantes. As outras cores usadas devem ser consideradas em saturação ou o brilho para que este tipo de utilizadores as possam distinguir umas das outras. Se a conversão para tons de cinza da paleta de cores utilizada for facil- mente distinguível, os utilizadores daltónicos devem ser capazes de distinguir a versão das cores.
2.3.4.2 BOTÕES
“Um botão é usado para selecionar algo, no entanto, os botões não precisam de parecer pequenos discos redondos para serem botões. Estes, podem ser objectos gráficos com qualquer forma ou podem ser imagens que criam uma metáfora visual” 32. Robin Landa (2011: 374)
Durante interacções entre o utilizador e um botão digital, e para que o utilizador possa saber que acção executou, os botões dão geralmente um feedback.
Esta interacção, em tablets ou smartphones poderá ocorrer através de uma mudança de cor ou através de um som quando o botão é activado como refere Pannafino.
As páginas HTML ainda são páginas de texto, mesmo que contenham <IMG>. O navegador carrega imagens vinculando sua localização via URL. O atributo SRC indica a localização da imagem, que pode ser um endereço absoluto ou relativo ao URL da página. URIs relativos são úteis para fazer referência a recursos no mesmo diretório.
Alinhamento de Imagens
Nós podemos alterar a orientação da imagem usando a propriedade de alinhamento ‘align‘ para centralizar, esquerda ou direita do texto.
Exemplo:
img{
….
align: ‘center’;
};
Dimensionamento
As propriedades HEIGHT e WIDTH são usadas para redimensionar a imagem.A explicação é que alterar o tamanho da imagem não alterará sua qualidade, mas afetará o desempenho de carregamento da página.
Formatação das Palavras
HTML fornece elementos para formatar elementos de texto. Elementos lógicos como <EM> (texto sublinhado) <STRONG> (maiúsculo) é uma função especial. Elementos físicos como <I> (italico) e <B> (negrito); alteram a aparência visual dos caracteres.
Exemplo: <b>Estou em negrito</b>
<i>estou em italico</i>
<em>Estou sulbinhado</em>
Tabelas
A introdução de tabelas no HTML ver por fins de organização de informações em linhas e colunas, como qualquer tabela que conhecemos. Os principais elementos são <TABLE> (representa uma matriz), <TR> (representa uma linha), <TD> (representa uma unidade de dados <TH> (representa o cabeçalho da tabela).
Exemplo:
Elementos Estruturais de uma Tabela
Nós podemos criar tabelas simples utilizando as tags <TABLE>, <TR>, <TD>, e <TH>. Os atributos conhecidos como BORDER, CELLPADDING e CELLSPACING são muito usados no estilo das tabelas.
Largura e altura das Tabelas
Os atributos WIDTH e HEIGHT são importantes para especificar o tamanho da tabela. O uso de percentagens, px e outras unidades de valor para formatar o tamanho de cada um dos atributos torna seu design mais flexível para diferentes resoluções de tela.
Atributos de Posicionamento, Cor e Imagens de Fundo
Esta seção cobre itens relacionados à apresentação de tabelas em HTML. Se a tabela for menor que o espaço visível, o alinhamento padrão é a margem esquerda, mas também podemos usar a margem a direita, isso pode ser ajustado usando a propriedade e o valor ALIGN para ‘right’ ou ‘center’. Semelhante ao uso de imagens, HSPACE e VSPACE adicionam margens verticais e horizontais às tabelas.
Se a propriedade BACKGROUND existir, ele obterá a URL da imagem e a enviará para o final da tabela. BGCOLOR define a cor de fundo da tabela. É importante observar que as cores padrão das células e linhas são transparentes, portanto, qualquer imagem ou cor na página ficará visível em toda a tabela, a menos que funções especiais sejam usadas.
Alinhamento e Dimensionamento de Células
Tal como acontece com as tabelas, células e linhas individuais podem ter seu conteúdo ordenado usando as propriedades ALIGN e VALIGN de <TD> e <TR>. Essas funções permitem alinhar elementos onde quiser na tabela. As células também possuem propriedades HEIGHT e WIDTH que permitem controlar a altura e a largura em pixels ou com base no tamanho da tabela.
Combinação de Células
Você pode usar as propriedades ROWSPAN e COLSPAN em <TD> ou <TH> para combinar células entre colunas e linhas. Isso possibilita a criação de tabelas mais complexas, que são mostradas com exemplos reais.
Âncoras e Vínculos
A seção sobre âncoras e vínculos aborda a criação de links em HTML. Âncoras podem ser usadas para criar destinos internos em uma página e links para recursos externos, com exemplos de uso do elemento e seus atributos HREF e NAME.
Elementos de Estilo
O elemento style é coberto por um aviso obsoleto na especificação HTML 4.0. Esta seção usa os atributos do elemento <BODY> para destacar alterações na cor de fundo, texto e links. Altere também cores e fontes com o elemento <FONT>.
Cores e Fontes
<FONT> é um elemento explorado como opção para alterar a cor, a fonte e o tamanho do texto. Embora não seja mais necessário com o advento das folhas de estilo, ainda é considerado uma alternativa para navegadores mais antigos que não suportam folhas de estilo.
Este capitulo permitiu nos perceber que nem todos os utilizadores de um mesmo sistema operativo devem ter o mesmo nível de acesso aos ficheiros e diretórios. E o linux não foge à regra como qualquer sistema operativo profissional ou de nível empresarial, tem métodos específicos para proteger o acesso a ficheiros e diretórios. O sistema de segurança nele incutido permite ao administrador do sistema – o utilizador root – ou o proprietário do ficheiro de modo a proteger os seus ficheiros de acesso indesejado ou adulteração, conceder a determinados utilizadores selecionados permissões para ler, escrever ou executar ficheiros. Para cada ficheiro e diretório, podemos especificar o estado das permissões para o proprietário do ficheiro, para grupos particulares de utilizadores e para todos os outros utilizadores. Isto acaba por ser uma necessidade num sistema operativo usado por vários utilizadores ou de nível empresarial. Neste capítulo, o autor mostra-nos como verificar e alterar permissões em arquivos e diretórios para utilizadores selecionados, assim como definir permissões por omissão para ficheiros e diretórios além de permissões especiais. O que torna mais interessante nisto tudo é que quanto mais nos aproximamos do final, começamos a ver e a ter noção como as permissões podem ser usadas por um hacker e ajudá-lo a explorar um sistema. Dá por terminado com o habitual exercício antes de prosseguir para o próximo capitulo.
