Как стать автором
Обновить
24
Карма
0
Рейтинг

Пользователь

  • Подписчики 9
  • Подписки 11

Создание сайта из готовых компонентов на примере сайта заказа еды в офис

Drupal *
В окрестностях нашего офиса нет приличного общепита, поэтому обеды нам привозят на заказ из одного кафэ. Заказ осуществляется за день (на понедельник заказ делается с пятницы), по телефону, с перечислением всех блюд и их количества (в случае если заказ не изменился относительно вчерашнего достаточно просто сказать это). Как компания, занимающаяся разработкой ПО, преимущественно веб, мы до недавнего времени жили по принципу «Сапожник без сапог», и весь учет заказов велся ответсвенным за заказ еды человеком на листочке, в случае изменения заказа нужно было писать письмо этому ответственному человеку, а он уже пересчитывал общий заказ.

Выкроив немного свободного времени в перерыве между проектами реализовал (именно реализовал, а не написал — почему именно так, расскажу немного ниже) систему для заказа еды. За основу, как нетрудно догадаться исходя из тематики блога, была взята CMS Drupal, которая является моим основным инструментом уже около полутора лет.

Цели данного топика:
  • Показать новичкам на довольно простом примере, как создается сайт невысокой сложности на CMS Drupal
  • Кратко расказать про несколько основных модулей — как правило они применяются в 90% проектов на друпале
  • Показать как можно собрать сайт на друпале из готовых компонентов, не написав при этом ни одной строчки кода (на самом деле будет пара строк кода, но немного не в том виде, как он обычно пишется =))


Итак, что должно быть реализовано в проекте:
  • Меню — список блюд, разделенных на категории, с возможностью описания блюд
  • Индивидуальные заказы — пользователь может сделать и заказ, просмотреть его содержимое и изменить
  • Сводный заказ — список всех заказаных пользователями блюд с указанием их количества
  • Возможность делиться впечатлениями о блюдах — тут просто возможность комментирования и рейтингования

Поехали
Всего голосов 100: ↑94 и ↓6 +88
Просмотры 8.2K
Комментарии 117

Закрепляем jQuery — 25 отличных советов

jQuery *
Перевод
Перевод отличной статейки. Думаю, будет полезна как новичкам, которые только приступили к использованию jQuery, так и тем, кто уже какое-то время с ним работает. А кого-то, возможно, заставит глянуть эту чудесную библиотечку. Многие советы имеют отношение не только к jQuery, но и к JavaScript в целом. Лично для меня была весьма и весьма познавательной, посему и захотелось донести это «до масс». Перевод не дословный, но передающий смысл и максимально адаптированный к русскому языку.

Далее все написано от имени автора оригинальной статьи.

Введение


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

Я не эксперт в jQuery. И даже не претендую, поэтому, если встретите ошибки, смело поправляйте меня и вносите предложения по улучшению (поправлять и присылать поправки нужно автору статьи, а не перевода — зам. пер.).

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

Содержание


  1. Загружайте фреймворк с Google Code
  2. Используйте «шпаргалку» (cheat sheet)
  3. Соединяйте все ваши скрипты и уменьшайте размер файла
  4. Используйте возможности Firebug для ведения логов
  5. Минимизируйте операции выборки в пользу кэширования
  6. Сводите манипуляции с DOM-деревом к минимуму
  7. Оборачивайте все в единый элемент, когда речь идет о любой вставке в DOM
  8. Используйте «id» вместо классов, где это возможно
  9. Задайте контекст своим селекторам
  10. Используйте последовательности вызовов методов с умом
  11. Научитесь правильно использовать анимацию
  12. Научитесь назначать и делегировать события
  13. Используйте классы для сохранения состояния
  14. Еще лучше — используйте встроенный в jQuery метод data() для сохранения состояния
  15. Пишите собственные селекторы
  16. Подготавливайте HTML и модифицируйте его, когда страница загружена
  17. Используйте «отложенную загрузку» (lazy loading) для определенного контента для выигрыша в общей скорости и преимуществ для SEO
  18. Используйте служебные функции jQuery
  19. Используйте «noconflict» для переименования глобального объекта «jquery», когда используете его с другими фреймворками
  20. Как узнать что картинки загружены?
  21. Всегда используйте последнюю версию
  22. Как проверить, что элемент существует?
  23. Добавляйте класс «JS» в элемент «html»
  24. Возвращайте «false» для отмены поведения по-умолчанию
  25. Короткая запись для события готовности документа


