Основы веб-технологий. День 4

Василика Климова

Нет предела
совершенству

Василика Климова
Разработчик интерфейсов
Artec 3D

Moscow Coding School

День 4

Доступность сайта

Фреймворки для верстки

Обзор фреймворков для создания интерфейсов

Верстка с сеткой

Grid layout

Модальные окна Bootstrap

Галерея Bootstrap

JavaScript

Самый популярный язык 2015

Глобальные объекты

window.innerWidth
navigator.userAgent
document.body.scrollTop
...

Поиск элемента

document.getElementById("h1")
document.querySelector(".class")
...

Методы, свойства и события

el.innerHTML
el.style.color
el.addEventListener("click", func)
...

Событие загрузки страницы

JavaScript
      window.onload = function() {
        ... 
      };
    

Библиотека

Набор некоторых функциональных возможностей

Замена библиотеки не влияет на работу системы

Библиотека jQuery

jQuery

Google jQuery

Селекторы jQuery

Методы jQuery

Событие загрузки страницы

JavaScript
      window.onload = function() {
        ... };
    
jQuery
      $(document).ready(function(){
        ... });
    

Работа с событиями

      $(document).ready(function(){
        $("input").click(function(event){
          alert("Ура!");   
        });
      });
    

Анимация при изменении класса

      $('.element').click( function(){
        $(this).toggleClass('active');
      });
    
      .active {
        transform: translate(0, 50%);
      }
    

Анимация по hover

      $('.element').mouseover( function(){
        $(this).addClass('active');
      });
    

Хостинг

Git Pages

Вёрстка из дизайн-редакторов

Одностраничные сайты

Интернет вещей IoT

Canvas 2D

WebGL


Проверка поддержки WebGL

Игры

gooengine.com/pearl-boy

Навигация

bookcase.chromeexperiments.com

Редакторы

3dtin.com

3D туры

3dvector-pro.ru

Инфографика

globe.chromeexperiments.com

WebGL

+ + GLSL ES

Интерактивность

Интерактив

Геймификация

Полезные ссылки

Полезные ссылки

Василика Климова

likita
vasilika.klimova
lik04ka

Навигация

Список всех уроков

Fork me on Github