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

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

Строим DOM

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

Moscow Coding School

Презентация

Artec

Artec Group Artec Group

День 1

Процесс веб разработки

Прототип

Дизайн

Верстка

Профессии

DevOps инженер

Devops

Гибкая методология разработки

agile

Cистема отслеживания ошибок

jira

Веб-сервер

HTML - структура веб-страницы.
CSS - внешний вид веб-страницы.
JavaScript - поведение элементов на веб-странице.

Uniform Resource Locator

ftp - протокол передачи файлов FTP
http - протокол передачи гипертекста HTTP
https - протокол HTTP с шифрованием

narod.ru

Internet Protocol Address

188.40.41.77

www.htmlweb.ru

Домены первого уровня

Домены

Блокнот

Notepad

Sublime

WebStorm

Интегрированная среда разработки

Редактор текста

HTML

Основные понятия верстки

Тег - HTML команды

Атрибут - различные свойства тегов

<тег атрибут="значение">содержимое</тег>

Элемент разметки - совокупность пары тегов, атрибутов и содержимого

Дерево DOM

DevTools

HTML

<!DOCTYPE html>

Тип текущего документа и его синтаксис

Тег head

<head>

Включает заголовок страницы
и техническую информацию
Не отображается напрямую на веб-странице

</head>

Тег body

<body>

Тег хранит содержимое веб-страницы

</body>

Схема веб страницы

Head. Тег title

<title>

Заголовок страницы на вкладке браузера

</title>

Head. Тег meta

<meta>

Хранит информацию для браузеров и поисковых систем

<meta name="keywords" content="HTML, метатег, тег">

Head. Тег style

Cтили элементов веб-страницы

        <style type="text/css">
          h1 { 
            font-size: 22px; 
            color: #666666;  }
        </style>
      

Head. Тег link

<link>

Устанавливает связь с внешним документом вроде файла со стилями или со шрифтами.

<link rel="stylesheet" href="ie.css">

Head. Тег script

<script>

Описание скриптов JavaScript

</script>
      <script type="тип" src="URL"></script>
    

Body. Блочные элементы

<div>

Выделяет часть документа для изменения ее вида

Практическая часть

Выводим на странице

Практическая часть

Выводим на странице

Body. Строчные элементы

<span>

Выделяет часть внутри блока для изменения ее вида

HTML5

<header>
<footer>
<nav>
<aside>
<audio>
<video>
...

Version Control System

Git

Install Git

Команды

GIT. Скачиваем проект

git clone git@myproject.git
cd myproject - переход в папку проекта

GIT. Настройка

git config --global user.name "MyName"
git config --global user.email myemail@example.com

GIT. Записываем изменения

git add . - добавляем все файлы
git сommit -am 'My first commit' - делаем слепок проекта
git push - отправляем изменения на Github

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

Изящная деградация

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

Изящная деградация

Плюсы Минусы

Прогрессивное улучшение

Предоставление базового функционала для всех типов пользователей

Прогрессивное улучшение

Плюсы Минусы

Сначала мобильные

Проектирование сайта начиная с мобильной версии
Затем разработка и дополнение для широких экранов

Когда использовать подход?

Если есть достаточный процент пользователей с мобильных устройств

Хостинг

Git Pages

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

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

likita
vasilika.klimova
lik04ka

Тест по пройденному материалу

Навигация

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

Fork me on Github