Общие стили веб-интерфейса

В следующие дни я должен представить прототип веб-приложения одному из моих клиентов. Дело в том, что я не очень хорошо разбираюсь в CSS, и, что хуже всего, я почти никогда не доволен полученными результатами.

Кодирование бизнес-логики не представляет для меня проблем, однако дизайн пользовательского интерфейса занимает более 80% моего времени. Мне не нужно ничего захватывающего, просто чистая, красивая и презентабельная обстановка, пример:

Это повторяющаяся проблема, с которой я сталкиваюсь, я бы хотел, чтобы разработка веб-интерфейса имела менее простой стиль по умолчанию , подход, подобный Visual Studio или iPhone SDK, был бы мне очень полезен.

Вышеупомянутый макет, созданный с помощью Balsamiq Mockups, является отличным примером, все наиболее распространенные «компоненты» доступны для использования, и самое главное: есть только один красивый стиль на выбор.

Есть ли что-то подобное в сети? Нейтральный, но приятный фреймворк пользовательского интерфейса CSS или Javascript?

Варианты на данный момент:

• Бутстрап
• Qooxdoo
• jQuery UI
• Инструменты jQuery
• MochaUI
• Внешний JS
• Yahoo! Библиотека пользовательского интерфейса
• BlueTrip
• BluePrint
• Уки ( Демо )
• Napkee
• YAML
• Исходный уровень
• iPlotz
• Росток
• ForeUI

Мне интересно узнать, есть ли какие-либо фреймворки пользовательского интерфейса только для CSS.

Я нашел эту страницу с очень хорошим списком библиотек веб-интерфейса , но большинство из них (по крайней мере, хорошие) кажутся специфичными для Java. Существуют ли не менее хорошие альтернативы в чистом CSS или JS?

PS: Меня не интересуют AJAX, эффекты, поведение и так далее ... моя главная (единственная) забота - стиль.

Спасибо за все предложения!

После очень внимательного рассмотрения всех предложенных библиотек пользовательского интерфейса я пришел к выводу, что ExtJS и Qooxdoo - это те, которые наиболее точно соответствуют моим потребностям. Пользовательский интерфейс jQuery кажется многообещающим, но предлагает лишь ограниченное количество элементов.

Что касается библиотек только для CSS, я считаю, что BlueTrip / BluePrint и темы, предложенные tambler, являются лучшими. Кроме того, кажется, что стоит изучить Flex и Napkee.

Время изучать ExtJS прямо сейчас! знак равно

Не могу поверить, что никто не упомянул:

http://www.extjs.com/

Это коммерческие js-фреймворки, но довольно доступные по цене, благодаря которым создание приятного пользовательского интерфейса не составляет труда. Есть гораздо более полный набор элементов, чем jqueryui, и он предназначен для создания целого приложения. Я только немного поиграл с ней, но пока она мне очень нравится. Бесплатно для личного пользования.

Если вы действительно хотите ощутить полный интерфейс, разработанный с помощью EXT, попробуйте этот URL:

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

Сочетание 960gs для макета и jQuery-UI для стилизации, вероятно, то, что вам нужно.

Вы могли бы также рассмотреть план основы CSS вместо 960gs.

А как насчет использования додзё и диджита ?

Dijit - это быстрый способ создания виджетов и элементов. Он также поставляется с 3 темами по умолчанию, которые легко изменить.

Хороший список разных виджетов здесь

Объединитесь с кем-нибудь, кто специализируется на дизайне пользовательского интерфейса.

Если вы лучше разбираетесь в бизнес-логике, лучше потратить свое время исключительно на кодирование бизнес-логики, чтобы вы могли ее освоить. Это потребует от вас научиться взаимодействовать с кем-то еще, кто преуспевает в презентации. ( xml и json - общие средства)

Бизнес-логика и презентация очень разные. Довольно сложно разработать систему, которая не только хорошо выглядит, но и была бы интуитивно понятной и простой в использовании. Так же сложно и отнимает много времени, как наладить внутреннюю работу сложного приложения.

Хороший интерфейс не так прост, как включить фреймворк css.

Я считаю себя более «креативным» программистом, который преуспевает в презентации. Мне посчастливилось встретиться с человеком, который, во-первых, был ... очень мотивирован, а во-вторых, очень хорошо разбирался в «бизнес-логике». У него был гораздо больший опыт планирования и реализации сложных систем, в то время как я в основном занимался дизайном интерфейсов.

Если вы более продуктивно занимаетесь системной архитектурой, планированием, разработкой, чем угодно ... вам следует подтолкнуть себя в этом направлении. Хотя проекты индивидуальной разработки могут быть весьма полезными, я считаю это неэффективным. Очень редко кто-то обладает навыками самостоятельной разработки приложений верхнего уровня.

Задача состоит в том, чтобы найти того, с кем вы хорошо работаете.

Ознакомьтесь с Google Web Toolkit . У него довольно чистый вид по умолчанию. У них есть примеры . В частности, их пример Showcase демонстрирует все доступные виджеты и стили css, используемые для достижения внешнего вида.

