HTML. XML. Вэб-технологии презентация

Слайд 3. Объединение листов стилей

Слайд 4. Создание CSS

Слайд 5. НаследованиеСлайд 5. Наследование Слайд 5. Наследование CSS

Слайд 6. ПсевдоклассыСлайд 6. Псевдоклассы Слайд 6. Псевдоклассы CSS

Адаптивная верстка

Слайд 1. Адаптивная верстка

Слайд 2. Что такое адаптивный дизайн?

CCлайд 3Cлайд 3. Cлайд 3. Схема адаптивного дизайна

Слайд Слайд 4.Слайд 4. Слайд 4. Responsive design

Слайд Слайд 5. Слайд 5. Progressive enhancement илиСлайд 5. Progressive enhancement или Graceful degradation

Слайд Слайд 6. Слайд 6. Этапы Слайд 6. Этапы Progressive Enhancement

Слайд Слайд 7. Слайд 7. Что такое Слайд 7. Что такое Mobile firstСлайд 7. Что такое Mobile first ?

CCлайд 8Cлайд 8. Cлайд 8. Как перевести статичную разметку в гибкую

Слайд 9Слайд 9.Слайд 9. Разметка для адаптивных сайтов

Слайд 10Слайд 10. Слайд 10. Мета тэг Слайд 10. Мета тэг viewportСлайд 10. Мета тэг viewport

Слайд 11Слайд 11. Слайд 11. Пример гибкой верстки

Слайд 12Слайд 12. Слайд 12. Результат гибкой верстки

Слайд 13Слайд 13. Слайд 13. Как сделать сайт адаптивным?

Слайд 14Слайд 14. Слайд 14. Пример адаптивной верстки

Слайд 15Слайд 15.Слайд 15. Гибридная сетка

Слайд 16Слайд 16. Слайд 16. Что такое гибридная верстка?

Слайд 17Слайд 17. Слайд 17. Пример не гибридной верстки

Слайд 18Слайд 18. Слайд 18. Как решить эту проблему?

Слайд 19Слайд 19.Слайд 19. Результат гибридной версткиСлайд 19. Результат гибридной верстки

Слайд 20Слайд 20. Слайд 20. Почему это не идеальный вариант?

Слайд 21Слайд 21. Слайд 21. Гибкая сетка

Слайд 22Слайд 22. Слайд 22. Что такое гибкая сетка?

Слайд 23Слайд 23. Слайд 23. Гибкая сетка от дизайнера

Слайд 24Слайд 24. Слайд 24. Гибкая сетка на сайте

Слайд 25Слайд 25. Слайд 25. Гибкая сетка - определение

Слайд 26Слайд 26. Слайд 26. Гибкая сетка на разных устройствах

Слайд 27Слайд 27. Слайд 27. Методы для создания гибкой сетки?

Слайд 28Слайд 28. Слайд 28. Программы создания адаптивной верстки

Слайд 29Слайд 29.Слайд 29. Начальная заготовкаСлайд 29. Начальная заготовка

Слайд 30Слайд 30. Padding Margin Слайд 30. Padding Margin Класическая модель

Слайд 31Слайд 31. CСлайд 31. Cвойства Слайд 31. Cвойства box Слайд 31. Cвойства box моделейСлайд 31. Cвойства box моделей

Слайд 32Слайд 32.Слайд 32. Пример свойства Слайд 32. Пример свойства box Слайд 32. Пример свойства box моделиСлайд 32. Пример свойства box модели

Слайд 33Слайд 33. Слайд 33. Обертка для модели

Слайд 34Слайд 34.Слайд 34. Результат гибкой сеткиСлайд 34. Результат гибкой сетки

Слайд 35Слайд 35. Media queries

Слайд 36Слайд 36.Слайд 36. Понятие Слайд 36. Понятие media

Слайд 37Слайд 37. Слайд 37. Стиль Слайд 37. Стиль “Слайд 37. Стиль “файл на печатьСлайд 37. Стиль “файл на печать”

Слайд 38Слайд 38. Слайд 38. Почему Слайд 38. Почему media queries?

