style examples attribute css user-interface

examples - title css



Estilos de interfaz de usuario web comunes (19)

Tengo que presentar un prototipo de una aplicación web en los días siguientes a uno de mis clientes, la cosa es que no soy tan bueno en CSS y, lo peor de todo, casi nunca estoy satisfecho con los resultados que obtengo.

La codificación de la lógica comercial no me plantea ningún desafío, sin embargo, el diseño de la IU requiere más del 80% de mi tiempo. No necesito nada impresionante, solo un entorno limpio, agradable y presentable, un ejemplo:

texto alternativo http://i48.tinypic.com/t0p1fq.png

Este es un problema recurrente que he tenido, desearía que el desarrollo de la IU web pudiera tener un estilo predeterminado menos evidente , un enfoque similar al de Visual Studio o iPhone SDK me sería muy útil.

La maqueta anterior creada con Balsamiq Mockups es un gran ejemplo, todos los "componentes" más comunes están disponibles para su uso, y lo mejor de todo: solo hay un estilo atractivo para elegir.

¿Hay algo como esto para la web? ¿Un marco de interfaz de usuario de CSS o JavaScript neutro pero agradable?

Opciones hasta el momento:

Me interesa saber si hay marcos de interfaz de usuario exclusivos de CSS.

Encontré esta página con una muy buena lista de bibliotecas de IU web , pero la mayoría de ellas (al menos las buenas) parecen ser específicas de Java, ¿hay alguna alternativa igualmente buena en CSS puro o JS?

PD: No estoy interesado en AJAX, efectos, comportamientos, etc. ... mi principal (única) preocupación es el estilo.

Gracias por todas las sugerencias a todos!

Después de una consideración muy cuidadosa de todas las bibliotecas de UI sugeridas, he llegado a la conclusión de que ExtJS y Qooxdoo son los que más se ajustan a mis necesidades. jQuery UI parece prometedor, pero solo ofrece una cantidad reducida de elementos.

En cuanto a las bibliotecas exclusivas 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.

¡Hora de aprender ExtJS ahora! =)

Haga una pareja con alguien que se especialice en el diseño de la interfaz de usuario.

Si es mejor para lidiar con la lógica de negocios, es mejor que dedique su tiempo exclusivamente a codificar la lógica de negocios para que pueda dominarla. Esto requerirá que aprenda cómo interactuar con alguien más que sobresalga en la presentación. ( xml y json son medios comunes)

La lógica de negocios y la presentación son muy diferentes. Diseñar un sistema que no solo se ve bien, sino que es intuitivo y fácil de usar es bastante difícil. Igualmente 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 marco CSS.

Me considero un programador más "creativo" que sobresale en la presentación. Tuve la suerte de cruzar el camino con alguien que estaba, en primer lugar ... muy motivado y, en segundo lugar, muy bueno en "lógica de negocios". Tenía mucha más experiencia en la planificación e implementación de sistemas complejos, mientras que principalmente me he centrado en el diseño de interfaces.

Si eres más productivo en la arquitectura del sistema, la planificación, el desarrollo, lo que sea ... debes empujarte en esa dirección. Si bien los proyectos de desarrollo individual pueden ser satisfactorios, lo veo como ineficiente. Es muy raro que alguien posea habilidades para desarrollar aplicaciones de alto nivel en solitario.

El desafío es encontrar a alguien con quien trabajes bien.

¿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 cargar esto en un servidor o ejecutarlo en su computadora como un ejemplo de trabajo.

Puede crear formularios, enlaces, pestañas, rollovers, efectos de Javascript.

¿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 diferentes widgets here

Consulte Google Web Toolkit . Tiene un aspecto predeterminado bastante limpio. Ellos tienen examples . En particular, su ejemplo de Showcase muestra todos los widgets disponibles y el estilo CSS utilizado para lograr el aspecto.

Esto no lo ayudará en su proyecto actual, pero vale la pena considerarlo para proyectos futuros. Después de pasar muchos años creando aplicaciones de GUI en HTML 4 y luchando constantemente contra las limitaciones de CSS y HTML, pensé que probaría 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 nada malos. No digo que reemplacen completamente el HTML, pero si necesita widgets y diseño de GUI, creo que son una alternativa mucho mejor.

Existen algunos frameworks dirigidos al (G) UI Design; 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 suelen ofrecer una variedad de elementos alimentados con JS (elementos de formulario, como campos de entrada y botones de envío, pero también otros elementos como pestañas). Sin embargo, dependerá de usted posicionar estos elementos, y tal vez diseñarlos, a su gusto.

Quizás familiarizarse con un marco CSS (como 960gs ) podría complementar los marcos de la interfaz de usuario JS anteriores.

(Como una exención 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 no puedo).

Las maquetas de wireframe como esa son una manera brillante de comenzar.

Después de haber utilizado la mayoría de los frameswroks UI discutidos aquí, me gustaría dirigirlo hacia jQueryUi por las siguientes razones:

  1. El framework jQueryUI CSS se encarga de que el CSS sea coherente y atractivo (es muy fácil, solo márquelo y aplique las clases)

  2. jQueryUI tiene tabcontrol y se amontona en formas fáciles y rápidas de modelar formularios.

Me encontré con esto hace un rato, y no pude encontrar nada, así que lo tomé como una oportunidad para aprender css. Pero desde entonces parece que se han logrado grandes avances en este tema.

  • Resumiendo su problema, hay una página de wikipedia .
  • Hay YAML , que toma yaml y lo convierte en css
  • Hay una Baseline , pero supone cierto conocimiento de CSS.
  • También sugiero que busque Adobe Dreamweaver . Tienen muchas herramientas de generación de css y estilo que producen código muy legible y compatible con w3c.

Espero que eso ayude.

Me gusta RocketCSS . Buen diseño limpio, pruébalo.

Me gusta agregar Bootstrap es intuitivo y potente marco de front-end para un desarrollo web más rápido y fácil.

No puedo creer que nadie haya mencionado:

http://www.extjs.com/

Es un framework js comercial, pero bastante asequible, y hace que armar una agradable interfaz de usuario sea muy fácil. Hay un conjunto de elementos mucho más completo que jqueryui, y está diseñado para hacer una aplicación completa. Solo he jugado un poco con eso, pero realmente lo amo hasta ahora. Gratis para uso personal.

Si realmente quieres tener una idea de una interfaz de usuario completa desarrollada con EXT, prueba esta url:

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

Recientemente descubrí un buen sitio web llamado iplotz.com donde puede crear una maqueta de su 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 aún no lo intenté, pero lo analicé un poco y me pareció genial. Probablemente lo use pronto.

Si se dirige a navegadores modernos que no son de IE, entonces debería verificar Sproutcore . Para las maquetas, utilizo mockingbird .

Si ya está utilizando maquetas balsámicas para sus prototipos, entonces 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".

Un marco PHP relativamente nuevo diseñado específicamente para el desarrollo de software enfocado en la interfaz de usuario. Los elementos que tienes aquí incluyen pestañas, filtros y grillas están incluidos y te llevarán unas 20 líneas de código para implementar.

http://agiletoolkit.org/

Una combinación de 960gs para herramientas de diseño y jQuery-UI o Jquery es genial, los utilizo casi en todos los proyectos pero me gustaría agregar a http://easyframework.com/ aunque no es amigable para los negocios, así que asegúrate de consultar su licencia pero me gusta

Una combinación de 960gs para el diseño y jQuery-UI para el diseño es probablemente lo que buscas.

También podría considerar el marco CSS de modelo en lugar de 960gs.

Sass parece que tiene potencial como una forma de mitigar algunos dolores de cabeza css.