iWebkit как способ оптимизировать свой сайт под iPhone.

Вчера мной была замечена библиотека разработки сайтов оптимизированных для iPhone и iPod Touch под названием PastryKit, библиотека включает в себя сборник из css и javascript. Все бы хорошо, но Apple не позаботилась о сторонних разработчиках и забыла (или не захотела) включить добавить документацию к своей разработке.


Недавно для меня была поставлена задача оптимизации моего сайта, для таких девайсов как iPhone, iPod Touch и для аппаратов использующих Android.
Для этого я выбрал другую, более легкую библиотеку под названием iWebkit, о которой сейчас и пойдет речь.

Первый пост на Хабре, так что не ругайте особо.

Дизайны Apple будоражат умы миллионов. Статья содержит 30 дизайн концептов продуктов в стиле Apple. Позволю себе несколько вольный перевод статьи, скорее даже пересказ.

iPhones

IPhone Elite
Когда Apple запустила продажу iPhone, репортеры спросили у Стива Джобса: «Стив, че это у тебя за труба без клавиатуры?». Стив улыбнулся — только он знал о новом концепте iPhone Elite c механизмом Dual-Slider. Концепт Mat Brady.




Далее вас ждет траффик.

Этот пост — попытка обобщить мой небольшой опыт продвижения программ в АппСтор и начать обсуждение способов продвижения

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

Сейчас после двух месяцев стремительного набивания шишек, места на моей голове уже почти не осталось — как следствие пора делится опытом и очищать место под новые :)

В Google Calendar кроме прочего имеется возможность импорта событий в формате iCal. Посему потребуется сервис отдающий расписание в указанном виде. Например этот. Там необходимо зарегестрироваться, затем появиться возможность забрать ссылку на iCal-файл:


Затем отдаём ссылку календарю:


Ура! Теперь известно когда какой сериал выходит. Разумеется, на www.pogdesign.co.uk/cat вы можете применить фильтр и получать только самые любимые шоу.

Спасибо за внимание.

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

Уже достаточно давно пытаюсь заставить себя изучить очередной язык/платформу для программирования под Mac OS X/iOS. Интересует именно разработка приложений с нативным GUI, так как консольные приложения можно разрабатывать на чем угодно, начиная с C и C++ и заканчивая модным сейчас Nodejs. Как показала практика, кроссплатформенные фреймворки вроде Qt тут мало подходят, хотя бы потому что не обеспечивают нативный Look and Feel, к которому привыкли пользователи этой ОС.

На хабре есть достаточное количество материалов по языку Objective-C и фреймворку Cocoa. С точки зрения GUI, интерес представляет именно Cocoa, а тут большинство статей ограничивается кнопочками и текстовыми полями. Постараюсь исправить это недоразумение и описать работу с Table View на примере приложения, отображающего список процессов.

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

Проблема

Не так давно мне потребовалось обновить своё резюме. Последний раз я это делал несколько лет назад, так что решил написать резюме с нуля.

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

Предисловие

Приветствую вас хабролюди. Недавно сбылась мечта всей моей жизни и я купил себе Mac (13’ unibody). Поздний 2008, но для нашей деревни сойдет. С тех пор начал потихоньку вникать в разработку приложений для iOS (в частностни для iPhone).

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

Доброго времени суток уважаемые хабраюзеры. На сегодняшний день Parallax Scrolling является неким трендом и я хочу рассказать о простой реализации данного эффекта. Техника основана на скорости изменения свойства background-position. Эффект Parallax Scrolling заключается в том, что фон движется медленнее чем содержимое

HTML разметка

Создаем два блока с атрибутами "data-type" и "data-speed":

<section id="home" data-type="background" data-speed="10" class="pages">
         <article>Простая техника Parallax Scrolling</article>
</section>
<section id="about" data-type="background" data-speed="10" class="pages">
         <article>Простая техника Parallax Scrolling</article>
