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

Некоторое время назад у меня стояла задача сделать Ajax сайт работающий «как твиттер» но при этом индексируемый поисковиками.

Привет!

В 2009 году на «Rails Rumble» Лехом Кульвером и Крисом Ванстратом был создан замечательный инструмент — Hurl.

Hurl — это RoR приложение, предназначенное для того, чтоб посылать HTTP запросы. В целом, функциональность Hurl схожа с Curl. Идея и методы те же, но предназначение совсем другое.

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

Итак мы подняли и улучшили Hurl на своём хостинге — hurl.quickblox.com. Приложение настроено на EC2 инстансе, а данные хранятся на S3.

Несколько месяцев назад на Гитхабе появилась очень неплохая коллекция паттернов и антипаттернов JavaScript и jQuery на все случаи жизни. Автор проекта Shi Chuan проделал отличную работу, собрав десятки примеров кода из книг и других источников. Репозиторий уже набрал почти полторы тысячи подписчиков и активно пополняется. Всё очень удобно разложено по категориям и откомментировано. Наслаждайтесь!

Статей про SASS(SCSS), Less на хабрахабре уже полно, но на мой взгляд не хватает такой, в которой было бы немного реальной практики. Я постараюсь восполнить этот пробел. Около года назад одна из SASS-статей меня "зацепила", и с тех пор я полюбил эту технологию настолько, что ручной набор обычного CSS кода представляется мне лишней тратой времени. Сия статья посвящается тем верстальщикам (или web-программистам), которые про SCSS ещё не слышали, или же ещё не пробовали в деле. Более опытным товарищам, полагаю, в ней ловить нечего.

Что такое SCSS

SCSS — "диалект" языка SASS. А что такое SASS? SASS это язык похожий на HAML (весьма лаконичный шаблонизатор), но предназначенный для упрощения создания CSS-кода. Проще говоря, SASS это такой язык, код которого специальной ruby-программой транслируется в обычный CSS код. Синтаксис этого языка очень гибок, он учитывает множество мелочей, которые так желанны в CSS. Более того, в нём есть даже логика (@if, each), математика (можно складывать как числа, строки, так и цвета). Возможно, некоторые возможности SCSS покажутся вам избыточными, но, на мой взгляд, лишними они не будут, останутся "про запас".

Классный jQuery плагинчик может применить blur на любой html элемент.

Работает в canvas используя алгоритм StackBlur.



www.blurjs.com

Ура! Еще один, свеженький… чем он лучше других?



а) Новенький! Всегда, кто берется что-то делать, то обычно смотрит: есть ли в этом смысл, и если есть — делает это.
б) Красивенький! Можно не точить, а ставить из коробки. Основан на Bootstrap'е и иконках Glyphicons
в) Само собой мультиселект файлов, Drag&drop, прогрессбар и превьюшки фотографий.
г) Поддержка кросдоменного соединения, докачка и ресайз фоток на стороне клиента.
д) Готов для любой платформы сервера (PHP, Python, Ruby on Rails, Java, Node.js, и тому подобное.)

blueimp.github.com/jQuery-File-Upload

Поддержка браузеров:

github.com/blueimp/jQuery-File-Upload/wiki/Browser-support

Хорошие новости! Bitcasa запускается, и даёт бесконечное место под файлы!

Справка: Bitcasa — аналог Dropbox'а, но изначально нацеленный дать безграничное дисковое пространство. На данный момент есть клиенты для Mac OS X и Windows, версия под Linux в стадии «Coming soon...», будут ли клиенты для мобильных устройств пока не известно.

Сейчас регистрация только по приглашениям, либо по заявкам о предварительной регистрации (как в моём случае). Каждому пользователю выдаётся 10 приглашений.
Топик превратился в раздачу инвайтов. Налетай! =)

Kartograph — это новый фреймворк для создания интерактивных картографических веб приложений без использования Google Maps/Bing Maps или любого другого сервиса. Он создавался с учетом потребностей дизайнеров и журналистов.

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

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

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



Ссылка на проект: http://bit.ly/eyesim

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

