40 важных вопросов и ответов по HTML5


Оглавление (нажмите, чтобы открыть):

Изучать HTML 4.01 или HTML5

27.06.2015, 11:15

HTML , XHTML, HTML5
Чем отличаются языки веб программирования HTML , XHTML, HTML5. И какие плюсы и минусы в каждом из.

Решился изучать HTML
Всем привет . Я вот решился почитать html , какую книгу посоветуете изучать с нуля(с подробностями).

Как конвертировать из html 4.1 в html5 ?
Помогите перевести код в html5. Есть такой исходный код, написанный на html4: .

Не могу писать русскими буквами! (Только начинаю изучать HTML)
Пробую освоить HTML4.0 по книжке. Тут приводятся примеры и объяснения разных букав тегов и.

Стоит ли самостоятельно изучать html, css, чтобы потом верстать сайты?
Здравствуйте! Стоит ли самостоятельно изучать html, css, чтобы потом верстать сайты? И где потом.

HTML5 простыми словами

3 октября 2011 | Опубликовано в статьюшечки | 12 Комментариев »

Это — не статья для супер-гуру-вебмастеров. И даже не для начинающих веб-разработчиков. Эта статья задумывалась как памятка об HTML5 для журналистов и аналитиков.

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

Поможет нам в этом HTML5 DOCTOR, сообщество активных последователей HTML5, проповедующих его использование, и в частности, Брюс Лоусон:

«К нам часто обращаются журналисты и аналитики с вопросами о HTML5. И это замечательно, потому что мы тратим куда больше времени еженедельно, пытаясь читать странички тех журналистов и аналитиков, которые к нам не обратились.

Вот перечень наиболее часто задаваемых нам вопросов, на которые мы дали ответы неспециализированным языком. Журналисты, пользуйтесь на здоровье! цитирование приветствуется, но не является обязательным )))»

Что такое HTML5?

Зто зависит от того, о чем идет речь. Выражение «HTML5» используют в трех разных значениях:

Наиболее точным определением понятия «HTML5» будет следующее: это спецификация, разработанная совместно двумя группами, W3C и WHATWG. Существуют разные версии спецификации HTML5.

HTML5 стал необходимой, вынужденной эволюцией языка, на котором пишутся веб-страницы. Он был разработан для написания веб-приложений (так называются динмические интерактивные веб-страницы, на которых можно что-то делать). Его предшественник, HTML4, появившийся в конце 90х, предназначался для веб-страниц (статических документов, связанных между собой гиперссылками и содержащих текст, изображения, формы и т.д. ).

  • Его разработали для обеспечения взаимодействия страниц в разных браузерах. Сегодня мы используем различные браузеры (к примеру, на работе у нас может стоят IE, в телефоне — Safari или Opera, а дома -Firefox) и было бы неразумно и досадно, если бы сайт не работал бы в чем-то из них.
  • Все производители браузеров — – Opera, Mozilla (Firefox), Apple (Safari), Microsoft (Internet Explorer), Google (Chrome) — все они сотрудничают между собой, равно как и с еще кучей органицазий и частных лиц: с Netflix, Adobe, IBM, HP, BBC и многим другими.
  • Он разработан, чтобы расширить возможности современного веба, не нарушая при этом работы уже существующих веб-страниц.
  • Он может соревноваться с плагинами типа Microsoft Silverlight и Adobe Flash, которые сами по себе были созданы, чтобы закрыть дыры в окаменелом стандарте HTML4.
  • HTML5 и его друзья

    в дополнение к самому ядру HTML5, WHATWG разработали другие спецификации, такие как Web Workers, Web Sockets, Web Database. Все они дополняют его новыми свойствами и функциями, полезными для приложений, игр и тому подобного.

    Многое из их содержимого изначально было частью самого ядра, но по некоторым производственным и организационным причинам было выведено из него. Вся группа вместе называется Web Applications 1.0.

    3. Новые «супер-веб-технологии»

    Часто большинство людей, налеких от веб-разработки (а часто и не очень сведущие разработчики), говоря «HTML5», подразумевают целый ряд технологий: ядро HTML5, его дополнения — и еще уйму вообще никак не связанных с ними технологий, таких как геолокация (способность вашего браузера «распознавать» ваше местонахождение), ориенацию устройства, события касания, анимацию CSS3 (которая может заменять несложную Flash-анимацию), SVG (способ отображения графики четко и гладко на экране любого размера), и недавно вошедший сюда WebGL, позволяющий использовать популярные библиотеки 3D-графики в веб, внося трехмерность в веб-гарфику и браузерные игры.

    Многое из этого разработано W3C, а WebGL, к примеру, создан Khronos Group.

    Также важно не забывать, что так называемые «демо-HTML» с самим HTML5 не имеют ровным счетом ничего общего. Например, во многом из Google Doodles используется DHTML — технология HTML 4 начала 2000х.

    Зачем придумали HTML5?

    HTML4 трещал по швам под напором новых видов приложений. Многие вещи были просто недоступны и требовали плагинов типа Adobe Flash или Microsoft Silverlight. Приходилось идти на всяческие уловки и ухищрения, использовать нестандартные, недокументированные приемы, что было не очень-то надежной основой для сайтов, созданных для заработка.

    Как много браузеров поддерживают HTML5?

    Смотря как посмотреть. Если исходить из того, что HTML5 произошел от HTML4, то все барузеры поддерживают какие-то свойства HTML5.

    А с другой стороны, если вы хотите знать, какие браузеры содержат все свойства ядра HTML5 — то ни один. Они все обеспечивают выполнение некоторых частей спецификации (которая насчитывает более 700 страниц), но ни один не поддерживает все одновременно.

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

    Кто является движущей силой HTML5?

    Началось все в 2004 году, в Opera, под руководством Яна Хиксона. Постепенно присоединились и другие браузеры. Хиксон ушел из Оперы в Google, где продолжает работать над спецификацией.

    Будет справедливо сказать, что производители браузеров совместно координируют работу над спецификацией, равно как и W3C и многие другие организации и частные лица. Говоря обобщенно, процессом руководят потребности веб-разработчиков.

    Кто пользуется HTML5?

    Множество людей и компаний: Boston Globe Newspaper; Nationwide Building Society, Yell.com и сотни других. На HTML5gallery.com собрано множество сайтов, применяющих HTML5-технологии.

    Когда будет завершена работа над HTML5?

    Возможно, в 2012 году. А может и в 2022. Это не так важно, важно другое: он сегодня уже поддерживается браузерами, а, следовательно, мы можем использовать его уже сегодня.

    Сказать, что мы не можем пользоваться HTML5, потому что его развитие не завершено — это все равно, что сказать, что мы не можем говорить на русском языке, потому что он все еще развивается.

    Правда ли, что HTML5 несовместим с Internet Explorer?

    Абсолютная ерунда. IE9 хорошо поддерживает HTML5. В более старые браузеры можно добавить поддержку некоторых API с помощью JavaScript -технологии polyfilling, а также плагинов Flash и Silverlight. Элемент canvas может работать некорректно в версиях IE ниже 9. В основном, причиной проблем в старых браузерах является медленный движок JavaScript. Для отображения видео в старых браузерах можно использовать резервный Flash-вариант.

    Стоит отметить, что многие возможности HTML5, такие, как атрибут contenteditable, позволяющий пользователю редактировать содержимое объекта, были придуманы Microsoft и включены уже в IE5.

    Правда ли, что HTML5 предназначен для мобильных устройств?

    Совершенно нет. В основе HTML5 лежат определенные принципы разработки, один из которых гласит о повсеместном его применении:

    «Элементы должны разрабатываться для повсеместного использования. Элементы, по возможности, должны работать независимо от платформы, устройства и носителя.»

    С другой стороны, есть особенности HTML5, которые особенно полезны в свете использования мобильных устройств. Если рассматривать «настоящий» HTML5, очень полезной окажется, к примеру, возможность продолжать работать с сайтом в оффлайне с помощью технологии Application Cache (“Appcache”).

    Также преимуществом является возможность использовать элемент canvas для отображения анимации устройствами, которые по той или иной причине не могут использовать Flash.

    Если рассматривать HTML5 в значении «новые супер-веб-технологии», то огромным плюсом является геолокация.

    Вытеснит ли HTML5 Adobe Flash?

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

    Apple приняли решение не включать поддержку Flash своими iOS устройствами, что дает огромный толчок видео HTML5. Однако, стоит заметить, что iOS — не самая лучшая платформа и для HTML5.

    Flash в любом случае остается полезным кросс-браузерным инструментом. к тому же, следует понимать, что Flash — это больше, чем просто видео. Некоторые простые его функции, используемые в играх, перехвачены HTML5 canvas, а часть примитивных анимаций, для которых он ранее использовался, перекочевала в CSS3. Однако, из соображений удобства создателей тонкой анимации, используемой в играх и мультфильмах, конечно, лучше пользоваться Flash , в котором куда более удобный интерфейс, упрощающий разработчикам многие рабочие моменты. Со временем, когда будут разработаны удобные оболочки для работы с canvas это изменится, но еще не сегодня и не завтра.

    Перевод — Дежурка. Автор оригинальной статьи — Bruce Lawson, один из соавторов книги Introducing HTML5.


    Зачем нам нужен HTML5: пять простых ответов

    13 августа 2013

    Все вы наверняка хоть что-то слышали о HTML5 – новой версии языка разметки страниц в интернете. Она до сих пор считается находящейся в разработке, хотя со времени официального утверждения действующей версии HTML4 прошло более пятнадцати лет – фактически всё время активного развития Всемирной сети. В чём же заключаются преимущества HTML5 и принципиальные его отличия от HTML4?

    1. HTML5 – новый подход к разметке: мультимедиа внутри

    В отличие от разработанного ещё в девяностых языка разметки HTML4, когда даже относительно несложный мультимедийный контент был слишком «тяжёлым» для подавляющего большинства пользователей интернета, в 2004 году, в котором фактически началась работа над новой версией стандарта, в Сети уже вовсю шло распространение аудио- и видеозаписей, как официальное, так и неофициальное. Хорошим тоном для веб-сайтов стало размещение на своих страницах анимационных фильмов и видеороликов, вошли в моду аудиоблоги-подкасты.

    Однако действующий стандарт не предусматривал описания мультимедийного контента средствами самого языка: для этого использовалась функция вставки некоего объекта («object»), возможность воспроизведения которого зависела от того, установлены ли в браузере клиента совместимые с таким контентом дополнительные плагины третьих разработчиков.

    Говоря о подобных плагинах, мы прежде всего имеем в виду Adobe Flash, QuickTime или менее распространённые Real Player и Silverlight. Всё это – «надстройки», дополнения к браузерам, не являющиеся их составной частью и выполняющие роль неких посредников, которые преобразуют загружаемый цифровой контент в видео и звук.

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

    В стандарте HTML5, представляющем собой сочетание собственно HTML, а также CSS и JavaScript, изначально реализуется принципиально иной подход, в котором медиаконтент представляет собой неотъемлемую часть кода страницы. HTML5 обеспечивает единый стандартный способ описания (синтаксис) встраиваемого в страницы аудиовизуального контента.

    Для интеграции аудио или видео в HTML5 достаточно использовать простой набор тэгов, описывающих, какой тип контента вы намерены поместить («video» или «audio»), и обычные ссылки на соответствующие медиафайлы.

    Разумеется, у HTML5 есть и множество других нововведений, но это самое главное из них – изменение идеологического подхода.

    2. Проблема обратной совместимости: сначала HTML, потом плагины

    К сожалению, в мире остаётся значительная часть пользователей, у которых установлены устаревшие браузеры, вполне их устраивающие, но не поддерживающие все возможности HTML5. Прежде всего, речь идёт об Internet Explorer версии 8, до сих пор считающейся самой популярной для этого браузера. Последующие версии – IE 9 и 10 – уже практически полностью поддерживают HTML5. Что касается Chrome, Opera и Safari, то они уже в течение нескольких лет способны обрабатывать теги «video» и «audio».

    Тем не менее для обеспечения обратной совместимость в HTML5 сохраняется поддержка использования плагинов (тега «object»), но по схеме «сначала HTML, а потом уже плагины». Это означает, что браузер должен сначала осуществлять рендеринг страницы с использованием тегов «video» и «audio» – и лишь при невозможности сделать это применять код плагинов.

    Для обеспечения правильного функционирования такого подхода можно использовать одну из множества доступных библиотек JavaScript, часть из которых предоставляет полностью интегрированный программный интерфейс (API) для управления как HTML-контентом, так и встроенными объектами. Среди них, в частности, можно назвать Projekktor или программный видеоплеер Video.js, обеспечивающие полную совместимость как с HTML5, так и со старыми браузерами, в которых применяются плагины.

    3. Единый подход к десктопным и мобильным платформам

    Поддержка нового стандарта HTML5 обеспечивается и практически на всех современных мобильных устройствах, включая iOS, Android и Windows Phone, в чём заключается ещё одно его важное достоинство. Веб-мастеру уже не нужно размещать несколько версий медиаконтента для «полноценных» компьютеров и мобильных устройств. Известно, что iOS полностью несовместима с Flash, а ОС Android совместима лишь частично. В случае с HTML5 эта проблема полностью снимается.

    Кроме того, многие современные мобильные устройства поддерживают аппаратное декодирование видео в широко распространённом формате H.264, что вновь избавляет веб-мастеров от лишней работы и необходимости выкладывания видео в нескольких разных кодеках. Владельцы же таких устройств получают низкую нагрузку на систему и длительное время автономной работы.

    4. Поддержка разных форматов видео и звука

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

    Самые популярные контейнеры для интернет-видео – это AVI, MP4, FLV и WebM, а основных «сетевых» видеокодеков всего три: H.264, Ogg Theora и VP8. При этом каждому кодеку обычно (но далеко не всегда) лучше всего соответствует свой формат контейнера: H.264 – MP4, Theora – OGG, VP8 – WebV.

    Мастер Йода рекомендует:  Unity обновила плагин машинного обучения ML-Agents

    Кодек H.264 сжимает видео с потерями, чтобы получить файл высокого качества, но небольшого размера. При этом спецификация предусматривает несколько профилей с разным качеством и степенью сжатия, чтобы на маломощные мобильные устройства можно было транслировать «лёгкие» файлы, а на десктопы с широкополосными доступом – более качественное видео.

    Хотя H.264 – коммерческий кодек, то есть предполагает лицензионные отчисления, он наиболее универсален: его встроенная поддержка есть в Internet Explorer, Chrome, Firefox, Safari, iOS и Android, а отсутствует лишь в Opera, где такое видео декодируется только через внешний плагин.

    Кодек Ogg Theora, изначально рассчитанный на системы под Linux, вначале тоже был коммерческим, но теперь лицензируется бесплатно. Встроенная поддержка имеется в браузерах Chrome, Firefox и Opera, в Internet Explorer и Safari доступен только через плагины.

    Кодек VP8, ориентированный на мобильные устройства, распространяется Google на условиях Open Source и обеспечивает качество, сходное с H.264, при меньшей сложности декодирования. Встроенная поддержка есть в Chrome, Firefox и Opera, а также в мобильных устройствах под управлением Android.

    Таким образом, чтобы обеспечить воспроизведение видеоконтента практически на всех существующих системах, достаточно выкладывать файлы в контейнерах MP4 в стандарте кодирования H.264 и в формате WebM с кодеком VP8. Поскольку изо всех современных десктопных браузеров встроенная поддержка H.264 отсутствует только в Opera, такие сочетания будут самыми универсальными.

    5. Существует обширная общедоступная документация

    Несмотря на то что HTML5 пока ещё не имеет статуса окончательного стандарта, его поддерживает подавляющее большинство современных браузеров и мобильных устройств. Потому не удивительно, что для веб-разработчиков уже существует обширная общедоступная документация – большая часть которой, естественно, опубликована на английском языке.

    Прежде всего речь об официальной последней рабочей версии консорциума W3C, в рамках которого ведётся непосредственная разработка HTML5.

    На сайте разработчиков Mozilla приводится справочник тэгов, причём элементы, которые были добавлены в HTML5, выделены особо.

    Подробные описания подхода к интеграции видео в HTML5 можно найти здесь и здесь (тоже на английском языке).

    На русском языке краткий справочник HTML5 с примерами применения новых элементов имеется на сайте Puzzleweb.ru.

    Кроме того, на русский язык переведено уже довольно много книг по HTML5, среди которых, например, «HTML5 для профессионалов», «Погружение в HTML5» или «Самоучитель HTML5».

    Что дальше?

    Поздравляем с созданием своего первого полноценного сайта. Вы сумели сделать страницу с тремя колонками, меню и формой комментариев.

    Следующие шаги, которые вы сделаете в качестве разработчика, оставляем на ваше усмотрение, потому что это бесконечные перспективы. Возможно, вас интересует что делать дальше? У меня есть несколько советов, которые вам помогут!

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

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

    Затем выберите свой любимый сайт и попробуйте поиграться с ним и написать код с нуля. Найдите отдельные части сайта и определите их функциональность. Вначале создайте код HTML, а затем примените CSS (всегда в таком порядке). После завершения сравните результат с оригиналом и спросите себя, что необходимо выучить. Это было бы идеальным путём для старта!

    Шаблоны

    Для дальнейшего развития важно понимать, что фронтенд-программирование (это название для программирования пользовательских интерфейсов, в нашем контексте это главным образом написание кода на HTML, CSS и JavaScript) — это работа на основе хорошо известных повторяемых действий. Каждый раз, когда вы работаете с новым сайтом, вы должны подготовить семантическую разметку HTML, затем написать CSS-код для получения эффектов, которые отражают дизайн целевого сайта. Дьявол кроется в мелочах, вот почему фронтенд это интересное поле деятельности.

    Когда вы узнаете больше, то быстро обнаружите, что обычно существует множество различных способов решить проблему и от вас зависит выбор наиболее подходящего. Даже простой круг можно отобразить на сайте множеством методов. Вы можете использовать изображение, HTML5 Canvas, SVG или свойство border-radius . Помните наш многоколоночный проект? Его также можно сделать разными путями (погуглите «inline-block вёрстка», «вёрстка на flex-box»). Вы должны выяснить, что лучше всего подходит для вашего проекта.

    Реальность

    Реальностью программирования сайта является то, что современные браузеры постоянно совершенствуются, добавляя новые возможности CSS3 и HTML5. Неделю за неделей вы получаете обновления браузера с кучей новых функций. Как разработчик, вы должны внедрять их все и использовать наиболее правильные, основываясь на разных обстоятельствах. Вы должны ответить на вопрос — на поддержку каких браузеров ориентирован ваш проект. Вы должны решить, стоит ли заботиться о некотором количестве людей использующих браузер X. Затем появляются новые вопросы. Браузер Х поддерживает скруглённые уголки в CSS, а другие нет. Если вы хотите поддерживать оба браузера, то вам нужно найти подходящий обходной путь этой проблемы. Это одна из обязанностей фронтенд-разработчика — выбирать средства и методы, которые будут работать в любом браузере, который ваш проект предполагает поддерживать.

    История

    Соответственно важно ознакомиться с историей разработки HTML5 и CSS3. Это была сумасшедшая поездка за последние двадцать лет и некоторые побочные эффекты до сих пор остались. Мы постоянно изучаем новые вещи и пытаемся найти ответы, задавая уже новые вопросы. Вы будете учиться пока решаете разные проблемы. Так выглядит процесс саморазвития.

    Делать ошибки

    Ещё одним важным пониманием для становления хорошего фронтенд-программиста является то, что все мы делаем ошибки и учимся на них. Нет другого способа для совершенствования себя в роли веб-разработчика, чем постоянно пробовать разные вещи и учиться на них. Будьте любопытны. Процесс обучения не измеряется временем окончания. Наша индустрия движется быстро и каждый месяц мы должны узнавать что-то новое.

    Хорошие новости

    Несмотря на то, что новые знания сыпятся на нас каждый день, хорошей новостью является то, что все они построены на много лет известном фундаменте. HTML и CSS не меняют резко форму или способ написания. Нет. Эти языки остаются более или менее одинаковыми. Год за годом у нас просто появляется больше ответов на некоторые проблемы.

    Хотя вы можете спросить — что сейчас в тренде? Что мне нужно знать, чтобы быть в теме?

    Доступность

    По оценкам 285 миллионов человек во всем мире слабовидящие: 39 миллионов слепых и 246 миллионов имеют плохое зрение. ВОЗ

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

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

    Ответственный разработчик просто не может забыть об этом. Я настоятельно рекомендую вам Web Accessibility: Web Standards and Regulatory Compliance и Apps For All: Coding Accessible Web Applications, чтобы ознакомиться с этим важным вопросом.

    Адаптивный веб-дизайн

    Следующий новый метод веб-разработки — адаптивный веб-дизайн. Если кратко, то речь идёт о том, как проектировать сайты, чтобы они красиво и наглядно выглядели на различных устройствах, включая мобильные телефоны, планшеты и телевизоры. Имеет смысл немного подумать над тем, почему это имеет значение. Вы не можете показывать пользователям один и тот же макет сайта на мобильных телефонах и ноутбуках. Ну, на самом деле можно, но это скорее всего окажется неэффективным. Имея ограниченный размер экрана мобильного телефона, возможно, имеет смысл пересмотреть вёрстку сайта и по другому приспособить доступное пространство. И вот тогда адаптивный дизайн становится полезным. Благодаря ему вы можете установить особую кучу правил CSS только для определённых разрешений экрана, чтобы ваш сайт выглядел иначе на мобильных устройствах, тогда как на ноутбуках он останется прежним. Вот простой пример для установки определённых правил CSS только для устройств шириной более 320px:

    Мы использовали здесь медиа-запросы. В приведённом фрагменте каждый элемент .news в коде будет скрыт для разрешения экрана шире, чем 320px (потому что мы установили display: none).


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

    • Species in Pieces — интерактивная выставка об исследовании 30 наиболее интересных видов, к сожалению находящихся под угрозой исчезновения — их остатки буквально выживают. Все виды представлены как многоугольники на CSS.
    • Apple MacBook — интересная анимация складывания/раскладывания Macbook с помощью HTML5-видео.
    • WarsawRising.eu — захватывающий повествующий проект о Варшавском восстании.
    • CSS Sans — Шрифты с использованием только CSS? Нет проблем!
    • CSS FPS — 3D-графика генерируемая CSS.
    • 50 проблем за 50 дней — Питер Смарт пытался решить 50 проблем за 50 дней с помощью дизайна и представил свою удивительную поездку на сайте.
    • California Population Density
    • Echoes of Tsunami — волнующий рассказ о цунами 2004 года и его последствиях. 10 лет после катастрофы, борьба против голода в память о цунами.
    • Interactive Resume
    • Financial Times App
    • Every Last Drop
    • Bezier game — знакомство с кривыми Безье путём рисования их в браузере.

    Почитайте блоги об HTML и CSS. Вот список наиболее ценных из них:

    Изучите больше новых концепций. Следующие очень привлекательные темы:

    • блочная модель;
    • адаптивный веб-дизайн;
    • прогрессивное улучшение;
    • сначала мобильные;
    • система сеток;
    • CSS-фреймворки;
    • семантический веб;
    • доступность;
    • WAI-ARIA.

    Прочтите хорошие книги:

    Почитайте интересные статьи и подпишитесь на рассылку:

    Кроме этого, попробуйте регулярно учить новые теги HTML5 и играть с новыми вещами, связанными с CSS3. Если вы не уверены что функция, которую вы хотите использовать широко поддерживается, перейдите на Caniuse.com и проверьте. Если вы ищите достойную документацию, пожалуйста, посетите Mozilla Developer Network. Создайте аккаунт на Twitter и следите за наиболее известными людьми. Зарегистрируйтесь на Github, публикуйте свой код и, что более важно, пытайтесь анализировать код других. Кроме того, экспериментируйте с codepen.io. Посмотрите на JSBin или JSFiddle, где вы можете писать и тут же получить предварительный просмотр результата. Нет необходимости сохранять файлы локально!

    Не прекращайте учиться! Пытайтесь и создавайте. Будьте открытыми и терпеливыми. Мы все живём в открытой сети, в конце концов!

    28 особенностей, советов и техник HTML5, которые необходимо знать

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

    1. Новый Doctype

    До сих пор используешь этот надоедливый, сложнозапоминающийся XHTML doctype?

    Если так, то зачем? Начни использовать новый HTML5 doctype. Ты проживешь дольше — как бы сказал Дуглас Квейд

    На самом деле знал ли ты, что, по правде говоря, даже эта директива не является обязательной в HTML5? Однако, она используется для современных и браузеров более ранних версий, которые требуют определенного doctype . Браузеры, которые не понимают эту директиву, просто отображают содержащуюся разметку в стандартном режиме. Поэтому начинай использовать новый doctype без боязни и особых стеснений.

    2. Элемент figure

    Рассмотрим следующую разметку для изображений:

    К сожалению, нет возможности ассоциировать подпись, содержащуюся в тэге параграфа, с элементом изображения, к которому эта подпись относиться. В HTML5 это исправляется с помощью элемента . В комбинации с элементом , мы можем семантически ассоциировать подписи с соответствующими изображениями.

    3. Переопределенный элемент

    Не так давно, я использовал элемент для создания подзаголовков, которые близко связаны с логотипом. Это очень удобный презентационный элемент; однако сейчас это будет не корректным использованием. Элемент small сейчас переопределен более специализировано для отображения мелкого текста. Представь краткий блок об описании авторских прав на твоем сайте; в соответствии с новым опредлением элемент может быть корректно содержать эту информацию.

    Элемент small сейчас относится к «маленькому тексту».

    4. Больше нет атрибута type для элементов script и link.

    Ты возможно до сих пор добавляешь атрибут type в тэги элементов link и script

    Это уже не нужно. При объявлении обоих этих тэгов уже предполагается, что они ссылаются на определенные таблицы стилей и скрипты соответственно. Таким образом, мы можем удалить в целом type .

    5. Брать в кавычки или нет.

    . В этом вопрос. Помни, что HTML5 это не XHTML. Ты не обязан помещать атрибуты в кавычки, если не хочешь этого делать. Ты не обязан добавлять закрывающий тэг. Фактически в этом нет ничего плохого, если это делает твою жизнь намного проще. Для меня это на самом деле проще.

    Попробуй и ты. Но если ты предпочитаешь более структурированные документы, во всех смыслах, ты можешь использовать кавычки.

    6. Сделай свой контент редактируемым

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

    Или, как мы узнали из прошлого совета, мы можем написать это так:

    7. Поля ввода Email

    Если мы используем значение «email» атрибута type для форм ввода, мы можем проинформировать браузер о возможности ввести строки, соответствующие только валидным email адресам. Да, все верно: встроенная валидация форм «на лету» скоро будет доступна! Мы пока не можем на все 100% положиться на результаты данной проверки по понятным причинам. Браузеры более ранних версий, которые «не понимают» значение email атрибута type, отображают поля ввода самими что ни на есть обычным образом.

    В то же время, мы не можем зависеть от валидации браузера. Решение на стороне сервера по-прежнему должно быть реализовано.

    Также стоит учесть, что все современные браузеры достаточно нестабильны, когда дело доходит до использования элементов или атрибутов, которые не поддерживаются ими полностью. Например, Opera поддерживает проверку форм email, только если определен атрибут name . Однако, она не поддерживает атрибут placeholder , который будет рассмотрен более подробно в следующем совете. В итоге, не завися пока от этих форм валидации, мы все равно можем их использовать.

    8. Заполнители

    Прежде мы были вынуждены использовать немного Javascript для создания заполнителей для областей текста (textbox). Конечно, ты можешь изначально назначить атрибут value как ты считаешь нужным, но как только пользователь удаляет этот текст и снимет фокус с него, щелчком мыши вне этого поля, его содержимое снова станет заданным по умолчанию. Атрибут placeholder исправляет эту ситуацию.

    Опять же, поддержка этой функции достаточно сомнительна во всех браузерах, однако, с каждым новым релизом ситуация будет меняться к лучшему. К тому же, если браузер такой, как Firefox или Opera, в настоящее время не поддерживает атрибут placeholder , ничего страшного.

    9. Локальное хранилище

    Благодаря локальному хранилищу(не введенным с HTML5, а упомянутому ради удобства), мы можем организовывать расширенную «память» браузера введенных данных, даже после его закрытия или обновления страницы.

    «Локальное хранилище устанавливает пространство на домене. Даже закрывая и открывая заново браузер и переходя на тот же сайт, все данные из полей сохраняются в локальном хранилище.
    -QuirksBlog

    Хотя очевидно, что данное хранилище не поддерживается всеми браузерами, мы можем изучить этот метод для работы, наиболее заметно это в Internet Explorer 8, Safari 4 и Firefox 3.5. Учти только то, что для компенсации отсутствия поддержки данной технологии в старых браузерах, ты должен сперва определить существует ли свойство window.localStorage.

    10. Семантичный Header и Footer

    Прошли времена подобного кода:

    Блоки, изначально, не имели семантичной структуры — даже после появления атрибута id . Теперь в HTML5 у нас появилась возможность использовать элементы и . Разметка, приведенная выше, может быть переписана следующим образом:

    Это в полной мере позволяет создавать в своих проектах сложные по структуре разделы header и footer

    Не надо путать эти элементы с заголовком и подвалом твоего сайта. Они просто ссылаются на эти контейнеры. По существу, имеет смысл размещать в элементе footer , к примеру, мета-информацию в нижней части статьи блога.

    11. Еще о дополнениях работы с формами в HTML5

    Изучи новые полезные дополнения HTML5 по работе с формами в небольшом видео-совете.

    12. Internet Explorer и HTML5

    К сожалению, Internet Explorer по-прежнему привносит множество пререканий при работе с новыми HTML5 элементами.

    Все элементы, по умолчанию, имеют значение inline атрибута display

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

    К сожалению, Internet Explorer будет все равно игнорировать эти стили, потому что он понятия не имеет, что, например, элемент header сам по себе блочный. К счатью, существует простой фикс этой проблемы:

    Достаточно странно, но этот код кажется включает Internet Explorer. Для упрощения использования данного метода в дальнейшем, Рэмми Шарп создал скрипт, на который можно ссылаться, как на HTML5 факел. Этот скрипт также исправляет часть вопросов с печатью.

    13. hgroup

    Представь, что в заголовке моего сайта имеется его имя, немедленно следующее за подзаголовком. Используя тэги ≪h1> и ≪h2> соответственно для создания разметки в HTML4 до сих пор не было возможности семантично проиллюстрировать взаимоотношения между этими двумя элементами. К тому же, использование тэга h2 привносит больше проблем, с точки зрения иерархии, когда он описывает и другие заголовки на странице. Используя элемент hgroup , мы можем группировать заголовки вместе без влияния на поток вывода документа.

    14. Атрибут для обязательных полей

    Формы поддерживают новый атрибут required , который указывает, естественно, является ли конкретное поле для ввода обязательным. В зависимости от твоих предпочтений написания кода, ты можешь объявить этот атрибут двумя путями:


    Либо более структурированным способом:

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

    Если обязательное поле остается пустым и форма отправляется, поле будет подсвечено.

    15. Атрибут Autofocus

    Опять же, HTML5 снимает необходимость использования Javascript-решений. Если конкретное поле ввода должно быть выбрано по умолчанию (с фокусом), теперь мы можем использовать атрибут autofocus .

    Любопытно, пока я сам предпочитаю использовать более XHTML подход(с использованием кавычек и т.д.) и пишу «autofocus=autofocus» , хоть это и странно. Таким образом, скоро мы будем использовать подход с использованием одного ключевого слова.

    16. Поддержка аудио

    Mozilla и Webkit еще не определились до конца с форматом аудио. Firefox хочет использовать файл формата .ogg, когда как Webkit-браузеры отлично взаимодействуют с распространенным .mp3 расширением. Это означает следующее, что ты, как минимум, должен создавать две версии для аудио.

    Когда Safari загружает страницу, браузер может не распознать .ogg формат, пропустит его и, соответственно, обратиться к mp3 версии. То учти, что IE, как обычно, не поддерживает воспроизведение аудио, а Opera 10 и более ранние версии могут работать только с .wav файлами.

    17. Поддержка видео

    Также как элемент , мы также можем использовать HTML5 видео в новых браузерах. На самом деле, совсем недавно YouTube анонсировал новый встроенную поддержку HTML5 видео для своих роликов, для браузеров, которые поддерживают эту технологию. К сожалению, опять же, потому что HTML5 спецификация не определяет конкретного кодека для видео, решение о выборе кодека остается за разработчиками браузеров. Пока Safari и Internet Explorer 9 могут поддерживать видео в формате H.264 (который могут вопроизводить Flash-плееры), Firefox и Opera используют свободные форматы Theora и Vorbis. Опять же, для отображения HTML5 видео, ты должен учитывать оба формата.

    Chrome может корректно обрабатывать видео, которое кодировано в форматах «ogg» и «mp4».

    Есть несколько моментов, на которые стоило бы обратить внимание.

    1. Мы не обязаны объявлять атрибут type ; однако, если мы не будем объявлять этот атрибут, браузер должен будет определить его самостоятельно. Можно сэкономить немного пропускной способности, если самому объявить атрибут type
    2. Не все браузеры понимают HTML5 видео. Под элементом source , мы можем также предложить ссылку для скачивания или встроенную Flash-версию видео. Твое дело.
    3. Атрибуты controls и preload будут более подробно рассмотрены в слелующих двух пунктах.

    18. Предзагрузка видео.

    Атрибут preload делает именно то, о чем ты мог бы предположить. Хотя изначально ты должен решить хочешь ли ты, чтобы браузеры осуществлял предварительную загрузку видео. Так ли это необходимо? Возможно, если посетитель получает доступ к странице, которая специально создана для отображения видео, несомненно видео предварительно должно быть загружено, тем самым сэкономив пользователю немного времени. Видео будет предварительно загружаться, если имеется следующее объявление preload=»preload» или просто добавлен атрибут preload . Я предпочитаю последний вариант, так как он менее многословный.

    19. Отображение контрольной панели

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

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

    20. Регулярные выражения

    Как часто ты пишешь регулярные выражения для проверки определённых текстовых полей? Но благодаря новому атрибуту pattern , мы можем вставить регулярное выражение напрямую в нашу разметку.

    Если ты достаточно знаком с регулярными выражениями, ты знаешь, что шаблон [A-Za-z] <4,10>принимает только прописные и строчные буквы. Также эта строка должна быть длиной минимум 4 и максимум 10 знаков.

    Обрати внимание, что мы объединили все новые атрибуты!

    Если ты не знаком с регулярными выражениями, направляйся сюда.

    21. Определение поддерживаемых атрибутов

    В чем прелесть этих атрибутов, если мы не имеем возможности определить заранее поймет ли их браузер? Хорошо, но есть несколько вариантов определить это заранее. Мы обсудим два. Первый вариант: использовать отличную библиотеку Modernizr. Кроме того, мы можем создать и анализировать эти элементы, чтобы определить какие из браузеров способны их понять. Например, в нашем предыдущем примере, если мы хотим определить поддерживает ли браузер атрибут pattern , мы должны добавить немного Javascript на нашу страницу:

    На самом деле, это достаточно популярный метод определения браузерной совместимости. Библиотека jQuery использует данный метод. В коде, приведенном выше, мы создаем новый элемент input , и сразу же определяем распознается ли атрибут pattern для этого элемента. Если да — браузер поддерживает данную функциональность.

    Помни, что все это основывается на JavaScript!

    22. Маркировка элементов

    Подумай о подсвеченной маркировке элемента. Строка, помещенная в данный тэг, должна согласовываться с текущими действиями пользователя. Например, если я ищу «Открой своё сознание» на каком-либо блоге, я могу использовать немного Javascript-кода для того, чтобы обвернуть каждое появление этой строки с помощью тэгов .

    23. Когда именно надо использовать

    Некоторые из нас изначально относятся с спорят когда именно мы должны использовать простые, стандартные div ы. Сейчас мы можем пользоваться элементами header , arcticle , section и footer . Если ли четко определенные моменты, когда следует использовать div ? Конечно!

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

    Например, если тебе необходимо поместить блок кода специально в элемент-обвертку с целью дальнейшего позиционирования контента, элемент

    24. Что необходимо немедленно начать использовать.

    Ведутся разговоры, что HTML5 не будет закончен до 2022, поэтому многие люди продолжают его игнорировать, что является большой ошибкой. На самом деле, есть несколько функций HTML5, которые мы можем использовать в своих проектах прямо сейчас! Ну а более простой, чистый код — это всегда хорошо, как минимум. В сегодняшнем небольшом обучаещем видео, я покажу несколько из них

    25. Что не является HTML5

    Люди могут быть прощены за то, что удивительные Javascript малообъемные переходы, сгруппированы во всеобъемлющем HTML5. Эй, даже Apple непреднамеренно способствал этой идее. Для интересующихся «не разработчиков» это простой способ соответствовать современным веб-стандартам. Однако, для нас, несмотря на кажущуюся семантичность, важно понимать, что это не HTML5.

    1. SVG: Не HTML5. По-крайней мере, 5 лет.
    2. CSS3: Не HTML5. Это CSS.
    3. Геолокация: Не HTML5.
    4. Хранилище на стороне клиента: Не HTML5. Понятие изначально фигурировало в спецификации, но позже оно было удалено из нее, так как некоторые специалисты были обеспокоены тем, что спецификация становилась слишком сложной. И теперь эта технология выведена в отдельную спецификацию.
    5. Web Sockets: Не HTML5. Также было выведено в отдельную спецификацию.

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

    26. Атрибут Data

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

    . валидатор подобную конструкцию мог не пропустить. Но сейчас, когда мы уже не относим придуманный нами атрибут к атрибуту «data», мы можем официально использовать этот метод. Если вы хоть раз передавали важную информацию посредством имени такого атрибута, как class (возможно для использования в Javascript), то эта новая возможность является большим подспорьем!

    HTML сниппет

    Получение значения пользовательского атрибута

    Также этот метод может быть использован в твоих CSS, как и в этом глупом и хромом примере по CSS изменению текста.

    Ты можешь увидеть демо размещенного выше эффекта на JSBIN.

    27. Элемент вывода

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

    В качестве простого примера, давай вставим сумму двух чисел в пустой элемент output с помощью Javascript после того, как кнопка submit будет нажата.

    Пожалуйста, только учти, что поддержка элемента output до сих пор немного нераспространенная. Во время написания этой статьи, у меня получалось нормально использовать этот элемент только в Opera. Что и было отражено в коде, приведенном выше. Если браузер не распознает этого элемента, то он просто сообщит вам об этом. В противном случае, браузер определит элемент вывода с именем «sum» и установит его значение, равное 15 , соответственно, после того, как форма будет отправлена на сервер.

    Элемент output может также содержать атрибут for , который отражает имя элемента, с которым он связан, подобно логике работы атрибута label .

    28. Создание ползунков

    HTML5 предоставляет новый вид элементов input — range

    Особенно примечательно, что он может содержать атрибуты min , max , step и value и др. Хотя только Opera сейчас поддерживает это новшество полностью, будет просто восхитительно, когда мы сможем в полной мере пользоваться этой технологией.

    Для быстрой демонстрации, давайте создадим ползунок, который позволит пользователям оценить насколько хорош «Total Recall». Мы не будем создавать приближенное к реальной жизни решение, а просто покажем простоту реализации.

    Шаг 1: Разметка


    В начале создадим разметку.

    Заметь, для того, чтобы установить min и max значения, мы можем всегда определить какой step (шаг) будет использоваться при переходе. Если step равен 1 , будет доступно 10 значений для выбора. Мы также можем воспользоваться преимуществом нового элемента output , с которым мы ознакомились в предыдущем совете.

    Шаг 2: CSS

    Далее мы добавим немного стилей. Мы также используем :before и :after для информирования наших пользователей о том, какие значения определены в качестве минимального ( min ) и максимального ( max ) значения. Большое спасибо Реми и Брюсу, которые научили меня данному трюку в статье «Вступление в HTML5.»

    В коде, приведенном выше, перед и после нашего ползунка мы добавилии значения, которые использовали в качестве min и max соответственно.

    Шаг 3: Javascript

    • Определяем поддерживает ли браузер эту технологию. Если нет — мы предупреждаем пользователя, что демо не будет работать.
    • Динамично обновляем элемент output , если пользователь двигает слайдер.
    • Отслеживаем событие, когда пользователь уводит курсор мыши от слайдера, считываем значение и сохраняем его в локальном хранилище.
    • Затем, когда пользователь в следующий раз обновит страницу, ползунок и поле вывода будут автоматически устанавливаться в свое последнее состояние.

    Готовы к решению реальных задач? Возможно не до конца, но это действительно весело готовиться к этому!

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

    Благодарю за прочтение статьи! Мы рассмотрели достаточно много материала, но на самом деле лишь поверхностно коснулись того, что возможно в HTML5. Я надеюсь, это послужит хорошей основой для дальнейшего развития!

    Стильная страница FAQ с использованием только CSS3

    Обычно страница FAQ представляет собой длинный текст с большим количеством вопросов и ответов на них. Данную страницу ищут тогда, когда нужна дополнительная информация по работе сайта. В данном уроке мы сделаем стильную страницу FAQ с помощью только CSS3, без использования JavaScript.

    Help Center Facebook использует отличный эффект для предварительного показа ответа на вопрос. Там выводится отрывок маленьким шрифтом и с затемнением. А когда посетитель нажимает на вопрос, текст ответа увеличивается и выводится полностью.

    В нашем уроке мы создадим подобный эффект, используя только CSS3.

    Начнем с разметки структуры документа:

    • На выше приведенном рисунке видно, что метка будет заголовком раздела. Но вы можете поместить label в h1 , если хочется соблюдать правила семантики.
    • С помощью label::before создадим треугольник справа.
    • Первый абзац каждой секции будет конвертироваться в описательный отрывок ответа на вопрос.

    Принцип действия

    Никаких ракетных технологий здесь не используется. Здесь задействован трюк с чекбоксом для связки элементов и . А сам чекбок скрывается от глаз читателя страницы.

    Ниже приводится код с комментариями:

    Поддержка браузерами

    Как насчет вывода нашей страницы в старых браузерах? Отличный вопрос. И ответом является приемлемая деградация внешнего вида:

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

    Данный урок подготовлен для вас командой сайта ruseller.com
    Источник урока: www.red-team-design.com/fancy-faq-page-using-css3-only
    Перевел: Сергей Фастунов
    Урок создан: 24 Февраля 2012
    Просмотров: 30685
    Правила перепечатки

    5 последних уроков рубрики «CSS»

    Забавные эффекты для букв

    Небольшой эффект с интерактивной анимацией букв.

    Реализация забавных подсказок

    Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

    Анимированные буквы

    Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.

    Солнцезащитные очки от первого лица

    Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

    Раскрывающаяся навигация

    Экспериментальный скрипт раскрывающейся навигации.

    25 актуальнейших вопросов, на которые у науки нет ответов

    На самом деле на свете очень много тайн, о которых современной науке практически ничего неизвестно.

    Ниже представлены самые волнующие.

    1. Каков состав Вселенной?

    Атомы, как известно, являются важнейшей составляющей частью практически всего на нашей планете. Однако, они же – это всего лишь маленькая часть того, из чего состоит Вселенная.

    Речь идёт о пяти процентах.

    Остальные девяносто пять процентов – это тёмная энергия (тёмная материя), о которой неизвестно ничего. В связи с отсутствием какой-либо информации ей и было присвоено такое название.

    2. Почему нам снятся сны?

    Некоторые полагают, что сны – это подсознательные нереализованные желания, другие говорят, что это обычные мозговые импульсы.

    3. Почему мы спим?

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

    4. Откуда на земле углерод?

    Ещё со времён начала промышленной революции человек стал отправлять в атмосферу углерод, который скрыт в недрах Земли. Откуда он там снова появляется?

    5. Как добыть солнечную энергию?

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

    Самые сложные вопросы

    6. Что случается с простыми числами?

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

    За её доказательство назначена награда в 1 миллион долларов США.

    7. Каким путём бороться с бактериями?

    По мере распространения и чрезмерного употребления антибиотиков всё больше бактерий с каждым днём адаптируются к ним. Науке предстоит искать новые способы борьбы.

    Основные надежды возлагаются на результаты исследований в области ДНК, а также на поиски ответа на данный вопрос в глубоководных исследованиях.

    8. Сможет ли компьютер работать ещё быстрее?

    На сегодняшний день владельцы iPhone обладают более мощным устройством, чем было у специалистов НАСА, когда они планировали полёт на Луну. Реально ли продолжение роста производительности, или своего предела компьютеры уже достигли?


    Ответ на этот вопрос во многом зависит от правильности проделывания невероятно сложных вычислений.

    9. Удастся ли нам найти лекарство от рака?

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

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

    Главное – не курить, не злоупотреблять алкоголем, питаться умеренно, заниматься спортом, вести активный образ жизни и избегать излишнего пребывания на солнце.

    10. Когда роботы станут нашими собеседниками?

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

    Несмотря на то, что искусственный интеллект постоянно развивается, достоверной информации о том, будут ли роботы когда-либо самостоятельными «личностями», нет.

    11. Чем заполнено дно океана?

    На первый взгляд этот вопрос может показаться несуразным, но на самом деле дно океана не исследовано на 95 процентов!

    Специалисты утверждают, что человек быстрее и проще доберётся до Луны, чем спустится в самую глубокую часть океана.

    Самые тяжёлые вопросы

    12. Что представляет собой «чёрная дыра»?

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

    Крайне важно понять, как существуют и функционируют самые странные части нашей Вселенной.

    13. Как долго человек может прожить?

    Относительно недавно наука и медицина стали относиться к старости как к болезни, а не как к неизбежности. Но всё же первостепенен в данном случае не вопрос о продолжительности жизни, а о том, как дольше оставаться здоровым?

    14. Как разрешить проблему перенаселения?

    Через 35 лет численность населения планеты Земля достигнет десяти миллиардов. По сей день нет никаких конкретных идей о том, каким образом организовать инфраструктуру, которая могла бы обеспечить нормальную жизнь этому количеству людей.

    15. Возможны ли путешествия во времени?

    Учёные отмечают, что по техническим показателям путешествовать в будущее возможно. Так как во время движения с большой скоростью случается замедление личного восприятия времени объектом, подвергающемуся такому воздействию, с точки зрения человека всё происходящее выглядит как ускоренное передвижение в будущее.

    Но путешествие в прошлое до сих пор невозможно.

    16. Почему человек зевает?

    Несмотря на то, что зевают и люди, и большая часть позвоночных животных, специалисты до сих пор не нашли точное объяснение этому явлению. Самая распространённая точка зрения – это недостаток кислорода в организме.

    Самые трудные вопросы

    17. Почему эффект плацебо работает?

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

    18. Почему девять из десяти людей правши?

    Данный вопрос изучается вот уже на протяжении 160 лет. Но почему ведущая рука подавляющего большинства людей на планете правая мы так и не может ответить.

    19. Что делает нас людьми?

    Если взглянуть на геном человека, то мы увидим, что он на 99 процентов идентичен с обезьяньим. Наш мозг, однако, больше, чем у большинства особей животного царства. Он не самый большой, но в нём в три раза больше нейронов, чем, к примеру, у гориллы.

    Учёные полагают, что приготовление пищи, а также навыки по разведению огня со временем сделали нас обладателями более крупного мозга. Но не исключено, что наша способность к сотрудничеству, а также торговые умения, сделали этот мир человеческим, а не принадлежащим обезьянам.

    20. Как птицы каждый год перелетают в одно и то же место?

    На сегодняшний день самое лучшее объяснение данного явления – это влияние магнитного поля Земли. Этот факт ещё не принят как единственно верный, но пока лучшего объяснения не было придумано.

    21. Как бабочка-монарх понимает, куда лететь?

    Бабочки-монархи, как и птицы, ежегодно преодолевают очень большие расстояния. Странность заключается в том, что этот вид бабочек живёт не более шести месяцев, поэтому за свою жизнь каждая особь совершает лишь один перелёт. Откуда они знают направление полёта?

    22. Почему у жирафа настолько длинная шея?

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

    23. Что такое сознание?

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

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

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

    24. Мы одни во Вселенной?

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

    Сегодня астрономы могут сканировать атмосферы инопланетных миров в поисках кислорода и воды. Следующие несколько десятилетий будут увлекательным периодом исследования потенциально обитаемых планет, которых только на Млечном Пути около 60 миллиардов.

    25. Откуда родом гравитация?

    Этот вопрос на протяжении многих веков интересует научное сообщество. Причём, скорее всего, больше, чем любой другой из этого списка. Здесь на лицо вечная борьба между классической физикой и квантовой механикой.

    Основы HTML5 или учимся верстать на HTML5

    Приветствую Вас, дороги читатели блога. Сегодня мы не много узнаем о основах новой разметке веб страниц HTML5. А так же узнаем как наш уже существующий сайт перевести в этот новый HTML язык.

    Хочу сказать, что оказывается тут здесь ничего сложного нет. Я давно хотел перевести свой блог с div вёрстки в HTML5, но думал что это будет сложно так как основных новых тегов я не знал. А вот когда взялся за это дело то оказалось, что это совершенно не сложно.

    Так что и Вам советую перейти на HTML5, так как всё новое практически всегда лучше, и ещё конечно же на много проще и удобнее.

    Верстка div (старая)

    Друзья, сначала я начну с примеров, так как на примерах всегда понятнее. Как Вы уже догадались, что я перевёл свой блог на HTML5, и по этому возьмём его как пример, рассмотрим старую вёрстку с помощью DIV и посмотри как выглядит новая на HTML5.

    Как видите из кода что для каждого div задан свой класс. Например div с классом headerInner — это блок шапки сайта который описан в стилях CSS, соответственно div с классом wrapper — это основной блок в котором находятся 2 блока с записями и боковой колонкой которые имеют классы colLeft — левый блок с постами и colRight правая колонка. И конечно же я не забыл за блок футера под классом footerInner.

    Таким не сложным образом у нас получилась сетка из которой далее выходит полноценный сайт. Или же шаблон такой как на моём блоге.

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

    Теги HTML5

    Сначала давайте рассмотрим теги, которые используются в первую очередь, другими словами основные:

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


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

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

    — задаётся для боковых колонок на сайте (Сайтбара). Не важно где он будет находится слева или справа.

    — в этот тег должен входить низ Вашего сайта (Футер)

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

    — данный тег включает в себя всю навигацию на сайте (меню).

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

    Вот мы и рассмотрели самые основные теги. Теперь давайте посмотрим теги, которые используются не часто или же в зависимости от тематики сайта:

    — данный тег выводит аудио на сайте.

    — данный тег создаёт на странице поле в котором можно добавлять и применять к разным элементам разные эффекты с помощью скриптов.

    — в этот тег должны входить список меню, например ul li.

    — сюда входят время и дата на сайте. Например на блогах дата размещения поста.

    — вставляет видео на страницу.

    — данный тег переносит слово на новую строку в браузере. Аналогичен старому тегу
    .

    Естественно изменились не только теги в HTML5, грубо говоря круто изменился doctype. Вот как он выглядит в HTML4:

    А вот как он выглядит по новому:

    Ну как Вам разница? 🙂 По моему существенная. Так же ещё проще стал тег . Он был такой:

    Всё, теперь мы знаем практически все изменения и можем смело переходить к вёрстке под HTML5.

    Верстка (новая)

    Перед тем как приступить к вёрстке нам между тегами и нужно вставить простой код для IE, так как этот «супер» браузер не понимает новых тегов:

    Ещё обязательно нужно все новые теги сделать блочными. Просто добавьте этот код в любое место в Вашем файле CSS:

    Всё, первый шаг готов. Теперь давайте посмотри на готовый уже HTML5 код, который у меня получился, а также подробно разберём его:

    Как видите, что я просто некоторые div поменял на новые теги, опять повторюсь тут ничего сложного нет, главное знать какой класс за какой участок на сайте отвечает.

    Опять приведу пример. Возьмём шапку сайта. В старой вёрстке она обозначалась тегом div с классом headerInner —

    И не забываем поставить закрывающий тег , а также удалить закрывающий div.

    Идём дальше, а у нас главный блок контента. Значит это главный блок и его нужно окружить тегом . В старой вёрстке этот главный блок выглядел так

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

    Вывод

    Друзья, за Вами решение переходить на HTML5 или не переходить. Но моё мнение переходить однозначно, не нужно засиживаться на одном месть, двигайтесь вперёд, изучайте новое. Ведь не просто так придумывают эти «штуки». Не правда ли? А эта новая вёрстка прямо говорит своими новыми тегами где и какая часть находится на сайте. Не говоря уж о div вёрстке, в которой всё сливается. Ну не просто же так это всё, особенно для поисковиков, которые теперь точно будут знать где и что индексировать, так как названия тегов помогают. Я конечно не знаю берут ли это во внимание поисковики, но всё же.

    Опять рекомендую Вам переходить Вам на новую технологию.

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

    Тест по основам HTML

    Вы решили пройти быстрый и удобный тест по HTML с ответами, но не знаете, куда можно обратиться за подобным? С эффективным решением данной проблемы поможет современный портал WebShake, созданный специально для всех желающих овладеть основами веб-разработки. Мы подготовили для вас удобную форму, с помощью которой вы сможете быстро, просто и совершенно бесплатно проверить свои знания.

    Подробные сведения о тесте по HTML

    Данный язык гипертекстовой разметки (HyperText Markup Language) считается общепринятым. Он оптимально подходит для незатруднительного создания интернет-страниц с различной структурой. Фактически, свободное владение данным языком позволяет разработчику:

    • создавать интернет-порталы;
    • прописывать структуру веб-сайтов;
    • разрабатывать всевозможные элементы и так далее.

    Иными словами, специалисты, владеющие HTML, весьма востребованы в век активного развития интернета. Однако прежде чем начать разработку собственных веб-страниц, программисту необходимо освоить синтаксис языка и получить базовые знания по нему. Здесь пригодится онлайн тест по HTML.

    Крайне важно регулярно проверять промежуточный итог, определяя собственный уровень знаний. Это же позволяет своевременно исправлять всевозможные ошибки в написании кода. Именно поэтому новичкам рекомендуется проходить тест по основам HTML не реже 1 раза в 2-3 недели.

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

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

    Gtalk.kz

    Наверстываю упущенное …

    Css верстка: вопрос – ответ

    Приветствую пользователей своего блога, любителей создавать, оптимизировать и продвигать свои сайты, порталы, форумы и т. д.
    Сегодня я отвечу на несколько постоянно задаваемых вопросов по верстке связанные в основном с каскадными таблицами, т. е. с css. А также небольшой опрос в конце поста.

    Вопрос №1. Как центрировать сайт?

    Если бы внимательно читали мои уроки по верстке, (продолжение обязательно будет) то вопрос сам бы собой отпал.

    И так, создавай сайт мы создаем некий каркас. Обычно его называют #wrapper , #wrap и т. д. Блок идет обычно после тега body (тут все зависит от сложности сайта). В css файл прописываем ширину и внешние отступы:

    Все ок. Ваш сайт будет центрирован.

    Вопрос №2. Как зафиксировать фоновую картинку ?

    Тут все проще чем кажется. Надо вначале определить блок, в который мы поместим наше изображение. Например, #main, а можно и в сам тег body. Css код выглядеть будет так:

    Теперь фон будет стоять на месте, а контент прокручиваться.

    Вопрос №3. Как уменьшить css файл?

    Вопрос очень интересен. Что может сделать html верстальщик в таком случае? Писать проще и короче. Ведь чем меньше кода тем легче файл.
    Можете посмотреть презентацию моих советов по html и css. Заменяйте и объединяйте селекторы, вместо:

    Лучше сделать так:

    Намного приятней удобней и короче, не так ли? Запомнить очень легко: сверху справа снизу слева, т. е. по часовой стрелке. Для свойства padding аналогично.

    Также можно сжать css файл с помощью различных сервисов, но я вам особенно начинающим не рекомендую экспериментировать, т. к. затем редактировать такой файл крайне трудно.
    Пройдите валидацию css, в предупреждениях Вы найдете все свои совпадения, которые проглядели. Снизу можно найти раздел Информация о корректном CSS, где Ваш css уже исправленный .

    Все остальные вопросы можете также задавать в комментариях, либо отписаться мне. Не забываем кому я предоставляю бесплатные консультации.

    Как я ранее говорил Вам необходимо получше изучать css и html и никаких сложностей не возникнет
    Теперь маленький опрос:

    Постовой: Всем кто изучает Seo, облегчите себе жизнь, установите SEO плагин для FireFox

    На десерт сегодня танцы первоклассника, не знаю как Вам, но я смеялся до слез

    Добавить комментарий