Awebdesign's Blog

Кайф! Nizo для iPhone

Настоящий бум — jQuery скрипты, реагирующие на скролл мышью. Сначала Nike Better World с параллакс-эффектом при вертикальной прокрутке, теперь совершеннейшая фантастика — детали собираются по ходу скроллинга, да к тому же еще их можно двигать мышью! Кстати, также как и найковский сайт — все это уже HTML5!!! Сайт Nizo for iPhone: Nizo for iPhone - HTML5 & jQuery Ну что, все, кто спрашивал: «На черта нужен HTML5?» — теперь поняли? Что собирает народ на этом сайте можно посмотреть тут:

Горизонтальная прокрутка с ява-скрипт 4

Закончила свой сайт с горизонтальной прокруткой колесиком мыши и перетаскиванием – можете посмотреть и поскроллить здесь: http://awebdesign.ru

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

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

CSS

Стили для списка и его пунктов:

.in {
width: 7400px;
list-style: none;
padding: 0;
margin: 0;
}

.in li {
float: left;
margin: 0;
padding: 0;
}

Ширина списка класса in (7400px) – это ширина вашей горизонтальной страницы. К сожалению я не нашла способа динамически менять эту ширину в зависимости от суммы ширин всех изображений, возможно, вы найдете его сами. В противном случае нужно вручную настроить эту ширину в зависимости от количества изображений. Если, как в моем случае, изображения меняют свой размер динамически, то и ширина этого списка будет меняться, поэтому желательно тестировать страницу с максимальными размерами изображений, иначе последние в списке картинки «прыгнут» вниз. Если высота монитора не позволяет провести такой тест, оставляйте в ширине «запас».

jQuery

Для начала нужно подгрузить на страницу библиотеку jQuery и скрипт прокрутки:
(Ниже вы можете скачать исходные файлы вместе с ява-скриптами)
Скрипт, который нужно поставить в <header>:

<script charset="utf-8">
$(document).ready(function () {
$('#timeline').mousedown(function (event) {
$(this)
.data('down', true)
.data('x', event.clientX)
.data('scrollLeft', this.scrollLeft);
return false;
}).mouseup(function (event) {
$(this).data('down', false);
}).mousemove(function (event) {
if ($(this).data('down') == true) {
this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
}

}).mousewheel(function (event, delta) {
this.scrollLeft -= (delta * 100);
}).css({
'overflow' : 'hidden',
'cursor' : '-moz-grab'
});
});

$(window).mouseout(function (event) {
if ($('#timeline').data('down')) {
try {
if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
$('#timeline').data('down', false);
}

} catch (e) {}
}
});

</script>

Timeline – это div, который содиржит список класса in. Именно этот див и прокручивается ява-скриптом.

HTML

Вкратце разметка выглядит таким образом:

<div>
<ul>
<li>
<img src="http://awebdesign.ru/img/grad.jpg" class="source-image" alt="" />
</li>
<li>
<a href="#">
<img src="http://awebdesign.ru/img/origami_fish.jpg" class="source-image" alt="" />
</a>
</li>
<li>
<img src="http://awebdesign.ru/img/grad_mezhdu.jpg" class="source-image" alt="" />
</li>
<li>
<a href="#" >
<img src="http://awebdesign.ru/img/origami_lily.jpg" class="source-image" alt="" />
</a>
</li>
</ul>
</div>

О том, как менять размеры изображения в зависимости от размеров окна браузера можете прочитать здесь:
Как динамически менять размер картинки с jQuery / jQuery dynamic resizing image

Скачать исходные файлы: http://awebdesign.ru/tutors/source_files.zip

Как динамически менять размер картинки с jQuery / jQuery dynamic resizing image

В комментариях пришел вопрос, можно ли динамически менять размер картинки в зависимости от размера браузера, как здесь: alexandergusev.com

Специально написала мини-тьютор, чтобы вы посмотрели, как это делается.

Пример здесь.

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

(Изображение в .png с прозрачностью, так что IE плохо его рендерит, с обычным прямоугольным изображением будет все в порядке в любом браузере.)

Итак, ява-скрипт динамического изменения размеров изображения:

