Подтвердить что ты не робот

Бесплатные инструменты для ускорения веб-разработки

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

Я регулярно являюсь разработчиком Java, и в последний раз я действительно сделал некоторые веб-разработки еще в конце 90-х, когда <p> был еще более популярен, чем <div>, а Javascript был передовой технологией (JQuery для ленивых bums в эти дни:)).

В любом случае, я действительно устарел. Веб-сайт в основном будет:

  • На основе Django
  • в основном обслуживают статические информационные страницы
  • у него будет страница с динамическими новостями и обновлениями (на основе возможностей администрирования Django)
  • и некоторые базовые приложения, которые я буду развивать (опросы, небольшое приложение регистрации и т.д.)

Моя проблема проектирования всего. Я нашел несколько хороших веб-основанных генераторов компоновки CSS, которые заставили меня двигаться, но я все еще чувствую, что теряю время, сглаживая файлы CSS и выравнивая <div> s.

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

Второе предложение Брэндона использовать CSS-структуру. Это не даст вам 100% свободы дизайна всего, что вам нравится, но это может значительно ускорить ваш процесс проектирования и освободить руки, чтобы сделать нужную вам кодировку.

Предложения Обновлено Июль 2013:

  • Twitter Bootstrap http://twitter.github.io/bootstrap/ - полная сетка, опечатка, структура прототипа виджета пользовательского интерфейса
  • Фонд ZURB http://foundation.zurb.com/ - адаптивная сетка, тип, структура прототипа виджета пользовательского интерфейса (аналогичная по объему Twitter Bootstrap, но чувствует себя "чище" в некотором роде).
  • 960 http://960.gs/ - система компоновки сетки
  • Триполи http://devkick.com/lab/tripoli/ - действительно хорошая типография, но без сетки.
  • YUI Grids http://developer.yahoo.com/yui/grids/ - очень настраиваемая (до точки переполнения) сетка.
  • Blueprint http://www.blueprintcss.org/ - сетка и базовая типография
  • BlueTrip http://www.bluetrip.org - гибридная система, смешивающая лучшую сетку Blueprint с лучшими типография Триполи.

Ответ 2

Я не буду врать тебе. Этот веб-сайт не лучший выбор, если вы ищете надежный совет по веб-дизайну. Qaru - сообщество программирования, и программисты редко знают что-либо о дизайне. Если вы хотите получить некоторые реальные советы, я бы настоятельно рекомендовал основные форумы по веб-дизайну и развитию в Интернете, особенно SitePoint.

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

НИКОГДА СКАЗАТЬ CSS РАСПОЛ ГЕНЕРАТОР EVER РАЗ! Если вы собираетесь серьезно попасть в разработке веб-страниц, то вы должны научиться семантическую XHTML и CSS первый. Хотя многие люди рекламируют W3Schools как окончательный ресурс, я рассматриваю его как ответ программистов (т.е. Не очень хороший), и предпочел бы, чтобы вы прочитали эту тему, используя... Google. Существует множество примеров великолепных веб-сайтов для поиска основ веб-дизайна/разработки, которые Google, вероятно, лучший веб-сайт для этой работы. Кроме того, с множеством новых веб-сайтов, предлагающих эту информацию, вы знаете, что она будет лучше, чем W3Schools. Вы серьезно захотите получить представление о написании своего дизайна, потому что в проекте будет намного сложнее исправить ситуацию.

Если вы собираетесь разрабатывать веб-страницы, было бы неплохо узнать, что на самом деле делает хороший дизайн. Откажитесь от CSS Vault для фантастического ресурса некоторых из наиболее продуманных веб-страниц, конечно, со всем исходным кодом нетронутым, чтобы вы могли играть со своим кодом и посмотреть, как они справились с некоторыми замечательными эффектами, которые они произвели. Я узнал больше, чем кое-что, с веб-сайтов, которые были показаны в CSS Vault. Кроме того, вы должны прочитать веб-дизайн с больших сайтов веб-дизайна/разработки. Два из моих фаворитов: SitePoint и A List Apart, два имени, которые вы будете видеть снова и снова, когда вы слышите, как люди говорят о ресурсах. Просмотрите эти веб-сайты, проверьте их форумы, посмотрите, что используют REAL веб-дизайнеры/разработчики, а не программисты.

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

Как только вы настроитесь на то, как выглядит хороший дизайн, и у вас есть ресурсы, необходимые для того, чтобы сделать что-то ценное, я предлагаю вам работать! В действительности, когда вы разрабатываете веб-страницу, вам действительно нужен текстовый редактор с функцией сохранения, программой обработки изображений, окном браузера и FireBug. IDE помогает многим людям, но если вы его используете, вам обязательно захочется работать в текстовом режиме. Я использую только NotePad ++ или Emacs, но многие люди любят использовать Aptana Studio, поэтому, возможно, стоит посмотреть.

Когда вы начинаете создавать код за своим сайтом, вы не можете пойти намного хуже, чем ваш любимый редактор IDE/Text Editor и средство управления исходным кодом. Как программист на Java, вы лучше подходите, чтобы говорить о программировании, поэтому я не буду читать вам лекции по предмету, который вы уже знаете.

