Как улучшить CSS, выложить дизайн и Программирование пользовательского интерфейса?

Я хорошо знаком с CSS и использовал довольно много javascript и jquery, также мало опыта разработки макета и тесного взаимодействия с Photoshop. Но, как-то я не чувствую себя так же уверенно, как при программировании с базой данных или на стороне С# и сталкиваются с множеством проблем, когда я работаю с проектированием пользовательского интерфейса и выделением элементов так, как я хочу, например. Например, файл .psd, который разработчики дают вам... и вы хотите, чтобы ваша страница выглядела точно так.

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

ОТВЕТЫ

Ответ 1

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

Я обнаружил, что ответы на вопросы на этом сайте тоже помогли мне - вы узнаете, что именно вы знаете, и вы больше осознаете области, в которых вам нужно улучшить

Я думаю, что очень важно знать, как работает box-model, и как заставить ее работать для вас во всех браузерах - есть несколько действительно простых фундаментальных правил, которые, когда соблюдаются, помогают вы должны убедиться, что ваше тестирование x-broswer не больно - зная, как добавить дополнение или маржу к чему-то, не нарушая ваш макет, вы можете быть точным с вашими проектами - я использовал, чтобы оставить 20 пикселей на более горизонтальном пространстве в своих контейнерах в качестве способ сделать мои столбцы никогда не выпадают с края страницы, но теперь, когда я знаю, как работает модель-ящик, я могу использовать точные ширины, высоты, отступы и разметку, которые подробно описаны в макетах, которые я дано

Я лично рекомендую использовать рамки семантической таблицы стилей. Я предлагаю Blueprint семантику (хотя YUI и 960 тоже классные) - на самом деле переход на CSS-структуру - это, пожалуй, одна из самых важных изменений В прошлом году я сделал свой стиль кодирования, и это помогло мне понять, что почти все проблемы с x-браузером, которые у меня были, легко исправить без особых проблем.

Если вы еще этого не сделали, добавьте "CSS" и "HTML" в список "интересных тегов" в stackoverflow и прочитайте столько, сколько сможете., Отвечайте на вопросы, принимайте голоса на подбородке, наслаждайтесь голосами и продолжайте пытаться помогать другим со своими проблемами.

Одна вещь, которую многие забывают, такова: CSS на самом деле действительно сложный язык. Там, черт возьми, намного больше, что встречает глаз, и это очень сложно освоить - just.keep.fighting.the.good.fight

Ответ 2

Практика, практика, практика.

Я бы просмотрел веб-страницы для существующих шаблонов или сайтов и попытался их тиражировать на практике.

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

Ответ 3

Я бы посмотрел в "Семантический HTML" http://en.wikipedia.org/wiki/Semantic_HTML

Также смотрите в Doctypes: http://htmlhelp.com/tools/validator/doctype.html

Те 2 вещи, которые когда-то были освоены, помогли мне написать правильный x-браузер css, который может выглядеть точно как comps, когда вам это нужно.

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

Хорошая вещь, которая, как правило, помогает x-browser css также для новичков, хороша reset.css: http://meyerweb.com/eric/tools/css/reset/

Ответ 4

Я бы также изучил область удобства использования пользовательского интерфейса. useit.com - хороший источник.

Ответ 5

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

Однако вы обнаружите, что книги дают вам более полную картину всего процесса и многому научат вас тому, что отдельные сообщения в блогах не могут вас научить. Интернет - это ссылка; вы должны знать, что искать, но книга предоставит вам полезные советы, о которых вы, возможно, и не подумали.

Ответ 7

У меня тоже было это расстройство (я думаю, многие делают). Одна из особенностей, которая смягчила некоторые из этих расстройств, заключалась в изучении значимости классов и идентификаторов (например, идентификаторы упрощают javascript, классы способствуют крупномасштабным изменениям). Это может звучать очень просто, но для меня это был большой шаг. Я предполагаю, что я говорю, что вам просто нужно потратить время на это. Не уклоняйтесь, потому что это пугает или расстраивает. Это просто требует времени.