Есть несколько фреймворков, нацеленных на (G) дизайн пользовательского интерфейса; Qooxdoo , JQuery UI и MochaUI - лишь некоторые из них (хотя последний является скорее доказательством концепции, чем пригодной структурой). Эти фреймворки обычно предлагают множество элементов на основе JS (элементы формы, такие как поля ввода и кнопки отправки, но также и другие элементы, такие как вкладки). Тем не менее, вы все равно будете располагать эти элементы и, возможно, стилизовать их по своему вкусу.

Возможно, знакомство с CSS-фреймворком (например, 960GS ) могло бы дополнить вышеуказанные JS UI Framework.

(В качестве личного заявления об отказе от ответственности; у меня очень мало опыта работы с какой-либо из упомянутых выше структур. Но я уверен, что либо Google, либо SO могут предоставить ответы, которые я не могу.)

Это не поможет вам в текущем проекте, но стоит подумать о будущих проектах. Потратив много лет на создание приложений с графическим интерфейсом пользователя в HTML 4 и постоянно борясь с ограничениями CSS и HTML, я решил попробовать Adobe Flex. Какое улучшение!

Вместо того, чтобы имитировать элемент управления страницей с вкладками или сетку данных, с помощью Flex или Silverlight ваша разметка может просто указать элемент управления страницы с вкладками или сетку данных. И фреймворки поставляются со стилями по умолчанию, которые скучны, но совсем не плохи. Я не говорю, что они полностью заменяют HTML, но если вам нужны виджеты и макет графического интерфейса, я считаю, что они намного лучше.

Вы можете рассмотреть возможность просмотра следующего сайта:

http://themeforest.net/category/site-templates/admin-skins

Здесь можно приобрести несколько административных тем, которые могут удовлетворить ваши потребности.

Подобные каркасные макеты - отличный способ начать.

Используя большинство обсуждаемых здесь фреймворков пользовательского интерфейса, я бы советовал направить вас к jQueryUi по следующим причинам:

1. CSS-фреймворк jQueryUI позаботится о единообразном и классном CSS для вас (это действительно просто - просто сделайте разметку и примените классы)

2. В jQueryUI есть tabcontrol и множество простых и удобных способов стилизации форм.

Если вы ориентируетесь на современные браузеры, отличные от IE, вам следует попробовать Sproutcore . Для мокапов использую пересмешник .

Относительно новый фреймворк PHP, специально разработанный для разработки программного обеспечения, ориентированного на пользовательский интерфейс. Элементы, которые у вас здесь есть, включая вкладки, фильтры и сетки, включены, и вам потребуется около 20 строк кода для реализации.

http://agiletoolkit.org/

Вы пробовали Axure ? Это инструмент для быстрого создания каркасов, прототипов и спецификаций для приложений и веб-сайтов.

Он работает аналогично Balsamiq, но позволяет экспортировать ваши каркасы / прототип как HTML, CSS и Javascript.

Затем вы можете загрузить его на сервер или запустить на своем компьютере в качестве рабочего примера.

Вы можете создавать формы, ссылки, вкладки, ролловеры, эффекты Javascript.

Если вы уже используете Balsamic Mockups для своих прототипов, вам следует подумать о Napkee . Цитируя веб-сайт: «Napkee позволяет экспортировать мокапы Balsamiq в HTML / CSS / JS и Adobe Flex 3 одним нажатием кнопки».

Я столкнулся с этим некоторое время назад и ничего не нашел, поэтому я воспользовался этим как возможностью изучить css. Но с тех пор, похоже, в этом вопросе были достигнуты большие успехи.

• Обобщая вашу проблему, есть страница википедии .
• Есть yaml-css , который принимает yaml и превращает его в css
• Базовый уровень есть , но он предполагает некоторые знания css.
• Я также предлагаю посмотреть на Adobe Dreamweaver . У них есть много инструментов css и генерации стилей, которые создают очень читаемый и совместимый с w3c код.

Надеюсь, это поможет.

Комбинация 960gs для макета и инструментов jQuery-UI или Jquery - это здорово, я использую их почти в каждом проекте, но я хотел бы добавить на http://easyframework.com/, хотя это не подходит для бизнеса, поэтому обязательно проверьте его лицензия, но мне это нравится

Недавно я обнаружил хороший веб-сайт iplotz.com, где вы можете создать макет своего приложения / веб-сайта / проекта в Интернете, не устанавливая ничего. Он также имеет большинство общих элементов управления, а также гораздо больше функций для управления всем проектом и обмена им с другими в Интернете.

Признаюсь, сам еще не пробовал, но немного посмотрел, и это кажется довольно крутым. Я, наверное, скоро им воспользуюсь.

Похоже, что у Sass есть потенциал как способ смягчить некоторые головные боли css.

Мне нравится добавлять Bootstrap - это интуитивно понятный и мощный интерфейсный фреймворк для более быстрой и простой веб-разработки.

Мне нравится RocketCSS . Хороший чистый дизайн, попробуйте.