Todos os dias surgem novas ferramentas ou novas formas de interação pela rede mundial. Nem sempre essas “novidades” foram desenvolvidas para aplicação educacional, porém, cabe a nós, educadores atentos, identificar novas formas de utilizá-las como ferramentas para o processo de ensino e aprendizagem.

Acima anexo uma apresentação sobre a ferramenta USTREAM, que apresentei no curso de ESPECIALIZAÇÃO EM EDUCAÇÃO A DISTÂNCIA (SENAC-RJ). Se devidamente explorada, esta ferramenta possui muitos recursos que podem ser aproveitados para utilização na educação a distância.

Deixe seu comentário e vamos trocando idéias.

Abraços

Post rápido, só pra não passar em branco. Hoje, exatamente hoje (01/06/2010), faz 4 anos que trabalho na UVV.

Resolvi postar uma espécie de Flashback, uma linha do tempo resumida com os trabalhos desenvolvidos e  leões abatidos nesta trajetória. O que impressionou (e motivou a escrever) é a forma com que as necessidades e cenários mudam tão rapidamente.

2006/2

• Desafio:  Depois de 2 tentativas fracassadas, botar pra funcionar um projeto piloto e oferecer algumas disciplinas de nivelamento para auxiliar os professores em sala de aula.
• Desenvolvimento de uma framework para aulas virtuais, em flash, tecnologia em alta na época (como se fosse muito tempo atrás).
• OBS: No início foi implantado um AVA (Ambiente Virtual de Aprendizagem) chamado Aulanet.

2007/1

• Aulas prontas, alunos cursando disciplinas a distância. O projeto piloto foi um sucesso.
• Projeto EAD em expansão: Início da produção de disciplinas , onde os alunos poderiam escolher entre cursar à distância ou presencialmente.
• O Aulanet não atendia bem, então adotamos o Moodle e nele foram feitas customizações visuais (conforme já postei por aqui)

[View with PicLens]

2008/1

• Dois filhos pra cuidar. Além do NEAD também assumi a responsabilidade do site da UVV. O site estava abarrotado de informações e haviam muitos incêndios para apagar.
• Com o tempo disponível deu tempo apenas pra dar um rápido “tapa no visual”. Ah sim, era tudo em tabelas.
• Veja na galeria acima as fotos

2008/2

• Muitos sistemas para os usuários internos (intranet). Os incêndios começavam a ser apagados.
• Descentralizar as informações e atribuir responsabilidades aos usuários exigiu treinamentos e acompanhamento.
• Nova versão do site NEAD, novas ofertas de cursos também.

2009/1

• Mudança no formato de aulas virtuais. “De repente” o Flash ficou velho.  Iniciei um experimento de aula com CSS + XHTML. Entre as vantagens do novo modelo
  • Versão para impressão
  • Navegação linear
  • Interação com Moodle (Referências cruzadas)
  • E principalmente, aumento de produtividade em 40% (isso vale um post para maiores detalhes, em breve)

2009/2 até 2010/1

• Lançamento do novo site UVV.
• Arquitetura de informação totalmente reprojeteda
• Novos serviços novos como
  • Cadastro de currículos (trabalhe conosco)
  • Galeria de fotos
  • Eventos
  • Portal de comunicação
  • Sistema para Gerenciar Mestrados
  • Entre outros

[View with PicLens]

Bom, pra concluir esse breve sobrevôo, posso afirmar que o saldo após estes 4 anos é muito positivo. A principal lição que posso tirar desta estadia foi a mudança de atmosfera que sofri saindo da produção em massa de sites  para atuar no meio acadêmico. No início foi um impacto muito grande, pois estava acostumado a viver um projeto a cada 15 dias, tendo sempre meu portfólio renovado para a “vitrine” do mercado .

Pouco sabia sobre e-learning na época. Foi um grande desafio e felizmente me surpreendi com a experiência, tanto, que estou me especializando na área (Educação a Distância – SENAC RJ). Com estes dois filhos pra cuidar tive que desenvolver constantemente a análise crítica como principal ferramenta  de trabalho, ao mesmo tempo desenvolvendo produtos para a comunidade acadêmica e mantendo o site atrativo e interativo para o público externo. Na verdade há muito mais coisas além disso, mas não é com um post rápido que conseguirei explicar tudo, somente dizer que hoje sou apaixonado pelo que faço já basta, por enquanto.

