Estilos comuns de interface do usuário da web


91

Tenho que apresentar um protótipo de um aplicativo web nos dias seguintes para um dos meus clientes, o que acontece é que não sou muito bom em CSS e o pior de tudo quase nunca fico feliz com os resultados que recebo.

Codificar a lógica de negócios não representa nenhum desafio para mim, o design da IU, entretanto, leva mais de 80% do meu tempo. Não preciso de nada de tirar o fôlego, apenas de um ambiente limpo, agradável e apresentável, um exemplo:

texto alternativo

Este é um problema recorrente que tenho tido, gostaria que o desenvolvimento de IU da web pudesse ter um estilo padrão menos simples , uma abordagem semelhante ao Visual Studio ou iPhone SDK seria muito útil para mim.

A maquete acima criada com Balsamiq Mockups é um ótimo exemplo, todos os "componentes" mais comuns estão disponíveis para uso, e o melhor de tudo: há apenas um estilo bonito para escolher.

Existe algo assim para a web? Uma estrutura de IU de CSS ou Javascript neutra, mas agradável?


Opções até agora:

Estou interessado em saber se há algum framework de IU somente CSS.

Achei esta página com uma lista muito boa de Bibliotecas de IU da Web , mas a maioria delas (pelo menos as boas) parecem ser específicas para Java. Existem alternativas igualmente boas em CSS ou JS puro?

PS: Não estou interessado em AJAX, efeitos, comportamentos e assim por diante ... minha principal (única) preocupação é o estilo.


Obrigado por todas as sugestões todos!

Depois de uma consideração muito cuidadosa de todas as bibliotecas de IU sugeridas, cheguei à conclusão de que ExtJS e Qooxdoo são os que mais se adaptam às minhas necessidades. O jQuery UI parece promissor, mas oferece apenas uma quantidade reduzida de elementos.

No que diz respeito às bibliotecas somente CSS, considero o BlueTrip / BluePrint e os temas sugeridos pelo tambler os melhores. Além disso, Flex e Napkee também parecem valer a pena explorar.

É hora de aprender ExtJS agora! =)


6
Vale a pena notar, jQuery-UI tem um bom designer de tema para acelerar as coisas chamado "Theme Roller": jqueryui.com/themeroller
Nick Craver

Respostas:


7

Não acredito que ninguém mencionou:

http://www.extjs.com/

É um framework js comercial, mas bastante acessível, e torna a montagem de uma bela IU muito fácil. Há um conjunto de elementos muito mais completo do que o jqueryui, e foi projetado para fazer um aplicativo inteiro. Eu só brinquei com ele um pouco, mas eu realmente amo até agora. Gratuito para uso pessoal.

Se você realmente deseja ter uma ideia de uma IU completa desenvolvida com EXT, tente este url:

http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/feed-viewer/feed-viewer.html


@Erik: Obrigado pela sugestão. Você conhece algum livro / tutorial que possa recomendar? Estou tendo problemas para descobrir como devo integrar ExtJS em um aplicativo PHP MVC típico.
Alix Axel

O melhor lugar para começar são os tutoriais que EXT oferece: extjs.com/learn/Tutorials Quanto à integração com seu framework PHP, eu não poderia dizer - mas essas são suas páginas HTML, então você as integraria do jeito que você integraria qualquer outra página, não é?
Erik

11

Uma combinação de 960gs para layout e jQuery-UI para estilo é provavelmente o que você está procurando.

Você também pode considerar a estrutura CSS do blueprint em vez de 960gs.


Você quer dizer a estrutura jQuery UI JS ou a estrutura jQuery UI CSS?
Alix Axel

1
Desculpas pela confusão, eu quis dizer que ele jQuery UI CSS framework para estilização. Mas não há razão para que você também não possa incorporar a estrutura de widgets JS.
Shane O'Grady

Obrigado, vou dar uma olhada nisso. =)
Alix Axel

7

Que tal usar dojo e dijit ?

Dijit é uma maneira rápida de criar widgets e elementos. Ele também vem com 3 temas padrão que são fáceis de modificar.

Uma boa lista de widgets diferentes aqui


dijit parece ser o que eu preciso, porém não consigo acessar a página - não sei por quê.
Alix Axel

Qual página você não consegue acessar?
peirix

dijit, mas está funcionando agora. =) Vou dar uma olhada melhor assim que chegar perto de um computador (estou navegando com um telefone).
Alix Axel

6

Junte-se a alguém especializado em design de IU.

Se você é melhor em lidar com a lógica de negócios, é melhor gastar seu tempo exclusivamente codificando a lógica de negócios para que você possa dominá-la. Isso exigirá que você aprenda a interagir com alguém que se destaca na apresentação. ( xml e json são meios comuns)

A lógica de negócios e a apresentação são muito diferentes. Projetar um sistema que não só tenha uma boa aparência, mas seja intuitivo e fácil de usar é bastante difícil. Tão difícil e demorado quanto estabelecer o funcionamento interno de um aplicativo complexo.

Uma boa interface não é tão simples quanto incluir uma estrutura css.

Eu me considero um programador mais 'criativo' que se destaca na apresentação. Acontece que eu tive a sorte de cruzar o caminho com alguém que era, antes de tudo ... muito motivado e, em segundo lugar, muito bom em 'lógica de negócios'. Ele tinha muito mais experiência em planejamento e implementação de sistemas complexos, enquanto eu me concentrei principalmente em design de interface.

Se você é mais produtivo fazendo arquitetura de sistema, planejamento, desenvolvimento, seja o que for ... você deve se esforçar nessa direção. Embora os projetos de desenvolvimento solo possam ser bastante satisfatórios, considero-os ineficientes. É muito raro alguém possuir habilidades para desenvolver aplicativos de nível superior sozinho.

O desafio é encontrar alguém com quem você trabalhe bem.



3

Existem algumas estruturas destinadas a (G) Design de IU; Qooxdoo , JQuery UI e MochaUI são alguns deles (embora o último seja mais uma prova de conceito do que uma estrutura utilizável). Essas estruturas geralmente oferecem uma variedade de elementos baseados em JS (elementos de formulário, como campos de entrada e botões de envio, mas outros elementos como guias também). No entanto, ainda caberá a você posicionar esses elementos, e talvez estilizá-los, de acordo com sua preferência.

Talvez se familiarizar com uma estrutura CSS (como 960GS ) possa complementar as Estruturas de IU JS acima.

(Como isenção de responsabilidade pessoal; tenho muito pouca experiência com qualquer uma das estruturas mencionadas acima. Mas tenho certeza de que o Google ou o SO podem fornecer respostas que não posso.)


1
960.gs realmente não faz muitos estilos - você quer algo como Bluetrip ( bluetrip.org ) para isso. 960.gs realmente fornece apenas um layout baseado em grade.
Dominic Rodger

Dei uma olhada nos frameworks que você sugeriu, qooxdoo parece excessivamente complicado (tudo parece ser definido via Javascript - até mesmo entradas de formulário, etc.), MochaUI tem uma interface muito legal com cores neutras muito legais, eu não vi o código-fonte dele, mas também parece bastante limitado (muitos estilos elementares estão faltando). jQuery UI parece a melhor opção até agora. 960.gs é bom, mas como Dominic disse, não é para estilizar.
Alix Axel

3

Isso não vai ajudá-lo em seu projeto atual, mas vale a pena considerar para projetos futuros. Depois de passar muitos anos criando aplicativos GUI em HTML 4 e lutando constantemente contra as limitações de CSS e HTML, pensei em experimentar o Adobe Flex. Que melhoria!

Em vez de simular um controle de página com guias ou grade de dados, com Flex ou Silverlight, sua marcação pode simplesmente especificar um controle de página com guias ou grade de dados. E as estruturas vêm com estilos padrão que são enfadonhos, mas nem um pouco ruins. Não estou dizendo que eles substituem completamente o HTML, mas se você precisar de widgets e layout de GUI, acredito que sejam uma alternativa muito melhor.


Flex é realmente uma ótima ferramenta, mas considere que atualmente o mundo está se movendo em direção ao HTML 5 e o flex tem muitos problemas com tamanho e multilíngue, onde o javascript vence e o que você acha do preço, mas eu ainda acho que o flex é uma ótima ferramenta
tawfekov

Eu realmente espero que uma solução HTML / Javascript / CSS pura para aplicativos surja do processo de padrões.
Jacob

O Flex pode ser bastante volumoso e não ser tão amigável ao mecanismo de pesquisa ... mas o sistema não pode ser derrotado na minha opinião. Não sou um desenvolvedor web 'sênior', mas realmente vejo os benefícios de trabalhar dentro da estrutura flex. A Adobe tem um sistema muito bom funcionando. Ser capaz de codificar para desktop / web / AND mobile com UMA estrutura / meio padronizado de entrega é valioso além das palavras.
Derek Adair


2

maquetes de wireframe como essa são uma maneira brilhante de começar.

Tendo usado a maioria dos framewroks de IU discutidos aqui, gostaria de orientá-lo em direção ao jQueryUi pelos seguintes motivos:

  1. O framework CSS da jQueryUI cuida do CSS consistente e de aparência legal para você (é realmente fácil - basta fazer algumas marcações e aplicar as classes)

  2. jQueryUI tem tabcontrol e montes de maneiras fáceis e rápidas de estilizar formulários.


De todas as opções sugeridas, estou mais inclinado para ExtJS, você já usou? Como você o compara ao jQuery UI?
Alix Axel

ExtJS é muito maduro e completo. Esteja ciente de que ele tem licença dupla GPL e comercial. É realmente uma interface de widget voltada para interfaces de usuário muito ricas. Portanto, se você deseja algo mais 'corporativo' e menos 'amigável', não é uma escolha ruim. A única coisa é que tem um pouco de curva de aprendizado, é realmente uma estrutura inteira em si. Mais como programação GUI do que web. Boa sorte
Rico

2

Se você está almejando navegadores modernos, não IE, então você deve verificar o Sproutcore . Para maquetes eu uso o mockingbird .


Obrigado, o mockingbird realmente fez o meu dia! Quanto ao Sproutcore, parece bom, mas algumas das demos parecem meio bugadas no Firefox 3.5.7.
Alix Axel

2

Uma estrutura PHP relativamente nova projetada especificamente para o desenvolvimento de software focado em IU. Os elementos que você tem aqui, incluindo guias, filtros e grades, estão incluídos e levarão cerca de 20 linhas de código para serem implementados.

http://agiletoolkit.org/


1

Você já experimentou Axure ? É uma ferramenta para criar rapidamente wireframes, protótipos e especificações para aplicativos e sites da web.

Funciona de forma semelhante ao Balsamiq, mas permite exportar seus wireframes / protótipos como HTML, CSS e Javascript.

Você pode então fazer o upload para um servidor ou executá-lo em seu computador como um exemplo funcional.

Você pode criar formulários, links, guias, rollovers, efeitos Javascript.


Obrigado, Axure parece legal, mas não é o que estou procurando.
Alix Axel

1

Se você já usa maquetes balsâmicas para seus protótipos, deve considerar o Napkee . Para citar o site "Napkee permite exportar Balsamiq Mockups para HTML / CSS / JS e Adobe Flex 3 com o clique de um botão."


1

Encontrei isso há algum tempo e não consegui encontrar nada, então aproveitei isso como uma oportunidade para aprender css. Mas, desde então, parece que grandes avanços foram feitos neste assunto.

  • Resumindo seu problema, existe uma página da wikipedia .
  • Existe o yaml-css , que pega o yaml e o transforma em css
  • Existe uma linha de base , mas pressupõe algum conhecimento de CSS.
  • Eu também sugiro olhar para o Dreamweaver da Adobe . Eles têm muitas ferramentas de geração de CSS e estilo que produzem código muito legível e compatível com w3c.

Espero que ajude.



1

Recentemente, descobri um site legal chamado iplotz.com, onde você pode criar uma maquete de seu aplicativo / site / projeto online sem instalar nada. Ele também possui a maioria dos controles comuns, junto com muito mais recursos para gerenciar todo o projeto e compartilhá-lo com outras pessoas online.

Devo admitir, ainda não experimentei, mas olhei um pouco e me parece muito legal. Provavelmente estarei usando em breve.


É uma alternativa muito boa ao Balsamiq, meu navegador é um caixa eletrônico muito lento, mas à primeira vista parece valer a pena, obrigado.
Alix Axel

0

Parece que o Sass tem potencial como forma de atenuar algumas dores de cabeça do CSS.


0

Gosto de adicionar Bootstrap , sua estrutura de front-end intuitiva e poderosa para um desenvolvimento web mais rápido e fácil.


Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.