Все потоки
Поиск
Написать публикацию
Обновить
116.67
Общий рейтинг

HTML *

Стандартный язык разметки web-страниц

СтатьиПостыНовостиАвторыКомпании
Сначала показывать
Порог рейтинга
Уровень сложности

Как я перестал бояться и переизобрел QML

Время на прочтение6 мин
Количество просмотров14K
HTML * JavaScript * Qt *

Что?


Привет, Хабр! Прошло очень много лет, с тех пор как я писал сюда. Надеюсь, время тебя/меня не слишком/слишком потрепало.

Я хотел бы написать о нашем опыте переосмысления идей QML. Qt — прекрасная (по совокупности заслуг) библиотека, и хотя её внутреннее устройство местами вызывает вопросы, но она дала миру не только кросс-платформенный UI тулкит, но и цельный профессиональный набор инструментов: Дизайнер, Креатор, Лингвист, и, конечно же, Qml. Результатом этого переосмысления стал наш скромный проект, который превращает qml в html5/javascript для разных платформ, и даже позволяет собирать простые android приложения используя Cordova.

Qml всегда привлекал нас (небольшую неизвестную группу QML-адвокатов, как мы себя называем, надев монокли и цилиндры) своей абсолютной выразительностью в плане разработки интерфейсов, и поэтому каждый из нас использует их для разработки пользовательских интерфейсов и сайтов.

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

Исходные коды доступны на github, там же лежат исходные коды сайта, примеров и библиотека контролов, которые мы используем для всех своих проектов. Документацию и уроки можно посмотреть на нашем сайте, pureqml.com.
Если вы чего-то не понимаете, можете присоединиться к группе поддержки в Telegram, мы постараемся ответить на все вопросы в реальном времени.

Одно из бесплатных приложений, которые мы сделали, был порт игры Fontanero, она должна быть доступна в маркетах LG/Samsung.

Ну а дальше можно не читать!

Как мы дошли до жизни такой


Всё началось в уже-далеком 2010-ом году, когда мы начали писать встраиваемое ПО (и интерфейс пользователя) в одной крупной корпорации для линейки разношерстных устройств на всевозможных платформах, доступных сейчас: arm, mips, x86, sh4, не хватало только sparc…
Читать дальше →
Всего голосов 34: ↑33 и ↓1+30
Комментарии25

Создание вашей первой игры на Phaser. Часть 2 — Загрузка ресурсов

Время на прочтение5 мин
Количество просмотров9.9K
Разработка игр * WebGL * JavaScript * HTML * Canvas *
Туториал

Phaser


Оглавление


0. Подготовка к работе
1. Введение
2. Загрузка ресурсов [Вы тут]
3. Создание игрового мира
4. (wip) Группы
5. (wip) Мир физики
6. (wip) Управление
7. (wip) Добавление целей
8. (wip) Последние штрихи


Продолжим серию уроков, посвященных использованию Phaser в связке с TypeScript. В этом уроке, мы рассмотрим загрузку ресурсов в Phaser, а также немного "причешем" код из предыдущей части.


Как и в прошлых статьях, не пропускайте комментарии в коде.


Полный код, написанный в этой статье, вы найдете в Github репозитории с тегом part-2.


Приступим!

Читать дальше →
Всего голосов 16: ↑16 и ↓0+14
Комментарии3

Hello, Шульте

Время на прочтение3 мин
Количество просмотров11K
CSS * HTML * JavaScript *

Наверное, каждый программист, интересующийся предметами с приставкой "пси", должен воплотить в виртуальность таблицы Шульте — уж очень они соблазняют своими легкодоступными, квадратно-цифровыми очертаниями. Но кропать таблицы на родных плюсах было как-то не с руки — всё равно что ездить за мороженным на танке. Теперь же на старости лет профессиональное любопытство докатилось и до веба, а для погружения в премудрости HTML/CSS/JavaScript (в качестве учебно-увлекательного проекта) таблицы Шульте — самое оно.


По мере ограниченных сил, громадного двухнедельного опыта и недоразвитого дизайнерского таланта, постарался сделать "стильно, модно, молодёжно" — чтобы всё было по возможности responsive и reactive и нормально встраивалось через iframe.


Список доступных настроек

