css

Веб-разработка / Эмуляция интерфейса iPhone с помощью CSS

Ноябрь 5th, 2011 matiouchkine
UiUiKit Некоторое время назад мне потребовалось «красиво» оформить логи бесед в жаббире. Поскольку рисовать я не умею вовсе, я обратился за подмогой к мирозданию. Поиск по готовым решениям открыл для меня малоизвестную, но, безусловно, заслуживающую внимания библиотечку. Строго говоря, это не библиотека. Это тщательно написанная и выверенная каскадная таблица стилей, позволяющая имитировать iPhone-интерфейс в браузерах.
Координатные данные проекта UiUiKit (Universal iPhone UI Kit):

Оригинально библиотека заточена под web-приложения именно для iPhone, поэтому всякий CSS3+ ограничивается указанием свойств только для webkit'а. Я пропатчил CSS директивами для остальных и развернул демонстрационную страничку, чтобы можно было сразу потыкать в элементы интерфейса.
Выглядит симпатично (на картинке в начале топика — скриншот моего браузера). Приятного использования!
Posted in css, iPhone Комментарии отключены

Веб-разработка / Подборка скриптов для создания галереи на php

Октябрь 30th, 2011 UksusoFF
Искал я на просторах Интернета всего лишь скрипт для создания индекса изображений с lightbox и генерированием thumbnails. Помимо того что меня полностью устроило (phppi), нашел довольно интересную подборку галерей. В наличии комментарии и пояснения, думаю будет полезно новичкам да и бывалым время сэкономит.

Fullscreen Gallery with Thumbnail Flip



Читать дальше
Posted in css, gallery, jquery, php, tutorial Комментарии отключены

Веб-разработка / Как сделать один сайт для всех устройств (Responsive Web Design)

Июль 29th, 2011 Hellcunt
Вчера была опубликована хорошая статья «Веб-дизайн. Каждому устройству свое представление». Несмотря на неплохие размышления, к сожалению, вывод в ней довольно глупый. А именно:

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

Почему это глупо


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



Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).

Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности. Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».

Как сделать один сайт для всех устройств

Читать дальше →
Posted in css, html, media queries, mobile first Комментарии отключены

Веб-разработка / Визуализация DOM-дерева в 3D (расширение Firefox)

Июль 21st, 2011 alizar


Расширение Tilt для Firefox строит трёхмерную модель текущей веб-страницы, используя WebGL для быстрого рендеринга. Таким образом, можно мгновенно анализировать структуру страницы и взаимосвязи между разными частями.
Читать дальше →
Posted in 3D, css, dom, DOM-дерево, Tilt, z-index Комментарии отключены

Веб-разработка / [PODCAST] «Сделайте мне красиво!» Выпуск №30

Май 23rd, 2011 begebot
Вашему вниманию очередной выпуск подкаста о веб-разработке «Сделайте мне красиво!»

Show notes:


Наши ссылки: RSS и лента на rpod.ru
Posted in backbone, css, developer tools, dom, html5, jquery, paul irish, spine, strict mode Tags: No Comments »

Веб-разработка / [Перевод] Адаптивный и мобильный дизайн с CSS3 Media Queries

Май 12th, 2011 kostos
Разрешение экрана в наши дни колеблется от 320px (iPhone) до 2560px (большие мониторы) или даже выше. Пользователи больше не просматривают сайты только на настольных компьютерах. Теперь пользователи используют мобильные телефоны, небольшие ноутбуки, планшетные устройства, такие как iPad или Playbook для доступа в интернет. Поэтому, традиционный дизайн с фиксированной шириной больше не работает. Дизайн должен быть адаптивным. Структура должна автоматически изменяться с учетом всех разрешений дисплеев. Эта статья покажет вам как создавать кросс-браузерный адаптивный дизайн при помощи HTML5 и CSS3 media queries.
Читать дальше →
Posted in css, design, html5, media queries, mobile No Comments »

Веб-дизайн / [Перевод] Как проектировался новый Photo Viewer в Facebook

Февраль 15th, 2011 catscrossing
Это перевод поста из Facebook Engineering Blog, который интересен, наверное, даже не столько сутью решения, которое в нем описано, сколько рассказом о «кухне» разработки в Facebook. Речь идет об обновленном функционале просмотра фотографий, который появился в конце сентября 2010 г. и был немного еще улучшен на днях.

imageЗадумавшись об обновлении Photo Viewer, мы столкнулись с множеством трудностей. Очевидно, что фотографии это наиболее востребованная функция Facebook. Ежедневно наши пользователи загружают более 100 миллионов фотографий, а предназначенный для этого функционал был создан довольно давно и явно нуждался в доработке.

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

Как нам это удалось
Мы начали с составления списка текущих проблем:
  • Наибольшие проблемы возникали с надежностью. Изображения загружались медленно, и иногда процесс зависал на неопределенное время. Пользователям приходилось обновлять страницу в браузере, чтобы увидеть фотографии и комментарии к ним.
  • При просмотре фотографий из Ленты новостей приходилось либо открывать их в новой вкладке, либо мириться с тем, что после просмотра нужно было заново прокручивать ленту вниз, чтобы вернуться к предыдущей позиции. Для разбирающихся в компьютере людей это не составляло особых проблем, но многие из наших пользователей испытывали связанные с этим неудобства.
  • Функционал просмотра комментариев к фотографиям был также реализован не самым удобным образом. Процесс выглядел так – нужно было посмотреть фотографию, промотать страницу вниз, чтобы увидеть подпись и комментарии к ней, а потом вернуться обратно наверх, и так каждый раз.
  • JavaScript, предназначенный для загрузки и кэширования фотографий, а также для публикации комментариев, был также реализован не самым лучшим образом. Он оставался неизменным на протяжении многих лет, на фоне того, что технологии работы браузеров и требования к ним значительно ушли вперед.

Перед нами стояла задача решить вышеописанные проблемы и, в идеале, создать новый, более приятный в работе функционал, способный объединить просмотр фотографий, расстановку меток для людей на них, возможность комментировать и отмечать понравившиеся снимки «лайками».
Читать дальше →
Posted in css, facebook, веб-аналитика, веб-дизайн, веб-приложения, веб-программирование, веб-разработка, веб-разработки No Comments »
Twitter Delicious Facebook Digg Stumbleupon Favorites More