июля 5, 2011

Имиджевый сайт клуба

Дата проекта: Июль 2011

Тип сайта: Имиджевый сайт клуба швейцарского шоколада

Поставленная задача: Интернациональный сайт, содержащий небольшое количество текстовой информации, интересно оформленные фото.

Срок разработки: 10 дней

Использовались: CMS WordPress, HTML5, CSS3, PHP, JQuery, Ajax

Оптимизирован для просмотра на планшетных компьютерах.

Полное соответствие стандартам W3C, кроссбраузерность.

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

Для вёрстки шаблона использовались современные технологии: HTML5, CSS3.
Динамичность странице придаёт слайдер с фото шоколада.
Отображение всего материала происходит без перезагрузки страницы – применяется технология Ajax.


Комментарии

  • Анатолий

    Просмотрел несколько Ваших последних работ – вы указываете, что используете HTML5 и CSS3. Я, как потенциальный заказчик, бегло знакомый с этой кухней, не понимаю в чём преимущество, перед “старыми технологиями”.

    • Преимуществ множество, вто только некоторые из них:

      1. Сокращение кода, например, раньше каждую страницу нужно было начинать:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>, теперь же достаточно написать:<!DOCTYPE html> чем меньше кода, тем быстрее грузится страница, тем довольнее Ваши посетители

      2. Многие графические свойства элементов можно описать двумя – тремя строчками кода (нпример тени, скруглённые углы рамок, градиенты, текстовые эффекты, повороты и трансформации элементов), а не загружать картинки. Этим мы опять таки добиваемся сокращения трафика и скорости загрузки страницы.

      3. Новая спецификация селекторов позволяет без использования фрэймворка jQuery решать простые задачи, например, чтобы добавить эффект ячейке таблицы под указателем мыши, теперь достаточно воспользоваться одной строчкой Javascript (document.querySelector(“td:hover”)), а не загружать 30 Кбайт кода jQuery.

      4. Расширение функционала за счёт встроенных средств браузеров (теги <audio>, <video>, <math>), а не дополнительно устанавливаемых плагинов. Для отбражения мультимедийного контента Вам не нужно заставлять пользователя устанавливать сторонее ПО (например флэш плеер и т.п), достаточно средств браузера.

      5. Возможность рисовать, строить диаграммы в браузере без использования Flash (тег <canvas>).

    • Евгений

      Из основных плюсов:
      – Разработка дизайна ускоряется, а разработка сайта удешевляется
      – Появляются новые возможности для дизайна, что позволяет сделать сайт динамичнее и красивее (один пример: теперь можно в зависимости от действий пользователя как угодно изменить закруглённость углов, а раньше под каждый вариант нужно было бы рисовать этот закруглённый угол, что теряло бы смыл при большом количестве вариантов)
      – Новые поля форм, такие как бегунки, прогрессбары и т.п. теперь встроены в браузер.
      – Возможность включить геолокацию
      – Возможность сохранять до 5 Мб на компьютере пользователя, что позволяет делать, например, сохранения для интернет-игр, ускорять загрузку страницы сохраняя важные файлы, чтобы каждый раз их не загружать и т.д.

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

      • “неработоспособность сайта на старых браузерах” – к счастью есть возможность обойти это через JS, например, я в своих проектах всегда использую скрипт от гугл html5

        • Евгений

          Ну вот, оставил лишь парочку комментариев к этой статье, а уже получил полезную информацию, спасибо! :)

  • Евгений

    “…используется заставка с возможностью выбрать один из шести языков.”
    А где шестой запрятан? :) Или это “школадный язык”? :) Интересный вариант!

    • Шестой видим только членам клуба ) – шучу…. Ошибка в описании, поправила