Sdscompany.ru

Компьютерный журнал
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Default html template

Базовый HTML5 шаблон для любого проекта

Дата публикации: 2016-05-10

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

В данном проекте мы будем писать наш код с нуля и объяснять каждую его часть. Было бы невозможно создать такой проект, в котором были бы использованы все существующие новые элементы и техники, поэтому также мы объясним, какие вещи не подойдут под наш проект. Таким образом, у вас будет большой выбор вариантов, как создать свой HTML5 и CSS3 сайт или веб-приложение. Данной статьей можно будет пользоваться, как справочником для ряда техник. Начнем с пустой HTML5 страницы:

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Doctype

Первая часть — Document Type Declaration (объявление типа документа) или doctype. Это просто способ сказать браузеру, или любому другому парсеру, какой тип документа рассматривается. Для HTML файлов необходимо указывать версию HTML. Doctype всегда объявляется первым в самом верху HTML документа. Давным-давно объявление типа документа было трудно запоминаемым и сложным занятием. Пример строгого объявления XHTML 1.0:

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

Просто и понятно. Doctype можно записывать в верхнем регистре, нижнем или вообще вперемешку, не имеет значения. Также вы могли обратить внимание, что в объявлении странным образом отсутствует цифра 5. Текущее поколение веб-разметки известно нам под номером «HTML5», но на самом деле это всего лишь результат эволюции предыдущих HTML стандартов. Будущие спецификации также будут просто развитием сегодняшних технологий.

Так как браузеры обязаны поддерживать все существующие типы контента в Интернете, то нельзя полностью полагаться только лишь на doctype. Другими словами, один doctype не делает вашу страницу HTML5 совместимой. Все зависит от браузера. На самом деле, можно вообще использовать один из doctype’ов выше с новыми HTML5 элементами, и страница будет отображаться точно так же, как и с новым типом документа.

Тег html

Следующий по списку в любом HTML документе – тег html. В HTML5 он несильно изменился. В нашем примере выше в этом теге мы добавили атрибут lang со значением en, что означает, что наш документ будет на английском языке. При использовании синтаксиса XHTML необходимо добавлять атрибут xmlns. В HTML5 этого делать больше не нужно, и даже атрибут lang стал необязательным. Документ пройдет валидацию и без этого атрибута. На данный момент мы имеем:

Тег head

Следующая часть страницы – секция head. Первая строка внутри тега задает кодировку символом документа. Данный метатег был упрощен и на данный момент опциональный, но рекомендуемый. Раньше нужно было записывать что-то типа:

В HTML5 объявление кодировки свели к минимуму:

Почти в 100% случаев вы будете использовать значение utf8. Подробное объяснение различий в кодировках выходит за рамки данной главы, да и оно, скорее всего, будет вам неинтересно. Но если же вам все-таки интересно, можете почитать о кодировках на W3C или WHATWG.

Обратите внимание: Объявление кодировки

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

На эту тему можно еще много чего написать, но мы же не хотим, чтобы вы заснули, так что опустим детали! Так что мы просто воспользуемся упрощенным объявлением кодировки и перейдем к следующей части документа:

Данные строки мало отличаются от предыдущего синтаксиса. Заголовок страницы объявляется как обычно, а метатеги мы записали просто для примера, чтобы вы знали, где их нужно размещать. В данной секции можно разместить сколько угодно много валидных тегов meta.

Самое главное в коде выше это объявление стилей, которые задаются через обычный тег link. Кроме href и rel тегу link не нужны больше никакие атрибуты. Атрибут type необязателен, да и раньше он не нужен был для объявления типа контента стилей.

Поддержка старых браузеров

Перед объявлением следующего элемента разметки необходимо немного рассказать про него. В спецификации HTML5 появилось много новых элементов, таких как article и section, которые мы рассмотрим позже. Вам может показаться, что основная проблема для старых браузеров это поддержка нераспознанных тегов, но это не так. Большей части браузеров откровенно все равно, какие теги вы используете. Если в HTML документ добавить тег recipe или ziggy и задать им стили, к примеру, то почти все браузеры нормально прочитают разметку и применят стили без ошибок.

