Рубрика «html» - 106

Копаясь в памяти своего неискушённого идеальным миром мозга, я, припоминаю, как два года назад начиналась наша история по разработке приложений для SmartTv. Если коротко, то это был АД!!! богатейший опыт.

image

Однако, хотелось бы получить этот опыт сразу, не наступая на недокументированные грабли, разложенные по всей технологии, и специальные детские грабли разложенные каждым вендором отдельно. Но как говорится «c'est la vie» и нам пришлось пробиваться сквозь тернии к звёздам!

В итоге мы получили кроссплатформенную расширяемую библиотеку для всех SmartTv.Читать полностью »

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

Вступление

Подошел к концу третий месяц нашего сотрудничества с шефом… В общем-то, раньше я его иначе как знакомого не воспринимал… Но надо по порядку.
Я живу в двух городах. Уфе и Москве. Это трудно… Особенно в плане работы. Почему так сложилось — история другая. Я начинающий фрилансер.… И тут мне пишет друг. На тот момент мы были не особо-то близкими друзьями… Он предлагает сделать сайт. В отсутствии денег в кармане, я хватаюсь за нитку большого проекта, даже не понимая, во что он выливается для меня как для новичка.
С первых дней стало понятно, что намерения у друга серьезные. Являясь типичным примером ленивого кодера, я прилагал не много усилий, понимая что это на долго.
Вот тут-то и начинается наша история. Она началась с ТЗ.
Периодически я беру заказы на различные небольшие работы. Разработать дизайн, собрать его, сделать пару модулей, модифицировать что-то… В общем-то, по мелочи. И сейчас, уже обладая опытом общения, я могу радостно заявить, что мой шеф — редкий случай заказчика, умеющего конкретизировать свои мысли, расставить точки над “i” и войти, по-моему, в любое положение исполнителя.

Торнадо началось не с логотипа. Не с моделей… Торнадо началось с вектора движения. С идеи и горящих глаз. Проект, призванный облегчить жизнь не узкому кругу лиц, а всем, кому сможем.
Началось все с простого… Таблица, поля ввода…
Читать полностью »

Доброго времени суток, уважаемые читатели!

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

Немного предыстории:

Не секрет, что у нас тут “на” Украине творится, назовем это условно, дабы не обидеть стороны и остаться аполитичным, “массовые волнения народа, по поводу происходящих в стране событий”. И вот спустя два, с небольшим, месяца после начала этого действа ко мне в Skype постучался друг (он же в последствии и идейный вдохновитель первой стадии проекта) Avicorn (человек сугубо суровый и любящий порядок, собственно это и стало первопричиной идеи). Выразив свою обеспокоенностью отсутствием времени искать и собирать видео потоки новостных каналов, а так же постоянно их обновлять (youtube заставляет, как мы поняли запускать новые сессии вещания после каждого перерыва в трансляция), он намекнул, что не плохо бы было собрать с миру по нитке на одной страничке и куда-нибудь (это выяснилось уже позже, оказывается плеерам нужны “домены” и localhost им не нравится) выложить, чтобы он мог в свободную минуту предаться созерцанию происходящего действа. Одни каналы крутят постоянно новости, другие транслируют “стримеров” с полей, третьи аналитику толкают и открывать много страниц для обычного человека весьма затруднительно, поэтому, хоть какой то, но порядок в виде «все на одной странице» — весьма и весьма доставляет, а если еще кто-то озаботится обновлением ссылок на потоки, то будет совершенно замечательно.

Читать полностью »

MediaElement language learning plugins

Некоторое время назад я разработал ряд плагинов для javascript-видеопроигрывателя MedialElement, сейчас выложил их в открытый доступ. Эти плагины расширяют функциональность плейера таким образом, что он может быть использован для просмотра видеороликов обучающих иностранным языкам. Разумеется, и без моих плагинов никто не мешает просматривать обучающие видео в этом проигрывателе, но эти плагины делают процесс просмотра и изучения более комфортным.