image


  • размер таблицы (Grid);
  • группы чисел в таблице (Groups);
  • инверсия порядка обхода чисел (Inverse Count);
  • показывать ячейку под указателем (Show Hover);
  • обозначать фоном пройденные числа (Show Trace);
  • подсвечивать результат клика (Show Hit Result);
  • перемешивать числа (Shuffle Numbers);
  • повернуть числа в разные стороны (Turn Numbers);
  • вращать числа (Spin Numbers).

Последние две опции ставят нетривиальную задачу — отличить шестёрку от девятки.


Читать дальше →
Всего голосов 15: ↑14 и ↓1+11
Комментарии16

Неудобно редактировать ERb/EEx шаблоны? Попробуйте Slim/Slime

Время на прочтение2 мин
Количество просмотров5.5K
Elixir/Phoenix * HTML * Ruby * Программирование * Веб-разработка *

ERb — стандартный язык разметки в мире Ruby. Это html со вставками на Ruby. В мире Elixir ту же роль выполняет EEx. Такой же синтаксис, только вместо Ruby — Elixir. Вот как это выглядит:


<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок</title>
    <meta name="keywords" content="template <%= language_name %>">
    <meta name="author" content="<%= user_name %>">
  </head>
  <body>
    <h1 class="page-header"><%= page_header %></h1>
    <div id="content">
      <p><%= page_content %></p>
      Дополнительный текст.
    </div>
  </body>
</html>

То же самое можно написать в 1.5 раза короче без потери читаемости.

Читать дальше →
Всего голосов 15: ↑12 и ↓3+7
Комментарии13

Центрирование по вертикали несложных div при помощи data-

Время на прочтение13 мин
Количество просмотров3.9K
CSS * HTML * JavaScript *
Из песочницы
Доброго времени суток.

Возникла задача: в twitter bootstrap есть две колонки (div) с классами «col-md-6» и «col-md-6». В первой колонке текст, во второй видео с ютюб, при чем первая колонка в два раза выше второй. Нужно центрировать видео по вертикали относительно первой колонки. И таких участков на сайте несколько. В некоторых местах нужно у двух колонок сделать равные высоты.

Можно было бы руками править каждый раз, но решил попробовать всё ускорить, написать скрипт, который при помощи добавления data- сделает рутинную работу за меня.
Читать дальше →
Всего голосов 18: ↑9 и ↓9-2
Комментарии7

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

Время на прочтение13 мин
Количество просмотров69K
Блог компании НетологияCSS * HTML * Верстка писем *

Команда мультиканальной маркетинговой платформы Sendsay специально для Нетологии составила подробный гид по верстке адаптивных писем для начинающих верстальщиков: с пошаговой инструкцией, примерами и ссылками на фреймворки, инструменты и шаблоны.


image


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

Читать дальше →
Всего голосов 18: ↑14 и ↓4+8
Комментарии5

Создание вашей первой игры на Phaser. Часть 1 — Введение

Время на прочтение3 мин
Количество просмотров20K
Canvas * HTML * JavaScript * WebGL * Разработка игр *
Туториал

Phaser


Оглавление


0. Подготовка к работе
1. Введение [Вы тут]
2. Загрузка ресурсов
3. Создание игрового мира
4. (wip) Группы
5. (wip) Мир физики
6. (wip) Управление
7. (wip) Добавление целей
8. (wip) Последние штрихи


Добро пожаловать в наш первый урок по созданию игр на Phaser. Здесь я расскажу вам, как создать небольшую игру — платформер, которая познакомит вас с основными функциями данного фремворка и работу с ним в нынешних реалиях (ES6 / TypeScript + WebPack).


Что такое Phaser?


Phaser — это HTML5 (JavaScript / TypeScript) игровой фреймворк, который призван помочь разработчикам создавать крутые, кросс-браузерные HTML5 игры в короткие сроки и, в отличии от других фреймворков, phaser изначально затачивался под мобильные устройства. Единственное требование выдвигаемое данным фреймворком — поддержка тега <canvas />. Он также много чего унаследовал от Flixel.

Читать дальше →
Всего голосов 21: ↑15 и ↓6+7
Комментарии2

Создание вашей первой игры на Phaser. Часть 0 — Подготовка к работе

Время на прочтение7 мин
Количество просмотров23K
Canvas * HTML * JavaScript * WebGL * Разработка игр *
Туториал