Основная функциональность сервиса заключается в возможности любого пользователи сети Интернете указать адрес Интернет-ресурса в поле ввода, автоматически получить скриншот указанной страницы сайта и начать применять к полученной картинке фильтры, каждый из которых соответствует тому или иному ограничению в зрении, для некоторых фильтров также отображается регулятор степени данного дефекта зрения, например для потери центрального поля зрения (регулируется площадь поля, недоступного для просмотра). Также в симуляторе реализован функционал слежения за взглядом пользователя: выбранный фильтр привязан к курсору, таким образом передвигая указатель по интерфейсу пользователь симулятора может передвигать полученное поле дефекта по картинке, что позволяет эффективно обнаруживать области, полностью недоступные пользователям с ограниченным зрением. Данные о виде видимых дефектов для различных фильтров симуляторы были взяты из разработок Cambridge Design Center, других прикладных программ-симуляторов для операционных систем Windows, технических устройств и фильтров для эмуляции зрения людей с ограниченными возможностями.

Для кого может быть полезен такой проект:

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

2. Для некомерческой аудитории — каждый человек, владелец сайта, сервиса сможет проверить доступность своих ресурсов для людей с ограниченными возможностями;

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

2012, Любич М.В.

Добрый день Уважаемые!

В этом посте я хочу поделиться своими личными наблюдениями и выводами в области применения html5 & css3.

Как мы часто составляем спрайты:

1) Выделяем отдельные элементы из PSD для групировки в спрайт.
2) Для точного нахождения координат элементов спрайта рисуем сетку из линеек для верстальщика.
3) И тупенько через alt+tab переписываем координаты в css.

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

Еще один шаг к упрощению процесса верстки спрайтами нам предоставляют энтузиасты из Германии «We are kiss» с проектом Spritepad.

1) Вырезаете все что нужно из PSD-шки в png24 и закидываем по очереди в браузер.
2) Позиционируем, и справа получаем готовую css-ку, классы которой будут генерироваться на основе имен скинутых в браузер файлов.

Что делать, если разработка ТЗ не самого сложного проекта занимает пару месяцев? Какие шаги при разработке ТЗ могут уберечь от рисков и ошибок? В данной статье мы рассмотрим проблему не содержания документа, а методологию его разработки.

Как вы, наверняка, уже знаете, 29 февраля вышла Windows 8 Consumer Preview, а вместе с ней и 5-я platform preview версия Internet Explorer 10. В этой статье я расскажу о том, как подготовиться к новой версии IE. И хотя повествование будет вестись преимущественно вокруг IE10, многие из этих советов применимы и к другим браузерам, в том числе на других платформах.

1. Используете <!doctype html>

Первое, самое-самое-самое первое, с чего надо начать, — это убедиться, что все страницы вы отдаете с правильным doctype. В мире html5 это одна небольшая и очень простая строчка:

<!doctype html>

Это должна быть самая первая строчка, которую вы напишите. Если шаблон вашей страницы генерируется автоматически инструментами разработки и там нет этой строчки, поправьте шаблон. Если ваша CMS отдает страницы без doctype, обновите используемые шаблоны.

Доброго времени суток!



Несколько дней назад в свет была выпущена книга под названием "Decoding HTML5", в которой, как вы уже могли догадаться речь идёт о нововведениях, которые появились с приходом HTML5. Не сказал бы, что книга была очень интересна мне, т.к. об этих новых рюшечках нововведениях не писал только ленивый, но всё-таки повторить и закрепить материал было полезным делом. Тем более, что книга написана небезызвестным Джефри, а это значит, что читать её будет легко и приятно. Но хватит расхваливать автора, а перейдём к краткому содержанию книги:

В справочнике jquery.page2page.ru появилась документация jQuery UI. Помимо подробного описания каждого плагина, она содержит статьи о фабрике виджетов, с помощью которой можно создавать собственные подобные плагины, правилах темизации (оформления) виджетов UI, собственной системе позиционирования UI, а так же о расширенных анимационных эффектах, доступных при подключении jQuery UI к сайту. Ну и конечно же есть вводная статья с которой можно начать изучение jQuery UI.

Кроме этого, обновлена карта функций, в которую были добавлены методы с двух последних обновлений jQuery, а так же все плагины jQuery UI.