Não posso deixar de registrar aqui em todo este tempo a equipe Web aumentou  e sempre foi meu braço direito em todos os projetos, portanto, não poderia me apropriar de todo este esforço sozinho.

Abraços

Editado Sábado, 24/04/10

Algumas das 385 fotos clicadas pelo fotógrafo @renatocabrini

[View with PicLens]

- – - – - – -

Editado Terça-feira, 13/04/2010

Classificação oficial (Tempos marcados eletronicamente)

- – - – - – -

Post Original – 15/003/2010

Salve amigos,

Desde que corri com a galera do fórum do Carro Esporte estou querendo organizar um mini-evento para os amigos.

E agora vai sair! JÁ CONFIRMEI e avisei pessoalmente para alguns amigos e agora estou abrindo o convite pra essa galera que a gente connhece e conversa online.

Onde e como?

No Kartódromo Internacional da Serra, pelo sistema de aluguel de Karts

Regras da Corrida

• 7 minutos de tomada de tempo (6 voltas registradas eletrônicamente na pista)
• 20 minutos de pauleira pura corrida (18 a 20 voltas)

Mais informações

• Números de Karts: 15
• Números de Karts reservas: 2
• Nivelamento de peso entre os competidores: até 25kg
• Tempo de pista: de 55 segundos a 1:10

Dia/Local/Valor

• Sábado, 10 de abril de 2010 / na parte da tarde (Horário em confirmação)
• Kartódromo internacional da Serra

• R$ 85,00 (Incluindo equipamento como macacão e capacete)

IMPORTANTE

• Confirmações até dia 15 de março
• Pagamento até dia 19 de março
• Me ajude na organização: Quem paga primeiro DE FATO reserva a vaga
• Dúvidas: Mande um comentário por aqui mesmo!
  

E Só pra dar aquela “atissada”, segue um vídeo onde estou perseguindo um amigo na última vez que corremos, em 2007;

É bem verdade que desde o início de 2009 já existem algumas campanhas que incentivam os usuários a atualizarem seus browsers, entretanto, percebo algumas falhas que fazem com que estes passem “batidos” por estes alertas de atualização.

Mais do que impor a atualização do software, é importante explicar e conscientizar as conseqüências de permanecer com o antigo (IE6) e também desmistificar a complexidade (que não existe) da atualização.

Veja a solução em funcionamento

Pensando como um usuário de IE6

Se estamos falando de alguém que utiliza o IE6, este certamente é a definição do que é um USUÁRIO e certamente não acessará portais de tecnologia, muito menos este artigo.  Te convido para refletir porque tantos ainda utilizam o IE6 e também COMO devemos nos preparar para os dois tipos de usuários que temos que encarar.

1) O usuário que NÃO sabe que utiliza o IE6

Aconteceu comigo: Minha tia não conseguia acessar o menu de um determinado site e eu fui ajudá-la. O problema obviamente era o IE6, que fiz questão de retirar da máquina. O mais curioso é que este site tinha uma barra para atualização do browser (o que me motivou a escrever este artigo), mas passou despercebido por ela. Pra mim foi como um teste de usabilidade involuntário.

2) O usuário que sabe que utiliza o IE6

Agora, olhando pelo outro lado, e quem sabe que tem o encardido IE6 instalado em seu computador, por que não atualiza?

• Por que tem medo de não se familiarizar com “o novo”
• Por que pensam o tempo para atualização é grandes
• Por que acha que é difícil procedimento baixar e instalar
• Por que os desenvolvedores continuam fazendo hacks para o IE6
  • Podem achar que sou radicalista neste ponto e questionarem que isso bate de frente com a questão da ACESSIBILIDADE. O que faço hoje são sites ACESSÍVEIS para o IE6. O conteúdo é plenamente visualizado, porém esteticamente pode ficar comprometido em alguns pontos  (PNG sem  transparência e uma <div> ou outra fora do lugar). – mas o usuário já foi alertado sobre a incompatibilidade.
  • Esta é uma questão polêmica e acho que vale outro post para discutir isso. Eu penso que que tempo é dinheiro, e desenvolver para IE6 é perda de tempo.

Medidas que fazem a diferença

Nosso papel como desenvolvedores é incentivar, facilitar e esclarecer ao máximo para o usuário por que e COMO ele deve se livrar do IE6. Pequenas medidas fazem a diferença para reduzir as estatísticas:

• Não disponibilizar muitas opções de browsers
  • O usuário pode se sentir confuso e desistir
• Um breve texto (objetivo) para cada opção ajuda no ato da escolha
  • O usuário não precisa clicar (e depois ter que voltar) para tomar a decisão.
• Estimar o tempo e o tamanho do download
  • Incentiva e mostra que a atualização é rápida
• Utilizar linguagem informal

Instalando o mecanismo que ajuda o usuário a atualizar o browser

Primeiro, inclua este script na página incial de seu site

<script type=”text/javascript”>

var browser        = navigator.appName
var ver            = navigator.appVersion
var thestart    = parseFloat(ver.indexOf(“MSIE”))+1
var brow_ver    = parseFloat(ver.substring(thestart+4,thestart+7))

if ((browser==”Microsoft Internet Explorer”) && (brow_ver <= 6))
{
alert(“Você está utilizando um browser antigo e poderá não visualizar todas as funcionalidades deste site. Saiba como atualizar.”)
window.location=”ie6/index.html”;
}
//–>

</script>

Depois baixe estes arquivos (pasta) e insira-os no ROOT do seu site. Pronto.

Considerações finais

Para a página inicial do seu site eu recomendo a instalação desde facilitador. Para as páginas internas, porém, o Imasters dispõe uma barra que aparece no topo do navegador que reforça o apelo para atualização. Veja aqui.

E aí, vai ajudar seu usuário a se livrar seu usuário a partir de hoje?

Abraços, e até a próxima.

É com muita satisfação que publico hoje o site de uma referência nacional em cirurgia Bariátrica, o médico e cirurgião Dr. Gustavo Peixoto.

Foi grandioso receber o convite para reformulação do site do médico que realizou o primeiro transplante de fígado do Espírito Santo. Dr. Gustavo também é responsável pelo Programa de CirurgiaBariátrica do Hospital Meridional e H.U.C.A.M.-U.F.E.S.

O Site

Acessar o site

O objetivo principal do novo site foi tornar mais fácil a navegação e o acesso as informações do site, já que o google direcionava uma média 1200 acessos mensais, devido ao fato que o site tornou-se referência para pacientes carentes de informação sobre a cirurgia bariátrica.

O site também funciona como um canal de comunicação direta com o Dr. Gustavo, que responde desde dúvidas do público em geral como também mensagens de carinho e gratidão de seus pacientes transformados pela cirurgia bariátrica.

Desafios

O Design é simplista para não concorrer com o grande volume de informações que o site possui.

O site antigo trazia muitas informações de forma desordenada e massiva, textos desnecessários e ilustrações confusas. Foi necessário um trabalho de arquitetura de informação para relacionar osconteúdos (Sobre a Cirurgia Bariátrica) de forma que ficasse mais simples e direcionado.

Calma, Aqui não tem nenhuma receita de bolo, entretanto, este tema é bastante polêmico e o texto abaixo certamente lhe mostrará os ingredientes.

Apesar do foco deste blog ser o Design voltado para o e-learning, em um dos módulos da Pós graduação (em Educação a Distância, no SENAC RJ) debateu-se a importância do professor no sucesso de um curso a distância. Esse assunto é muito interessante e vale a discussão! O texto abaixo é uma cópia da atividade que desenvolvi no curso.

Depois de ler, me diga se você concorda ou não. Vamos trocar idéias.

Enunciado

Lina Morgado, no texto “O Papel do Professor em Contextos de Ensino On-line: problemas e virtualidades”, defende a idéia de que a chave para o sucesso de um curso dessa natureza centra-se na atuação do professor. Você concorda com essa idéia? Justifique o seu entendimento.

Resposta

Respondendo com apenas uma palavra: absolutamente.

Planejamento pedagógico, suporte técnico, material adaptado para o modelo de educação a distancia e professores capacitados. Nós sabemos que todos estes fatores são importantes para o sucesso de um curso à distância, mas o último item em questão merece destaque.

Seja o modelo de ensino (a distância) centrado no professor (transmissão da informação, semelhante ao ensino presencial), centrado na tecnologia ou no estudante, é inquestionável a importância de um professor ativo e preparado para mediar às discussões online.

Por experiência própria atuando no meio acadêmico, posso afirmar que a maioria absoluta dos alunos que experimentam o ensino a distância ficam perdidos ou se sentem desamparados em algum momento do curso, principalmente em seu início, quando tudo é novidade.

Além de acolher o aluno e estimular sua participação na construção colaborativa do conhecimento, o professor tutor também trabalha no sentido de tornar o ambiente virtual mais aconchegante. É plenamente possível estudar em um ambiente virtual caloroso e estigante, bem como fazemos nas redes sociais que utilizamos informalmente.

O professor conteúdista (que muitas vezes também acaba sendo o tutor) também cumpre um papel importantíssimo para o sucesso de um curso a distância. Ele é responsável por adequar a linguagem utilizada no material de apoio ao aluno, facilitando sua compreensão.

É bem verdade que não é simples cumprir com todos os requisitos que a modalidade exige, pois, conforme a autora Lina Morgado bem relata, um professor que deseja ingressar e participar deste novo modelo de ensino deve cumprir alguns requisitos nos

• Aspectos pedagógicos, englobando todos os aspectos do processo de aprendizagem
• Aspectos de gestão, organizando e planificando as atividades de ensino
• Aspectos sociais, promovendo relações interpessoais e manutenção do grupo para que este trabalhe colaborativamente
• Aspectos técnicos, contribuindo para tornar a tecnologia utilizada (seja ela qual for) transparente aos alunos

Para concluir, nos últimos anos tem-se assistido uma preocupação crescente em centrar algumas investigações no estudo do comportamento do professor no contexto do ensino online. Os resultados podem conduzir-nos a uma reflexão mais aprofundada e repensar como se dá a formação destes super-profissionais com esta missão tão nobre: educar, seja presencialmente ou a distância.

Esqueça a paginação e limitação de fotos por página ao buscar imagens em um futuro próximo. O Google já está testando o Google Image Swirl, uma forma inovadora de interagir nas buscas por fotos, imagens, ícones e afins.  A sensação é de estar navegando em uma espécie de túnel do tempo.

Diferenciais:

1 – A primeira tela parece ser normal. Mas só parece. Ela traz uma dimensão do volume de fotos que está por trás de cada resultado obtido.

2 – A brincadeira começa a esquentar e você já começa a visualizar os relacionamentos da imagem clicacda

3 – O emaranhado de possibilidades começa a se formaras linhas mais grossas te dão a dimensão de “por onde passei até chegar aqui”.

4 – O resultado final decepciona um pouco. Ao clicar na imagem desejada somos redirecionados a busca de imagens convencional do Google. Mas calma, isso é só uma questão de tempo.

Por enquanto a busca se limita em mais ou menos 200 mil resultados, pelo fato de ainda ser um laboratório. Mas dá pra brincar bastante.

Se jogue no Google Swirl e impressione-se com a usabilidade e interação que as novas ferramentas estão nos proporcionando.

Depois volte aqui e veja que isso é só o começo, em breve vamos estar interagindo com o computador assim, ó:

10/GUI from C. Miller on Vimeo.

Protótipo de Sistema operacional baseado em touchscreen

Post nostálgico e rápido.  Em 2004 estava no início de minha carreira e  era  estagiário e de criação na e-brand. Ralava muito e um dia quebrei o porquinho pra comprar um chevettinho. Acreditem, me apaixonei por esse cara aqui de baixo:

Desde então não fazia contas e investia tudo que podia pra deixá-lo mais arrumadinho, com personalidade. Com o tempo ele foi ficando do meu jeito e arrancava reações adversas nas pessoas: Elogios de quem passava na rua, e altos sarros dos meus que diziam que as rodas valiam mais que o carro.

O tempo foi passando e o carro se foi. As histórias que ele me proporcionou, não. Sempre sou sacaneado pelo @Gilbermachado,  que conta a todas as gerações que passaram na agência do dia que fiquei de fora do meu próprio carro, na rua,  a mercê da porta que não queria abrir (não tinha maçanetas). Hoje foi mais um dia de relembrar essas e outras histórias, junto com a velha e nova geração da e-brand, que comemora em breve 10 anos  de vida.