</section>

Для управления значениями скорости и позиции в JavaScript, data-type используются как ключевые атрибуты при передачи необходимых параметров.

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

Суть метода сводится к использованию псевдокласса nth-of-type: количество и ширина колонок меняется на экранах разных размеров (Демонстрация).

Недостатки использования классов для первого и последнего элементов

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

Если вам не хочется использовать гифы на сайте, а предпочитаете PNG за их лучшую цветность, но всё же нужно анимировать их, тогда вот способ:

у анимаций CSS с ключевыми кадрами есть свойство под названием animation-timing-function. Одна из его возможностей — использовать функцию steps(), как в нижеследующем примере:

div {
    animation: play 1s steps(10) infinite;
}
@keyframes play { 
      0% { background-position:    0px 0; } 
    100% { background-position: -500px 0; }
}

Различие между нею и остальными анимационными функциями состоит в том, что вместо плавного движения от 0px к −500px происходят резкие прыжки с паузами между ними. Это идеально подходит для анимаций, использующих лист с покадровым изображением спрайта. В вышеприведённом примере шаг равен 50px, а пауза — 100 миллисекунд (всего 10 шагов).

Вот небольшое демо.

В этой статье собраны полезные  и «правильные» стили и сниппеты, которые помогут ускорить процесс разработки сайта, а также оптимизировать верстку.

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



Демонстрация | Исходники

Использование CSS-спрайтов на сайте позволяет повысить производительность и грамотно организовать элементы интерфейса.



Sprite Sheet — это одно большое изображение мелких графических элементов сайта, например иконок или кнопок. И благодаря CSS можно отображать каждый элемент отдельно.

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

Всем доброго времени суток!
В этой, думаю, маленькой статье я хочу описать как я изучал, боролся и победил jQuery File Upload.

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

Продолжаем изучать SVG-графику, на этот раз коснемся стилизации.
Первая часть: Знакомство с SVG-графикой.



Демонстрация примеров / Скачать исходники

Изменение внешнего вида SVG-элементов аналогично HTML, с некоторыми особенностями. Например фон назначается свойством fill, а не background-color, граница — stroke вместо border. Если вы работали с Adobe Illustrator, подобная терминология будет знакома.

“Atmadm” 
Раньше наша работа была кошмаром из нагромождения букв.
“chkntfs”
“dir”



Тогда, в 1984, адаптировав Ксерокс ПАРК ВИМП, Эпл забросила нас вперед на целый галактический прыжок вдаль от этих ужасных командных строк ДОСа, в мир графических пользовательских интерфейсов [ПИ].


Эпл Лиза

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

В подборке сервисы, плагины, темы и другие полезности, облегчающие работу с Twitter Bootstrap.

Стилизация

BootSwatchr — быстрая стилизация Twitter Bootstrap.

Попросили вот здесь про Sciter слово замолвить… Собственно вот рассказываю.

Sciter есть встраиваемый HTML/CSS/scripting engine для создания UI десктопных и мобильных приложений, классических так и [occasionally-]connected.

В принципе поддерживаются разные парадигмы приложений ограниченные лишь фантазией разработчиков. Например одной фирмой была сделана телефонная система со smart desktop phones на которых работал Sciter-based client — фактически специализированный browser загружающий UI (HTML,CSS, scripts и images) с системного контроллера станции по специализированному протоколу.

Другой пример: фирма Symantec использует sciter как UI для их consumer продуктов — Norton Antivirus со товарищи (since 2007).


На картинке: sciter.exe demo проект из SDK + открытое окно DOM inspector'а, живет в inspector32.dll (исходники в SDK). inspector.dll можно использовать в своем проекте для отладки UI. Естественно что inspector UI есть опять же HTML/CSS/script + толика native code.

Это не попытка создать список всех существующих инструментов для CSS разработки. Только некоторые, наиболее полезные были отобраны и размещены в соответствующих категориях.


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