Каждый из нас, хоть раз при разработке мобильных версий сайта, задумывался о том, как можно ускорить процесс разработки, дебаггинга и быстрого просмотра изменений. Кто-то поднимал для этого локальный сервер, кто-то ставил эмуляторы, чтобы лишний раз не тянуться к телефону для просмотра, кто-то делал и более костыльные решения. Ребята из Adobe Lab позаботились о нас и выпустили сегодня прекрасное приложения для этих нужд. Барабанная дробь, встречайте — Adobe Shadow!

Adobe Shadow — это совершенно новый инструмент помогающий front-end разработчикам и дизайнерам максимально увеличить эффективность и скорость разработки мобильных версий сайтов за счет оптимизации процесса просмотра изменений и дебаггинга на мобильных устройствах. Shadow работает независимо от других продуктов от Adobe и пока совершенно бесплатен!

Компания ASUS официально представила на выставке Mobile World Congress 2012 гибридный PadFone – первое android-устройство, объединяющее в себе возможности смартфона, планшета и нетбука.

Привет хабраюзеры!

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

Так же хочу сразу отметить, что для одного человека, т.е. себя, я бы никогда и не думал выдумывать свой велосипед. В этом и смысл корпоративной тулзы — использовать её принято у нас в компании. В той же Jira скрины показывать, либо же клиентам отсылать.

В общем нашёл я прекрасный инструмент для рисования http://www.williammalone.com/articles/create-html5-canvas-javascript-drawing-app/ — интересный мануал по рисованию в HTML5. И совместил этот инструмент с тем, что было до.

Hewlett-Packard обновила версию своего кросс-платформенного (от IE8 до iOS5) фреймворка для создания легковесных и привлекательно выглядящих веб-приложений Enyo до версии 2.0b2 — разработчики сосредоточили своё внимание на наборе базовых виджетов и layout-библиотеке, не забыв об улучшениях в ядре фреймворка.

В частности, с нуля была переписана библиотека виджетов Onyx, хотя, первоначально разработчики планировали просто адаптировать виджеты из Enyo 1.0. Пример того, как выглядит UI Onyx можно посмотреть здесь, примеры организации элементов на странице с обновленным примером layout-библиотеки по этой ссылке.

[GitHub]

[Страница проекта]

UPD: Продолжение статьи с примером техзадания

Не так давно на хабре были две статьи (Согласно техническому заданию и А зачем мне ТЗ? Я и так знаю!) посвященные техническим заданиям. У меня обе статьи вызвали, мягко говоря, недоумение, в особенности статья «Согласно техническому заданию». На мой взгляд, это вообще вредная статья, которая приводит к неверному понимаю сути ТЗ. В связи с этим хочу выразить свой взгляд на этот вопрос. Не буду говорить обо всех тех. заданиях, слишком широка тема, но думаю смогу рассказать о ТЗ на сайт.

То описание технического задания, о котором речь пойдет ниже, не является пересказом ГОСТа, но скорее является его творческой переработкой, хорошо сдобренной горьким опытом. Описанный ниже подход к ТЗ не охватывает все аспекты сайтостроения, но задает общее направление.

Большинство сайтов можно отнести к маленьким и очень маленьким проектам, масштаба единиц человеко-месяцев. В силу малости размеров такие проекты спокойно поддаются хорошему продумыванию и легко реализуются с помощью водопадной модели, достаточно просто не лениться на каждом этапе разработки (от написания ТЗ до сдачи проекта). Применять к этим проектам гибкие методологии разработки нет смысла, а как раз есть смысл применять хорошее ТЗ. К тем сайтам, которые не попадают под водопадную модель не стоит применять описанный ниже подход.

1. Обоснование необходимости ТЗ

А зачем вообще нужно ТЗ на сайт? Заказчик говорит: «Нужен следующий сайт: каталог товаров, корзина, форма заказа, доставка, мы на карте, о нас, обратная связь». Что не ясно? Ничего необычного, всё обыденно и рутинно.

Разработчик отчетливо представляет, что нужно сделать, а сделать, в его понимании нужно вот так: