Interfaces para o site empresarial

Wellington Moreira da Silva

Hoje vou postar algumas propostas de interfaces para o nosso site empresarial, desenvolvidas por mim.
Elas foram desenvolvidas utilizando o programa CorelDraw X4.
Eu procurei utilizar as cores do logotipo e da logomarca nas interfaces, de um modo que apresentasse um bom contraste entre elas.

Interfaces desenvolvidas:

Primeira:

Segunda:

A prosósito, estas interfaces estarão presentes na nossa apresentação de Aplicativos hoje.

Propostas de Interface

Maria Luíza Santinho Lima Monteiro

Oi!
Conforme foi proposto pelo professor Rodrigo (Flash), cada integrante do grupo deveria fazer duas propostas de interface para o site da empresa. Logo abaixo vocês podem ver a minha proposta.

Como podem perceber, o fundo de ambas utiliza um degradê de tons de cinza, desde o branco até a cor preta. Isso porque são tons neutros e que não deixam de passar ideia de tecnologia.
Apesar de parecidas as propostas, talvez por causa das cores, seu esqueleto é bastante diferente. Na primeira os botões estão localizados à esquerda da página e na segunda proposta eles estão no topo. O layout dos botões também são bem diferentes.

Lembrando que hoje será nossa 1ª apresentação da matéria Aplicativos II e todas as interfaces estarão contidas nos slides.

Propostas de interface

Karl Schiewaldt

Olá!

Para que possamos desenvolver o site empresarial, são necessários alguns modelos de interfaces, e foram feitos dois modelos por integrante. Neste post, irei apresentar minhas propostas.
Procurei fazê-las da maneira mais simples e funcional, para que o site se encaixe em nossa proposta facilmente. Aqui estão elas:

Em ambas as propostas, procurei colocar os botões acima do espaço reservado ao conteúdo, assim teríamos mais espaço horizontal para trabalhar o conteúdo do site. No topo teríamos um banner contendo o logotipo e a logomarca da empresa, linkados para a home. No rodapé do site, teríamos a indicação de copyright do site, ano do desenvolvimento, juntamente com links para a página de contato e mapa do site da empresa.
As cores que escolhi são cores frias e sólidas, para passar o aspecto tecnológico do site.

Então é isso, e até mais. (:

Slogans da Empresa e Interfaces da Home

Isabella Fontes

Olá pesssoal!

Pensando nos slogans da nossa empresa, obtive as ideias a seguir:

Spectrum - "Seu aprendizado, nossa inspiração."

Neste slogan pensei que nossa empresa e nossa equipe se preocupa com o aprendizado dos jovens no trânsito, uma vez que é muito importante esta conscientização.

Spectrum - "O seu futuro, nosso presente."

Neste aqui, a questão central era mostrar que através da conscientização e aprendizado das leis do trânsito os jovens que são o nosso público alvo serão no futuro cidadãos mais cientes e éticos.

Outro item que desenvolvi foi a interface da página inicial do nosso site empresarial.

São elas:

Propostas de interface - Ananda

Ananda Brasolotto De Santis

Olá.
Como proposto pelo professor Rodrigo, desenvolvi duas propostas de interface para o site empresarial.
São elas:

Mapeamento UV

Vinicius Sato Jacintho

O mapeamento UV é feito no Blender através da janela do Editor UV e de um modo especial de janela 3D chamado Modo seleção de Faces (Face Select). O editor UV nos permite mapear as texturas diretamente sobre as faces das malhas. Cada face pode ter coordenadas de texturas individuais e uma imagem distinta designada a mesma, pode ser combinadas com as cores dos vértices para torná-las mais brilhantes ou mais escuras o inclusive dar-lhe cor. Por meio do editor UV, se designa duas propriedades adicionais a cada face:

• Quatro coordenadas UV

Estas coordenadas definem a forma em que se mapeia as imagens sobre as faces. São coordenadas bidimensionais, que são chamadas UV, para distingui-las das coordenadas XYZ. Estas coordenadas podem ser utilizadas para renderizar ou para uso em tela OpenGL em tempo real.

• Um link para uma Imagem

Cada face no Blender pode ter um link para uma imagem diferente. As coordenadas UV definem como se mapeia esta imagem sobre a face. A imagem pode ser renderizada ou ser mostrada em tempo real. Para poder designar Imagens ou modificar as coordenadas UV do objeto Malha ativo, a Janela 3D deve estar no modo "Seleção de Faces".

A grande dificuldade em fazer o mapeamento está em definir as colunas que serão usadas como base para "planalizar" o modelo 3D. Como nessa imagem:

Vídeo da Apresentação de Aplicativos

Maria Luíza Santinho Lima Monteiro

Olá!
Hoje faremos uma apresentação da matéria de Aplicativos, conforme solicitado pelo professor Rodrigo (Flash), sobre o nosso projeto. Além da apresentação de slides, também foi solicitado um vídeo de 1 minuto para ilustrar alguma parte da apresentação.
O vídeo foi feito a partir de um comercial que encontramos no Youtube e editamos conforme foi necessário para o grupo.
Segue abaixo o vídeo.

Ensaios para apresentação de aplicativos

Karl Schiewaldt

Olá!
Esta noite nos reunimos na casa da Maria Luíza para finalizar os últimos detalhes de nossa primeira apresentação de Aplicativos II, e ensaiar as falas de cada integrante do grupo na apresentação.

Amanhã será a apresentação de Aplicativos II, onde apresentaremos os integrantes do grupo, as sugestões para o nome da empresa, propostas de logomarca, a logomarca escolhida, motivos da escolha, motivo da escolha das cores. Além de introduzir também o sistema que estamos propondo, a situação problema, a instituição beneficiada (no nosso caso, o próprio CTI) e um vídeo institucional de 1 minuto, que basicamente falará a respeito do sistema foi proposto por nós.

Então é isso, boa sorte para nós! :D

Vídeo aulas de Blender

Ananda Brasolotto De Santis

Pessoal, eu encontrei um site muito interessante.

Estava procurando no YouTube vídeos que ensinassem a modelar outros carros no Blender e encontrei um vídeo que apenas indicava um link do 4Shared cheio de vídeo aulas e também passava um e-mail para auxílio online dessas vídeo aulas. :D

Eu baixei todos os vídeos e ando assistindo-os. Há vídeos sobre comandos básicos e avançados, e outros que ensinam a modelar objetos.

Este é o e-mail para suporte online que eu tinha falado:
suportecurso@gmail.com

E este é o link do 4shared para baixar os vídeos:
http://www.4shared.com/dir/7314487/bc986f33/Vdeo_Aulas_-_Curso_de_Blender.html

Tutoriais de Python

Maria Luíza Santinho Lima Monteiro

Estive pesquisando um pouco sobre a linguagem na qual programaremos e encontrei tutoriais ensinando alguns comandos básicos sobre o Python.
Encontrei os seguintes tópicos:

* Tipos de variáveis dinâmicos
Em Python, não é necessário criar uma variável, basta atribuir um valor para ela.
Exemplo: a = 1
Quando dizemos que o tipo de variável é dinâmico, significa que o tipo de uma mesma variável pode mudar no decorrer do programa.

* Controle de blocos por indentação
Em outras linguagens, os blocos de comandos são delimitados. Podem ser por chaves, por comandos ou por outros símbolos. Mas o mesmo não ocorre com o Python. Nesta linguagem, usamos apenas a indentação (ou tabluação) para delimitar os blocos de comando. Isso faz com que o código fique mais claro e fácil de entender. É importante que se crie um padrão a ser seguido, porque se uma pessoa usa 3 espaços e outra usa 4, o programa não rodará corretamente.

* Tipos de variáveis de alto nível
Existem alguns tipos de variáveis especiais do Python, as variáveis consideradas de alto nível. São elas:
- Strings: são as cadeias de caracteres;
- Listas: são como o vetor de outras linguagens, organizadas por um índice numérico e inteiro;
- Tuplas: são listas imutáveis, ou seja, após criadas, não podem ser modificadas;
- Dicionários: são como listas mas o índice não precisa ser do tipo inteiro, conhecidos em outras linguagens como arrays;
- Classes: são tipos especiais, usados para a programação orientada a objeto.

Fonte: http://www.codigofonte.net/?secao=dicas&Gid=87

Análise de interfaces

Karl Schiewaldt

Olá!

Para que possamos desenvolver nosso site empresarial, é necessário que nós façamos a análise de algumas interfaces existentes de sites relacionados com nosso projeto. Já que nosso projeto é relacionado com jogos, escolhi dois sites de empresas desenvolvedoras de jogos: a Blizzard e a Valve.

Análise Blizzard:

Aspectos Positivos:

• O site possui um rápido acesso as suas principais informações, como notícias sobre os jogos em lançamento, fan-arts e concept-arts
• O banner onde estão os jogos lançados recentemente possui uma ótima sinalização com relação a navegação entre banners. O usuário pode escolher facilmente qual banner ele deseja ver, e no próprio banner, há links para que o usuário saiba mais sobre o jogo.
• O site está disponível em vários idiomas, não somente inglês, para usuários de diversos países.

Aspectos negativos:

• Apesar de ser uma empresa que faz jogos online que exigem uma conexão razoável com a Internet, o site é extremamente pesado para quem possui uma conexão lenta.

Análise Valve:

Aspectos Positivos:

• Site é de fácil entendimento, as notícias e novidades estão bem colocadas na home, assim como assss notícias sobre novos jogos, que são colocadas na forma de um banner, bem ao centro do site.
• As cores e o modo com que o conteúdo foi colocado no layout indicam que o site é de intuição tecnológica, ou seja, se refere algo relacionado com a tecnologia, como o desenvolvimento de jogos.
• O menu, colocado ao topo do site permite uma ótima navegação dentro dos sub-menus, sem que haja algum problema de incompatibilidade.

Aspectos negativos:

• Para se navegar entre os banners onde estão colocados os principais jogos da empresa, é necessário “adivinhar” que se deve fazer utilizando os “quadradinhos” no canto inferior direito do banner.
• Infelizmente, o site não possui um campo de busca, para que o usuário possa buscar informações detalhadas de notícias antigas.

Então é isso, até mais! (:

Banco de Dados - O Projeto se tornando mais real

Isabella Fontes

Olá pessoal,

Nesta semana me afastei mais da modelagem de objetos no Blender pois há alguns integrantes do grupo se empenhando neste quesito.
E também porque precisamos que o jogo tenha "funcionalidades" e com isso é necessário analisar alguns critérios:

- A interface do jogo (não confundir interface visual que é o layout/design com interface em programação, para mais detalhes clique aqui), o que inclui decidir como os objetos e seus módulos irão interagir com o usuário;
- Como será a parte de banco de dados;
- Como "rodará" o jogo em diferentes sistemas operacionais.

Tendo em vista esses critérios já mencionados, então nesta semana me especializei na interface (XULRunner já citado em um post anterior) e na parte de banco de dados.
Quanto ao banco de dados encontrei o Sqlite3 (inclusive o utilizo no estágio) que tem uma ótima integração com Python, a linguagem do Blender e isto favorece muito.
Estamos montando um "uml" com base nos DFDs nas aulas de TSPD e após isto já criaremos definitivamento nosso banco.

*Sqlite3:

• É Software Livre/domínio público e Multiplataforma;
• É um mecanismo de armazenamento seguro com transações ACID;
• Não necessita de instalação, configuração ou administração;
• Implementa a maioria do SQL92;
• Permite guardar o banco de dados em um único arquivo;
• Suporta bases de dados acima de 2 terabytes;
• Sem dependências externas.

Para ler mais sobre sua documentação, clique aqui.

Site de tutoriais - Blender

Ananda Brasolotto De Santis

Olá a todos!

Hoje eu estava procurando sites que ensinassem a modelar uma árvore, para utilização no cenário do nosso jogo, e encontrei um site só sobre Blender que eu nunca havia visto.
Link da página inicial: http://www.blenderguru.com/

Achei o site muito interessante. O desenvolvedor é muito habilidoso e divulga vídeos com as modelagens que faz, vídeos esses que podemos utilizar para desenvolvermos as nossas modelagens.

O site é em inglês, mas acredito que qualquer membro do grupo pode se virar bem por lá, acompanhando vídeos e tutoriais.

Além dos vídeos, nesse site são encontrados objetos e texturas para importarmos.

Encontrei no site um arquivo livre .blend de um carro, o Mazda MX-8. Abaixo estão a foto do carro e o link para baixar o arquivo .blend no Shared:

Download do arquivo:
http://www.4shared.com/file/S9CHgrvn/Mazda-RX8.html

Análise de interfaces de alguns sites

Wellington Moreira da Silva

Sites analisados:

Site da Desenvolvedora de Games Eletronic Arts:

O site apresenta uma grande quantidade de informações logo na página home, dando mais destaques as novidades e notícias. Os botões são pequenos, mas estão em uma boa localização, no alto da tela.

Há também à esquerda da tela, um menu com várias opções para pesquisa de jogos e à direita, o site trás um outro menu, linkando os principais jogos desenvolvidos pela empresa.

As cores foram muito bem utilizadas, já que em nenhum local há dificuldades para a leitura do conteúdo.

Site da Engine de Games Blender:

O site trás logo na home e em primeiro plano, o link para download de seu principal produto.

Os botões são bem simples e localizados bem no alto da tela, mas se destacam por estarem visualmente separados do resto do site.

Notícias e anunciados oficiais da empresa preenchem o conteúdo da home. À direita, um menu trás links com imagens de eventos e projetos desenvolvidos com a ferramenta Blender.

As cores são muito bem distribuídas, com cores escuras ao fundo e a escrita realizada nas cores branco e azul-claro, apresentando um contato visual agradável.

Análise de sites

Vinicius Sato Jacintho

Eu analisei os sites das empresas Bioware e High Voltage.
A Bioware vencedora do prêmio, Jogo do ano de 2009, mas surpreendentemente, o seu site não me surpreendeu. Embora não estivesse mal feito, ele possuia elementos que não combinavam entre si, como as propagandas de vendas nas laterais.

Pontos bons:
- Principais jogos da desenvolvedora em destaque na home;
- Background bem trabalhado, fazendo propaganda de seu principal jogo;
- Logo da empresa em destaque no topo;
- Área para notícias na parte central.

Pontos ruins:
- Página simples demais, lembrando até sites antigos;
- Notícias não separadas corretamente, por categorias ou jogos;
- Banners em branco não combinam com a escolha de cores do resto da página.

Já a High Voltage, é uma desenvolvedora independente já há 17 anos no mercado, seu site era mais simples, mas nem por isso pior. Com um design limpo e intuitivo, a escolha de cores combinava com os banners fundo da página. Um contra que encontrei foi o peso da animação em Flash, que eu achei desnecessária, e deixou a página pesada.

Pontos bons:
- Boa escolha de cores para o contraste entre fonte e fundo;
- Menu em local intuitivo;
- Propaganda do jogo mais recente na home do site.

Pontos ruins:
- Página pesada devido ao banner em flash na parte superior;
- Página não atualizada direito (a copyright no rodapé da página está com o ano de 2009 ainda).

Análise de sites

Maria Luíza Santinho Lima Monteiro

Na imagem acima, temos um site de um grupo de desenvolvedores de jogos. Podemos observar que o design é bastante simples e o tom de cor predominante é o azul, uma cor bem suave, mas que não chama muito a atenção. Algumas informações estão um pouco amontoadas, o que dificulta o entendimento e a interpretação rápida. Todas as imagens contém tag “alt”*.
Site: http://www.gamedev.com.br/


Já na imagem abaixo, vemos um site de jogos online. Suas cores são bem chamativas o que é muito bom para esse tipo de site. O design não é complexo, porém observamos algumas animações, que também ajudam a chamar a atenção do usuário. Apenas algumas imagens contém tag “alt”*.
Site: http://www.sitedegames.com/

*tag "alt": é um código em HTML que reflete o conteúdo de uma imagem.

Slogans

Karl Schiewaldt

Olá!

Esses dias estávamos reunidos e começamos a pensar a respeito de um slogan para nossa empresa.

Primeiro, precisávamos saber a definição real de SLOGAN.

Segundo a Wikipedia: Um slogan ou frase de efeito é uma frase de fácil memorização usada em contexto político, religioso ou comercial como uma expressão repetitiva de uma ideia ou propósito. Muitas vezes é usados por empresas.

Pensando nessa definição, tivemos algumas ideias, como por exemplo:

- Spectrum, desenhando o futuro.
- Spectrum, superando expectativas.
- Spectrum, muito mais do que se pode imaginar.
- Spectrum, tenha uma nova visão do futuro.

Ainda haverá uma reunião onde definiremos o slogan, que em breve, será postado aqui.

Então é isso, até a próxima (;

XULRunner - Conceito e Implementação

Isabella Fontes

Olá!
Nesta semana pesquisei bastante sobre como o XULRunner pode nos auxiliar a montar a interface do nosso jogo.

Explicarei de forma resumida sobre o tema:

O XULRunner é um pacote runtime Mozilla que pode ser usado para iniciar aplicações XUL + XPCOM que são tão ricas como Firefox e Thunderbird. Nele há também o libxul, uma solução que permite a incorporação de tecnologias Mozilla em outros projetos e produtos.

E é especialmente este o motivo pelo qual acredito ser uma ótima saída para o nosso projeto, uma vez que se torna necessário existir uma interface antes de iniciar o jogo.[¹]

Isto significa que o XULRunner seria a versão "web" para desktop, descartando o uso de IDES e Softwares para criar o layout. Outro item importante é que podemos usar JavaScript para controlar os botões e focos além de CSS e XML para nosso projeto.

É claro que para toda essas funcionalidades há regras a serem seguidas, como arquitetura de pastas e compilar alguns arquivos para que as dll's funcionem.
/NomeDaAplicacao
   /Chrome
    /NomeDaAplicacao
     ...demais arquivos do projeto
    chrome.manifest
   /defaults
     /preferences
     prefs.js
   application.ini

Quanto ao nome XULRunner, de acordo com a Mozilla isto não está finalizado e já foi sugerido o nome de HTMLRunner já que se trata de certa forma de HTML/XML.

O XULRunner fornece APIs para:
* Cross-platform embedding (XRE_InitEmbedding);
* JavaXPCOM embedding;
* gtkmozembed (apenas Linux);
* ActiveX control (apenas Windows e ainda não está completa);
* NSView-based-widget (apenas Mac OS X e ainda não está completa).

Seu foco no mercado atual têm sido para fazer ferramentas de desenvolvimento (o AJAX Toolkit Framework, por exemplo). Acredita-se que no futuro, haverá uma XULRunner Developer Kit que contém diversas ferramentas de desenvolvimento.

[¹] Como login das categorias do nosso sistema (Administrador, Orientador e Aluno), exibir Rankings e demais funções.

Análise de interface

Ananda Brasolotto De Santis

Um dos sites que eu analisei foi o site de jogos Rock Star, no seguinte link: http://www.rockstargames.com/

Esse site de jogos é bem organizado, não é daquele tipo de site em que encontrar o que deseja se torna uma tarefa trabalhosa.

O contraste entre o fundo branco e a letra preta facilita a leitura, porém as imagens extremamente coloridas encontradas como plano de fundo em todo o site, diferentes a cada página, o poluem visualmente, chamando mais atenção para essas imagens do que para o site em si.