Заранее хочу предупредить, что тут вы не найдёте каких-либо исследований на тему развития веба и html в частности. Тут не будет ни оценки важности CSS3 ни семантики тегов html4 — html5. Это просто крик в пустоту о том, каким инструментом я, как верстальщик, хотел бы пользоваться.
Если интересно, прошу пожаловать под кат.
Читать полностью »
Метка «html» - 25
Каким я хочу видеть HTML6
2012-03-28 в 16:18, admin, рубрики: html, web-разработка, верстка, метки: html, web-разработка, версткаСоздаём простейший виджет для Mac OS X Dashboard
2012-03-26 в 9:10, admin, рубрики: apple, css, dashboard, html, javascript, mac os x, разработка, метки: apple, css, dashboard, html, javascript, mac os x, хабр Здравствуйте, читатели-маководы!
Сегодня мы с вами попробуем разобраться в азах создания виджета для Dashboard в Mac OS X. Нам понадобится программа Dashcode, предназначенная как раз для этого.
Для начала немного теории. Виджет в Dashboard — это специально сформировання веб-страничка, упакованная в бандл вместе со всем ресурсами. Ну, и немного служебной информации в довесок. Соответственно, используемый язык программирования — JavaScript. Если Вы уже знакомы с ним, а так же с HTML/CSS (хотя это вряд ли понадобится), то Вы уже способны написать простенький виджет. Если же нет, то не стоит расстраиваться, этот язык очень прост и интуитивно понятен, разобраться с ним можно достаточно быстро. Далее я буду считать, что с JS читатель более-менее знаком. Сама же статья рассчитана на новичков, так что прошу не ругать за «слишком простое изложение и детальное разжёвывание элементарных вещей». Кроме того, за дизайн тоже прошу не пинать — ну не дизайнер я, не дизайнер! Если кто хочет помочь с этим делом — welcome =)
Для удобства, все исходники (а так же готовый к использованию виджет) выложены на гитхаб, ссылка в конце статьи. Но не спешите просто скачивать их! Лучше потратить немного времени и разобраться, как создать это всё самому.
Итак, приступим. В качестве цели для экспериментов я, разумеется, выбрал наш любимый хабр. Мы будем шаг за шагом делать виджет, отображающий карму, рейтинг и позицию в рейтинге хабралюдей выбранного читателя.
Такой виджет (ну, очень похожий) уже был создан хабратоварищем neoromantic аж в 2007 году, но ссылки на скачивание не рабочие, а кроме того, та статья не содержала практического руководства по созданию подобных виджетов.
Читать полностью »
Создание оконного интерфейса при помощи jQuery UI. Часть 2
2012-03-24 в 12:03, admin, рубрики: html, jquery, jQuery UI, Веб-разработка, интерфейсы, метки: html, jquery, jQuery UI Первая часть .
Стоит еще раз уточнить, что статья рассчитана на пользователей только начинающих своё знакомство с библиотекой интерфейсов jQuery UI и показывает общие принципы работы с ней, а не задаёт постоянный порядок действий для каждого, а тем более, масштабного веб-проекта. Из известных проблем описываемого интерфейса – вёрстка оставляет желать лучшего.
В этой части будет показано, как назначить действия кнопкам окна и сделать окно сворачиваемым/разворачиваемым.
Результат, который должен получиться после изучения двух частей.
Читать полностью »
Создание Windows-подобного интерфейса при помощи jQuery UI. Часть 1
2012-03-22 в 16:12, admin, рубрики: html, jquery, jQuery UI, Веб-разработка, интерфейсы, метки: html, jquery, jQuery UI, интерфейсы Статья рассчитана на пользователей только начинающих работать с jQuery UI и желающих на практике познакомиться с этой библиотекой.
Под Windows-подобностью интерфейса предполагаются такие основные свойства как — наличие окон, возможность их перетаскивания, возможность изменения размера окон, их свертывания/развертывания и т.д. Вот что должно получиться в итоге.
Итак, имеем желание создать пример интерактивного пользовательского Windows-подобного интерфейса и возможности использовать для этой цели jQuery UI – тогда, добро пожаловать под кат.
Читать полностью »
PIRO — ракета для вашего PivotalTracker акаунта
2012-03-14 в 23:00, admin, рубрики: coffescript, css, Google Chrome, google chrome extension, html, javascript, Веб-разработка, метки: coffescript, css, google chrome extension, html, javascript
Привет всем. Сегодня я поведаю о своей разработке для Google Chrome и Pivotal Tracker — PIRO. Начнем по порядку.
PivotalTracker — сервис для управления софтверными проектами по «гибким» методологиям. Более подробно можно узнать из этой статьи на Хабре. Сам по себе трекер отличный, но при работе с ним у меня возникали определенные проблемы:
- При работе с несколькими проектами неудобно переключатся между ними
- Тяжело узнать в каких проектах созданы задачи на Вас или же какой статус задач, которые Вы создали на других людей
- Если вдруг вы работаете с несколькими PivotalTracker акаунтами, то переключение происходит или перелогином или же каждый акаунт в отдельном браузере (кто как крутится)
Немного поразмыслил, я закатал рукава и начал писать свое решение для PivotalTracker. В ходе работы я показывал его людям, они подключались и помогали мне в его реализации. Поэтому в конце проекта его решили сделать Open Source :)
Javascript в декларативном стиле
2012-03-14 в 20:11, admin, рубрики: html, javascript, Веб-разработка, метки: html, javascript
Может, для гуру javascript данная статья будет не интересна, а вот для начинающих разработчиков, наверняка — полезна.
Сразу оговорюсь, что в статье будет использоваться только чистый javascript без подключения сторонних фреймворков (например jquery).
Писать javascript в декларативном стиле гораздо удобнее:
- Возможность привязать конкретному html-блоку нужный javascript функционал
- Возможность писать javascript код наподобие css (к объекту привязывать свойства)
- Улучшить читаемость кода, перенеся логику, связанную с конкретными html-блоками, в отдельные файлы
- И много чего ещё. Попробуйте и сами все увидите.
Итак, приступим.
WebProject — бесплатная программа для создания и сопровождения html-сайтов
2012-03-13 в 20:52, admin, рубрики: html, метки: htmlМне нравятся html-сайты. Они быстрые, не нагружают сервер, их легко бекапить и легко переносить, можно держать на флешке для оффлайнового просмотра. Но есть проблема — их сложно сопровождать. Вносить изменения в несколько файлов для смены пункта меню или года копирайта — занятие невеселое. Для этих целей я сначала написал для себя шаблонизатор, а затем после нескольких итераций родилась вот такая программа — WebProject.
Теряем посетителей — много и каждый день
2012-03-13 в 14:26, admin, рубрики: async, html, метки: async, html
По какой-то причине огромное количество проектов с радостью теряет самых хлебных посетителей — белых воротничков в рабочее время.
Большинство работодателей закрывают все социальные сети скопом, начиная, естественно, с контакта. Несмотря на это — у крупных и очень крупных проектов в начале страницы( уже не очень хорошо) можно встретить простую строчку:
<script type="text/javascript" src="http://vkontakte.ru/js/api/share.js?3"></script>
или
<script type="text/javascript" src="http://userapi.com/js/api/openapi.js?20"></script>
В итоге пользователи с закрытым контактом не могут открыть сайт, перейтиЧитать полностью »
HTML5 / [Из песочницы] HTML-атрибуты data-* для хранения параметров и получения их в js
2012-03-01 в 14:25, admin, рубрики: css, html, html5, javascript, jquery, плюшки, метки: css, html, html5, javascript, jquery, плюшки В HTML 5 были введены такие атрибуты тегов, как data-*.
Про них вы наверняка слышали или видели в разных проектах.
Например, их используют такие модные товарищи, как Twitter Bootstrap и jQuery Mobile.
Раньше использовали классы, ради сохранения информации в HTML, с целью последующего использования в js.
Например, для сохранения уникального номера блока часто пишут так:
<div class="items">
<div class="item1">...</div>
<div class="item3">...</div>
<div class="item6">...</div>
<div class="item1">...</div>
...
Читать полностью »