В конце концов, веб-дизайн займет много времени, и многие из инструментов, которые мы выбираем для использования, мы утверждаем, будут "экономить время", в действительности очень мало сохраняют. Если вы не дизайнерский гуру, вам понадобится значительное количество времени для создания великолепного веб-сайта. Это факт жизни. Назовите меня старомодным (забавное слово из 21-летнего возраста), но я все еще думаю, что самый быстрый способ - набросать дизайн на листе бумаги (программа изображения, если это действительно необходимо), и просто выйти туда и черт возьми! Опять же, мне придется взять эту охоту на менталитет серебряной пули как черту программистов, которая на самом деле не поможет в проектировании, потому что разработка веб-страницы сильно отличается от написания Java-программы.

Короче говоря, игнорировать все, что вы читаете здесь, прочитать, что делают REAL дизайнеры, и просто сделать эту проклятую вещь!

Ответ 3

Там один совет, который экономит больше времени, чем любой другой, когда дело доходит до быстрой разработки сайтов с CSS-стилями и что ХРАНИТЕ ЕГО ПРОСТОЙ

Используйте привлекательный простой макет, который не требует совершенства пикселей, и который может "грациозно" ухудшаться в менее совместимых браузерах (IE6). Минимизируйте количество CSS и исправьте основные ошибки, упомянутые выше. Затем сосредоточьтесь на содержании и функциональности... настоящей работе

Ответ 4

В моей предыдущей работе я создал десятки шаблонов для сайтов.
Самый полезный, который я когда-либо обнаружил, - панель инструментов веб-разработчиков Firefox.
В нем много полезных инструментов. Моя любимая функция - возможность редактировать CSS и просматривать результаты в режиме реального времени. Это сохраняет весь цикл редактирования - загрузки - обновления. Остерегайтесь, например, несогласованности CSS! С головы до головы это самые важные ошибки.

ошибка с двойным краем [ошибка Google: ошибка с двойным краем]
некорректная (но более интуитивная) модель окна [google: box model]
некорректная (но более интуитивная) очистка флота [google: clearfix]

FireBug - еще один полезный плагин Firefox для более глубокого анализа.

Ответ 6

Я всегда находил Open Source Web Design, чтобы быть хорошим ресурсом, когда вы хотите начать что-то создавать.

Ответ 7

Не знаю, каким будет сайт, но подумали ли вы о том, как использовать CMS для предварительной сборки, например Drupal, Joomla и т.д.? Затем вы можете настроить шаблоны и т.д., А не беспокоиться о том, чтобы сделать это с нуля.

Ответ 8

Этот вопрос довольно старый, но так как мы в 2012 году, то только в том, что я отвечаю на свой вопрос с точной вещью, которую я искал, еще в 2009 году.

Twitter Bootstrap

Ответ 9

Посмотрели ли вы на рамки CSS? Если вы достаточно компетентны с CSS, то что-то вроде рамки может помочь ускорить процесс.

Ответ 10

Не забывайте firebug:), если вы беспокоитесь о том, чтобы настроить дизайн, это действительно здорово. С помощью функции проверки, позволяющей в реальном времени редактировать CSS вашей страницы.

https://addons.mozilla.org/en-US/firefox/addon/1843

Ответ 11

I второй список Jens Roland в рамках CSS.

Но я также предлагаю вам взглянуть на такие сайты, как Smashing Magazine. Вы можете найти эту статью, представляющую интерес, среди многих других. Они, как правило, делают много приятных и длинных mash-ups для веб-разработчиков, которые, по крайней мере, дадут вам вдохновение, если не прямое решение.

Ответ 12

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

Я отказываюсь вкладывать 10 минут, которые потребуется, чтобы узнать, основываясь на моих предыдущих опытах, но вы могли бы дать демо быстрый ход вокруг блока:)

Ответ 13

Я бы рекомендовал найти CMS-пакет, так как вы используете Django, загляните в django-cms. Он поддерживает TinyMCE и Markdown, поэтому обновление ваших страниц должно быть простым. Также django-cms хорошо интегрируется с интерфейсом администратора Django.

Ответ 14

  • Бумага для наброски дизайна
  • Текстовый редактор (предпочтительно настроенный для сохранения непосредственно на сервере разработки, локальном или иным образом) для записи исходного HTML/CSS
  • FireBug/IEDeveloperToolbar, чтобы проверять каждый элемент, который выглядит неправильно, и редактировать его CSS непосредственно в браузере, пока он не выглядит нормально, за которым следует коммит с текстовым редактором

Ответ 15

Если вы выполняете какую-либо разработку JavaScript, используйте расширенный редактор, который выделяет ошибки и предупреждения при вводе. Эта функциональность до недавнего времени была провинцией статических редакторов языка, но бесплатный NetBeans 6 достигает этого удивительного подвига. Традиционно вы впервые обнаружили опечатки JavaScript и простые ошибки при первой загрузке родительской страницы в браузер. Ускорение, которое вы получаете от возможности сократить эти итерации, является глубоким.

NetBeans 6 также подчеркивает ошибки CSS и является более чем способным редактором для большинства языков, которые веб-разработчик может использовать в наши дни.

Ответ 16

Вы также можете использовать www.zbugs.com - это поможет вам ускорить процесс сжатия и gzipping ваших файлов CSS и Javascript