За эталон, к которому я стремился при разработке, был взят проигрыватель http://www.yabla.com (не буду скрывать, изначально планировалось склонировать ресурс целиком, но проект не завёлся). Этот проигрыватель обладает следующими особенностями:

  1. навигация по таймлайну осуществляется не с точностью до секунды, а с точностью до предложения. Человеку, изучающему язык по видеороликам, часто приходится проматывать видео назад, чтобы несколько раз переслушать неразборчивую фразу и гораздо удобнее одним кликом переместиться к началу фразы, а не искать её начало несколькими кликами.
  2. Каждая фраза может быть зациклена, чтобы прослушать её многократно.
  3. Разбивка таймлайна на фразы не требует от редактора какой-то особой подготовки: данные о таймингах выбираются из стандартного srt-файла с титрами.
  4. Титры на всех доступных языках выводятся под видеороликом (при желании могут быть скрыты). Эта особенность позволяет, например, показывать пользователю титры на языке оригинала видео и на родном языке пользователя. Клик по слову в титрах ставит видео на паузу и показывает пользователю перевод слова, по которому сделан щелчок.
  5. Таймер показывает не только время от начала видеоролика, но также номер фразы и общее число фраз в ролике.
  6. Скорость проигрывания ролика может быть замедлена или ускорена.
  7. Переход между фразами возможен не только кликом по таймлайну, но и при помощи хоткеев Ctrl + стрелки влево/вправо. Другие горячие клавиши: пробел — зациклить фразу/снять зацикливание, Ctrl + стрелки вверх/вниз — изменение скорости ролика.

Читать полностью »

Web Components — будущее Web

Спустя какое время стало ясно, что основная идея Prototype вошла в противоречие с миром. Создатели браузеров ответили на возрождение Javascript добавлением новых API, многие из которых конфликтовали с реализацией Prototype.

— Sam Stephenson, создатель Prototype.js, You Are Not Your Code

Создатели браузеров поступают гармонично. Решение о новых API принимают с учётом текущих трендов в opensource сообществах. Так prototype.js способствовал появлению Array.prototype.forEach(), map() и т.д., jquery вдохновил разработчиков на HTMLElement.prototype.querySelector() и querySelectorAll().

Код на стороне клиента становится сложнее и объёмнее. Появляются многочисленные фреймворки, которые помогают держать этот хаус под контролем. Backbone, ember, angular и другие создали, чтобы помочь писать чистый, модульный код. Фреймворки уровня приложения — это тренд. Его дух присутствует в JS среде уже какое-то время. Не удивительно, что создатели браузеров решили обратить на него внимание.
Читать полностью »

в 5:21, , рубрики: html, баг, хабрахабр, метки: ,

Со стороны Хабрахабра недостаточно просто переносить теги <anchor> и ссылки на них в html код топика.

Не будет работать даже тот пример, что дан в описании «html-теги»:

<anchor>Example1</anchor>
Тег для указания якоря. Для вызова используйте тег вставки ссылок (<a href="#Example1">Текст</a>).

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

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

Читать полностью »

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

Я работаю ассистентом в НИУ ИТМО, и осенью 2013 судьба преподнесла настоящий подарок: дисциплину «Информатика» и пять групп студентов-первокурсников. Что в этом такого хорошего? Во-первых, часть лабораторных работ (которые я и вёл) были посвящены HTML и CSS. Во-вторых, первокурсники — это ещё исполнительные, сознательные и ответственные студенты. Но самое главное, что мне достались электронщики, лазерщики и оптики и среди них было очень много абсолютных новичков в вёрстке.

Такой шанс упускать было нельзя. И на конец семестра был запланирован эксперимент (или скорее небольшой опыт), который давно хотелось провести. Суть опыта такова:
Читать полностью »

В рабочей группе W3C продолжается обсуждение нового расширения для элемента HTMLMediaElement, который предоставляет API для контроля воспроизведения контента в браузере. То есть, непосредственно в браузере появятся встроенные средства DRM, так что правообладатели смогут запрещать/ограничивать воспроизведение фильмов и музыки на компьютерах пользователей.

Хотя новый стандарт ещё не принят окончательно, но правообладатели уже приступили к технической реализации. Интересные подробности этого процесса содержатся во вчерашнем письме Марка Уотсона (Mark Watson) из Netflix. Эта компания является одним из основных разработчиков стандарта, наряду с Google и Microsoft.

Марк Уотсон объяснил, что сейчас ряд вендоров работают над разработкой модулей DRM для HTML по заказу правообладателей — медиастудий. Консорциум W3C не ставит целью узнать и опубликовать эти спецификации, а всего лишь стремится предоставить ясные API для доступа к ним из браузера. Поэтому характеристики конкретных модулей DRM являются коммерческой тайной и держатся в секрете.
Читать полностью »

Предлагаем вашему вниманию последнюю в этом году подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости

Дайджест интересных материалов из мира веб разработки и IT за последнюю неделю № 90 (29 декабря — 4 января 2014)
Читать полностью »

Подарок всем front end разработчикам. grunt(Jade+Stylus+Watch)

Здравствуйте Уважаемые хабра-пользователи!

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

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


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js