В фейсбуке  В гугле  В твиттере  В контакте  В яндоксе
         

Каталог статей

Главная » Статьи » Дизайн

Управление HTML5 с помошью JS, новые возможности для веб-дизайна


Управление HTML5 с помошью JS, новые возможности для веб-дизайна

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

Первым делом мы решили продемонстрировать всем новые атрибуты, такие как email, url, number, date, required. Для лучшего понимания примеры были выложены в интернет, и по рукам пошел IPhone и планшет.

Код:

Email: <input type="email"> <br>

Адрес: <input type="url"> <br>

Числа: <input type="number"> <br>

Дата: <input type="date"> <br>

При вводе нужных полей появлялась клавиатура подстроена под тип поле, например при нажатии на e-mail появлялись кнопки такие как: «@»,».com» и т. д., а для поля даты IPhone выстроил вообще свое поле, при чем все работало не только под Safari, но и под Chrome.

Следующий атрибут был contenteditable позволяющий редактировать текст на лету:

<p contenteditable onblur="save()">Это текст. Редактируй меня</p>

<script>

function save () {

alert("Сохранено!")

}

</script>

А вот такую форму браузер не хотел отправлять:

<form>

<input type="email"required>

<input type="submit" value="OK">

</form>

До тех пор пока не будет заполнено поле и введен корректный e-mail.

Атрибут list дает возможность делать свои выпадающие списки:

<input list="list">

<datalist id="list">

<option value="Артем">

<option value="Влад">

<option value="Вова">

<option value="Даша">

<option value="Настя">

</datalist>

Для примера было показано насколько просто стало делать интерактивные вещи улучшающие UI:

<details>Показать все что скрыто</details> <!-- HTML5 →

<!-- Native JavaScript -->

<p>Подробнее</p>

<div style="display:none">Показать все что скрыто</div>

<script>

document.getElementsByTagName('p')[0].onclick = function(e){

document.getElementsByTagName('div')[0].style.display == "none" ?

document.getElementsByTagName('div')[0].style.display = "block" :

document.getElementsByTagName('div')[0].style.display = "none"

}

</script>

Также был подготовлен пример работы с локальным хранилищем без ограничения по размеру, который часто используется для расширений (в основном Chrome):

<input type="text">

<div></div>

<script>

window.onload = function(){

document.getElementsByTagName('div')[0].innerHTML = localStorage.getItem('seminar')

}

document.getElementsByTagName('input')[0].onkeyup = function(e){

if(e.keyCode != 13) return;

localStorage.setItem("seminar", this.value);

document.getElementsByTagName('div')[0].innerHTML = localStorage.getItem('seminar')

}

</script>

Следующим примером HTML5 был HistoryAPI. Здесь мы попробовали изменить URL страницы и записать новый в историю без перезагрузки ее, для отображения того что страница на самом деле не будет перегружена после загрузки через 2.5 сек. будет выведен текст который останется при изменении URL и истории.

<button onclick="h()">Изменить</button> <br>

<div></div>

<script>

window.onload = function(){

setTimeout(function(){

document.querySelector("div").innerHTML = "Текст"

},2500)

}

function h(){

history.pushState(null, null, "/seminar!!!");

}

</script>

Так же были показаны примеры общения доменов между собой:

Client:

<input type="text">

<button onclick="send()">Кнопка</button>

 

<script>

function send(){

var el = document.getElementsByTagName('input')[0]

window.postMessage(el.value, "http://subdomen.domen.com");

}

</script>

 

Recipient:

<div id="msg"></div>

<script>

function listener(event) {

document.getElementById("msg").innerHTML = "получено: " + event.data;

}

if (window.addEventListener){

window.addEventListener("message", listener, false);

} else {

window.attachEvent("onmessage", listener);

}

</script>

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

<audio id="car_bibi" src="/js/soundcar.mp3" type="audio/mpeg"></audio>

<script>

/* Логика */

document.getElementById('car_bibi').play()

</script>

Создание сайтов частный вебмастер

Категория: Дизайн | Добавил: wweebb (26.03.2013)
Просмотров: 689 | Рейтинг: 0.0/0
Восприятие дизайна
Успех во многом зависит от восприятия запоминающегося дизайном сайта, посетителями. Я считаю, что человеческий мозг — это площадка для ведения конкурентной борьбы. “Не нужно забывать, что сознание избирательно относится к поступающей информации: легко воспринимает уже знакомые факты и отбрасывает то, что не соотносится с его предыдущими знаниями и опытом.” Людям сложно запомнить 10 заповедей. Что уж говорить об интернет сайтах, если они занимают в сознании не первое и не второе место. У каждого посетителя существует внутренний рейтинг сайтов каждого дизайна по своему. Я этот рейтинг называю “визуальной лестницей”. Подниматься по такой “лестнице” сайту очень сложно, особенно если не используется стратегия позиционирования. Позиционировать продукт необходимо, отталкиваясь от информации о конкурирующих сайтов, знакомых потребителю.
Стратегия сайта
Человеческое сознание с трудом воспринимает сложные и запутанные идеи. Приведем пример о компании BMW. Переработав идею конкурента — компании Mercedes, которая заявляла о комфортабельности своих машин, BMW сообщила, что ее авто больше подходят для езды, чем для сидения. Тем самым была дискредитирована идея Mercedes. Это один из примеров изменения восприятия потребителей. Частная студия вебмастера «WebMasterSeo» проанализировала работу своих конкурентов и выявила у них определенные слабые места, такие как высокая цена на сайт и Хостинг от uCoz, большие сроки изготовления сайта. Поэтому при разработке своих сайтов Я отказался от всего, что могло бы усложнить разработку сайта. К тому же я смог снизить стоимость сайта и добавил дополнительные модули в базовый пакет. В результате, заказчик получает необходимые услуги и остается довольным, что сделало меня лидером по созданию дешевых сайтов за короткие сроки.
Макросреда компании
Макросреда компании – факторы наиболее общего воздействия, оказывающие влияние на каждую организацию, ведущую маркетинговую деятельность. Данные факторы могут открывать для кампании новые возможности или же стать источником серьезных угроз, на них практически невозможно воздействовать, но их воздействие необходимо учитывать и предугадывать. Макросреда большинства компаний в настоящее время может рассматриваться в составе следующих основных компонентов: экономическая среда, политико-правовая среда, культурная и демографическая среда.


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

доступный сайт
  Доступный сайт для бизнеса.
  Сайт визитка за 10 000 руб.
доступный сайт
  Оптимальное продвижение сайта.
  Вывод в топ Яндекса от трех недель
 



    Торговую марку "WebMasterSeo" представляет ООО "WebMaster Design"

    Студия WebMasterSeo - Частная студия веб мастера (Россия, Москва)
    Создание сайтов. Разработка сайтов. Изготовление веб сайтов.
    Заказать сайт онлайн. Веб-студия web-ms, Москва, Балашиха, Реутов
    Железнодорожный, Кучино, Мытищи, Щелково, Красноармейск.




Адрес: г. Москва, ул. 9-Парковая, д.59. корп.1

Тел.: 8 (926) 276-84-33, Сайт: web-ms.ru
E-Mail: info@web-ms.ru
Служба поддержки: info@web-ms.ru
Онлайн-поддержка: Отвечу сразу


8 (926) 276-84-33