<script type="text/javascript">
$(document).ready(function() {
var $winheight = $(window).height(); 

$(".source-image").attr({ height: $winheight });
$(window).bind("resize", function(){
var $winheight = $(window).height();
$(".source-image").attr({ height: $winheight });
});
});
</script>

Код очень простой. Класс .source-image относится к нашему изображению. Достаточно в коде HTML присвоить этот класс объекту img.

<img class="source-image" src="http://awebdesign.ru/tutors/img/fish.png" alt="" />

Не забудьте в header-е страницы прописать ссылку на jQuery, в моем случае ссылка на удаленный сервер:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" 

type="text/javascript" charset="utf-8"></script>

Шпаргалка по CSS3 – список новых стилей

Это шпаргалка по CSS3, написанная специально для Smashing Magazine. Ссылка ведет на .pdf файл на их ресурсе. Новые стили можно использовать только для новых браузеров (Firefox 3.5, Opera 9.6, Safari 3+, Google Chrome and Co.) Список можно распечатать.

download the pdf (5 pages, 123 Kb)

CSS3 список свойств

Онлайн демонстрация возможностей HTML5

Posted in HTML5, HTML5 уроки, jQuery by awebdesign on 11.05.2010

Здесь представлена презентация возможностей HTML5: http://apirocks.com/html5/html5.html#slide1

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

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

В Firefox почти все работает.

Итак, перевод:

Слайд 1

Эта презентация – сайт, написанный на HTML5

Нажимайте стрелку на клавиатуре, чтобы листать страницы.

Некоторые функции могут не работать, так как сайт написан под Google Chrome. Так что вы будете плакать от счастья, когда увидите работу в полном объеме на вашем IE после загрузки и установки Google Frame!

Слайд 2

HTML5 – Веб-развитие нового уровня

(включая следующие поколения других веб-технологий)

Слайд 3

Развитие Web-технологий по годам:

1991 HTML
1994 HTML 2
1996 CSS 1 + JavaScript
1997 HTML 4
1998 CSS 2
2000 XHTML 1
2002 Tableless Web Design
2005 AJAX
2009 HTML 5

Слайд 4

HTML5 ~= HTML + CSS + JS APIs

JS API:

Слайд 6

Новые селекторы

Нахождение элементов по классу (DOM API)

var el = document.getElementById('section1');
el.focus();

var els = document.getElementsByTagName('div');
els[0].focus();

var els = document.getElementsByClassName('section');
els[0].focus();

Нахождение элементов по синтаксису CSS (Селекторы API)

var els = document.querySelectorAll("ul li:nth-child(odd)");
var els = document.querySelectorAll("table.test > tr > td");

Слайд 7

Web хранение

// use localStorage for persistent storage
// use sessionStorage for per tab storage
textarea.addEventListener('keyup', function () {
  window.localStorage['value'] = area.value;
  window.localStorage['timestamp'] = (new Date()).getTime();
}, false);
textarea.value = window.localStorage['value'];

Пример использования: Сохраните e-mail на стороне клиента (защищено от взлома)

Слайд 8

Web SQL база данных

var db = window.openDatabase("Database Name", "Database Version");
db.transaction(function(tx) {
  tx.executeSql("SELECT * FROM test", [], successCallback, errorCallback);
});

«Сделать» «Построить таблицу» «Удалить таблицу»

Слайд 9

Кэш

<html manifest="cache-manifest">
window.applicationCache.addEventListener('checking', updateCacheStatus, false);
CACHE MANIFEST

# version 1

CACHE:
/html5/src/refresh.png
/html5/src/logic.js
/html5/src/style.css
/html5/src/background.png

Отключите интернет-соединение и обновите страницу!

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

Слайд 10

Web Worker-ы