Слайд 39Слайд 39. Слайд 39. Базовое правило

Слайд 40Слайд 40. Слайд 40. Логические операторы

CCлайд 41Cлайд 41. Cлайд 41. Применение Cлайд 41. Применение media queries

CCлайд 4Cлайд 42. Media queries c mobile first

Слайд 43Слайд 43.Слайд 43. Слайд 43. Flexible media

Слайд 44Слайд 44. Слайд 44. Блочные элементы

Слайд 45Слайд 45. Слайд 45. Использование Слайд 45. Использование media

Слайд 46Слайд 46. Слайд 46. Пример, отрицательный стороны

CCлайд 50Cлайд 50. Cлайд 50. Используем Cлайд 50. Используем media queries

Слайд 51Слайд 51. Слайд 51. Картинки для Слайд 51. Картинки для Retina Display

CCлайд 52Cлайд 52. Cлайд 52. Тестирование

Слайд 53Слайд 53. Слайд 53. Проблема с заглавием

Слайд 54Слайд 54. Developer tools

Java Script

Слайд Слайд 1. Statements, Expressions, Operators

Слайд Слайд 2. Слайд 2. Инструкции

Слайд Слайд 3. Слайд 3. Выражения

Слайд Слайд 4. Слайд 4. Пример

Слайд 5Слайд 5. Слайд 5. Операторы

Слайд 6Слайд 6. Слайд 6. Арифметические операторы

Слайд Слайд 7. MDN

Слайд 8Слайд 8. Слайд 8. Формы инкримента

Слайд 9Слайд 9. Слайд 9. Пример выполнения

Слайд 10Слайд 10. Слайд 10. Оператор Слайд 10. Оператор “Слайд 10. Оператор “,Слайд 10. Оператор “,”

Слайд 11Слайд 11.Слайд 11. Операторы сравненияСлайд 11. Операторы сравнения

Слайд 12Слайд 12. Слайд 12. УСлайд 12. Условные и логические операторы

Слайд 13Слайд 13. Слайд 13. Оператор условияСлайд 13. Оператор условия if

CCлайд 14Cлайд 14. ОCлайд 14. Обработка результатовCлайд 14. Обработка результатов. Cлайд 14. Обработка результатов. Блок Cлайд 14. Обработка результатов. Блок else

CCлайд 15Cлайд 15. Cлайд 15. Расширеная форма Cлайд 15. Расширеная форма else if

Слайд 16Слайд 16. Слайд 16. Оператор условия Слайд 16. Оператор условия “Слайд 16. Оператор условия “?Слайд 16. Оператор условия “?”Слайд 16. Оператор условия “?”

Слайд 1Слайд 17. Слайд 17. Логические операторыСлайд 17. Логические операторы

Слайд 18Слайд 18. Слайд 18. ЧислаСлайд 18. Числа

Слайд 19Слайд 19. Слайд 19. Методы с числамиСлайд 19. Методы с числами

Слайд 20Слайд 20. Слайд 20. Более сложные операции из модуля Слайд 20. Более сложные операции из модуля MATH

Слайд 21Слайд 21. NaN Слайд 21. NaN и Слайд 21. NaN и Infinity

Слайд 22Слайд 22. Слайд 22. Проверка на Слайд 22. Проверка на NAN

Слайд 23Слайд 23. Infinity

Слайд 24Слайд 24. Strings

Слайд 25Слайд 25. Слайд 25. ОбьявлениеСлайд 25. Обьявление

Слайд 26Слайд 26.Слайд 26. ЭкранированиеСлайд 26. Экранирование

Слайд 27Слайд 27. Слайд 27. Символы внутри строкСлайд 27. Символы внутри строк

Слайд 2Слайд 28. Слайд 28. Свойства и методы строк

Слайд 29Слайд 29. Boolean, null, undefined

Слайд 30Слайд 30. Boolean

Слайд 31Слайд 31. Undefined, null

Слайд 32Слайд 32. Слайд 32. Пример

Слайд 33Слайд 33. Слайд 33. Конвертация типов данных

