Inserindo formulário(s) na página web

O que é um formulário?

Um formulário em um site é semelhante em conceito a um formulário em papel, exceto se você o cria online e o usa para interagir e reunir informações de visitantes do site.

Geralmente, os visitantes do site inserem informações (também conhecidas como 'valores') em campos de formulário e indicam suas preferências clicando em botões de opção, caixas de seleção e caixas suspensas. Os visitantes do site também podem digitar comentários em caixas de texto ou áreas de texto.

Continue lendo

Atividade de 26 de novembro

Caros alunos, realizem a leitura com atenção da apresentação abaixo que foi escrito com base no material do curso de Webdesign da Escola Virtual da Fundação Bradesco.

Fundamentosdowebdesign from Jaqueline Franco

Projetem uma página (site de escola) empregando os conceitos vistos que será o último trabalho do semestre.

Acessem e comentem a postagem do Jones Behling TI2: Google lança site especial para mostrar seus data ...

Jones Behling TI2: Google lança site especial para mostrar seus data ...: Google lança site especial para mostrar seus data centers Máquina permite o desenvolvimento simples, rápido e barato de novos produtos Semp...

Criando sites através da ferramenta Wix

Então caríssimos, como havia comentado com vocês via facebook, vamos dar uma explorada nesta ferramenta da Web 2.0, o Wix.com. Trata-se de um aplicativo on line de criação de sites em HTML5, onde o usuário com alguns cliques personaliza a seu gosto e publica. Vamos conhecer?

Vídeo: Como criar site no frontpage