main.js:
  var worker = new Worker(‘extra_work.js');
  worker.onmessage = function (event) { alert(event.data); }; 

extra_work.js:
  // do some work; when done post message.
  postMessage(some_data);

Web Worker-ы позволяют ява-скриптам исполняться параллельно работе остальной страницы, поэтому с worker-ами ява-скрипты работают гораздо быстрее и эффективнее. Чтобы увидеть разницу, нажмите сначала на кнопку “Find Route with Workers” (найти маршрут с помощью worker-ов) и “Find Route without Workers” (найти маршрут без worker-ов).

Слайд 11

Web Сокеты

var socket = new WebSocket(location);
socket.onopen = function(event) {
  socket.postMessage(“Hello, WebSocket”);
}
socket.onmessage = function(event) { alert(event.data); }
socket.onclose = function(event) { alert(“closed”); }

Позволяют серверам передавать информацию браузерам.

Слайд 12

Уведомления

if (window.webkitNotifications.checkPermission() == 0) {
  // you can pass any url as a parameter
  window.webkitNotifications.createNotification(tweet.picture, tweet.title,
      tweet.text).show();
} else {
  window.webkitNotifications.requestPermission();
}

«Установить разрешение на получение уведомлений»

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

Используйте свое имя на Twitter-е, чтобы показать ваше последние сообщение в качестве уведомления.

(Push Notification позволяет приложениям получать напоминания, обновления и оповещения из сети даже тогда, когда они не запущены. Подробнее на Push notification – прим. переводчика)

Слайд 13

Перетаскивание и бросание

document.addEventListener('dragstart', function(event) {
   event.dataTransfer.setData('text', 'Customized text');
   event.dataTransfer.effectAllowed = 'copy';
}, false);

Первое окно: «Выделите текст и перебросьте, выделенный вами текст появится в окне»

Второе окно: «Выделите текст и перебросьте, текст сменится на другой»

(Перетаскивать нужно в окно “Drop Area”, в окне “Source Data” будут выведены html-разметка и сам текст — прим. переводчика).

Ожидается в ближайшее время: перетаскивание файлов с вашего рабочего стола. (Фантастика! Прим. переводчика).

Слайд 14

Геолокация

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;
    map.setCenter(new GLatLng(lat, lng), 13);
    map.addOverlay(new GMarker(new GLatLng(lat, lng)));
  });
}

«Показать местоположение»

(apirocks.com запросит ваше местоположение и сохранит его на вашем компьютере, чтобы отображать на карте)

Слайд 15

Итого по JS API:

Хранение на стороне клиента (База данных Web SQL, кэш, Web-хранение данных)

Общение (веб-сокеты, worker-ы)

Новые возможности десктопа (Уведомления, перетаскивание и бросание)

Геолокация

HTML

Слайд 17

Новые семантические тэги

<body>
  <header>
    <hgroup>
      <h1>Page title</h1>
      <h2>Page subtitle</h2>
    </hgroup>
  </header>

  <nav>
   <ul>
     Navigation...
   </ul>
  </nav>

  <section>
   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>

   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>

   <article>
     <header>
       <h1>Title</h1>
     </header>
     <section>
       Content...
     </section>
   </article>
  </section>

  <aside>
   Top links...
  </aside>

  <footer>
   Copyright © 2009.
  </footer>
</body>

Слайд 18

Новые link relations

<link rel='alternate' type="application/rss+xml" href="http://myblog.com/feed" />
<link rel='icon' href="/favicon.ico" />
<link rel='pingback' href="http://myblog.com/xmlrpc.php">
<link rel='prefetch' href="http://myblog.com/main.php">
...

<a rel='archives' href="http://myblog.com/archives">old posts</a>
<a rel='external' href="http://notmysite.com">tutorial</a>
<a rel='license' href="http://www.apache.org/licenses/LICENSE-2.0">license</a>
<a rel='nofollow' href="http://notmysite.com/sample">wannabe</a>
<a rel='tag' href="http://myblog.com/category/games">games posts</a>
...