Слайд 34Слайд 34. Слайд 34. ЯвныеСлайд 34. Явные

Слайд 35Слайд 35. Слайд 35. Быстро в строкуСлайд 35. Быстро в строку

Слайд 36Слайд 36.Слайд 36. Быстро в булевое значениеСлайд 36. Быстро в булевое значение

Слайд 37Слайд 37. Слайд 37. Быстро в числоСлайд 37. Быстро в число

Слайд 38Слайд 38. Слайд 38. Методы для переводаСлайд 38. Методы для перевода

CCлайд 39Cлайд 39. Cлайд 39. ОбъектыCлайд 39. Объекты

Слайд 40Слайд 40. Слайд 40. Что такое объект?

CCлайд 41Cлайд 41. Cлайд 41. Создание простого объектаCлайд 41. Создание простого объекта

Слайд 42Слайд 42. Слайд 42. Свойство по умолчанию

Слайд 43Слайд 43. Слайд 43. Удаление свойств

Слайд Слайд 44. Слайд 44. Методы

Слайд 45Слайд 45. Слайд 45. Ослабление глобальности

PHP

Слайд 3. Комментарии

Слайд 4. Переменные

Слайд 5.Переменные извне Слайд 5.Переменные извне PHP

Слайд 6.Переменные извне Слайд 6.Переменные извне PHP(дополнение)

Слайд 7. Слайд 7. IF/ELSE

Слайд 8. Слайд 8. IF/ELSEIF/ELSE

Слайд 9. Слайд 9. While

Слайд 10. Слайд 10. do-while

Слайд 11.Слайд 11.for

Слайд 12. Массивы

Слайд 14.Слайд 14.foreach

Слайд 15.Некоторые простые функции для работы с массивами

Слайд 16. Слайд 16. switch

Слайд 17. Слайд 17. break

Слайд 18. Слайд 18. continue

Слайд 19. Слайд 19. include

Слайд 20. Слайд 20. include_once

Слайд 21. Слайд 21. require/require_once

Слайд 22. Файловая система

Слайд 23. Файловая система(дополнение)

Слайд 24. Базы данных

Слайд 25. Расширения для работы с базами данных

Слайд 26. Расширения для работы с базами данных(дополнение)

Слайд 27. Расширения для работы с базами данных(дополнение 2)

Слайд 28. Источники информации по РНР

Слайд 13. Массивы(дополнение)

Назад

POST – в закрытом виде
GET – в откр. через строку адреса

ACTION=“/cgi-bin/comment_script> “name = ‘1’

- поле для ввода текста <br><p><br><p>NAME – имя поля<br>ROWS – число строк в поле<br>COLS – количество символов в строке<br>Default text – текст по умолчанию<br>Disabled – поле не активное<br>readonly- только для чтения<br><p><br><p>Пример:<br><p><br><p>Пример<br><p>Передача в PHP $_post [‘<name’]<br> $_get [‘<name’]<br><p><br><p><FORM><br><TEXTAREA NAME=“coments” ROWS=4 COLS=40><br>Default text 1,2,3… - текст по умолчанию<br>

Результат name=value

Пример:

Регистрация

Зарегистрировать

Атрибуты
NAME - имя поля
SIZE - размер поля
MAXLENGTH - максимальное количество слов
VALUE - значение по умолчанию
CHECKED - флажок/переключатель
TYPE - тип поля

TEXT – ввод строки
PASSWORD – ввод пароля
CHECKBOX – простой флажок
RADIO – сложный флажок
RESET – кнопка «отменить»
SUBMIT – кнопка «переслать»
BUTTON - любое действие
IMAGE - аналог SUBMIT (с индивидуальным рисунком)
FILE - прикрепить файл

Введите пароль
name=“secret_word” SIZE=“30”
MAXLENGTH=“30”

флажок

CHECKED>установленный флажок
(по умолчанию флажок установленный)

- флажок - установленный флажок

TEXT – ввод строки

PASSWORD – ввод пароля

CHECKBOX – простой флажок

Результат name=on
name=off

RADIO – сложный флажок

RESET – кнопка «отменить»

SUBMIT – кнопка «переслать»

FILE - прикрепить файл

Обзор

3. Программа или
cценарий обработки
карты ссылок

4. Карты ссылок,
Обрабатываемые
клиентом

Область по умолчанию: default http://www.myserver.com/mypage/index.htm
Прямоугольная область: rect http://www.myserver.com/mypage/rectangle.htm
50, 40, 100, 120
Круглая область: circle http://www.myserver.com/mypage/rectangle.htm
50, 40, 100, 60
Многоугольная область: poly http://www.myserver.com/mypage/rectangle.htm
10, 20 24, 70 84, 45 07, 11 10, 20

1. Вызов CGI-программы:


2. Работа с провайдером:

SHAPE – форма области (rect, poly, circle, default)
COORDS – список координат
HREF – URL, на который ссылается область
NOHREF – область – мертвая зона

Пример

1

2

3

Назад

язык HTML, приведенный в соответствие с XML

язык записи математических формул

язык записи химических формул

язык записи звуков

язык, применяемый в безпроводной технолог

ии

XHTML

MathML

CML

VoxML

WML

−

й

к

−

к

к

−

к

−

к

к

−

л

sp suppl prod

sp suppl prod

< >

: / :

< > < >

sp qty 500 sp qty

< > < >

sp pname sp pname

< > < >

: Санкт-Петербург / :

sp sname sp sname

: Иванов / :

< > < >

- корневой элемент – имя БД

- имя элемента – имя таблицы

- имя столбца – значение строки

Поставка гаек

:

: гайка / :

/ : _

: _

/ : _

SQL

sp: suppl_prod

sp snum 10123

sp : snum

sp loc sp loc

sp suppl prod

< >

< >

<

M

>

encoding= “Windows - 1251”?>

SYSTEM “suppl-prod.dtd”>

< sp : supplprod xmlns : sp = “http://...”>

-содержаться в отдельных файлах

- используеться только внутри объявления DTD

R

;

!_

NOTATION image_gif SYSTEM “viewer.exe”

<

й

к

к

к

к

к

к

л

date Time

символов

список из целых чисел < 5

/>

/>

смысл ссылки

type – тип ссылки

href

show

actuate

label,from,to

role, arcrole, title

→

й

к

−

к

к

−

к

−

к

к

−

к

к

к

−

л

“http://www.w3.org/1999/xlink” >

arcrole

Strong {font-weight:normal}

не будет видна
жирность, но бу-
дет индексация

screen – дисплей
print – принтер
⋮
all – все устройства

.

Ul li.forlist {background : blue} - изменение свойств li для маркерованного списка

На 1 странице не может быть 2 одинаковых ID. Определяются глобальные классы

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

Media queiries– медиа запросы

Progressive enhancement – верстка начинается с самого старого но поддержуемого браузера(например IE8), выполняются самые простые действия, а уже увеличиваете сайт по принципам Responsive Design

масштаб(как правило 1)

Для поддержки HTML5 в IE8 можно добавить такие библиотеки как:

Как сделать сайт адаптивным?

Вне зависимости от ширины – будут отступы в 5%

Сделаем ширину контейнера не статической
Для этого воспользуемся формулой :

(ЦЕЛЬ / КОНТЕКСТ)* 100 = РЕЗУЛЬТАТ

24px / 16px = 1.5 em

На самом деле эта формула уже есть в нашем коде :

шрифт

Высота между строк

Как решить эту проблему?

Методы для создания гибкой сетки?

Задаем внешние параметры, стиль

Задаем ширину

content-box
Основывается на стандартах CSS, при этом свойства width и height задают ширину и высоту контента и не включают в себя значения отступов, полей и границ.

border-box
Свойства width и height включают в себя значения полей и границ, но не отступов (margin). Эта модель используется браузером Internet Exporer в режиме несовместимости.

padding-box
Свойства width и height включают в себя значения полей, но не отступов (margin) и границ (border).