Данный документ, естественно, не пройдет валидацию и в нем будут проблемы с доступностью, зато отрисуется он нормально почти во всех браузерах – за исключением старых версий IE. В версиях до IE9 к нераспознанным тегам стили не применяются. Движок их видит как «unknown elements», так что вы не сможете присвоить им стили или как-то изменить их поведение. Это относится не только к тегам, которые мы придумали, но и ко всем тегам, которые были разработаны после выхода данных версий браузера. А значит, ко всем новым тегам в HTML5.

Хорошая новость в том, что на момент написания статьи большая часть людей, кто еще пользуется IE, сидят на IE9 и выше. Так что для большинства разработчиков данная проблема отпадает сама собой. Однако если большой процент ваших пользователей сидит на IE8 и старше, вам просто придется сделать что-то, чтобы дизайн не развалился на части.

К нашему счастью есть выход из этой ситуации, и это небольшой код на JavaScript, написанный John Resig. Вдохновленный идеей Sjoerd Visscher, John Resig написал код, с помощью которого можно стилизовать HTML5 теги в старых версиях IE.

В нашей разметке так называемый «HTML5 shiv» подключен как тег script внутри условного комментария. Условные комментарии были специально разработаны для IE9 и ниже. С их помощью можно определить версию браузера IE и применить к ней стили или скрипты. Комментарий ниже станет частью разметки только, если пользователь сидит через IE9 и ниже:

Документация Django 1.8

Django содержит приложения для создания статических страниц. Оно позволяет сохранять “статический” HTML и управлять ним через интерфейс администратора Django и Python API.

Статическая страница – это простой объект с URL, заголовком и содержимым. Используйте их для единичных не динамических страниц, например страницы “О нас” или “Политика конфиденциальности”, которые вы хотите хранить в базе данных, не создавая отдельное приложение Django.

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

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

Вот пример статических страниц сайтов, сделанных на Django:

Установка¶

Чтобы установить приложение статических страниц, выполните следующие действия:

Установите фреймворк для сайтов , добавив 'django.contrib.sites' в настройку INSTALLED_APPS , если он еще не добавлен.