DOCX versus DOC

   Muitas vezes nos deparamos com o problema do "x" dos documentos salvos pelas novas versões dos produtos Microsoft. Sejam eles pela pressa, esquecimento ou "boca'bertisse" mesmo, vamos abrir o documento que haviamos feito e no local, não havia a mesma versão do produto...

   Bom daí temos as vezes, quando disponível, a possibilidade de utilizar o da ferramenta gratuita da familia (Office), Br, Open ou Libre..., porém, digo por experiencia que dependendo da versão do "amigo" gratuito (se muito antiga), não vai abrir...:(

   Para resolver isto, descobri um site que converte o arquivo, docx, por exemplo, em doc, enviando por email um link para abrir o arquivo convertido.Eis o site:

                                       http://www.zamzar.com

Achei interessante e resolvi compartilhar.

Clarissa Azevedo

Dsign e Ergonomia

Interface from jonesbehling

Parte 3

Ergonomia e usabilidade from Charles Padilha

Linguagem Visual / Parte 6

A linguagem visual Parte 6

Trabalho Realizado por Clarissa, Cristiane e Viviana. 

Parte 6 - Tutorial Sobre Cores

Parte 1 - Interfaces

Aula de 15 de outubro

Olá pessoal!

Temos algumas tarefas hoje!

ATIVIDADE 1 - A primeira delas é publicar no blogue da Gincana Solidária os vídeos e fotos da Feira Regional e do Show de Talentos que tivemos na escola. Distribuam os vídeos e publiquem, tem que postar direitinho identificando cada tarefa. Vocês podem olhar o ordenamento das tarefas clicando AQUI

ATIVIDADE 2 - Leitura e resumo das postagens de nome "Projetando o site do Liberato - um pouco de teoria". Notem que este tema está dividido em seis partes. Vocês deverão escolher um dos temas e realizar a leitura e o resumo. Não poderão escolher o mesmo tema. Cada postagem deverá ser feita por um aluno diferente, somente na parte 6 em que os textos não estão escritos na postagem e sim há links para dois tutoriais. O tutorial Cores deve ser feito por um aluno e o tutorial Linguagem Visual deve ser dividido entre três alunos. Qualquer dúvida, me procurem no Laboratório 1.

Projetando o site do Liberato: um pouco de teoria... PARTE 6

Tutorial sobre cores

Tutorial sobre linguagem visual

Projetando o site do Liberato: um pouco de teoria... PARTE 5

O que está sendo publicado aqui foi retirado do seguinte material: Etapa 1- FundamentosMódulo 4 - Design e Usabilidade - Formação Continuada Midías na Educação Mídia Informática, disponível em: http://penta3.ufrgs.br/midiasedu/modulo4/tutoriais/fundamentos/fundamentos.pdf

ADAPTABILIDADE

Este critério é relacionado ao fato de que podemos fazer as mesmas tarefas de diferentes formas. Pode-se, por exemplo, imprimir um arquivo teclando “Ctrl+P”, ou clicando no ícone de impressora disponível da interface, ou ainda, abrir um menu de opções onde existe o comando “Imprimir”. Quando um software permite isso, está possibilitando aos usuários de diferentes níveis de experiência a “customização” ou “personalização” da interface.

GESTÃO DE ERROS

A interface deve prever alertas aos usuários, quando estes entram com dados inadequados. Por exemplo, para um campo de data de aniversário que somente aceita números e ocorre de o mês ser digitado com palavras, o software deve avisar que somente é permitido caractere numérico. Este requisito é mais relacionado a interações com grande entrada de dados. No entanto, vários editores de texto utilizam este artifício, quando sublinham uma palavra incorreta e perguntam se você quer corrigí-la.

HOMOGENEIDADE/COERÊNCIA

A homogeneidade é uma característica relacionada à identidade visual, textual e de estilo de navegação, que são percebidos quando temos interfaces que apresentam determinado padrão estético. Uma maneira fácil de identificar este padrão é quando vamos “fechar uma janela” no Windows e sempre encontramos o ícone com um “X” no canto direito superior da janela. Assim, o posicionamento dos ícones, barras de ferramentas, utilização de cores no fundo de tela e demais áreas, devem obedecer a um padrão mínimo para que o usuário se oriente, execute mais rápido suas ações e não tenha a impressão de que, de uma hora para outra, tudo mudou e “parece” que está em outro software.

SIGNIFICADO DOS CÓDIGOS

Aqui entramos numa área importante de comunicação visual. Se você vai fazer uma interface para quem está acostumado a pintar, então as ilustrações de pincéis, palhetas de tintas ou degradês, usadas em ícones de um editor de imagem, vão ser bem significativas e representar claramente a ação a ser executada quando o ícone for clicado. Quanto mais universal for o significado das figuras utilizadas para formar a interface, mais abrangente será o público a ser atingido. É claro que, nestes casos, temos que observar bem a especificidade dos perfis dos usuários a serem atendidos, principalmente quanto à cultura e aspectos histórico-sociais que identificam seu universo de significados conhecidos.

COMPATIBILIDADE

Quando estamos digitando um texto e podemos visualizar como ele ficará na impressão, estamos utilizando um tipo de compatibilidade que é a de formato. Significa que o que vemos na tela está compatível ou correspondente com o que sairá na impressora. Outra forma de compatibilidade importante é que seja respeitada a maneira com que o usuário está acostumado a realizar uma tarefa. Significa que, se você está acostumado a criar suas aulas com textos, imagens, colagens e esboços quando o faz sem computador, então o seu software ideal será aquele que permita o uso de texto e imagem simultaneamente. Logo, estamos compatibilizando a sua forma de fazer aulas no papel com a forma de fazê-las no computador. A partir destes conhecimentos sobre ergonomia e usabilidade, vamos começar a ver como podemos dar solução aos problemas de projeto. Passaremos, no próximo módulo, a estudar como as partes que compõem uma interface se organizam e quais as qualidades a serem observadas em cada uma destas partes. Enfatizaremos a “Linguagem Visual”, porque ela é predominante na interface humano-computador. Obviamente, as outras formas de linguagem, como a verbal, são de fundamental importância, mas já estamos mais acostumados a produzí-las. No entanto, você vai ver que é possível traçar um paralelo entre as diferentes linguagens e utilizá-las de forma clara e eficiente numa interface de alta qualidade.

Projetando o site do Liberato: um pouco de teoria... PARTE 4

O que está sendo publicado aqui foi retirado do seguinte material: Etapa 1- FundamentosMódulo 4 - Design e Usabilidade - Formação Continuada Midías na Educação Mídia Informática, disponível em: http://penta3.ufrgs.br/midiasedu/modulo4/tutoriais/fundamentos/fundamentos.pdf

 Qualidades ergonômicas de uma interface

As qualidades ergonômicas são tanto da interface quanto do software em si. Esta definição é importante porque o “programa” e a “interface” são componentes de um mesmo produto. Imagine que, para todos os comandos ou cliques que você aciona na interface, há uma programação equivalente que permite uma resposta à sua ação. Então a pergunta é:

por onde começar um projeto que seja realmente ergonômico? Pela interface, pois é através dela que um programador vai entender as suas necessidades com relação a um produto.

Oito critérios gerais para o sucesso de uma interface com base em estudos de Scapain e Bastien do INRIA:

A CONDUÇÃO

Um software ergonômico é como um tutor que ajuda o usuário na interação com o computador. Ele apresenta uma série de mensagens úteis para que o usuário sinta-se seguro em interagir. Estas mensagens aparecem em forma de alertas, rótulos, pequenos textos que ocorrem no momento e local exatos, isto é, aparecem quando necessários. Eles possibilitam que:

·O usuário se localize no software; isto significa que na interação com um jogo com etapas a vencer, por exemplo, a interface lhe demonstre em que etapa você se encontra.

·O usuário conheça as ações e suas conseqüências. No exemplo do jogo, se a ação do usuário for de retornar para a etapa anterior, então ele pode perder a pontuação já alcançada. Um outro bom exemplo é quando você vai salvar um arquivo no seu computador com um nome e localização iguais a de outro arquivo já existente, e o computador lhe avisa que você perderá os dados salvos anteriormente.

·Quando necessário que o usuário consiga obter informações complementares para orientar sua interação. É o caso da “ajuda”, que serve como um pequeno manual de como realizar as tarefas do software. É muito importante para objetos de aprendizagem que servem a diferentes públicos, pois cada um possui habilidades e tempo de experiência diferentes com computadores. Para usuários novatos, os recursos de ajuda devem ser bem disponíveis. Estes recursos devem ser extremamente simples, didáticos e visuais (uma boa forma de ajuda são as animações de “como fazer”), pois devem sanar dúvidas e exigir baixo esforço cognitivo, já que o usuário o acessa justamente em momento de dúvida e provável impaciência.

CARGA DE TRABALHO

Imagine se todas as vezes que você precisasse acessar seu e-mail, tivesse que preencher novamente seu cadastro. Seria muito desagradável, mas com os dados armazenados no provedor, basta inserir o nome de usuário e senha.

Formalmente, podemos dizer que um software ergonômico permite fácil aprendizado porque sua interface e estrutura permitem que o usuário aprenda rapidamente como utilizá-lo, diminuindo a quantidade de falhas na interação e sobrecarga cognitiva. Quanto maior a carga de trabalho cognitivo do usuário, maior a possibilidade de cometer erros. Neste sentido, a divisão de tarefas entre o usuário e o software é de importância fundamental. Então, quando estiver projetando um produto, é importante evitar que o usuário tenha de fazer o que o software pode fazer. Assim a carga cognitiva durante a navegação é diminuída, priorizando, para o usuário, o foco nas tarefas de aprendizado do conteúdo. Quando entramos no critério de carga de trabalho, passamos a definir o que é um software econômico, porque é conciso, apresentando apenas o essencial, diminuindo a carga informacional e a quantidade de ações para obter o resultado.

CONTROLE EXPLÍCITO

Este critério diz que o software deve ser “obediente” e que o usuário deve ter total controle sobre ele. Imagine o contrário, um usuário tentando mudar para outra página na internet e a página em que ele se encontra não permite isso. É necessário que o usuário consiga decidir e concretizar as ações no decorrer da interação. O usuário deve sentir-se sempre no controle da interação.

Projetando o site do Liberato: um pouco de teoria... PARTE 3

O que está sendo publicado aqui foi retirado do seguinte material: Etapa 1- FundamentosMódulo 4 - Design e Usabilidade - Formação Continuada Midías na Educação Mídia Informática, disponível em: http://penta3.ufrgs.br/midiasedu/modulo4/tutoriais/fundamentos/fundamentos.pdf

ERGONOMIA E USABILIDADE

  

No aspecto mais técnico, é incluído, na ergonomia, o conceito de usabilidade. A usabilidade é uma abordagem importante na análise ergonômica, no caso de análise de requisitos que dizem respeito ao uso (ação do usuário) e utilidade (propriedades da ferramenta pertinentes ao trabalho). Deve ser vista como regra no contexto de um projeto caracterizado como ergonômico. Portanto, a usabilidade não deve ser confundida com a ergonomia, pois a ergonomia é uma disciplina que contém ferramentas cognitivas (técnicas analíticas, projetivas e abordagens) e utiliza-se da usabilidade como conjunto de conhecimento, regras e normas para análise e validação de requisitos relacionados ao uso de uma interface.  Há outros requisitos, como os estéticos, por exemplo, que não são necessariamente abordados no contexto da usabilidade; costumam ter referência pela ergonomia e principalmente pelo design gráfico.

Conceitualmente, a usabilidade tem sido um termo de compreensão comum e de concordância  entre  designers,  ergonomistas  e  desenvolvedores  de  objetos  de aprendizagem, quanto a ser uma meta indispensável a um sistema interativo. É vista, de modo geral,  como a propriedade que os produtos  têm de  serem  fáceis de usar e aprender. Ela é aplicada aos produtos, por isso é uma característica passível de medida e formalização quanto a  requisitos e  formas de análise. As definições e elementos da usabilidade esclarecem para o designer os pontos-chave a serem observados. Para efeito de definição de conceitos a serem utilizados neste texto, apresentar-se-ão abaixo as definições de termos a partir da  NBR  (9241-11:2002, p.2) de  referência:

Ø      Usabilidade:  medida  na  qual  um  produto  pode  ser  usado  por  usuários específicos  para  alcançar  objetivos  específicos  com  eficiência,  eficácia  e satisfação em um  contexto específico de uso.

Ø      Eficácia: acurácia e completude com as quais usuários alcançam objetivos específicos.

Ø      Eficiência:  recursos gastos em  relação à acurácia e abrangência com as quais usuários atingem objetivos.

Ø      Satisfação: ausência de desconforto e presença de atitudes positivas para com o uso de um produto.

Ø      Contexto de uso: usuários, tarefas e equipamentos (hardware, software e materiais), e ambiente  físico e  social no qual o produto é usado.

Ø      Sistema de trabalho: sistema composto de usuários, equipamentos,  tarefas e o ambiente  físico e  social  com o propósito de alcançar objetivos  específicos.

Ø      Usuário: pessoa que  interage  com o produto.

Ø      Objetivo:  resultado pretendido.

Ø      Tarefa:  conjunto de ações necessárias para alcançar um objetivo.

Ø      Produto: parte do equipamento (hardware, software e materiais) para o qual a usabilidade é especificada ou avaliada.

Ø      Medida: valor  resultante da medição e o processo usado para obter  tal valor.

Estes conceitos são componentes de uma estrutura que permite medir e especificar a usabilidade a partir da identificação dos objetivos e decomposição da eficácia, eficiência e satisfação,  e  os  componentes  do  contexto  de  uso  em  subcomponentes  com  atributos mensuráveis e verificáveis. A figura a seguir está representando o relacionamento entre os componentes da usabilidade:

Observa-se que, para especificar ou medir a usabilidade,  faz-se necessário  saber:

Ø      quais os objetivos pretendidos  com o produto?

Ø      qual  a  descrição  dos  componentes  do  contexto  de  uso,  com  detalhes suficientes para  representar os aspectos  relevantes do contexto, como condições de uso de um jogo, tipo de computador utilizado, local onde o usuário utiliza a interface,  condições  físicas, ambiente,  iluminação, etc.?

Ø      quais os  valores  reais  ou  desejados  de medidas  de  eficácia,  eficiência  e satisfação no uso do produto? Esses valores podem ser objetivos ou subjetivos, de acordo com o contexto, o produto e a possibilidade de resposta do usuário em ensaio de usabilidade. Podem ser obtidos por observação do usuário enquanto utiliza o produto ou entrevista direta e observação dos resultados da ação do usuário junto à interface.

Outra  forma  de  identificar  as  qualidades  relativas  à  usabilidade  de  um  produto interativo,  como  os  utilizados  na  nossa  área,  é  observar  as  qualidades  ergonômicas propostas pelo  Instituto Nacional  de Pesquisa em  Informática e Automação, o  INRIA  (Institut National de Recherche en Informatique et en Automatique) da França.

Projetando o site do Liberato: um pouco de teoria... PARTE 2

O que está sendo publicado aqui foi retirado do seguinte material: Etapa 1- FundamentosMódulo 4 - Design e Usabilidade - Formação Continuada Midías na Educação Mídia Informática, disponível em: http://penta3.ufrgs.br/midiasedu/modulo4/tutoriais/fundamentos/fundamentos.pdf

Parte 2 - DESIGN E ERGONOMIA

De modo geral, podemos dizer que design é todo o processo de projeto de um produto. Tudo que fazemos para preparar uma aula é um design da aula, isto é, um projeto que resulta num produto. Uma apostila, cartazes, sites, apresentações diversas, ilustrações, interfaces, um plano de aula, são produtos de um design pedagógico. Então, por definição, podemos dizer que design é todo o processo lógico e criativo desenvolvido para elaboração, execução e instalação de um produto. O design sempre lida com três tipos de conhecimentos básicos: sobre o usuário (ser humano), sobre os meios utilizados para a realização de uma

tarefa (tecnologias, máquinas e métodos) e sobre o contexto sócio-cultural do meio no qual o usuário vá realizar a tarefa. Assim, existem algumas questões importantes a serem levantadas. 

Então, quando estamos projetando a interface para um objeto de aprendizado, estamos projetando o trabalho - e é claro que queremos que este trabalho seja confortável, fácil de realizar e que atinja seus objetivos.

Projetando o site do Liberato: um pouco de teoria...PARTE 1

Olá queridos alunos, segue o resumo de um material bem bom que tive no meu curso de especialização em Mídias na Educação que irá vos ajudá-los no nosso projeto de site. 

O que está sendo publicado aqui foi retirado do seguinte material: Etapa 1- FundamentosMódulo 4 - Design e Usabilidade - Formação Continuada Midías na Educação Mídia Informática, disponível em: http://penta3.ufrgs.br/midiasedu/modulo4/tutoriais/fundamentos/fundamentos.pdf

Parte 1 - INTERFACES

Você já se imaginou usando o computador sem teclado? Realmente,  seria muito  difícil  escrever  e  usar  os  softwares.  Para  permitir  nossa comunicação com os equipamentos informatizados, ou uso destes equipamentos para nos comunicarmos  com  outras  pessoas,  os  designers  desenvolveram  'interfaces',  como  o teclado, o mouse, o vídeo, que são nossos 'mediadores'. Da mesma forma, numa televisão ou  outros  aparelhos  eletrônicos,  as  interfaces  permitem  ligar  e  desligar,  regular intensidades, como de volume, luz, contraste, entre outros.

Até agora falamos de interfaces táteis, como botões que apertamos com os dedos; isso é bem simples, mas é muito importante para definir esse tipo de interface. Por outro lado, temos interfaces como a sonora e a visual. O som que o computador faz quando é ligado ou desligado é uma interface sonora; tudo o que você vê na tela enquanto está navegando na internet, por exemplo, é interface gráfica. Se o computador emitisse cheiro, então teríamos uma interface olfativa e assim por diante. Então, quando estamos falando de design de interface, consideramos todas estas formas de mediadores num contexto que chamamos Interface Humano-Computador ou IHC.

A comunicação interativa entre o computador e o usuário

Quando estamos interagindo com a interface do nosso computador, quase sempre estamos fazendo uma atividade para ter um resultado previamente estabelecido. Este resultado pode ser a solução de uma equação, a resposta de uma escolha em um jogo ou simplesmente a redação de um texto. Nestas atividades, existe interatividade entre o computador e o usuário, envolvendo alguns processos específicos.

No computador podemos ver a ativação como sendo a recepção do clique de um mouse; o processamento, como o que o programa faz a partir do clique; a codificação, como organização da informação que será emitida no vídeo, na forma da mudança de uma janela ou na caixa de som, emitindo música, por exemplo. Já para o usuário, estaremos nos envolvendo com os sistemas perceptivos humanos. Quando recebemos uma informação visual pela tela do computador, a recepção é feita pelo aparelho visual; a decodificação é um processo mental relacionado ao reconhecimento da imagem; a significação é o que permite a compreensão; a açãoé fruto da decisão tomada para continuar a interatividade.

Possível estilo do Layout para o site da Escola

Favicon

O Thiago Bertelli que iniciou colocando um favicon em seu blogue, daí então fomos ver o que é isso e virou uma tarefa da aula colocar nos blogues um. Bem, caros alunos, coloquei um favicon temporário no blogue da turma, e tenho uma proposta/desafio para vocês!

Mas antes um pouco de teoria:

Na Wikipedia, o artigo define favicons como pequenas imagens no formato .ico com cerca de 16x16 pixels que ficam guardados em um site para visualização pelo navegador. Também informa que a palavra deriva de outras duas: FAVorito ÍCONe.Veja o artigo completo clicando na palavra Wikipedia do início deste parágrafo.

Achei um site bacana para criação ou transformação de imagens em favicon, através deste foi que adicionei o favicon a este blogue. Trata-se do favicon.ico Generator, disponível em: <http://www.favicon.cc/>. Está em inglês, mas é bem intuitivo para quem não domina o idioma. Permite a criação de favicon, importação de imagens para o formato .ico ou simplesmente a escolha de um favicon disponível na página.

Eu importei uma imagem que tinha armazenado em meu computador, seguem os passos:

Tela de Importação de Imagem do Favicon.ico Generator

1. Clicar em Import Image
2. Selecionar o arquivo armazenado em algum local do seu computador
3. Clicar em Upload 

 4. A imagem aparecerá ampliada e distorcida, não há problemas, mais abaixo é possível visualizar como ficou o seu favicon, então clique em download favicon

Tela de download do favicon no Favicon.ico Generator

5. Com o favicon armazenado em sua máquina é só abrir o seu blogue, ir até o painel, clicar em layout e na área destinada ao favicon, inserir o seu.

Inserindo avatar animado no blogue

Gostaram do Voki? Segue então o passo a passo para a publicação dos avatares de vocês no blogue:

Acessar o site http://www.voki.com/

Logar-se, inserindo seu endereço de e-mail e senha.

Criar o avatar ao seu gosto (aparência e texto que falará)

Clicar em Publish e definir um nome

Clicar na aba My Voki 

Clicar no avatar salvo

Clicar em Publish you Voki

 Copiar o código e no layout do seu blogue, adicionar um novo gadget do tipo HTML/JavaScript e então colar o código e salvar.

Aprendendo através da web! Alguns cursos disponíveis

Gerenciando seu tempo e com muita disciplina, podemos encontrar bons cursos. Segue um vídeo interessante que eu armazenei em meu Delicious!

Mais sobre blogues

Blogues Educativos from Milena Jorge

Blogs in Plain English - 22 Translation(s) | dotSUB

Blogs in Plain English - 22 Translation(s) | dotSUB

O V[ideo escolhido pelo aluno Wellyngton Sampaio

Primeiro acesso

Olá alunos da TI 2 esse blogue é nosso!

Aqui vamos registrar o nosso percurso: atividades desenvolvidas durante as aulas, trocas de experiências, conhecimentos, comentários, sugestões e o que mais quiserem!

Vamos iniciar publicando o endereço dos blogues que vocês criaram para o desenvolvimento da nossa disciplina!