(Link relations объясняют браузеру, какого типа ссылка прописана в тексте. Link rel встречались в HTML4 в элементе header. Теперь будут использоваться в тэге <a href=”#”>#</a> — прим. переводчика)

Слайд 19

Микродата

<div itemscope itemtype="http://example.org/band">
 <p>My name is <span itemprop='name'>Neil</span>.</p>
 <p>My band is called <span itemprop='band'>Four Parts Water</span>.</p>
 <p>I am <span itemprop='nationality'>British</span>.</p>
</div>

(Отдельная тема – прим. переводчика)

Слайд 20

Доступные Rich Internet Приложения

(Как я поняла – примочки для слабовидящих пользователей интернета – детальные пояснения, что именно показывает страница, читаются скрин-ридерами и понятны людям – прим. переводчика).

<ul id="tree1"
      role="tree"
      tabindex="0"
      aria-labelledby="label_1"
      >
  <li role="treeitem" tabindex="-1" aria-expanded="true">Fruits</li>
  <li role="group">
    <ul>
      <li role="treeitem" tabindex="-1">Oranges</li>
      <li role="treeitem" tabindex="-1">Pineapples</li>
      ...
    </ul>
  </li>
  </ul>

Слайд 21

Новые типы полей в формах

  1. Что уже внедрено
    <input type='range' min='0' max='50' value='0'>  
    
    <input autofocus type='search'>  
    
    <input type='text' placeholder='Search inside'>
  2. Что ожидается
    <menu>
    <progress>
    
    <input type='color'>
    <input type='number'>
    <input type='email'>
    <input type='tel'> 
    
    <input type='time'>
    <input type='date'>
    <input type='month'>
    <input type='week'>
    <input type='datetime'>

Слайд 22

Тэги audio и video

<audio src="sound.mp3" controls></audio>
document.getElementById("audio").muted=false;

<video src='movie.mp4' autoplay controls ></video>
document.getElementById("video").play();

Слайд 23

Canvas (в переводе – холст, рисование векторных элементов, графиков и прочего средствами HTML5 – прим. переводчика)

<canvas id="canvas" width="838" height="220"></canvas>

<script>
  var canvasContext = document.getElementById("canvas").getContext("2d");
  canvasContext.fillRect(250, 25, 150, 100);

  canvasContext.beginPath();
  canvasContext.arc(450, 110, 100, Math.PI * 1/2, Math.PI * 3/2);
  canvasContext.lineWidth = 15;
  canvasContext.lineCap = 'round';
  canvasContext.strokeStyle = 'rgba(255, 127, 0, 0.5)';
  canvasContext.stroke();
</script>

Слайд 24

Пример использования Canvas

Кнопки:

«Экспортировать в JPEG»

«Экспортировать в PNG (тяжелый файл)»

Фото: без рамки, с рамкой, рамка Полароид.

Показать углы

Слайд 25

Canvas 3D (Web GL)

<canvas id="canvas" width="838" height="220"></canvas>

<script>
  var gl = document.getElementById("canvas").getContext("experimental-webgl");
  gl.viewport(0, 0, canvas.width, canvas.height);
  ...
</script>

Демо требует браузера с поддержкой WebGL

Слайд 26

Итого по HTML:

  1. Семантика (Новые тэги, link relations, Микродата)
  2. Доступность (ARIA)
  3. Веб-формы (новые поля)
  4. Мультимедиа (Тэги Audio и Video)
  5. Рисование 2D и 3D (Canvas, WebGL)

CSS

Слайд 28

CSS-селекторы

Селекторы

.row:nth-child(even) {
  background: #dde;
}
.row:nth-child(odd) {
  background: white;
}

Отображение контента наподобие отображения картинок

div {
  display: inline-block;
}

Специальные аттрибуты

input[type="text"] {
  background: #eee;
}

Отрицание (условие выполняется при отрицательном результате, т.е является true при результате false – прим. переводчика)

:not(.box) {
  color: #00c;
}
:not(span) {
  display: block;
}

Более точечный таргетинг

h2:first-child { ... }

div.text > div { ... }
h2 + header { ... }

Слайд 29

Поддержка новых шрифтов

@font-face {
  font-family: 'Junction';
  src: url(Junction02.otf);
}
@font-face {
  font-family: 'LeagueGothic';
  src: url(LeagueGothic.otf);
}
@font-face {
  font-family: 'GG250';
  src: url(General250.otf);
}

header {
  font-family: 'LeagueGothic';
}

LeagueGothic без замены на картинки

Слайд 30

Сворачивание текста (Text Wrapping)

div {
  text-overflow: ellipsis;
}

Попробуйте ввести разные цифры в поле под текстом и нажать Enter – увидите результат!

То же самое касается следующих страниц.

Слайд 31

Колонки

-webkit-column-count: 2;
-webkit-column-rule: 1px solid #bbb;
-webkit-column-gap: 2em;

Слайд 32

Обводка текста

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 0.00px;
}

