Программируем сами

С днем программиста

Ne0Lite — Wed, 12 Sep 2012 03:04:57 GMT

Вы в работе своей к совершенству стремитесь,

Результаты труда нас порой поражают,

Поздравляем сегодня вас с днем программиста

И признательность вам от души выражаем –

Ведь компьютер с программой, что вы написали,

Выполняет за миг миллион операций,

Не осилим и тысячной доли мы сами

Даже за год, хоть будем мы очень стараться,

Так что больше пишите программ самых разных,

Чтоб справлялся компьютер с любою задачей,

Шлем свои поздравления вам в этот праздник

И желаем здоровья, успехов, удачи!

С праздником друзья!!!

Самоучитель 1с бухгалтерия онлайн

Ne0Lite — Tue, 11 Sep 2012 09:00:19 GMT

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

Самоучитель 1с бухгалтерия онлайн

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

Самоучитель 1с бухгалтерия онлайн

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

Самоучитель 1с бухгалтерия онлайн

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

Самоучитель 1с бухгалтерия онлайн

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

Самоучитель 1с бухгалтерия онлайн

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

Самоучитель 1с бухгалтерия онлайн

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

Самоучитель 1с бухгалтерия онлайн

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

Параллакс с jQuery

Ne0Lite — Mon, 10 Sep 2012 10:16:24 GMT

На этом уроке вы научитесь делать шапку веб-сайта с помощью jQuery и плагина jParallax jQuery. Урок очень простой, вам не потребуется никаких знаний javascript, только HTML и CSS. Тем не менее, у данной техники большой потенциал. Чтобы удостовериться в этом, посмотрите примеры использования параллакса (на сайте кликайте NEXT для просмотра каждого следующего эффекта):webdev.stephband.info/parallax_demos.html

Файлы

Для начала нужно скачать два файла javascript:

Далее…

Картинки

До начала работы необходимо подготовить все используемые в шапке картинки:

Небо
Солнце
Трава
Дерево

После картинок пора заняться HTML.

HTML

Наш код выглядит следующим образом:


<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.jparallax.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<title>Parallax Website Header</title>
<script type="text/javascript">
jQuery(document).ready(function(){
 jQuery('#parallax').jparallax({});
});
</script>
</head>
<body>

<div id="parallax">
 <div style="width: 700px; height: 300px;">
 <img alt="" src="images/0_day.png"/>
 </div>
 <div style="width: 750px; height: 280px;">
 <img style="position:absolute; top:0px; left:350px;" alt="" 
src="images/1_sun.png"/>
 </div>
 <div style="width: 700px; height: 250px;">
 <img style="position:absolute; top:200px; left:0px;" alt="" 
src="images/2_grass.png"/>
 </div>
 <div style="width: 900px; height: 260px;">
 <img style="position:absolute; top:100px; left:150px;" alt="" 
src="images/3_tree.png"/>
 </div>
 <div style="width: 900px; height: 260px;">
 <img style="position:absolute; top:100px; right:150px;" alt="" 
src="images/3_tree.png"/>
 </div>
 <div style="width: 800px; height: 250px;">
 <h1 style="position:absolute; top:100px; right:355px;">My Site</h1>
 </div>
</div>

</body>
</html>

Довольно просто, не так ли?
Итак, что у нас здесь происходит:

Во-первых, мы включаем наши скачанные ява-скрипты. Не забудьте прописать jParallax после файла jQuery.
Затем мы вызываем единственную функцию Ява-скрипта, которая связывает jParallax с div-ом #parallax. Вы можете также прописать сюда свойства функции, но мы используем те, что прописаны по умолчанию.
Внутри div-а parallax мы определяем наши слои. В данном случае все слои – это div-ы, но с таким же успехом это могли быть пункты списка (li) или просто картинки (img). Самое главное теперь – это стили наших div-ов, которые определяют их поведение. К сожалению, нет готовой схемы для вычисления размеров, просто нужно попробовать поиграть с размерами div-ов и «поймать» нужное впечатление от параллакса.

CSS

CSS у нас совсем простой:

#parallax {
 background:#ccc;
 position:absolute;
 overflow:hidden;
 width:700px;
 height:300px;
}

Важно запомнить:

Высота и ширина каждого дочернего элемента (child) должны быть полностью прописаны в CSS. jParallax автоматически дает каждому дочернему элементу абсолютное позиционирование (position:absolute), так что нет нужды прописывать их положение вручную.
Для главного элемента параллакса (#parallax) нужно прописать относительное или абсолютное позиционирование (position:relative или position:absolute), иначе дочерние элементы будут располагаться относительно документа, а не мышки.

Посмотреть Демо

Загрузить ZIP файл

Boilerplate – как собирать сайты на HTML5 уже сейчас!

Ne0Lite — Mon, 10 Sep 2012 10:13:10 GMT

Boilerplate – это BADASS HTML/CSS/JS template (думаю, все поняли ), с помощью которого вы можете собирать полнофункциональные интерактивные сайты на HTML5 и с уверенностью пользоваться всеми тегами HTML5!

Раньше я писала о том, как делать сайты, чтобы они были на острие новых технологий для самых последних версий браузеров, а также для мобильных и тач-скрин устройств, но при этом хорошо интерпретировались старыми браузерами и нашим "любимым” IE.

Для каждого решения требовались свои уловки на ява-скрипте.

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

Вот, что они пишут сами о себе:

Почему HTML5 Boilerplate это круто:

Кроссбраузерность (да-да, IE6 тоже);

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

Оптимальное кэширование и компрессия для совершенного отображения сайта;

Лучшие установки по умолчанию;

Оптимизация для мобильных устройств;

Прогрессивное развитие и высокое качество деградации (то есть – все самое лучшее в новых браузерах и при этом в старых браузерах выглядит тоже прекрасно);

Специальные классы для IE для максимального контроля кроссбраузерности;

Управляемые .no-js и .js классы;

Хочешь написать тестовый сайт, но лень? Полностью готовый набор ждет тебя.

В общем, качать всем!

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

Ne0Lite — Mon, 10 Sep 2012 10:07:18 GMT

Здесь представлена презентация возможностей 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

Кэш

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

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

header>
 <hgroup>
 nav>
 section>
 <article>
 <header>
 aside>
 Top links...
 footer>
 Copyright © 2009.
 Слайд 18
Новые link relations
rel='icon' href="https://programiruem.3dn.ru/favicon.ico" />
rel='pingback' href="http://myblog.com/xmlrpc.php">
rel='prefetch' href="http://myblog.com/main.php">
...

rel='archives' href="http://myblog.com/archives">old postsrel='external' href="http://notmysite.com">tutorialrel='license' href="http://www.apache.org/licenses/LICENSE-2.0">licenserel='nofollow' href="http://notmysite.com/sample">wannaberel='tag' href="http://myblog.com/category/games">games posts(Link relations объясняют браузеру, какого типа ссылка прописана в тексте. Link rel встречались в HTML4 в элементе header. Теперь будут использоваться в тэге 
Слайд 19
Микродата
itemscope itemtype="http://example.org/band">
 itemprop='name'>Neilitemprop='band'>Four Parts Wateritemprop='nationality'>British(Отдельная тема – прим. переводчика)
Слайд 20
Доступные Rich Internet Приложения
(Как я поняла – примочки для слабовидящих пользователей интернета – детальные пояснения, что именно показывает страница, читаются скрин-ридерами и понятны людям – прим. переводчика).
role="tree"
 tabindex="0"
 aria-labelledby="label_1"
 >
 role="treeitem" tabindex="-1" aria-expanded="true">Fruitsrole="group">
 role="treeitem" tabindex="-1">Orangesrole="treeitem" tabindex="-1">PineapplesСлайд 21
Новые типы полей в формах
Что уже внедреноautofocus type='search'> 

placeholder='Search inside'>
Что ожидается<menu>
<progress>

Слайд 22
Тэги audio и video
<audio src="sound.mp3" controls>muted=false;

<video src='movie.mp4' autoplay controls >play();
Слайд 23
Canvas (в переводе – холст, рисование векторных элементов, графиков и прочего средствами HTML5 – прим. переводчика)

Покадровая анимация HTML5 и CSS3 – урок

Ne0Lite — Mon, 10 Sep 2012 10:05:57 GMT

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

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

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

(Внимание: работает во всех новых браузерах, кроме Opera и IE).

Здесь я буду описывать работу CSS только одного элемента — солнца. Этого будет достаточно для вашего понимания покадровой CSS-анимации. Все остальное вы можете посмотреть в исходном коде демо-страницы.

Keyframe @ Rule

Первая необычная вещь, которую вы сразу заметите в коде анимации CSS3 — это keyframes @ rule. Согласно спецификации, за CSS @ rule должен идти идентификатор, определяемый разработчиком, который обращается к другой части CSS.

После @ rule и идентификатора следует набор установок (как стили внутри блоков в обычном CSS. Этот набор заключается в фигурные скобки. Другие, уже знакомые вам @ rules, можно посмотреть здесь.

А у нас @ rule, которое мы будем использовать:

@-webkit-keyframes sunrise {
 /* установки идут здесь … */
}

Слово sunrise (восход) — это идентификатор, который мы выбираем сами, чтобы обращаться к анимации.

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

Keyframe Selectors

Давайте добавим некоторые установки в @ rule:

@-webkit-keyframes sunrise {
 0% {
 bottom: 0;
 left: 340px;
 background: #f00;
 }
 33% {
 bottom: 340px;
 left: 340px;
 background: #ffd630;
 }
 66% {
 bottom: 340px;
 left: 40px;
 background: #ffd630;
 }
 100% {
 bottom: 0;
 left: 40px;
 background: #f00;
 }
 }

Кроме установок обратите внимание на keyframe selector (определитель, или селектор кадра). На примере выше keyframe selectors — это проценты 0%, 33%, 66%, и 100%. При этом 0% и 100% могут быть заменены ключевыми словами "from” и "to” соответственно, и вы получите тот же результат.

(Примечание переводчика: То есть, если анимация имеет длительность во времени, например, 10 секунд, то проценты указывают на ключевые кадры в 3,3 секунды, 6,6 и 10 секунд соответственно).

Хотя спецификация все еще находится в разработке, некоторые правила уже установлены. Например, порядок указания кадров не имеет значения. Анимация будет проигрываться согласно процентным указателям, а не в том порядке, как они указаны. Так что если вы поставите ключевой кадр "to” перед "from”, анимация все равно будет прокручиваться в нужном порядке. Также, если селекторы "to” и "from” не объявлены, браузер автоматически их создаст. Так что набор установок внутри @ rule, указанный в спецификации CSS3, не является догмой.

Ключевые кадры, анимирующие солнце

Для анимирования солнца я установил 4 ключевых кадра. Комментарии в коде объясняют происходящее.

В первом кадре солнце красного цвета (как обычно при восходе или закате), и находится ниже уровня земли (т. е. невидимо). Положение элемента должно быть relative или absolute, чтобы получился нужный эффект. Это достигается с помощью значений left и bottom. Я также использовал z-index, чтобы быть уверенным, что солнце будет находиться «под» землей. Обратите внимание, что стили, указанные в кадре, это стили, которые участвуют в анимации, то есть, изменяются. Другие стили, такие как z-index и position, объявлены в другом месте кода, так что здесь не указаны.

0% {
 bottom: 0; /* солнце внизу*/
 left: 340px; /* солнце справа*/
 background: #f00; /* солнце красное */
 }

Где-то на трети нашей анимации (33%) солнце находится на одном и том же уровне по оси x, но меняет цвет с красного на желто-оранжевый и поднимается вверх.

33% {
 bottom: 340px; /* солнце встает */
 left: 340px;
 background: #ffd630; /* меняет цвет */
 }

Затем, примерно через две трети анимации (66%) солнце перемещается влево на 300px. Заметьте, что я опять указал его цвет как в кадре 33%, чтобы солнце не начало краснеть слишком рано

66% {
 bottom: 340px;
 left: 40px; /* солнце пересекает небо */
 background: #ffd630; /* цвет все тот же */
 }

И, наконец, солнце плавно переходит к своей финальной стадии — становится красным и опускается ниже уровня земли.

100% {
 bottom: 0; /* солнце садится */
 left: 40px;
 background: #f00; /* становится красным */
 }

Ассоциирование анимации с элементом

Следующий кусок кода привязывает название анимации (в нашем случае слово sunrise) с определенным элементом в HTML:

#sun.animate{
 -webkit-animation-name: sunrise;
 }

Представляю вашему вниманию свойство animation-name. Значение этого свойства должно соответствовать идентификатору существующего @keyframes rule, иначе анимация не заработает.

Объект, к которому я обращаюсь, это элемент с id sun и классом animate. Зачем нужно дублировать код таким образом? Затем, чтобы можно было применить ява-скрипт и присвоить класс динамически. Например, в демо открываемая страница статична, анимация запускается после нажатия кнопки. Это значит, что изначально классы имеют другие стили, но после нажатия кнопки новые стили присваиваются всем элементам, и анимация запускается. Мы добиваемся того, что анимацию может контролировать пользователь.

Естественно, это всего лишь один способ добиться контроля. Как всегда в случае с CSS и JavaScript, существует множество способов достигнуть одного и того же.

Функции Duration и Timing (Длительность и Развитие)

Давайте добавим еще две строки к нашему CSS:

#sun.animate {
 -webkit-animation-name: sunrise;
 -webkit-animation-duration: 10s;
 -webkit-animation-timing-function: ease;
 }

Вы можете указать длительность анимации с помощью свойства animation-duration. Duration указывает сколько времени должно быть отпущено на один полный анимационный цикл. Вы можете указать значение в секундах (например, 4s), миллисекундах (2000ms), и в секундах в десятичных дробях (3.3s).

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

Свойство animation-timing-function, указанное для анимации целиком, позволяет определить развитие анимации в пределах одного цикла. Доступные значения для animation-timing-function — это ease, linear, ease-out, step-start и многие другие, как указано в спецификации.

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

Кроме того, вы можете применять timing к каждому кадру, как здесь:

@-webkit-keyframes sunrise {
 0% {
 background: #f00;
 left: 340px;
 bottom: 0;
 -webkit-animation-timing-function: ease;
 }
 33% {
 bottom: 340px;
 left: 340px;
 background: #ffd630;
 -webkit-animation-timing-function: linear;
 }
 66% {
 left: 40px;
 bottom: 340px;
 background: #ffd630;
 -webkit-animation-timing-function: steps(4);
 }
 100% {
 bottom: 0;
 left: 40px;
 background: #f00;
 -webkit-animation-timing-function: linear;
 }
 }

В каждом ключевом кадре наверху стоит отдельная функция timing. Одна из них имеет значение steps (шаги), это значение перебрасывает анимацию вперед на указанное количество предполагаемых шагов. Конечный кадр тоже имеет свою функцию timing, но она сработает только если анимация будет проиграна задом наперед.

В нашем примере мы не используем покадровые функции timing, в данном уроке я просто показал, что это возможно.

Iteration Count и Direction (Количество раз и Направление)

Добавим еще две строчки в наш код:

#sun.animate {
 -webkit-animation-name: sunrise;
 -webkit-animation-duration: 10s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-direction: normal;
 }

Пример сверху демонстрирует еще два свойства: первое указывает, сколько раз нужно проиграть анимацию, второе указывает, в каком направлении ее проигрывать при множественном просмотре.

Свойство animation-iteration-count поставлено на 1, что означает, что анимация будет продемонстрирована только раз. Свойство может иметь значение infinite (бесконечность).

Свойство animation-direction установлено на normal (нормальный, значение по умолчанию), это значит, что анимация будет проигрываться в том же направлении (от начала до конца) при каждом просмотре. В нашем случае анимация будет проиграна только один раз, так что это свойство указывать необязательно. Другое свойство, которое мы могли бы здесь указать, это alternate (альтернативно), что заставит анимацию играть в обратном направлении при каждой следующей прокрутке. Чтобы это свойство было применено, iteration count должно быть установлено на 2 или большее количество раз.

Delay And Play State (Отсрочить и Состояние проигрывателя)

Еще две строки в наш CSS:

 #sun.animate {
 -webkit-animation-name: sunrise;
 -webkit-animation-duration: 10s;
 -webkit-animation-timing-function: ease;
 -webkit-animation-iteration-count: 1;
 -webkit-animation-direction: normal;
 -webkit-animation-delay: 5s;
 -webkit-animation-play-state: running;
 }

Первое представленное вам свойство animation-delay делает именно то, что вы думаете — отсрачивает анимацию на указанное вами количество времени. Интересно, что свойство может принимать отрицательное значение, которое передвигает стартовую точку отсчета внутри анимации на указанное количество секунд.