Также убедитесь, что настройки содержат правильный SITE_ID . Обычно это 1 (то есть SITE_ID = 1 , но если вы используете фреймверк для управления несколькими сайтами, ID может быть другим.

Добавьте 'django.contrib.flatpages' в настройку INSTALLED_APPS .

Добавьте запись в URLconf. Например:

Читать еще:  Преобразование xml в html

Добавьте 'django.contrib.flatpages.middleware.FlatpageFallbackMiddleware' в настройку MIDDLEWARE_CLASSES .

Как это работает¶

manage.py migrate создает две таблицы в вашей базе данных: django_flatpage и django_flatpage_sites . django_flatpage – это таблица, которая связывает URL и содержимое страницы. django_flatpage_sites связывает страницу с конкретным сайтом.

Использование URLconf¶

Есть несколько способов добавить статические страницы в ваш URLconf. Вы можете добавить их к конкретному путю:

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

Если вы указали False в APPEND_SLASH , вам следует убрать косую черту в конце URL-шаблона.

Еще один способ – явно указать все страницы. В этом случае вы сможете ссылаться на них через шаблонный тег url :

Использование промежуточного слоя(“middleware”)¶

Каждый раз, когда приложение Django вызывает 404 ошибку, это промежуточный слой проверяет базу данных статических страниц на наличие запрашиваемого URL. Точнее выполняется поиск простой страницы с текущим URL и ID сайта из настройки SITE_ID .

Если страница найдена:

Загружается собственный шаблон для страницы, если такой указан, иначе загружается flatpages/default.html .

В шаблон передается одна переменная, flatpage , которая содержит объект страницы. При рендеринге шаблона используется RequestContext .

Промежуточный слой только добавляет слэш и перенаправляет (проверяя настройку APPEND_SLASH ), если полученный URL указывает на статическую страницу. Перенаправление постоянные (301 код ответа).

Если страница не найдена, запрос обрабатывается как обычно.

Промежуточный слой активируется только при 404 ответе, 500 и прочие игнорируются.

К простым страницам не применяется process_view промежуточных слоев

Так как FlatpageFallbackMiddleware применяется после того, как поиск URL-а провалился и мы получили 404, ответ не будет обрабатываться методом process_view промежуточных слоев. Только при успешной обработке URL-а и вызове представления вызываются эти методы.

Note that the order of MIDDLEWARE_CLASSES matters. Generally, you can put FlatpageFallbackMiddleware at the end of the list. This means it will run first when processing the response, and ensures that any other response-processing middlewares see the real flatpage response rather than the 404.

For more on middleware, read the middleware docs.

Ensure that your 404 template works

Note that the FlatpageFallbackMiddleware only steps in once another view has successfully produced a 404 response. If another view or middleware class attempts to produce a 404 but ends up raising an exception instead, the response will become an HTTP 500 (“Internal Server Error”) and the FlatpageFallbackMiddleware will not attempt to serve a flat page.

How to add, change and delete flatpages¶

Via the admin interface¶

If you’ve activated the automatic Django admin interface, you should see a “Flatpages” section on the admin index page. Edit flatpages as you edit any other object in the system.

Via the Python API¶

Flatpages are represented by a standard Django model, which lives in django/contrib/flatpages/models.py. You can access flatpage objects via the Django database API.

Check for duplicate flatpage URLs.

If you add or modify flatpages via your own code, you will likely want to check for duplicate flatpage URLs within the same site. The flatpage form used in the admin performs this validation check, and can be imported from django.contrib.flatpages.forms.FlatPageForm and used in your own views.

Flatpage templates¶

By default, flatpages are rendered via the template flatpages/default.html , but you can override that for a particular flatpage: in the admin, a collapsed fieldset titled “Advanced options” (clicking will expand it) contains a field for specifying a template name. If you’re creating a flat page via the Python API you can simply set the template name as the field template_name on the FlatPage object.

Creating the flatpages/default.html template is your responsibility; in your template directory, just create a flatpages directory containing a file default.html .

Flatpage templates are passed a single context variable, flatpage , which is the flatpage object.

Here’s a sample flatpages/default.html template:

Since you’re already entering raw HTML into the admin page for a flatpage, both flatpage.title and flatpage.content are marked as not requiring automatic HTML escaping in the template.

Getting a list of FlatPage objects in your templates¶

The flatpages app provides a template tag that allows you to iterate over all of the available flatpages on the current site.

Like all custom template tags, you’ll need to load its custom tag library before you can use it. After loading the library, you can retrieve all current flatpages via the get_flatpages tag:

Displaying registration_required flatpages¶

By default, the get_flatpages templatetag will only show flatpages that are marked registration_required = False . If you want to display registration-protected flatpages, you need to specify an authenticated user using a for clause.

If you provide an anonymous user, get_flatpages will behave the same as if you hadn’t provided a user – i.e., it will only show you public flatpages.

Limiting flatpages by base URL¶

An optional argument, starts_with , can be applied to limit the returned pages to those beginning with a particular base URL. This argument may be passed as a string, or as a variable to be resolved from the context.

Integrating with django.contrib.sitemaps

The sitemaps.FlatPageSitemap class looks at all publicly visible flatpages defined for the current SITE_ID (see the sites documentation ) and creates an entry in the sitemap. These entries include only the location attribute – not lastmod , changefreq or priority .

This class is available from django.contrib.sitemaps.FlatPageSitemap in older version of Django.

Example¶

Here’s an example of a URLconf using FlatPageSitemap :

Data Templates

Here we speak about the ways of presenting data inside the component after data loading.

After the data is loaded to the component, it is stored in the data object, and the component searches for the right value to display. So what is the object value for each data item?

Data Item Value

All supported data types may contain more than one value per item, e.g. each item of a film set may contain not only a film’s title, but also its rank, production year, and number of votes.

Still, different components have different possibilities and requirements:

  • Components with single-value items: list and its variants (grouplist, unitlist and x-list), dataview and tree. Each of their items takes one value by default.
  • Components with multiple-value items: datatable and treetable. They take as many items as many columns are defined.
  • Chart requires a pair of values — one for each axis.

Item Value can be defined by:

  • JSON property/XML tag value

Such definition would suit single-value components. If a data item has other properties, their values won’t be shown unless you define a template.

  • data template that performs two tasks
    • main — defines which item property(-ies) should be treated as a value to display;
    • additional — adds formatting to this value.

Templates can be defined for any component you wish.

Templates can set one or several properties as the value to display:

  • datatable and treetablecolumn IDs that act as templates for cells.

Column IDs perform the main template function — they set the value to display. To add extra words or formatting to the displayed values, you can define a template for the column.

Template for CSV and JSArray

CSV and JSArray data types have neither tags nor properties.

The elements are defined by their position in the CSV string or JSArray — data0, data1, data3

As far as you’ve noticed, only JSON and XML data can be displayed without referring to a template, since only they can directly set values. Moreover, this can be applied only to the components with single-value items.

Читать еще:  Gildiamasterov ru progs projects php

Chart exception

Chart requires two values per item — one for each axis.

  • Y-axis value is defined by the value property that can be additionally amended within the yAxis object property.
  • X-axis value is defined by the template within the xAxis object property.

In case of a template function (described below), the value is referred to as obj instead of standard obj.value (e.g. obj.title, obj.data0).

Template Contents

The whole template comes in quotation marks and includes:

  • JSON keys / XML tags from the initial dataset, surrounded by hash signs;
  • HTML tags and CSS selectors (optional, adds styling);
  • plain text.

Template Sample

Title, year and rank signify repeated values from the dataset. All the titles will be styled with the help of the .classname CSS class. ‘Shot in’ and ‘Ranked’ are plain text to be shown to the user.

Optionally, you can define the template for the data copied to the clipboard. If not specified, data will be taken according to the above-mentioned template.

In this case, only the rank and title values are copied.

GroupList has its own templating pattern. Look into the related article for details.

The item in the initial data set looks like this:

Inside the component it looks like this: My film. Shot in 1998. Ranked 7.

Don’t confuse the template property with the template component.

Template Types

Templates can be defined in five very flexible ways:

  • as HTML strings within JavaScript objects
  • by creating named templates
  • by extracting them from an HTML container
  • by retrieving them from an external file
  • as a function returning a string

Templates are included into Webix components as well as into some of their properties that take objects as values.

HTML inside JavaScript

JSON data in the dataview

Named Template

Templates may be included inside the type parameter. A type is applied to each item rather than the whole component.

1 . First you should create a type with the webix.type constructor. It is created for the specified UI component:

2 . Then you specify the name of that type as a value of the type property for this component:

See the corresponding article to learn more about type implementation.

HTML Container with Data Template

A template may be defined inside an html-container and addressed by its id:

External HTML template

Templates can be defined in external files. The template parameter will be a link to this file, prefixed by http->:

The file contents (an HTML template from the example above):

Note that these HTTP requests are not cached. If you use the same template repeatedly, it’s better to retrieve it via AJAX and store it in a variable:

Template Function

template may as well be a function that returns a string to render. No #-interpolation will take place in this case; you have to interpolate variables on your own.

  • If a value is defined by a JSON/XML tag value, you should refer to it as obj.value.
  • If a value is defined by a template, you should refer to it as obj.title, obj.rank, obj.data (CSV, JSArray), etc.

Template Function Parameters

A template function receives these parameters:

  • obj — each data item
  • common — common elements declared in type

XSS Safe templates

By default, #. # template placeholders are replaced with the data value without any processing. If you have HTML data in the data object, it is also placed in the template. In most cases this is an advantage, but sometimes it may be necessary to output such data as a text, not as an HTML:

  • when you have text data with special HTML characters ( , and &);
  • when you are not sure whether the data is safe (e.g. was entered by the user).

In such cases you can add an exclamation mark ! after the opening # :

Html-Templates.info — только лучшие

Рады Вас приветствовать на нашем сайте, посвященному web — дизайну и web — программированию. Если вы попали к нам на сайт — значит у вас есть интерес к таким технологиям как HTML, PHP, JS,jQuery, ajax и т.п.

Каждый месяц, количество запросов, таких как: html templates, css templates, html шаблоны, css шаблоны, превышает число в 1 000 000, и это только по результатам запросов из Google! Не нужно быть гением чтобы понять, что тема html шаблонов как никогда популярна. Сейчас в мире очень популярно иметь свой личный website, но и быть похожим на других тоже никто не хочет. Наш сайт должен помочь решить подобного рода проблемы.

Последние записи

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

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

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

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

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

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

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

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

Фишка данного сайта заключается в том, что Вы можете, например, без повторного пересжатия изображения быстро удалить EXIF, повернуть на любой угол, кратный 90°, а также сделать обычный JPG прогрессивн.

Вы активно ведете страницу в Facebook? Тогда вам, скорее всего, знакомо то чувство разочарования, когда на ваш гениально написанный пост отреагировало так мало людей. Может, вы плохо пишите? Но, скоре.

Последние шаблоны

Простой и уникальный в своём роде html-шаблон со стильным дизайном для создания и оформления сайтов.

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

html-шаблон для создания собственного уникального сайта.

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

Бесплатные HTML и CSS шаблоны

Лучше получать по 1% от усилий 100 человек, чем 100% только от своих собственных усилий. J. Paul Getty В©

Страницы Интернета

пятница, 15 мая 2015 г.

HTML по стандартам

Изначально хотел назвать статью «HTML по ГОСТ`у», но потом выяснилось что у большинства программистов не было предмета «Метрология и стандартизация» и о «стандартизации», «сертификации», «унификации» не все слышали.

В i-Free я много занимаюсь разработкой веб-приложений. А поскольку их много, они разные и работают в разных условиях, то само собой приходится задумываться о стандартизации. Есть такой проект «Пуленепробиваемый HTML5» (http://html5boilerplate.com/), в котором разработчики решили создать идеальный шаблон странички. Он мне очень нравился, и все свои проекты я начинал именно с него. Но, исправляя баг за багом, делая все новые и новые приложения, я пришел к выводу, что многого в нем не хватает. В этой статье я хотел бы рассказать о том, что обычно пропускают при написание страничек и веб-приложений и показать, чем и зачем я прокачал свой шаблон пустой странички.

Читать еще:  Поле со списком php

Указатель на язык:

Это идет в паре с hyphens в CSS. Таким образом браузер может более корректно расставлять переносы.

Убираем возможность масштабировать:

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

Ещё один тег для вышеописанной проблемы:

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

Запрещаем кэшировать документ:

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

Mobile Internet Explorer позволяет принудительно активировать технологию ClearType для сглаживания шрифтов:

Не забываем добавить картинки для Apple устройств:

Этот мета-тег необходим для того, чтобы приложение открылось в полноэкранном режиме:

Ну и корректируем верхнюю полоску в iPhone:

Ну и Windows 8 берет пример с iPhone. Дополнительная разметка для описания:

Дополнительная разметка для оформления ссылки на приложение в меню:

Дополнительные настройки для окна. Видимо, это такая отсылка к HTA, который не пошел:

Просим IE переключиться в последний режим:

Отключаем панель работы с изображениями:

Просим IE оформлять все в классическом стиле без учета текущей темы операционки:

Запрещаем распознавать номера телефонов и адреса, а так-же выделять их:

Для обычной веб-странички лучше вставить набор CSS стилей, описывающих телефон и адрес, а не блокировать их распознание.

Полный набор для SEO:

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

Обязательно скидываем стили по умолчанию:

Свой reset я немного изменил. Он задавал background для TD тега, и это вызвало багу в старом IE, если мы заливаем всю строку через тег TR

Добавляем набор своих стандартных стилей:

А в них учтены ещё некоторые нюансы. Например убираем выделение в CSS:

Но оставляем его для полей ввода текста:

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

Ставить border картинкам обычно не забывают, т.к. он в reset.css, а вот vertical-align пропускают:

Ещё у меня хранится стандартный класс анимации, чтобы «мозолить глаза»:

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

А ещё в этих стилях я раскрашиваю плашку которая всегда идет вверху HTML шаблона:

Ну и конечно, ради любимого IE в самом начале добавим:

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

Ну и стили для портретной и альбомной ориентации:

Если будете переводить в HTA, есть такая вставка:

Тут указаны параметры для HTA файла (например, наличие системного меню, отсутствие скролла и т.п.). А также добавлен JS файл (по умолчанию он закомментирован):

Его задача сжать окно и отцентрировать его по середине экрана (если, конечно, это возможно).

Ну а с этим наверное уже знакомы?

Бежим по новым тегам HTML5 и пересоздаем их для старых IE.

Ну и прокачиваем Android

Например, убираем у них адресную строку. Для этого:

  • Берем высоту страницы и увеличиваем её на два
  • Скроллим вверх до 1px сверху
  • Возвращаем высоту в исходное положение

Таким хаком на Android`ах исчезает адресная строка. А ещё можно добить тач, об этом говорил Иван Чашкин на DUMP-2014 (а ещё тут есть статья http://habrahabr.ru/company/mailru/blog/165213/ от Mail.ru). Суть в том, что, если переопределить все тач события и сделать им stopPropagation, то Android`ы перестанут тормозить с отправкой событий.

Просим закэшировать приложение для offline работы, если это возможно:

Там выше ещё про переносы и язык было, поэтому полный тег такой:

Как выглядит input обычного человека:

Как выглядит input курильщика:

Атрибуты элемента:

  • placeholder — подсказка для ввода
  • maxlength — ограничение количества вводимых символов
  • spellcheck — проверка правописания
  • autocorrect — автоматическое корректировка написанного
  • autocapitalize — автоматическое преобразование регистра
  • x-webkit-speech — голосовой ввод

Требования к элементу:

  • Тип элемента должен соответствовать типу вводимых данных. Если это поле ввода пароля, оно должно иметь тип password. Вводимые символы при этом должны заменяться звездочками.
  • Элемент должен сопровождаться примером того, какие данные требуется ввести.
  • Элемент должен подсказывать пользователю данные для ввода на лету.
  • Элемент должен проверять орфографические ошибки.
  • Максимальная длина ввода должна быть ограничена.
  • Если это поле ввода нового пароля, необходимо добавить кнопку «авто-генерация пароля». При нажатие на которую генерируется случайный пароль.
  • Элемент должен содержать атрибут pattern, указывающий на ожидаемый тип данных.
  • При работающем JavaScript, введенные пользователем данные обязательно должны проверяться на лету. Если данные не прошли проверку — необходимо немедленно уведомить об этом пользователя.

Рекомендации:

  • Если это поле ввода пароля, необходимо добавить кнопку «посмотреть пароль» (обычно оформляется в виде «глаза»), при нажатие на которую тип поля становится text, и пользователь может проверить введенные данные.
  • Если есть возможность авто-заполнения поля, её необходимо обязательно использовать. Либо поместить около элемента кнопку, при нажатие на которую будет срабатывать авто-заполнение.
  • В зависимости от ситуации, иногда возможно использовать «автокоррекцию» и на лету удалять запрещенные символы. Опасность такой ситуации заключается в том, что пользователь может не заметить коррекцию и отправить данные, которые отличаются от того, что он хотел ввести.

Половину этих свойств можно переносить и на textarea. Тут и авто-дополнение, и проверка правописания, и голосовой ввод, подсказка, ограничение длины и т.д. Но есть ещё ряд дополнительных требований:

  • Изменение размера поля должно быть запрещено (resize: none в CSS)
  • Если это ввод некоего сообщения, необходимо информировать пользователя о том, сколько символов ему ещё можно ввести.

Замечания по верстке:

  • Идеальная верстка должна выживать где-то в районе IE6. Стараемся по минимуму использовать inline-block. Заранее смотрим, что будет если он станет inline или block элементом.
  • Position — это опасно. Желательно ничего никуда не позиционировать.
  • Float — тоже к добру не приведет. Желательно вообще про него забыть.
  • В дизайне надо сразу предусмотреть возможность того, что тот или иной фрагмент может отвалиться. В этом плане идеален стиль Metro. Как-то даже пришла в голову мысль, что Microsoft специально сделала такой стиль, в котором нет ни круглых углов, ни градиентов, ни теней. То есть ребята сразу отталкивались от своего браузера, чтобы никто не мог обвинить их в багах.

Progressive Enhancement и Graceful Degradation

Советую посмотреть доклад Сергея Горобцова из Яндекса про Progressive Enhancement и Graceful Degradation (http://tech.yandex.ru/education/shri/ekb-2013/talks/1500/) о том, как верстать так, чтобы было хорошо везде.

Что же ещё может понадобиться для стандартизации?

  • Расческа для CSS (http://csscomb.ru/online/) поможет всему принять единый вид.
  • Автопрефиксер Андрея Ситника поможет добить CSS-префиксы (http://habrahabr.ru/company/evilmartians/blog/176909/)
  • Вот такой скрипт (http://bakhirev.biz/StalinGrad/zip/build/generation_pictures.zip) поможет нагенерировать кучу картинок (требует установленного imagemagick)

Так же в своем шаблоне я сразу подключаю несколько готовых модулей типа замены стандартных alert`ов, добавление автопрокрутки сбоку (как на хабре или вконтакте) и т.п. Но это уже велосипеды, которые выходят за рамки статьи.

А вот этот стандартный велосипед может пригодиться. Стандартный footer по микроразметке:

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

Ссылка на основную публикацию
Adblock
detector