Рисование на JavaScript с помощью Paper.js, Processing.js, Raphael.js

При создании дизайна сайта, очень удобно использовать рисунки и анимацию основанную на JavaScript фреймверках. Это быстро, удобно и красиво.

Paper.js, Processing.js и Raphael лидирующие библиотеки для рисования на веб страницах средствами javascript. Вы можете использовать технологию Flash, но эти три отлично работают с HTML5 и поддерживают наибольшее число браузеров.

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

Несколько background с помощью CSS, или Multiple Backgrounds

Сегодня, практически в каждом дизайне сайта присутствует красивая background картинка.

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

Казалось бы, мелочь, но все же, порой нужно сотворить что-то сложное простым способом. Например, реализовать несколько background с индивидуальными параметрами, без использования вспомогательных div блоков. То есть, сохраняя семантическую верстку.

В этой статье мы рассмотрим синтаксис кода, который поддерживает несколько background (multiple backgrounds) в одном элементе.

Семантическая верстка: понятие и примеры семантического кода

Если вы тот, кто использует div теги для всего что есть на сайте, эта статья для вас. Мы сфокусируемся на том, как писать чистый семантический HTML код, используя валидную разметку. Вы увидите на практике, как можно минимизировать количество div тегов в вашем HTML коде. Вы научитесь семантической верстке не только в теории, но и на примерах. Написание правильных семантических шаблонов упрощает жизнь не только себе, но и команде в целом. Ну и проще для браузеров, которые интерпретируют код. Чем меньше кода, тем быстрее грузиться страница. Это также позволяет сохранить время и простоту понимания кода, при создании больших проектов. Другими словами, семантическая верстка – это необходимое условие создания качественного сайта.

Простой дизайн сайта – чем проще, тем лучше

В книге «Парадокс выбора», Барри Шварц пришел к интересному заключению, по отношению к человеческому выбору.

Люди выбирают, базируясь не на том, что важно, но на том, что проще оценить.

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

Давайте вернемся к нашему дизайну сайта. Мы представляем, что люди будут принимать информированные решения, что делать далее. Хотя, они за день принимают свыше 400 решений, которые гораздо важнее нашей структуры дизайна. Если вы не согласны, что простой дизайн сайта лучше, читайте статью до конца. Я уверен, она изменит ваше мнение о веб дизайне.

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

YouTube API: плеер с помощью YouTube API, jQuery, CSS

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

Слайдер картинок – метод увеличения конверсии трафика Лишь в недалеком прошлом, основным составляющим страниц интернет ресурсов был контент, а навигация осуществлялась с помощью разнообразных меню и ссылок реализованных с помощью различных языков (в том числе и невидимых для поисковых ботов). Из привлекающей внимание графической навигации можно было встретить лишь баннеры ведущие на внешние ресурсы, их основной задачей было и остается направление специфических (заинтересованных) пользователей на страницы предлагающие определенные товары или услуги. Сегодня же мы в нашей статье поговорим о слайдерах и проанализируем почему их популярность так возросла в последнее время.

Скрипт слайдера картинок: JS + HTML + CSS Сегодня мы научимся создавать слайдер картинок для вашего сайта, который будет компактным, быстрым и надежным. Весить такой скрипт будет около 2kb (JavaScript код). Разрешение слайдера будет 380 x 240. При желании вы сможете поменять на свое. Этот скрипт тестировался на кроссбраузерность в: IE, FireFox, Chrome, Opera.