Свойство animation-play-state, которое возможно удалят из спецификации, принимает два возможных значения running и paused. У этого свойства ограниченная практическая польза. По умочанию значение running, а paused просто ставит анимацию на паузу, пока пользователь вречную не нажмет play. Вы не можете указать свойство paused внутри кадра, но польза свойства возникает, когда в применяете JavaScript, чтобы анимация реагировала на действия пользователя, какие-то введенные значения и т. п.

Fill Mode

UPDATE: свойство удалено из спецификации.

Остальное в спецификации

Более подробно все возможные свойства для CSS-анимации вы можете посмотреть в спецификации.

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

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

В демо не использованы никакие картинки, и анимация не использует ява-скрипты. Солнце, луна и облако нарисованы средствами CSS3 с помощью свойства border-radius, и ява-кодирование применено только к вкладкам справа и к кнопке, запускающей и прерывающей анимацию.

При просмотре анимации в любом НЕ WebKit-браузере, она не сработает.

Список поддерживающих CSS-анимацию браузеров:

Chrome 2+,
Safari 4+,
Firefox 5+,
iOS Safari 3.2+,
Android 2.1+.

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

Ну и ни одного слова об ожидаемой поддержке в IE.

Что такое HTML5 SHIV – уроки HTML5

Ne0Lite — Mon, 10 Sep 2012 10:01:27 GMT

Так как многие браузеры некоторое время не будут распознавать HTML5, нам нужно придумать способ строить страницы на HTML5 и заставить браузеры «видеть» его обходным путем. Для этого прибегнем к помощи JavaScript и CSS.

Итак, Internet Explorer не в состоянии применить стили к элементам, которые он не распознает. К примеру, следующий элемент – "blah” – не будет никак стилизован:

blah { color: red; }

</blah>

Результат:

Благодаря Sjoerd Visscher у нас теперь есть одна интересная техника, с помощью которой можно заставить IE применять стили к необходимым элементам. Если вы создадите новый DOM-элемент (с тем же именем, что и восновном документе), то листы стилей заработают. Вам даже не нужно вставлять этот элемент в документ для того, чтобы стили сработали. Пример:

blah { color: red; }
document.createElement("blah”)

</blah>

Результат:

Это очень важно. Это значит, что мы теперь можем применять стили к элементам HTML5, не распознанным Интернет Эксплорером.

Элемент

Взгляните на простой пример. Претворимся, что хотим применить HTML 5 figure element. Элемент очень простой, только требует небольшой стилизации. (Не уверен, как элемент figure должен конкретно выглядеть, просто беру картинку для примера):

figure { border: 1px inset #AAA; padding: 4px; }

document.createElement("figure”);

src=”http://ejohn.org/files/jeresig-wordpress-sm.jpg”/>
</figure>

Результат:

С помощью CSS и простой JavaScript DOM формулы мы смогли внедрить хотя бы часть спецификации HTML5. Хоть это и не решение всех проблем, но уже многообещающая техника.

Я попытался применить ее к некоторым элементам, уже определенным в IE. К примеру, я решил создать legend child element. Применить стили к нему было действительно трудно, так как функциональность и применение стилей к легендам уже определены для элементов fieldset в Internet Explorer. В моих простых тестах, если legend element находился вне полей формы, он никак не стилизовался.

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

HTML5 учебник – введение в новый язык разметки

Ne0Lite — Mon, 10 Sep 2012 08:47:39 GMT

HTML5 и CSS3 только «прибыли», а очередная гонка на приз за лучшую сборку в новом формате уже началась. Сказать по правде, все это – лишь инструменты, ждущие хорошего разработчика, готового создать првильный проект. Как хорошие разработчики, мы не должны тратить драгоценное время на выяснение отношений между собой – какой язык разметки лучше. Такой путь ведет в никуда. Вместо этого мы должны принять абсолютно новую идеологию и расширить наши навыки в программировании, чтобы сделать Веб еще более доступным.
И ничто не должно мешать нам начать прямо сейчас.
Добро пожаловать в HTML5
HTML5 логотип - HTML5 учебник
Такие вещи, как jQuery, техники форматирования и тенденции в дизайне меняются очень быстро. И в целом мы привыкли, что то, что мы изучаем сегодня, назавтра уже устаревает, но такова природа нашей индустрии.
В поисках стабильности мы обращаемся к коду, который не меняется в течение относительно долгого времени. Так что, когда меняется даже код – это целое событие, и нас ожидает не одна головная боль, пока мы будем продираться через тернии.
В этой статье я надеюсь рассказать вам о некоторых приемах и строении HTML5, чтобы помочь вам преодолеть эту боль, пока вы будете переходить на другой синтаксис.
База
Когда несколько месяцев назад я начал изучать HTML5, первая вещь, которую я пытался найти, это DOCTYPE. Вроде бы простая вещь, которая должна быть везде, нигде не проявляла себя, и после полного краха своих попыток я наконец откопал ее в недрах W3C. Вот она:
Мне было также любопытно, почему они выбрали DOCTYPE html а не DOCTYPE html5, что было бы более логично и сразу сообщало браузерам, с документом какого формата они работают. Но оказалось, что DOCTYPE HTML5 не принимается Internet Explorer 6, тогда как сам документ, составленный в HTML5 и с правильным DOCTYPE отображается правильно.
Мне нравится новый DOCTYPE, он краток и всеобъемлющ, так что, думаю, мы все запомним его и не будем копировать и переносить со страницу на страницу.
Новые элементы, которые вы должны знать
Эти элементы привлекают наше внимание с первого взгляда. W3C на самом деле прислушалось к мнению общественности и ввело большое количество новых элементов в рассчете на будущее. Теперь у нас есть все, начиная с простых структурных элементов вроде и и заканчивая и , которые обещают стать мощными API и обеспечить нас достаточной свободой для создания новых приложений и при этом уйти от необходимости использовать флэш при отображении видео и мультипликации. Новые структурные элементы
Элемент header предназначен для отображения всей вводной информации, типа лготипа, названия сайта и тому подобное.
Элемент nav содержит ссылки на другие разделы сайта или страницы. Не нужно все ссылки заключать в эти тэги, только основную навигацию.
Этот тэг заключает в себе динамический контент или программное приложение. То же самое делает div, но section отделяет целый кусок документа.
Отделяет кусок страницы, текст, который может стоять отдельно, например, блоговский пост, форумное сообщение, комментарий пользователя или любая независимая от остального контента статья.
Элемент aside содержит контент, относящийся к основному содержимому страницы. Как правило, это боковые колонки, где размещаются ссылки на похожие материалы, облака тэгов и т.п. Могут также содержать выносы – цитаты из текста.
Используется для отделения «подвала», не только всей страницы, но и любого ее раздела. Так что этот элемент вы, скорее всего, будете использовать на странице несколько раз.
На первый взгляд кажется, что эти новые элементы делают то же самое, что обычные
Элементы header и footer не просто отделяют шапку и подвал страницы, но определяют шапку и подвал каждого элемента на ней, как делают в таблицах thead и tfoot.
Преимущество новой разметки в том, что она семантически определяет элементы страницы (легче ориентироваться в коде). Однако, использовать ее нужно с умом, иначе легко переборщить.
Облегчение перехода с XHTML5
Хотя HTML 4.01, XHTML 1.0, & HTML5 очень похожи, существуют небольшие синтаксические различия, которые могут привести к коллапсу страницы. Чтобы этого не происходило, в HTML5 заложено некоторое «послабление» для заядлых XHTML-кодеров.
Например, при построении формы в HTML5 правильный синтаксис для input text будет таким:
Но не будет ошибкой написать и так:
То есть, с закрывающим слэшем.
То же самое относится к
Такие элементы как
В чем преимущество?
У любой новой технологии должно быть преимущество, иначе зачем вы будете ею пользоваться. HTML5 «упакован» целым рядом преимуществ. Большинство из них касается API и DOM.
Расширяем API
Самое очевидное преимущество HTML5 – несколько новых API (программных интерфейсов приложений) и возможности, которые появятся в будущем у веб-приложений благодаря кэшу и оффлайн-работе. Google Gears позволил нам хранить информацию оффлайн, флэш продемонстрировал мощность кэша, Pandora с его помощью сохраняет информацию о логине и пароле. С HTML5 все эти вещи можно реализовать средствами самого языка, и легко расширить с помощью Ява-скриптов.
HTML5 использует «легкую» кодировку, чтобы сосредоточить свое внимание на Вебе; впервые, кроме jQuery, одна передовая технология полностью поглощает другую. Конечно, мы связываем HTML5 и Ява-скрипты с помощью классов и ID, но до этого момента они воспринимались как отдельные блоки, приставляемые один к другому. Теперь же, с ростом Веба, нам необходимо такого рода объединение двух технологий.
HTML5 luvs API - HTML5 учебник
Хранение данных оффлайн
Самая крутая фишка HTML5 – определенно его оффлайн возможности. Thunderbird и Outlook (вскоре и GMail) позволяют загрузить вашу старую информацию, находясь оффлайн. С HTML5 у вас будет такая же функциональность, только в браузере. Это первый серьезный шаг на пути сокращения пропасти между десктопом и Вебом, который позволяет открыть множество дверей в будущее веб-приложениям.
W3C позаимствовал лучшие наработки у различных веб-технологий, что сделало его самым мощным программным языком на сегодняшний день.
Другие API
Drag & Drop (перетащить и поставить)
Drag & Drop API определяет само событие по переносу и вставке, чего именно – не указано. Этот API требует Ява-скрипта для нормальной работы по переносу и вставке.
Video & Audio (видео и аудио)
Эти API – большой апгрэйд в сфере отображения медиа-файлов. Хотя функциональность пока ограничена, вставка видео на страницу никогда не была проще:
Геолокация
Потрясающий API – позволяет средствами HTML5 определить местонахождение подключенного к Интернету устройства (мобильного телефона).
Где я могу это использовать?
Не смотря на малую поддержку HTML5 браузерами, веб развивается слишком быстро, чтобы медлить и не отрабатывать свои навыки на тестовых страницах. В данный момент Safari – лучшая платформа для тестирования, он поддерживает большинство новых элементов и API. Конечно, ситуация может измениться в любой момент, так что следите за развитием Opera, Chrome и Firefox.
Как нам двигаться дальше?
Несмотря на кипишь вокруг HTML5 и наше нетерпение его использовать, переход с HTML4.01 и XHTML1.0 на HTML5 – это длительный процесс. Пройдет много времени, прежде чем разработчики протестируют все функции, а браузеры смогут их выполнять, но больше всего времени займет переход пользователей со старых версий браузеров на новые. Мы все это понимаем, все читаем эту статью, и мы знаем, что нужно найти какой-то путь, чтобы продолжать свое движение вперед, не навредив при этом прошлому.
Мы пока не можем полностью перейти на новый язык и знаем, что ни один ответственный разработчик не станет создавать приложение, которое не поддерживается все еще широко распространенным браузером. Но есть несколько лазеек, которые помогут нам двигаться дальше.
Семантическое наименование div-ов
Давать div-ам имена header, footer и т.п., которые потом будут использоваться в качестве элементов разметки напрямую, хорошая практика для того, чтобы привыкнуть к названиям.
Хитрое использование JavaScript
Во-первых, не используйте этот прием в рабочей версии продукта. Если скрипты не будут поддерживаться на стороне клиента, это разрушит весь сайт в браузерах, которые не смогут применить листы стилей к новым элементам. Тем не менее, необходимо знать все опции заранее.
Создание элементов с помощью Ява-скрипта.
Работа с jQuery – это круто и все такое, но, как выяснилось, в Ява-скрипте есть встроенная функция для создания новых элементов.
document.createElement(‘header’);
document.createElement(‘footer’);
document.createElement(‘section’);
document.createElement(‘aside’);
document.createElement(‘nav’);
document.createElement(‘article’);
document.createElement(‘figure’);
document.createElement(‘time’);
И далее в том же духе.
Этот прием позволит вам стилизовать элементы в Internet Explorer. Обратная сторона медали в том, что без всех необходимых Ява-скриптов сайт не только останется без стилей, но и любые не распознанные элементы будут игнорированы. То есть ваш сайт будет разрушен.
Ява-скрипты на стороне клиента – это не решение при использовании HTML5, Ява-скрипты на стороне сервера – это уже совсем другое дело…
Создание приложений под определенные браузеры
Я всегда призывал людей создавать сайты для своей аудитории, и написание приложений под определенные браузеры – это в самом деле фишка. Как я уже говорил ранее, все упирается в создание и контроль среды. Если мы сможем управлять средой, то предоставлять новые услуги нашим клиентам будет гораздо легче. Google пытается сделать это со своим продуктом Google Wave.
Основная идея, стоящая за продуктом Google, – произвести революцию в сфере общения и сделать это с помощью новейшей технологии. Google Wave построен на HTML5 и пока не отображается всеми браузерами. Но это не проблема, так как Google контролирует свою аудиторию, и выпустил продукт, чтобы отобрать из этой аудитории разработчиков для его тестирования.
С помощью Wave Google продвигает HTML5 так далеко, как только можно (и даже немного дальше). Они переводят блоги, wiki, мгновенные сообщения, e-mail и синхронное общение на новый уровень, так как собирают все в один флакон.
Вот как выглядит Google Wave:
Google Wave на HTML5 – это самый большой прорыв в данной области. Они провели феноменальную работу, совместив творчество и инновационную технологию.
Сфокусируемся на мобильных устройствах
Точно так же, как Google ведет себя с Google Wave, мы можем вести себя с мобильными устройствами, то есть разрабатывать в HTML5 приложения для устройств, которые его поддерживают.
Это, конечно, не лучшее решение при дизайне для мобильных устройств вообще, но если вы хотите сосредоточиться на определенном приборе, таком как iPhone, Pre или Google’s Android, то вполне приемлемый способ реализовать свои возможности.
В данный момент самой лучшей платформой для тестирования обладает iPhone (сейчас уже iPad – прим. переводчика). Но если вы хотите протестировать только новые элементы, то все три крупнейшие платформы подойдут с таким же успехом.
Настройка простейшего сервера для скачивания файлов на базе IIS 7.0 Ne0Lite — Sun, 08 Jul 2012 19:53:37 GMT Windows Server 2008 имеет в комплекте сильно изменённую роль веб-сервера IIS. Изменения коснулись как самого веб-сервера, так и инструментов его управления. В этой заметке я коснусь только простейших настроек. Впрочем и решённую задачу назвать сложной проблематично. Итак, имеется сервер, на базе его надо настроить ftp-сервер с доступом по паролю к определённой папке и http-сервер с анонимным доступом к этой же папке, но без возможности просмотра содержимого папки. Для начала рассмотрим процесс установки IIS. Роль веб-сервера доступна в списке стандартных ролей Windows Server 2008. И для её установки достаточно эту роль добавить. В связи с требованиями задачи список компонентов устанавливаемых по умолчанию надо подкорректировать. Directory Browsing и Basic Authentication нам не понадобятся. По завершении мастера установки можно проверить корректность работы сервера подключившись в браузере к http://localhost. В случае успешной установки должен отобразиться следующий сайт: К сожалению, в комплект Windows Server 2008 не входит FTP Publishing Service 7.0. Он доступен на сайте Майкрософта. Ссылка на скачивание здесь. При установке выбираем все предлагаемые компоненты: После установки FTP вернёмся к конфигурированию нашего веб-сервера. Консоль управления IIS очень сильно изменилась по сравнению с шестой версией и выглядит следующим образом: В Authentication проверяем что к нашему веб-сайту доступ имеют только анонимные пользователи. В IIS 7.0 доступ к ресурсам сервера анонимных пользователей идёт от имени служебной учётной записи IUSR. Далее в Basic Settings указываем папку, где будет находиться содержимое нашего сайта и права доступа к файловым ресурсам (пользователю IUSR даём только право Read на нашу папку). Теперь попробуем посмотреть в браузере что у нас получилось. При попытке доступа к localhost по http-протоколу получаем чистый экран Если же будем обращаться к конкретному файлу - то сервер даст его скачать Вернёмся к конфигурированию нашего веб-сервера. Займёмся настройками FTP. Для этого не обязательно делать отдельный ftp-сайт, можно подключить ftp к текущему нашему сайту. Делается это через команду Add FTP Publishing с консоли действий нашего IIS manager’а. После этого в настройках нашего сайта появятся дополнительные настройки для конфигурирования FTP-сервера. Для начала в FTP Authentication проверяем, что анонимный доступ к ftp-серверу отключен, включена только Basic аутентификация. Далее, настраиваем FTP Authorization Rules. Предварительно создаем две локальных группы FTP Admins и FTP Users, например. Первой даём права на чтение-запись на нашем сервере, второй - только на чтение. Затем, в FTP Directory Browsing можно настроить внешний вид FTP-сайта и различные сообщения сервера. На этом конфигурация нашего сервера заканчивается. Проверяем отсутствие доступа анонимных пользователей и доступ для пользователя - члена группы FTP Admins: Ну и напоследок, проверяем через ftp-клиент Total Commander’a права доступа для учётки из группы FTP Admins и для учётки из группы FTP Users. Windows 2008. Cоздание нового корневого домена в лесу Ne0Lite — Sun, 08 Jul 2012 19:51:11 GMT Предположим, что у нас имеется удалённый офис. Офис немаленький, следовательно мы можем туда поставить полноценный контроллер домена. Кроме этого, удалённый офис будет поддерживать местная команда IT-специалистов и для ограничения их доступа только локальными ресурсами удалённого офиса выделим им отдельный домен в общем лесу. Задача имеет несколько путей решения и решается в 2 стадии. Попробуем решить задачу используя графические средства Windows 2008 Server (задача так же может быть решена утилитами командной строки или средствами файлов автоответов). Сначала надо будет создать отдельный сайт для удалённого офиса, потом в удалённом офисе установить будущий контроллер домена, включить его в наш основной домен и повысить его до контроллера домена параллельно создав новый корневой домен. 1. Создаем новый сайт. Операции выполняются через оснастку "Active Directory Sites and Services”. Создаём новый сайт: Вводим имя сайта и указываем линк, который он будет использовать: Далее нас предупреждают, что сайт создан и надо теперь указать для него подсеть и установить в нём контроллер домена: Действительно, если развернуть в оснастке наш новый сайт, в нём не окажется серверов: Добавляем подсеть: Указываем адрес подсети и сайт к которой её привязываем: Всё, сайт у нас создан. Осталось поместить в него новый контроллер домена. 2. Создаём новый корневой домен. Для начала нужно убедиться в правильных настройках сетевой карты будущего контроллера домена. Во-первых сервер должен в качестве основного dns-сервера в настройках сетевой карты использовать наш основной контроллер домена, во-вторых должен существовать маршрут с нашего офиса до контроллера домена. При этих условиях проблем с введением в домен нового сервера возникнуть не должно. Процедура это стандартная и останавливаться на ней смысла особого нет. После введения нового сервера в основной домен нужно его повысить до роли контроллера домена, создав при это новый корневой домен. До запуска процедуры повышени роли сервера до контроллера домена надо на него установить роль Active Directiry Domain Services: Замечу, что при попытке установить одновременно роль DNS-сервера мы получим следующее предупреждение: Что означает, что при необходимости, роль DNS-сервера будет автоматически установлена при провышении роли сервера до контроллера домена. Продолжаем установку - на следующем шаге получим предупреждение, что сервер возможно будет перегружен после установки роли: После завершения установки прямо из окна визарда получаем доступ к запуску dcpromo и запускаем процесс установки контроллера домена: Будем использовать расширенный режим установки: При выборе конфигурации укажем, что ставить контроллер домена будем в существующем лесу в новый домен. Обязательно должна быть галка "Create a new domain tree root instead a new child domain". Иначе мы запустим установку дочернего домена в существующем: Указываем имя корневого домена и учётные данные пользователя с правами доменного администратора. Если на новый сервер мы залогинены под пользователем, являющимся доменным администратором, то нужно будет указать только имя существующего корневого домена: Далее вводим имя будущего домена: Его NetBIOS имя: Указываем сайт, в который поместим будущий контроллер домена (мы его создали на предыдущем шаге): Укажем дополнительные опции установки (установить на сервер роль DNS-сервера и сделать его глобальным каталогом в новом сайте): Далее укажем контроллер домена, с которым будет реплицироваться при установке наш новый сервер (в принципе можно предоставить выбор контроллера домена для репликации визарду): Далее указываем размещение базы AD, логов и директории SYSVOL: Вводим пароль режима восстановления: Запускаем процесс установки: Процесс установки займёт некоторое время, в течение которого установится роль DNS-сервера, будут назначены все необходимые разрешения и создана необходимая база в которую скопируются все необходимые объекты AD. После завершения установки потребуется перезагрузка, после которой мы получим новый контроллер домена в новом домене в общем лесу ресурсов.