Pull to refresh
1
0
Андрей Савельев @ktotoff

User

Send message

Таблицы с данными в адаптивном дизайне

Reading time1 min
Views101K
Одна из постоянных проблем верстальщиков адаптивных сайтов — это задача удобно представить обычные таблицы на мобильных устройствах. Вот как выглядят такие таблицы чаще всего:


Не очень удобно, правда? К счастью уже существует несколько хитрых способов решить такую проблему.
Читать дальше →
Total votes 64: ↑61 and ↓3+58
Comments21

Вышел Twitter Bootstrap 2.1.0

Reading time1 min
Views26K
image

Думаю расписывать о том, что из себя представляет данный фреймворк не надо, все и так знают.
Исправлено куча багов, добавлены новые компоненты и плагины.
Почитать документацию по нововедениям и увидеть их в действии можно тут.
По этой ссылке можно забрать релиз 2.1.0 в zip-архиве(только js и css с иконками).
Еще можно посетить официальный блог проекта и почитать о нововведениях.
Читать дальше →
Total votes 152: ↑146 and ↓6+140
Comments91

vPass: страничка на Javascript для максимума безопасности и минимума мучений при работе с паролями

Reading time3 min
Views5.4K
Уважаемые Хабраюзеры,

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

Сам генератор

Информация и видео-демка

image

Вкратце:
  • вам нужно запомнить один «мастер»-пароль, и vPass генерирует уникальный пароль на его основе, для каждого сайта.
  • vPass генерирует бессмысленный набор букв и цифр (по умолчанию 12 символов), которые практически невозможно угадать.
  • vPass сделан для быстрой работы с клавиатурой. Введите мастер-пароль, Ctrl-C, Ctrl-W, готово!
  • vPass не «хранит» ваши пароли (и вообще ничего не хранит). Ваш пароль никуда не передается. vPass не обменивается данными с сервером — просто скачивает html-страницу в браузер.
  • Работает на любой платформе с веб-браузером. Windows, Mac OS X, Linux, Android, iOS, Windows Phone, webOS, и любая ОС будущего!
  • Вместо «домена» сайта можно использовать любое «имя пользователя». Я генерирую таким образом пароли для Linux-пользователей.
  • Для полной уверенности, вы можете скачать vPass и запускать со своего компьютера.

Подробности
Total votes 77: ↑68 and ↓9+59
Comments110

Введение в CSS Regions

Reading time3 min
Views17K


С появлением большого количества мобильных устройств сайты становятся все более «адптивными», это требует новых, более удобных способов отображения контента. В скором будущем помочь в этом смогут CSS-регионы (CSS Regions) — новый веб-стандарт Adobe.
Читать дальше →
Total votes 65: ↑62 and ↓3+59
Comments14

Чем платят за успех IT-специалисты

Reading time2 min
Views11K
Очень часто в историях успеха забывают указать один очень важный момент. А именно, какую цену платит человек за свой успех. Область IT имеет повышенный интерес к этой тематике. Так как, даже находясь дома, человек работает на компьютере удалено. Можно тратить все свое время на работу, на продвижение своего бренда, сервиса, однако ваша семья думает об этом иначе.



Читать дальше →
Total votes 193: ↑143 and ↓50+93
Comments461

Выпадающее меню в панели номеров страниц Twitter Bootstrap

Reading time2 min
Views6.7K
Вчера я делал верстку для панели с номерами страниц с использованием Twitter Bootstrap и мне потребовалось добавить туда выпадающее меню (для выбора вариантов сортировки и количества элементов на странице).



Bootstrap не содержит стандартных стилей для выпадающих меню в панели номеров страниц. Я написал свои стили для выпадающих меню, возможно, кому-то они будут полезны.

Версия .less (просто подключите вместе с twitter bootstrap)
Версия .css и пример использования
Демо

Пример использования
Total votes 44: ↑34 and ↓10+24
Comments23

Конвертация PNG24/32 в PNG8 с сохранением прозрачности

Reading time1 min
Views14K


Открылся веб-сервис TinyPNG, на котором можно быстро конвертировать полноцветные PNG24 в индексные PNG8 с сохранением альфа-прозрачности. Сайт работает на известных open source утилитах, так что квантование палитры можно сделать и без него, но здесь это просто удобнее.
Читать дальше →
Total votes 76: ↑70 and ↓6+64
Comments50

Windows 8: Проектирование интерфейсов

Reading time1 min
Views19K

В продолжении темы о подготовке MSDN к выходу Windows 8, хочется отметить ещё одну порцию полезных материалов. На этот раз собрана документация по проектированию интерфейсов. Приведены рекомендации и руководство о том, как спланировать все сценарии использования вашего приложения, как спроектировать интерфейс, показаны конкретные примеры и многое другое.
Читать дальше →
Total votes 76: ↑48 and ↓28+20
Comments10

История одного файлового менеджера

Reading time14 min
Views6.6K
Не знаю, как вы, а я начинал изучение веба и PHP в частности путём написания бесплатных скриптов. Я написал 2 своих CMS, галерею, форум, гостевую книгу… Первым моим проектом был файловый менеджер, и бы хотел рассказать о том, через какие стадии развития он прошел и чем стал в итоге. Например, я научил его открывать папки с 500к файлов, не вылезая за memory_limit в 32 Мб с временем генерации страницы в несколько секунд.

Я подготовил небольшое демо его работы, а также выложил исходники файлового менеджера на github. Исходные тексты не слишком высокого качества, ибо в основном писалось это мной году в 2007, то есть 5 лет назад :).
Так как оно открывает 100500 файлов?
Total votes 67: ↑53 and ↓14+39
Comments24

Отзывчивая типографика: Основы

Reading time7 min
Views22K


Когда мы создаем веб-сайты обычно мы начинаем с определения текста документа. Определение основного текста задает ширину главной колонки на странице, все остальное должно произойти само по себе. Должно. До недавнего времени разрешение экрана было более менее одинаковым. Сегодня мы имеем дело с огромным количеством экранов разного разрешения и размеров. Это делает вещи намного сложнее.
Читать дальше →
Total votes 72: ↑65 and ↓7+58
Comments24

Простая замена phpMyAdmin для гиков

Reading time2 min
Views14K
Довольно часто возникает ситуация, когда надо быстренько запустить пару запросов к MySQL базе у клиента на сервере. При этом есть только FTP и параметры соединения с СУБД. Самый простой выход — загрузить туда phpMyAdmin, ну а дальше дело техники. Обычно все это проиcходит на фоне того, что у клиента уже установлена какая-то CMS — WordPress, Drupal, Joomla…

Я люблю простые, красивые и удобные вещи. Я тепло отношусь к phpMyAdmin но в 90% моих Use Cases мне он не нужен. Нужно что-то простое. В идеале такое, что можно просто залить на сервер и открыть в браузере — не настраивая.

Пара вечеров и пакет готов.
Читать дальше →
Total votes 120: ↑114 and ↓6+108
Comments116

Разработка сайтов с адаптивным дизайном

Reading time5 min
Views4.7K
Перевод статьи “Responsive workflow” финского веб-дизайнера и разработчика Вильями Салминена (Viljami Salminen).

На прошлой неделе я был на конференции Webshaped, где Стивен Хэй (Stephen Hay) рассказывал о процессе разработки адаптивного дизайна. Этот пост не совсем о том же самом, но подход Стивена напомнил мне мой собственный, поэтому я решил изложить некоторые мысли по этому поводу, описать как моя работа эволюционировала за прошедшие два или три года и как может измениться в будущем.

Читать дальше →
Total votes 40: ↑37 and ↓3+34
Comments11

Создаем сайт с эффектом Parallax, используя Stellar.js

Reading time7 min
Views85K
Один из самых популярных трендов современного веб-дизайна является эффект Parallax. В этом туториале я покажу вам, как создать подобный эффект на вашем веб-сайте, используя воображение и Stellar.js.



Скачать исходники | Демо
Читать дальше →
Total votes 51: ↑41 and ↓10+31
Comments23

[Перевод] HTML5 Адаптивные изображения

Reading time3 min
Views26K


Адаптивные изображения одна из проблем Responsive Web Design. Возможно вы начали использовать high-res изображения для дисплеев с высоким разрешением и уменьшать их размер для устройств с меньшим разрешением дисплея, что попросту съедает трафик без какой либо пользы для владельцев устройств с дисплеями с небольшим разрешением. Или все так же используете изображения невысокого разрешения, которые ужасно смотрятся на больших экранах и дисплеях с высоким разрешением.
Читать дальше →
Total votes 40: ↑36 and ↓4+32
Comments57

OutWiker. Open Source программа для хранения заметок

Reading time2 min
Views29K
Привет, хабравчане.

На днях я выложил новую версию программы для хранения заметок OutWiker. Когда-то, больше года назад, я уже писал про нее на Хабре, за это время программа много раз обновлялась, обрастала новыми возможностями, что уже нет смысла сравнивать последнюю версию программы с ее (поза)прошлогодней версией.



OutWiker — это кроссплатформенная (Windows, Linux) программа для хранения заметок в виде дерева. Распространяется OutWiker с открытыми исходниками. Особенностью программы является то, что все записи хранятся не в одном файле, а структура формируется из вложенных файлов и папок. Кроме того, программа поддерживает несколько типов страниц: простые текстовые страницы, страницы, где для оформления заметок используется HTML и страницы в формате викинотации (напоминающую pmWiki).
Читать дальше →
Total votes 83: ↑74 and ↓9+65
Comments67

Адаптивная верстка: CSS&JS фреймворк Skeleton

Reading time4 min
Views68K

В продолжение недавней статьи про адаптивную верстку, хочется более полно раскрыть тему. В реалиях, чаще всего, для адаптивной верстки используют CSS-фреймворки. Об одном из них я хотел бы рассказать, а если точнее – перевести мануал по ее использованию. Называется он Skeleton.
Читать дальше →
Total votes 90: ↑84 and ↓6+78
Comments36

Самые простые техники адаптивной верстки

Reading time2 min
Views461K
Сайтов с адаптивной разметкой с каждым месяцем становится все больше, заказчики кроме кроссбраузерности все чаще требуют адаптивность, но многие разработчики не спешат обучаться новым техникам. Но адаптивный дизайн — это просто! В этой статье представлено 5 примеров адаптивной разметки различных элементов веб-страниц.


Читать дальше →
Total votes 168: ↑152 and ↓16+136
Comments51

Как повысить эффективность сайта или 5 причин начать использовать Google Analytics

Reading time8 min
Views12K
К написанию этой статьи меня подтолкнул один из самых популярных вопросов, который я регулярно слышу от потенциальных клиентов: как моему бизнесу поможет внедрение системы веб-анализа, которую вы нам советуете использовать? Руководители компаний, директора и менеджеры по маркетингу и рекламе, у которых в России, по большей части, к сожалению, пока достаточно низкое понимание принципов веб-маркетинга, хотят видеть реальные примеры того, как внедрение таких систем как Google Analytics и Яндекс Метрика может помочь их бизнесу. Обычно клиенты имеют базовое представление о возможностях таких систем и используют их возможности по минимуму: следят за посещаемостью своих сайтов, знают, откуда к ним приходят посетители, имеют общее представление о показателе отказов и приблизительно знают значение конверсии на своих сайтах. Если и Вы, уважаемые читатели, считаете, что этого достаточно для измерения эффективности Вашего сайта и рекламных кампаний (будь то контекстная реклама, SEO или любой другой способ привлечения посетителей на Ваш сайт), то значит, что Ваши конкуренты, которые активно используют системы статистики, или уже Вас обогнали, или скоро обгонят.

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

Читать дальше →
Total votes 52: ↑45 and ↓7+38
Comments4

Создание лайтбокса для сенсорного интерфейса на HTML5

Reading time15 min
Views5.8K
Stephen Woods, фронтэнд-инженер в Flickr, объясняет, как создать простой лайтбокс с поддержкой жестов и дает советы для улучшения восприятия и производительности сенсорных интерфейсов.



Необходимые знания: средний уровень CSS, средний-продвинутый уровень JavaScript
Требования: Android или IOS устройство
Временные затраты: 2-3 часа
Скачать исходники
Просмотр демонстрации
Читать дальше →
Total votes 16: ↑14 and ↓2+12
Comments11

Information

Rating
Does not participate
Location
Москва и Московская обл., Россия
Works in
Date of birth
Registered
Activity