Phaser


Оглавление


0. Подготовка к работе [Вы тут]
1. Введение
2. Загрузка ресурсов
3. Создание игрового мира
4. (wip) Группы
5. (wip) Мир физики
6. (wip) Управление
7. (wip) Добавление целей
8. (wip) Последние штрихи


Эта серия статей научит вас основам и "хорошему тону" игрового фремворка Phaser. За данный курс, я постараюсь объяснить вам основные идеи и возможности фреймворка, а также покажу как его грамотно использовать в связке с TypeScript и Webpack.

Читать дальше →
Всего голосов 23: ↑18 и ↓5+11
Комментарии8

Дайджест свежих материалов из мира фронтенда за последнюю неделю №255 (20 — 26 марта 2017)

Время на прочтение4 мин
Количество просмотров18K
Блог компании Zfort GroupCSS * HTML * JavaScript * Веб-разработка *
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

Читать дальше →
Всего голосов 32: ↑30 и ↓2+26
Комментарии6

Выравнивание в Bootstrap

Время на прочтение2 мин
Количество просмотров47K
CSS * HTML * JavaScript *
Recovery Mode

При работе с фреймворком Bootstrap обычно сталкиваются с тремя основными проблемами:


  1. Как поместить контент внизу колонки?
  2. Как создать многорядную галерею колонок одинаковой высоты в одном .row?
  3. Как центрировать горизонтально несколько колонок, если их суммарная ширина меньше 12 единиц и оставшаяся ширина нечетна?

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


Решение третьей проблемы подсмотрено здесь.


Общий код


<style>
    [class*=col-] {position: relative}
    .row-conformity .to-bottom {position:absolute; bottom:0; left:0; right:0}
    .row-centered {text-align:center}   
    .row-centered [class*=col-] {display:inline-block; float:none; text-align:left; margin-right:-4px; vertical-align:top} 
</style>

<script src="assets/conformity/conformity.js"></script>
<script>
    $(document).ready(function () {
        $('.row-conformity > [class*=col-]').conformity();
        $(window).on('resize scroll', function() {
            $('.row-conformity > [class*=col-]').conformity();
        });
    });
</script>

Читать дальше →
Всего голосов 29: ↑15 и ↓14-1
Комментарии33

Учимся мыслить в REM. Разговор об очевидном и о производительности труда в небольшой веб-студии

Время на прочтение6 мин
Количество просмотров20K
Веб-разработка * HTML * CSS *

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

Читать дальше →
Всего голосов 21: ↑19 и ↓2+15
Комментарии22

Дайджест свежих материалов из мира фронтенда за последнюю неделю №254 (13 — 19 марта 2017)

Время на прочтение4 мин
Количество просмотров20K
Блог компании Zfort GroupCSS * HTML * JavaScript * Веб-разработка *
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.


Читать дальше →
Всего голосов 44: ↑39 и ↓5+32
Комментарии1

Слайдер на CSS

Время на прочтение3 мин
Количество просмотров109K
HTML * CSS *
Из песочницы
Хочу рассказать простой способ создания слайдера, без использования JS, при помощи анимации CSS.

1) Для начала напишем HTML, предположим что в слайдере будут сменять друг друга 4 изображения.

  <div class="slider">
      <div class="slide slide1"></div>
      <div class="slide slide2"></div>
      <div class="slide slide3"></div>
      <div class="slide slide4"></div>
 </div>
Читать дальше →
Всего голосов 20: ↑13 и ↓7+4
Комментарии16

Ближайшие события

Правила использования ARIA в HTML

Время на прочтение4 мин
Количество просмотров94K
Веб-разработка * HTML *
Перевод

The Web Accessibility Initiative's Accessible Rich Internet Applications Suite (WAI-ARIA, или просто ARIA) — это набор инструментов и указаний для того, чтобы сделать веб-контент и приложения более доступными.
В частности, он включает в себя набор атрибутов, которые мы можем добавлять к HTML-элементам для придания им семантической информации, которая может быть прочитана с помощью специальных возможностей (assistive technologies).


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


Читать дальше →
Всего голосов 15: ↑14 и ↓1+11
Комментарии3

Третья ежегодная конференция JavaScript-разработчиков в Одессе — JS Lab