Слайд 33

Прозрачность

  color: rgba(255, 0, 0, 0.75);
  background: rgba(0, 0, 255, 0.75);

(Тоже измените цифры в полях color и background, изменится прозрачность текста и подложки – прим. переводчика).

Слайд 34

То же самое, но в цветовой модели Hue/saturation/luminance

color: hsla(
  128,
  75%,
  33%,
  1.00);

Слайд 35

Скругленные углы

  border-radius: 0px;

Слайд 36

Градиенты

background: -webkit-gradient(linear, left top, left bottom,
                             from(#00abeb), to(white),
                             color-stop(0.5, white), color-stop(0.5, #66cc00))
background: -webkit-gradient(radial, 430 50, 0, 430 50, 200, from(red), to(#000))

Слайд 37

Тени

text-shadow:
  rgba(64, 64, 64, 0.5)
  0px
  0px
  0px;
box-shadow:
  rgba(0, 0, 128, 0.25)
  0px
  0px
  0px;

Слайд 38

Мгновенный Web 2.0 (только поменяйте цифры)

text-shadow: rgba(0, 0, 0, 0.5) 0 0px 0px;  

background:
  -webkit-gradient(linear, left top, left bottom,
                   from(rgba(200, 200, 240, 0)), to(rgba(255, 255, 255, 0))); 

border-radius: 0px;  

-webkit-box-reflect: below 10px
  -webkit-gradient(linear, left top, left bottom,
                   from(transparent), to(rgba(255, 255, 255, 0)));

Слайд 39

Расширение возможностей бэкграунда

  1. Изменение размеров бэкграунда:
    #logo {
      background: url(logo.gif) center center no-repeat;
      background-size: 
    
          auto
          contain
          cover
          100%
        ;
    }
  2. Несколько бэкграундов
    div {
      background: url(src/zippy-plus.png) 10px center no-repeat,
                  url(src/gray_lines_bg.png) 10px center repeat-x;
    }

Слайд 40

Перемещения

#box.left {
  margin-left: 0;
}
#box.right {
  margin-left: 1000px;
}

document.getElementById('box').className = 'left'; 
document.getElementById('box').className = 'right'; 
#box {
  -webkit-transition: margin-left 1s ease-in-out;
}  

document.getElementById('box').className = 'left'; 
document.getElementById('box').className = 'right'; 

Слайд 41

Трансформации

«Проведи надо мной мышью»

-webkit-transform: rotateY(45deg);
-webkit-transform: scaleX(25deg);
-webkit-transform: translate3d(0, 0, 90deg);
-webkit-transform: perspective(500px)
#threed-example {
  -webkit-transform: rotateZ(5deg);

  -webkit-transition: -webkit-transform 2s ease-in-out;
}
#threed-example:hover {
  -webkit-transform: rotateZ(-5deg);
}

«А теперь нажми цифру 3!»

Слайд 42

Анимация

@-webkit-keyframes pulse {
 from {
   opacity: 0.0;
   font-size: 100%;
 }
 to {
   opacity: 1.0;
   font-size: 200%;
 }
}

div {
  -webkit-animation-name: pulse;
  -webkit-animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-direction: alternate;
}

Слайд 43

Итого по CSS:

  1. Шрифты
  2. Визуальные эффекты
  3. Перемещения, трансформации и анимация

Слайд 44

Где уже работает?

  1. В современных браузерах
  2. В мобильных браузерах
  3. В Google Chrome / Firefox

Слайд 45

Chrome Frame:

  1. Это самый простой способ апгрейдить IE6, 7 и 8 до уровня современных технологий HTML5
  2. Два способа сделать ваш сайт готовым для Chrome Frame:

на стороне клиента

<meta http-equiv="X-UA-Compatible" content="chrome=1">

на стороне сервера

X-UA-Compatible: chrome=1

Попробуйте загрузить эту презентацию в IE!

Слайд 46

HTML5 ~= HTML + CSS + JS APIs


%d такие блоггеры, как: