Tengo que presentar un prototipo de aplicación web en los próximos días a uno de mis clientes, lo que pasa es que no soy tan bueno en CSS y lo peor de todo es que casi nunca estoy contento con los resultados que obtengo.
Codificar la lógica empresarial no me plantea ningún desafío; sin embargo, el diseño de la interfaz de usuario requiere más del 80% de mi tiempo. No necesito nada impresionante, solo un ambiente limpio, agradable y presentable, un ejemplo:
Este es un problema recurrente que he estado teniendo, desearía que el desarrollo de la interfaz de usuario web tuviera un estilo predeterminado menos desnudo , un enfoque similar a Visual Studio o iPhone SDK sería muy útil para mí.
La maqueta anterior creada con Balsamiq Mockups es un gran ejemplo, todos los "componentes" más comunes están disponibles para usar, y lo mejor de todo: solo hay un estilo atractivo para elegir.
¿Existe algo como esto para la web? ¿Un marco de interfaz de usuario CSS o Javascript neutral pero agradable?
Opciones hasta ahora:
- Oreja
- Qooxdoo
- interfaz de usuario de jQuery
- Herramientas de jQuery
- MochaUI
- Ext JS
- Yahoo! Biblioteca de interfaz de usuario
- BlueTrip
- Plano
- Uki ( demostración )
- Napkee
- YAML
- Base
- iPlotz
- Sproutcore
- ForeUI
Me interesa saber si hay marcos de interfaz de usuario solo de CSS.
Encontré esta página con una lista muy buena de bibliotecas de interfaz de usuario web , pero la mayoría de ellas (al menos las buenas) parecen ser específicas de Java, ¿hay alternativas igualmente buenas en CSS puro o JS?
PD: No estoy interesado en AJAX, efectos, comportamientos y demás ... mi principal (única) preocupación es el estilo.
¡Gracias a todos por todas las sugerencias!
Después de una consideración muy cuidadosa de todas las bibliotecas de interfaz de usuario sugeridas, he llegado a la conclusión de que ExtJS y Qooxdoo son las que más se ajustan a mis necesidades. La interfaz de usuario de jQuery parece prometedora, pero solo ofrece una cantidad reducida de elementos.
En lo que respecta a las bibliotecas solo de CSS, he encontrado que BlueTrip / BluePrint y los temas sugeridos por tambler son los mejores. Aparte de eso, Flex y Napkee también parecen valer la pena explorar.
¡Es hora de aprender ExtJS ahora! =)
fuente
Respuestas:
No puedo creer que nadie haya mencionado:
http://www.extjs.com/
Es un framework js comercial, pero bastante asequible, y hace que armar una interfaz de usuario agradable sea muy fácil. Hay un conjunto de elementos mucho más completo que jqueryui, y está diseñado para crear una aplicación completa. Solo he jugado un poco con él, pero hasta ahora me encanta. Gratis para uso personal.
Si realmente desea familiarizarse con una interfaz de usuario completa desarrollada con EXT, pruebe esta URL:
http://docs.sencha.com/extjs/4.2.1/extjs-build/examples/feed-viewer/feed-viewer.html
fuente
Una combinación de 960gs para diseño y jQuery-UI para estilo es probablemente lo que está buscando.
También podría considerar el marco CSS de planos en lugar de 960gs.
fuente
¿Qué hay de usar dojo y dijit ?
Dijit es una forma rápida de crear widgets y elementos. También viene con 3 temas predeterminados que son fáciles de modificar.
Una buena lista de widgets diferentes aquí.
fuente
Únete a alguien que se especialice en diseño de interfaces de usuario.
Si sabe manejar mejor la lógica empresarial, es mejor dedicar su tiempo exclusivamente a codificar la lógica empresarial para que pueda dominarla. Esto requerirá que aprenda a interactuar con otra persona que sobresalga en la presentación. ( xml y json son medios comunes)
La lógica empresarial y la presentación son muy diferentes. Diseñar un sistema que no solo se vea bien, sino que sea intuitivo y fácil de usar es bastante difícil. Tan difícil y lento como establecer el funcionamiento interno de una aplicación compleja.
Una buena interfaz no es tan simple como incluir un framework CSS.
Me considero un programador más "creativo" que se destaca en la presentación. Tuve la suerte de cruzarme con alguien que estaba, en primer lugar ... muy motivado y, en segundo lugar, muy bueno en la "lógica empresarial". Tenía mucha más experiencia en la planificación e implementación de sistemas complejos, mientras que yo me he centrado principalmente en el diseño de interfaces.
Si eres más productivo haciendo arquitectura de sistemas, planificación, desarrollo, lo que sea ... debes esforzarte en esa dirección. Si bien los proyectos de desarrollo individual pueden ser bastante satisfactorios, los veo ineficaces. Es muy raro que alguien posea habilidades para desarrollar aplicaciones de alto nivel en solitario.
El desafío es encontrar a alguien con quien trabajar bien.
fuente
Consulte el Kit de herramientas web de Google . Tiene un aspecto predeterminado bastante limpio. Tienen ejemplos . En particular, su ejemplo de Showcase demuestra todos los widgets disponibles y el estilo CSS utilizado para lograr el aspecto.
fuente
Hay algunos marcos destinados a (G) Diseño de UI; Qooxdoo , JQuery UI y MochaUI son algunos de ellos (aunque el último es más una prueba de concepto que un marco utilizable). Estos marcos generalmente ofrecen una variedad de elementos impulsados por JS (elementos de formulario, como campos de entrada y botones de envío, pero también otros elementos como pestañas). Sin embargo, aún dependerá de usted colocar estos elementos, y tal vez diseñarlos, a su gusto.
Quizás familiarizarse con un marco CSS (como 960GS ) podría complementar los marcos JS UI anteriores.
(Como descargo de responsabilidad personal; tengo muy poca experiencia con cualquiera de los marcos mencionados anteriormente. Pero estoy seguro de que Google o SO pueden proporcionar respuestas que yo no puedo).
fuente
Esto no le ayudará en su proyecto actual, pero vale la pena considerarlo para proyectos futuros. Después de pasar muchos años creando aplicaciones GUI en HTML 4 y luchando constantemente contra las limitaciones de CSS y HTML, pensé en probar Adobe Flex. ¡Qué mejora!
En lugar de simular un control de página con pestañas o una cuadrícula de datos, con Flex o Silverlight, su marcado puede simplemente especificar un control de página con pestañas o una cuadrícula de datos. Y los marcos vienen con estilos predeterminados que son aburridos pero no están del todo mal. No estoy diciendo que estos reemplacen completamente al HTML, pero si necesita widgets y diseño de GUI, creo que son una alternativa mucho mejor.
fuente
Podría considerar navegar por el siguiente sitio:
http://themeforest.net/category/site-templates/admin-skins
Hay varios temas "administrativos" disponibles para su compra aquí que pueden satisfacer sus necesidades.
fuente
Las maquetas de estructura alámbrica como esa son una forma brillante de comenzar.
Habiendo utilizado la mayoría de los marcos de interfaz de usuario discutidos aquí, me gustaría guiarte hacia jQueryUi por las siguientes razones:
El marco CSS jQueryUI se encarga del CSS consistente y atractivo para usted (es realmente fácil, solo haga algunas marcas y aplique las clases)
jQueryUI tiene control de tabulación y un montón de formas sencillas y ordenadas para diseñar formularios.
fuente
Si está apuntando a navegadores modernos, que no son de IE, debería consultar Sproutcore . Para las maquetas utilizo Mockingbird .
fuente
Un marco PHP relativamente nuevo diseñado específicamente para el desarrollo de software centrado en la interfaz de usuario. Los elementos que tiene aquí, incluidas las pestañas, los filtros y las cuadrículas, están incluidos y le llevarán aproximadamente 20 líneas de código para implementar.
http://agiletoolkit.org/
fuente
¿Has probado Axure ? Es una herramienta para crear rápidamente wireframes, prototipos y especificaciones para aplicaciones y sitios web.
Funciona de manera similar a Balsamiq, pero le permite exportar sus wireframes / prototipos como HTML, CSS y Javascript.
A continuación, puede cargarlo en un servidor o ejecutarlo en su computadora como ejemplo de trabajo.
Puede crear formularios, enlaces, pestañas, rollovers, efectos Javascript.
fuente
Si ya está utilizando Balsamic Mockups para sus prototipos, debería considerar Napkee . Para citar el sitio web "Napkee le permite exportar maquetas de Balsamiq a HTML / CSS / JS y Adobe Flex 3 con un clic de un botón".
fuente
Me encontré con esto hace un tiempo y no pude encontrar nada, así que lo aproveché como una oportunidad para aprender css. Pero desde entonces parece que se han hecho grandes avances hacia este tema.
Espero que eso ayude.
fuente
Una combinación de 960gs para el diseño y las herramientas jQuery-UI o Jquery es excelente, las uso casi en todos los proyectos, pero me gustaría agregarlas a http://easyframework.com/ aunque no es amigable para los negocios, así que asegúrese de revisar es licencia pero me gusta
fuente
Recientemente descubrí un buen sitio web llamado iplotz.com donde puedes crear una maqueta de tu aplicación / sitio web / proyecto en línea sin instalar nada. También tiene la mayoría de los controles comunes, junto con muchas más funciones para administrar todo el proyecto y compartirlo con otros en línea.
Debo admitir que todavía no lo probé yo mismo, pero lo miré un poco y parece bastante bueno. Probablemente lo usaré pronto.
fuente
Hablar con descaro aParece que tiene potencial como una forma de mitigar algunos dolores de cabeza de CSS.
fuente
Me gusta agregar Bootstrap , su marco de interfaz de usuario intuitivo y potente para un desarrollo web más rápido y fácil.
fuente
Me gusta RocketCSS . Bonito diseño limpio, pruébalo.
fuente