Время на прочтение2 мин
Количество просмотров3.5K
Блог компании FlyElephantHTML * JavaScript * Программирование * Веб-разработка *


25 марта в Одессе пройдет третья ежегодная конференция JavaScript-разработчиков — JSLab.Наша команда FlyElephant помогает с организацией этой конференции и приглашает всех принять участие в ней.

Хочешь расширить свой кругозор и выйти за пределы своих ежедневных JavaScript задач? У тебя есть эта возможность. В этом году на JS Lab тебя ждет: 200 front-end и back-end JS-разработчиков из Украины и ближнего зарубежья; два потока состоящие из 12 докладов по 45 минут и 8 блиц-докладов по 10 минут; темы затрагивающие фронтенд, бекенд, виртуальную реальность, разработку игр, тестирование и все это на JavaScript.

Среди докладов, можно отметить следующие:
Читать дальше →
Всего голосов 16: ↑15 и ↓1+12
Комментарии0

Дайджест свежих материалов из мира фронтенда за последнюю неделю №253 (6 — 12 марта 2017)

Время на прочтение4 мин
Количество просмотров19K
Блог компании Zfort GroupВеб-разработка * JavaScript * HTML * CSS *
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.


Читать дальше →
Всего голосов 32: ↑29 и ↓3+24
Комментарии6

Разработка механики игры Bounce от Nokia на JavaScript

Время на прочтение6 мин
Количество просмотров18K
HTML * JavaScript * Программирование * Разработка игр *
Туториал
Давно уже не писал для хабра, сегодня хотелось бы порассуждать на тему того, как организовать простейшую механику уровней для игры Bounce на тот случай, если кто-то пожелает сделать что-то похожее и будут вопросы. Думаю, особых вступлений не требуется, поэтому начнем!

image
Всего голосов 31: ↑24 и ↓7+15
Комментарии13

Возрождение ActionScript2.0 c помощью JavaScript

Время на прочтение3 мин
Количество просмотров8K
Action Script * Adobe FlashHTML * JavaScript *
И вот уже март 2017 года, Adobe Flash Player уже не запускается по умолчанию без явных действий пользователя, по крайней мере в Google Chrome для автоматического запуска контента Adobe Flash Player необходимо выполнить следующии инструкции.Таким образом, акцент веб-разработки все больше и больше смещается в сторону использования JavaStript библиотек, предоставлющих доступ к HTML5 Canvas.

Одним из удобных способов разработки HTML5 Canvas, заместо Flash, является Adobe Animate CC 2017, который подерживает следущие типы проектов:



Из списка видно, что подержка ActionScript2.0 полностью исключена из текущей версии среды разработки, а также нет возможности перенести имеющийся AS2/3 код в html5 Canvas.
Единственное, что можно сделать в Adobe Animate CC 2017 — это преобразовать графическое содержимое Flash проекта и все входящие в него компоненты в HTML5 проект.
Для этого достаточно открыть Flash проект и выбрать из меню Commands пункт Convert To Other Documents Format после чего откроется диалоговое окно с предложением выбора типа проекта в который происходит преобразование. По умолчанию используется HTML5 Canvas, его и будем использовать в наших новых проектах.


Читать дальше →
Всего голосов 11: ↑7 и ↓4+1
Комментарии12

Мой Material Design Framework

Время на прочтение3 мин
Количество просмотров22K
CSS * HTML * JavaScript *
Из песочницы
image

Здравствуйте! Сегодня я решил рассказать о своем небольшом проекте, а именно о HTML фреймворке в стиле Material Design. Скачать его можно с GitHub: ссылка. Лучше всего он работает на браузерах Webkit. Теперь рассмотрим его поближе.
Читать дальше →
Всего голосов 40: ↑32 и ↓8+22
Комментарии46

Дайджест свежих материалов из мира фронтенда за последнюю неделю №252 (27 — 5 марта 2017)

Время на прочтение4 мин
Количество просмотров21K
Блог компании Zfort GroupВеб-разработка * JavaScript * HTML * CSS *
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда.

Читать дальше →
Всего голосов 32: ↑30 и ↓2+26
Комментарии4
12 ...
6768
69
7071 ...
109110

Вклад авторов

Ваш аккаунт

Разделы

Информация

Услуги

Техническая поддержка
© 2006–2025, Habr