Доброкнижка про HTML5 от Google

    Пока в интернетах идут войны на тему HTML5, убьет он Flash или нет, компания Google выпустила онлайн книгу 20 Things I Learned About Browsers & The Web. И это действительно книга!

    Ребята создали веб-приложение, напоминающее детскую книгу, ее можно листать, оставлять закладки, а посвящена она веб-технологиям.

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

    Таким образом, это наверное первый реальный опыт создания нормальной веб-читалки. А если добавить сюда сенсорный экран, то мы получим отличную штуку!

    Источник.
    Share post
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More
    Ads

    Comments 90

      +2
      Эффекты — хорошо, то что без флеша — ещё лучше (ИМХО). Но по сути вся эта анимация (в плане драг и дропа) в большинстве случаев бесполезна.

      Книжку читаю, спасибо.
        +1
        Давно думал о таких приближенных к реальности веб-страничках. Гугл молодец, показал неплохой пример :)
          +32
          Возьмусь за локализацию. Надеюсь это не лишено смысла?
            +8
            Напротив, было бы отлично. Не забудьте уведомить об окончании локализации.
              +2
              Непосредственно перевод уже сделал, но вот подача материала, конечно, логично сделать именно в таком же виде, но я в этом не компетентен пока, увы! ) Что делать? =)
                +4
                Была бы свободная лицензия у книжки — помог бы полностью ее выкачать и перевод вставить. А так — не ясно законно ли это.
                  +3
                  Все таки программный код и иллюстрации принадлежат первоначальным авторам. И только сам перевод — Вам.
                    0
                    Согласен, в таком случае, сделаю необходимый минимум — к вечеру оформлю материал в виде публикации на хабре.
                      0
                      Вот эта листалка под свободной лицензией… Можно попробовать ее использовать…
                        0
                        Пока еще ее код не смотрел, сейчас гляну, вдруг она только для картинок и никак иначе
                        0
                        А давайте сделаем проект на 20thingsilearned.ru? У нас и домен уже проделегировался. И сделать поможем.
                          –1
                          тогда уж 20thingshelearned.ru :)
                          0
                          А давайте сделаем проект на 20thingsilearned.ru? У нас и домен уже проделегировался. И сделать поможем.
                            0
                            Что-то хабр глючит.
                          0
                          И перевод даже не принадлежит. В переводе принадлежат только авторские права на производную работу — всё равно без согласия автора делать с этим практически ничего нельзя.
                          –1
                          Напишите авторам. Серьезно. Если не ответят – напишите мне.
                        • UFO just landed and posted this here
                      • UFO just landed and posted this here
                        –3
                        Жаль, что не по-русски
                          +1
                          Истины прописные. Может, в том и преимущество. Рисунки, опять же, неплохие. Но прописные истины, по сути — скрижали, требуют и отдельного подхода. По меньшей мере — аккуратности и удобочитаемости…

                          маленькие абзацы текста с полной выключкой в данном случае выглядят чрезвычайно нелепо — некоторые апроши кажутся чрезмерно раздутыми. Оттого впечатления не производит. Уж средствами HTML5 можно было бы сделать самую главную единицу сайта — текст — более качественным. Типографика на 2/5.
                            –3
                            Покажите, что можно лучше!
                              +5
                              Артемий, залогинтесь под своим аккаунтом.
                                +9
                                Купите в нашем магазине хреновый кофе, ктогда удовлетворю вашу просьбу.
                              +4
                              и, конечно, в опере не работает
                              наверняка ведь опять прописали только -webkit- префиксы, и называют своё творчество html5
                                0
                                Забавно, использую
                                Opera/9.80 (Windows NT 5.1; U; en) Presto/2.7.39 Version/11.00

                                В сообщении на всех страницах книги
                                This illustrated book was designed for HTML5-compliant browsers and will not work with your current browser.
                                на слове «браузер» ссылка ведёт на www.whatbrowser.org/
                                где любезно сообщается, что
                                Вы используете: Sorry, we couldn’t recognize your browser. The What Browser team has been notified.

                                Отличный сервис :))

                                Да и в самой книге не могу отловить код проверки поддержки HTML5… неужели на сервере парсят user agent?
                                  +4
                                  Правильно, потому как опера не «HTML5-compliant browser»…
                                  +1
                                  Что конкретно не работает? Открыл страницу в опере и хроме — все работает и выглядит одинакого, только у хрома быстрее перелистывает.
                                    0
                                    В самом верху всех страниц в Опере:
                                    This illustrated book was designed for HTML5-compliant browsers and will not work with your current browser.
                                    For the best viewing experience, please upgrade to the latest version of your browser or download a modern browser and try launching this site again.
                                      0
                                      Ткните мой нос в эту надпись, я слепой.
                                      habrastorage.org/storage/073b2fa1/e6a64ce7/a1d5f420/20faec72.png
                                            0
                                            Версия какая? Там может проверка на конкретные версии браузера.
                                              0
                                              Opera/9.80 (Windows NT 6.1; U; ru) Presto/2.6.30 Version/10.62
                                                +1
                                                10.63 не показывает надпись:
                                                habreffect.ru/files/10b/e534a5bab/html5__2.png

                                                Более того, тот div с текстом отсутствует в коде, т.е. эти инноваторы проверяют браузер на сервере по user agent'у, причём конкретные версии, а не версия такая-то и более.

                                                Назад в 90-е :)
                                            +3
                                            я сламал глаза об ваши шрифты…
                                              +1
                                              *сломал
                                                0
                                                Тот скриншот с древнего ноутбука IBM T22 с XP, сглаживание отключено. Он служит в основном для чтения документации и тестирования тяжёлых клиентских скриптов (если не тормозят на нём, то почти везде летать будут).

                                                В Lubuntu, которая там установлена второй системой, со шрифтами всё нормально :)
                                          0
                                          опера 11. не работают эффекты.
                                          +2
                                          А у меня Opera даже падает. (10.70 win)
                                            +1
                                            Хотя Epiphany и webkit-based толку тоже нету. Гугл живет в своей альтернативной реальности?..

                                            whatsmyuseragent.com/ -> Mozilla/5.0 (X11; U; Linux x86_64; ru-ru) AppleWebKit/531.2+ (KHTML, like Gecko) Safari/531.2+ Epiphany/2.30.6
                                              +1
                                              Версия: 10.63
                                              полёт нормальный :)
                                              +2
                                              Ну это не столько гугл, сколько ребята из www.f-i.com/ разработали.
                                                0
                                                Что ж сказать — ребята молодцы!
                                                  0
                                                  Посмотрел их работы очень круто!
                                                  0
                                                  Всё равно это намного лучше и стильнее нарочито-глянцевых iZine.
                                                  +2
                                                  хром сказал «опаньки» и вкладка упала. 7.0.517.44, linux.
                                                    0
                                                    Мой хром той же версии на венде хп тоже сказал опаньки…
                                                    +3
                                                    А как они сделали замену адреса в браузере без перезагрузки?
                                                      0
                                                      То есть? Там меняется не весь адрес, а только хеш (якорь). Или я вас не правильно понял?
                                                        +2
                                                        Всё правильно. Но в том-то и дело, что у меня в хроме меняется не якорь, а весь адрес.
                                                          0
                                                          То же самое. В лисе якорь (и спрашивает разрешить ли данному приложению сохранять данные локально), в хроме прям URL меняется

                                                          Похоже какое то локальное хранилище используется
                                                      0
                                                      Of particular interest is how they are using window.history.pushState() and window.history.replaceState() to change the URL in the browser window without refreshing the page (view it in WebKit or Fx4). This is definitely the future of Ajaxing sites while maintaining quality deep linking, especially since the fallback is just using a hash tag links which is the current technique of choice.
                                                      css-tricks.com/20-things-i-learned-about-browsers-and-the-web/
                                                      –3
                                                      Очень здорово, но анимация на канвасе, по моему, это не фонтан… Ждем Smil + SVG.
                                                        +1
                                                        А меня вот так криво…
                                                        Chrome 9.0.576.0 dev/Ubuntu 10.10
                                                          +1
                                                          > Таким образом, это наверное первый реальный опыт создания нормальной веб-читалки.

                                                          А как же bookmate.ru?
                                                            +3
                                                            Кстати, странички книжки сохраняются в локалсторадж


                                                            Примерно в таком виде:


                                                            Так что ее можно будет и оффлайн читать после того как прогрузится
                                                              +2
                                                              Это так хитро задумано, что в Google Chrome 9.0.576.0 dev все криво, а в IE9 Beta все супер? :)
                                                              Не ожидал…
                                                                +2
                                                                На средней мощности ноутбуке хром вешается… IE весело бегает )))) я в шоке
                                                                  +2
                                                                  таже проблема, Google Chrome 9.0.576.0 dev виснет на 2й странице
                                                                  во всех остальных браузерах (safari, ie9, opera, firefox) работает хорошо
                                                                    0
                                                                    Эта версия вообще такие чудеса выдаёт, что уж поскорее хотелось бы от неё избавиться, обновившись на следующую.
                                                                      0
                                                                      у меня сегодня 587 появилась. разницы особо не заметил, но страничка работает на ура. обновитесь принудительно.
                                                                    +4
                                                                    А что вы ожидаете, пользуясь dev версией браузера? Вас же честно предупреждают при установке, что это просто еженедельная сборка без тестирования и может иметь критические баги?
                                                                    0
                                                                    Не могу не напомнить и эту ссылку: slides.html5rocks.com/#slide1
                                                                      0
                                                                      Сразу на ум пришло почему-то: www.nomorefriends.net
                                                                        –1
                                                                        у меня ничего не вешается, не падает
                                                                        чисто, плавно все
                                                                        Google Chrome 7.0.517.44, Win XP
                                                                          +1
                                                                          ребята из FI как всегда на высоте.
                                                                          www.f-i.com
                                                                          Кому как не им еще может доверить разработку сайта MTV, EA, Google и Co?
                                                                          5+
                                                                            0
                                                                            Спасибо, какраз думал — «кто ж такое чудо сделал?». И дейсвительно, на ум приходят только они.
                                                                            +1
                                                                            Круто сделано. Но мой старенький ноут сразу распыхтелся кулером на этой страничке.
                                                                            Кстати, мне удалось сделать так, что перелистываются сразу несколько страничек одновременно.
                                                                            Если зажать шифт и нажать стрелку «вправо» — то одновременно загибаются несколько страниц.
                                                                              0
                                                                              IE9 beta работает отлично
                                                                                –3
                                                                                Всё это круто, конечно. Но вот полистал я www.20thingsilearned.com/home и slides.html5rocks.com в разных браузерах (Opera 10.63, Chrome 7.0.517.44, Firefox 3.6.12, Safari 5.0.2, IE 8).

                                                                                В общем, кое-как работает.

                                                                                На мой взгляд, разработчики браузеров уж лучше бы довели до ума поддержание своими браузерами тех стандартов, что уже широко распорстранены. А HTML 5 пока предлагаю закинуть в дальний ящик стола. Вот когда идеально поведение сайтов синхронизируют в своих браузерах, тогда можно вернуться к этому вопросу.
                                                                                  –2
                                                                                  Chromium 7 on Ubuntu — эффекты кривущие, и тормоза.
                                                                                  Позор. По-другому не знаю как назвать. Собственный браузер (у человека выше в Chrome тоже самое) и не протестили как следует.
                                                                                    0
                                                                                    Что у Вас за комп. Думаю если атом, можно сразу сливать с такой анимацией
                                                                                      0
                                                                                      Inter Core 2 Duo
                                                                                        0
                                                                                        Значит что-то ещё, спецом попробовал — всё Ок
                                                                                      0
                                                                                      У меня все ОК с такими-же исходными.
                                                                                        0
                                                                                        И, что даже обложка книжки перелистывается нормально? Выше кто-то вывешивал скрин из Хрома с перекошенной обложкой книги. Вот у меня так же.

                                                                                        Сами страницы перелистывается нормально, но обложка — глючит. И бывает Хромиум просто крешится
                                                                                      +1
                                                                                      А кто небудь версию для печати открывал. Всё криво — текст на текст находит, картинки перекрывают — нечитабельно, по крайней мере в моем фаерфоксе.
                                                                                        +1
                                                                                        Да вроде нормально все.

                                                                                        0
                                                                                        Mozilla/5.0 (Windows; U; Windows NT 6.1; ru; rv:1.9.2.12) Gecko/20101026 Firefox/3.6.12 — тормоза при перелистывании и что-то немного кривовато выглядит
                                                                                          0
                                                                                          реализация супер!
                                                                                          ребятам из bookmate есть над чем задуматься.
                                                                                          для себя же скачал pdf — онлайн хорошо, но е-ридер лучше! :)
                                                                                            0
                                                                                            Ubuntu 10.10
                                                                                            Google Chrome 7.0.517.44 — артефакты, глюки при отображении, не внятным образом обрабатываются клики на боковые стрелки (страница не перерисоваыется), Не сразу увидел, что страница «листается», т.к. в месте начала перелистывания, при наведении мыши, страницу коррежило, появлялись артефакты…
                                                                                            Chromium 9.0.576.0 (65344) — все то же самое.

                                                                                            С какой-то n-ой попытки мне удалось завести нормальное листание, но не надолго.

                                                                                            Что-то сыровато. Причем похоже, что это не браузеры.
                                                                                              0
                                                                                              Ух-ты, а смена URL страницы без ее перезагрузки и без # в хроме — это сугубо фишечка хрома, или это где-то есть в спецификации HTML5?
                                                                                              0
                                                                                              В Chrome 7.0.517.44 в Ubuntu книжка отображалась криво, страницы уже после второй отказывались перелистываться.

                                                                                              Решение нашлось неожиданно: нужно обновить веб-страницу с книжкой и после этого щелкнуть мышью по Open book (ничего больше не трогая курсором мыши!). После этого книжка выглядит ровно, анимация перелистывания плавная — в общем, все прекрасно :)
                                                                                                0
                                                                                                А вот и перевод. Не на HTML5 конечно, но зато на русском.

                                                                                                Only users with full accounts can post comments. Log in, please.