Rock'n'Roll!
Всего голосов 188: ↑182 и ↓6 +176
Просмотры 166K
Комментарии 109

8 отличных хитростей jQuery

jQuery *
Перевод
imageКому не нравится jQuery? Это быстрая и простая javascript-библиотека стала очень популярной в 2008 году. В этой статье я собрал список восьми очень полезных jQuery-техник, советов и хитростей.
Читать дальше →
Всего голосов 122: ↑95 и ↓27 +68
Просмотры 28K
Комментарии 85

Используем любой шрифт с Javascript.

JavaScript *
Все мы знаем прекрасные библиотеки sIFR3 и FLIR, которые на лету помогают использовать любой шрифт на веб-страницах.
Правда, с моей точки зрения, их использование (а именно установку и настройку) нельзя считать легким трудом.

Сегодня я расскажу о библиотеке Typeface.js, которая, как видно из названия, работает на чистом JavaScript.

Читать дальше →
Всего голосов 125: ↑119 и ↓6 +113
Просмотры 19K
Комментарии 44

Captchaad — Каптча с рекламой

Я пиарюсь
Побывал сегодня на Startup Camp'е в Кёльне: встреча начинающих и далее продвинутых предпринимателей, инвесторов и СМИ в сфере IT, Web 2.0, Software, Mobile & Medien. Из всех презинтирующих стартапов на меня лично произвел сильное впечатление своей ясностью и потенциалом один, о чем и хочу поделиться:

Читать дальше →
Всего голосов 88: ↑72 и ↓16 +56
Просмотры 585
Комментарии 82

Верстка: реализация «резиновых» кнопок

Разработка веб-сайтов *
Практически на каждом сайте нужно реализовывать меню. Обычно в этом нет никакой проблемы — заворачиваем все в ненумерованный список — ul, прописываем все наобходимые стили и готово.
Но очень часто дизайнеры, пытаясь создать очередной мегаопупительный макет, делают какие-либо 3D кнопки, либо кнопки с закругленными краями и кучей градиентов, либо еще что либо ужасное :)

Речь в данном топике пойдет о том, как реализовать такое меню, с учетом того, что размеры каждого пункта меню не фиксированны, то есть могут «тянуться».

Читать дальше →
Всего голосов 56: ↑49 и ↓7 +42
Просмотры 5.7K
Комментарии 56

ExtJS, Adobe AIR и технология PixelBender — красиво, ничего не скажешь!

Библиотека ExtJS/Sencha *
animsДавно не появлялось чего-то новенького об ExtJS, видимо все готовятся к анонсированной конференции (я уже писал об этом), а те, что останется в уютных домашний креслах — к анонсу ExtJS 3.0. Но сегодня заглянув в официальный блог компании, я нашел интереснейшую заметку. Как уже известно, в последние версии ExtJS начали активно внедрять поддержку платформы Adobe AIR, что не может не радовать, ведь именно симбиоз этих двух потрясающих инструментов может дать, в умелых руках, конечно, просто отличные результаты.

В Flash 10, а значит и в Adobe AIR 1.5 в его именно флешевую часть была внедрена интересная технология, по сути, полного управления всем отображаемым на экране — PixelBender. При помощи специального языка программирования GLSL (OpenGL Shading Language) разработчик может описывать операции над пикселями, при этом программа может быть применена не только к картинке, а к любому флеш-объекту, в том числе и целому окну или веб-странице. Кстати да, вы не ослышались, речь идет именно об OpenGL, а это нас приближает вплотную к возможности создать серьезные графические приложения, оперируя только обычными для веб-разработки инструментами. Если кто разбирается в 3D, то эта технология очень близка к пиксельным шейдерам, которые также программируются на своих языках.
Читать дальше →
Всего голосов 54: ↑47 и ↓7 +40
Просмотры 1.3K
Комментарии 55

Веб-типографика сегодня. Часть I

Типографика *
Часть IЧасть IIЧасть IIIЧасть IVЧасть V — Часть VI

Часть I



Как-то ко мне обратился знакомый дизайнер с просьбой разобраться в странной по его мнению ситуации. Клиент просил «сделать так же, как у Apple», но с использованием собственных способов расположения блоков, изображений, цветовой гаммы и текста. В общем, дизайн в итоге получался совершенно непохожий на apple.com, но этого, собственно, и добивался клиент. И вроде бы у дизайнера получилось, но… Клиенту по-прежнему не нравилось, он всё равно требовал переделать макет. По его ощущения «что-то было ну совсем не так». А что именно — тот объяснить был не в силах. Вот и возник вопрос у моего коллеги по поводу того, как угодить капризам клиента и понять его чаяния. Оказалось всё не так просто, но вполне объяснимо. Я и раньше сталкивался с данной проблемой. Поэтому решил попробовать изложить свои мысли по этому поводу.

Итак, какова ситуация в области современной веб-типографики и какими способами следует решать возникающие проблемы?
Читать дальше →
Всего голосов 128: ↑120 и ↓8 +112
Просмотры 27K
Комментарии 41

20 «НЕ» для веб-дизайнеров

Веб-дизайн *

У каждого дизайнера есть ряд правил, которыми он руководствуется в своей работе. И нередко памятки, составленные из таких правил от опытных дизайнеров служат хорошим подспорьем для начинающих. Некоторое количество таких правил у меня есть тоже. Правда, они касаются того, чего НЕ следует делать при изготовлении макета. Некоторые могут показаться банальными и очевидными, другие даже вызовут у кого-то недоумение. Но мне они очень помогают и, я надеюсь, какие-то из них так же будут полезны тем, кто занимается веб-дизайном или желает приобщиться к этой области разработки сайтов.
Читать дальше →
Всего голосов 196: ↑152 и ↓44 +108
Просмотры 11K
Комментарии 178

Иконка для Хаброчеловека

Работа с иконками *
image

После публикации предыдущей статьи (в том числе и на Хабре), я получил огромное количество отзывов от вас, дорогие мои читатели, что очень потешило мое самолюбие. В большом количестве комментариев и писем была просьба описать процес создания иконки более детально. А некто kovshenin даже настойчиво взывал нарисовать ему пандочку. Что ж, побуду сегодня в роли доброго дизайнера (отчасти я такой и есть) и постараюсь угодить всем!
Читать дальше →
Всего голосов 178: ↑156 и ↓22 +134
Просмотры 1.7K
Комментарии 148

Планарий. Легкое управление делами

Я пиарюсь
image Еще с момента поступления в университет я был постоянно в раздумьях о том, что дел-то как-то много стало, и в голове держать их все вместе сложно, поэтому пора уж заняться планированием. Было перепробовано множество способов, начиная с ежедневника и аутлука, заканчивая всевозможными сайтами. И чаще всего, тот или иной инструмент не устраивал по ряду причин.
Читать дальше →
Всего голосов 91: ↑87 и ↓4 +83
Просмотры 931
Комментарии 195

Превьюшки дизайнов — 2

Я пиарюсь
MakePreview.com - сервис для вебдизайнеров

В сентябре прошлого года я под действием очередного wow-импульса сделал веб-утилитку, хотя ладно, чего уж там — Сервис MakePreview.ru! — который решал одну маленькую, но надоедливую проблему: декоративное обрамление дизайна сайта окном браузера (самизнаетеоткого пошла такая мода, в историю вопроса углубляться не буду).

Так вот, все это время я не спеша совершенствовал сервис...
Всего голосов 83: ↑73 и ↓10 +63
Просмотры 677
Комментарии 90

Новая версия проблем от AOL

Мессенджеры *
Вот снова повторяется история недельной давности. Контакт-лист в оффлайне, а милое «ICQ System» говорит мне, что версия протокола 5.1 is no longer supported.

upd: Судя по комментариям хабрапользователей, проблема наблюдается у многих.
Страдают пользователи из России и Украины.
Выявлены проблемы на Adium, Pidgin. Miranda, QIP, R&Q в строю.

upd:
Новая версия QIP Infium: qip.ru/download/qipinfium9024.exe (прямая ссылка на скачивание с оф.сайта)
Новая версия QIP: qip.ru/download/qip8082.exe (прямая ссылка на скачивание с оф.сайта)

В Pigdin работает благодаря статье habrahabr.ru/blogs/ubuntu/49865

upd: Перенес в IM, спасибо! Ищем решения совместно.

Читать дальше →
Всего голосов 151: ↑108 и ↓43 +65
Просмотры 4.2K
Комментарии 479

Кроссбраузерная одноцветная полупрозрачность

Разработка веб-сайтов *
В этой статье я рассмотрю метод создания блоков с одноцветным полупрозрачным фоном.
Например, таких:


Сразу оговорюсь, что я не буду использовать opacity и абсолютное позиционирование, чтобы разместить контент поверх полупрозрачного блока.
Читать дальше →
Всего голосов 192: ↑186 и ↓6 +180
Просмотры 12K
Комментарии 80

Прозрачный png и IE7. Эффект появления.

Разработка веб-сайтов *
Доброго, Хабр.

Данная статья является ответом всем, кто «читал», «знает» и «разбирается» в проблеме описанной в http://habrahabr.ru/blogs/webdev/50353/.

Так сказать — наш ответ Чемберлену.
Читать дальше →
Всего голосов 82: ↑62 и ↓20 +42
Просмотры 1.4K
Комментарии 18

Памятка дизайнеру сайтов

Веб-дизайн *
Вторая версия статьи, расширенная и дополненая.

Большая часть готовилась для моего выступления на «РИТ: Клиентские технологии», куда я, к сожалению, не доехал.

 

Памятка дизайнеру сайтов

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

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

Читать дальше →
Всего голосов 453: ↑444 и ↓9 +435
Просмотры 234K
Комментарии 231

Тривиальные задачи по вёрстке

CSS *
image

Начинаю вести серию статей Это статья про вёрстку html css js, начинаю с самого простого, потом планирую описать более сложные вещи и всякие тонкости и этим видимо так и закончил

Читать дальше →
Всего голосов 275: ↑251 и ↓24 +227
Просмотры 58K
Комментарии 160

jQuery для начинающих

jQuery *
jQuery Logo

jQuery — это замечательный JavaScript Framework, который подкупает своей простотой в понимании и удобством в использовании. Но изучение надо с чего-то начинать, и лично моё мнение — лучше всего начинать с наглядных примеров, и они далее…

Читать дальше →
Всего голосов 256: ↑232.5 и ↓23.5 +209
Просмотры 409K
Комментарии 83

Анимированный фон средствами jQuery или «Эй, а ведь круто! Как Flash!»

Разработка веб-сайтов *
jQuery + CSS Sprite
Занимательные поделки от Джонатана Снука. Данная статья будет интересна скорее новичкам, нежели более умудренным разработчикам, хотя мистер Снук достаточно авторитетен и его методики могут быть полезны всем.
Любопытно... Что там у вас?!
Всего голосов 88: ↑82 и ↓6 +76
Просмотры 12K
Комментарии 38

Верстаем, верстаем и проверяем!

Разработка веб-сайтов *
После того, как макет господина dinamyte был любезно сверстан господином curlybrace пришла очередь немного протестировать то, что получилось — похвалить, покритиковать и отработать некий механизм тестирования готовой верстки, для всех, кто в этом нуждается.

Наша задача:


  • найти ошибки
  • исправить ошибки
  • больше не допускать этих ошибок
  • составить некий алгоритм проверки качества верстки сайта, и предупредить проблемы, которые могут возникнуть уже в процессе «натягивания»

Читать дальше →
Всего голосов 105: ↑90 и ↓15 +75
Просмотры 3.3K
Комментарии 76

Информация

В рейтинге
Не участвует
Откуда
Смоленская обл., Россия
Дата рождения
Зарегистрирован
Активность