Hoje, olhando para trás vejo um Chevette ainda sem vida e uma agência com muitos profissionais excepcionais, ambos ganhando forma e evoluindo rapidamente. Hoje posso dizer que o Chevette mais bonito que você viu é criação minha e foi sustentado (insanamente) pela internet capixaba.  Também posso dizer que ajudei a escrever a história dessa agência, na qual fiz muitas amizades e desejo todo sucesso!

Lembranças de um Designer de interfaces e, por que não dizer, um designer de Chevette?

OBS: Aguardo fotos deste encontro!

#quartaweb #webcapixaba

Em breve mais fotos…

Este post tem basicamente 2 objetivos:

1) Mostrar um passo-a-passo macro na construção de uma interface pra os designers que estão começando.

2) Considerando que que cada designer tem um estilo (e isso também se aplica a seus métodos de desenvolvimento), estou expondo a forma como eu trabalho para que possamos trocar idéias.

Não vou me aprofundar demais, a intenção é mesmo deixar uma visão macro do processo. Vamos lá.

1) Jogando os elementos e idéias na tela. Alguns gostam de rascunhar no papel esta etapa do projeto. Particularmente, prefiro recorrer a meu amigo Fireworks e a um wireframe de baixíssima fidelidade. Normalmente, já tenho a idéia montada em minha cabeça. Caso você não tenha, preocupe-se com isso – provavelmente você vai ficar jogando elementos de um lado pro outro na tela por falta de planejamento.

2) Segure as ondas com o baldinho de cor. Depois de definir onde cada bloco de informação vai ficar, é hora de detalhar um pouco mais o conteúdo de cada um (inserir texto e imagens). Contornos (sem preenchimento) são muito utilizados nesta etapa.

3) Trabalhando em tons de cinza. Seguindo ainda a linha do wireframe, os tons de cinza servem para demarcar o nível de importância de cada área do site (quanto mais escuro, maior destaque). Ponto. Em tons de cinza eu também já vou desmembrando o  site em cabeçalho, corpo e rodapé (que isso não seja uma regra). Ainda nesta etapa monocromática, costumo popular com imagens repetidas as áreas do site que vão conter imagens. Assim temos uma noção mais real do peso visual e no impacto que as imagens vão causar no layout. OBS: As vezes pode acontecer de você perceber que o layout ficou “poluído” em determinados pontos. Caso isso acontecer, recorra ao seu bom senso e ao espírito Magaiver.

4) Cores. Cuidado para seu layout não ficar travado demais nas cores que o cliente usa. Você tem alternativas trabalhando com uma ou duas cores auxiliares, sempre tomando cuidado para seu site não virar um carnaval fora de época. Vai meu filho, se joga na paleta de cores e no baldinho. Se você for um programador se aventurando meio sem noção nas combinações , talvez isso te ajude. http://www.colorotate.org/

5) “Desemblocando” o layout. Note que o conteúdo (colunas na parte cinza) começam a sair dos blocos quadrados. Neste caso, como o site é formal, não abusei muito das formas e disposição do conteúdo. Porém, se o site for algo mais artístico, conceitual, não fique preso ao wireframe do primeiro passo: teste formas, disposições, rotações, combinação, sacanagens e simpatizantes. Essa foi uma discussão lá na webcapixaba, e até vale um post só pra falar disso. Mas por enquanto não, vamos para o próximo passo.

Ah sim, outra alteração significativa foi a definição de um tamanho e formato para o cabeçalho e rodapé, mesmo que a grosso modo.

6) Lapidações finais. Calma que já tá acabando.

• Correções de espaçamento entre os elementos
• Detalhes e adornos do topo trabalhados (maoir nível de detalhes)
• Imagens previamente tratadas no photoshop, definitivas
• Fundo caracterizando ramo do cliente, discretamente.
• Sombreamentos

Acabou?

O PNG, a arte do site, sim. Você pode conferir algumas sacanagens a mais feitas em flash direto no site – www.diskmoveis.com.br

Agora, se você ver um estagiário com aquele pescoção em sites de templates pra dar aquela chupada, que tal compartilhar este link para que ele conheça os processos e tente  desenvolver seu estilo e criatividade.

Um abraço! E vamos trocar idéias…