Добавляем специальные параметры очищения в сss :

И обозначаем наш стиль в css классе

Почему media queries?

Если вы использовали правило viewport, можно задавать просто max-width, если же этого правила в разметке нету, нужно указывать так же device.

Cоздадим базовое правило(media query) :

Пример flexible media :

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

Для оптимизации картинок есть очень большое количество сервисов в интернете, по запросу image optimizer Можно так же делать это с помощью photoShop, но выгоднее и удобнее пользоваться веб/десктоп сервисами

Совет : используйте Picturefill

Оптимизация изображений

Картинка для фона

Картинки для Retina

Проблема с заголовком

хорошо

Не очень, заголовки наезжают

Developer tools

Statements(инструкции)

Expressions(выражения)

Арифметические операторы

MDN Operator percidence

Выведем в консоль

Результат очевиден :
i + 1 = 3
b – 1 = 1

Логические операторы

3: Оставляем количество цифр:

4: Перевод в строку с проверкой

Округление к большему( 235)

Округление обычное ( 234)

Константы :

Если хоть в одной части большого выражения получается NAN – все выражение тоже равно NAN (такое свойство называется «токсичность» :

Тут же “string” не воспринимается компилятором

При выводе увидим :

Обьявление

Второй способ – использовать переменную типа str

Экранирование

1 индекс

subString(index) – получим строку начиная с index

subString(index , index2) – получим строку начиная с index до index2

Строку на которую менять

Все остальные же данные будут возвращать true

Пример

Вывод все равно будет - UNDEFINED

Быстро в булевое значение

Быстро в число

Не используется так как сложнее чем 2

Обьявление обьекта :

Теперь получим доступ к свойству обьекта(в консоль выведеться строка ‘str’

Второе, это через квадратные скобки :

Оба способа дают один и тот же результат

Вторая часть, то что выводится если 1 часть false

То есть мы сказали, если свойство fff обьекта obj является пустым, то тогда мы используем
вторую часть

Действительно это свойство появилось у обьекта

Так же мы можем изменять любое значение свойства :

Свойство изменилось

Но если вы их приравняете, вы получите один и тот же обьект (3 ссылки на один и тот же обьект) :

Ослабление глобальности

Поможет избежать проблем с другими фреймворками и прочими библиотеками

Это работает так, как и ожидается, потому что когда интерпретатор PHP встречает закрывающие теги ?>, он просто начинает выводить все что найдет пока не встретит другой открывающий тег за исключением случая с содержащимся внутри кода условным оператором, в котором интерпретатор определяет результат условия перед принятием решения что пропустить.

Это работает так, как и ожидается, потому что когда интерпретатор PHP встречает закрывающие теги ?>, он просто начинает выводить все что найдет пока не встретит другой открывающий тег за исключением случая с содержащимся внутри кода условным оператором, в котором интерпретатор определяет результат условия перед принятием решения что пропустить.

Простая HTML-форма

Доступ к данным из простой HTML POST-формы

Часто необходимо выполнить одно выражение, если определенное условие верно, и другое выражение, если условие не верно. Именно для этого else и используется. else расширяет оператор if, чтобы выполнить выражение, в случае если условие в операторе if равно FALSE.

Параметр key является необязательным. Если он не указан, PHP будет использовать предыдущее наибольшее значение ключа типа integer, увеличенное на 1.

array_keys — Возвращает все или некоторое подмножество ключей массива

array_pop — Извлекает последний элемент массива

array_push — Добавляет один или несколько элементов в конец массива

sort — Сортирует массив

count — Подсчитывает количество элементов массива или что-то в объекте

require_once

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

- имя локального файла
- php(стандартный поток I/O)
- http(подключение http к серверу)
- ftp(подключение ftp к серверу)

Закрыть соединение с сервером БД

ошибка

ошибка

SQL
SELECT
UPDATE
INSERT
DELETE

mycql_connect( )

mysql_select_db( )

mysql_query( )
mysql_affected_rows( )
mysql_num_rows( )
mysql_result( )
mysql_fetch_row( )

mysql_close( )