* Что такое HTML и чем он не является.
* Гиперссылки.
* Что такое DOM, структура документа?
* HTML-теги. Основные теги.
* Для чего нужны мета-теги?
* Что такое валидный код и зачем делать код валидным?
* Другие штуки.
Олег Мохов "О чём ещё говорят верстальщики"
Я.Субботник в Челябинске в рамках конференции UWDC
О докладе:
О чем говорят верстальщики? О новых CSS-свойствах, о красивых деревьях, о BEM и Bootstrap. А о чём ещё говорят верстальщики?
Алексей Андросов "Тотальная заморозка = быстрая загрузка"Yandex
Все знакомы с различными способами ускорения загрузки страницы. Эта тема уже давно исследована. Но перед каждым проектом встает вопрос: а как жить в условиях постоянных релизов, когда пользователям приходится часто скачивать обновленный код? Как уменьшить объем загрузки или оптимизировать процесс, чтобы частые релизы не сильно увеличивали время загрузки? В докладе пойдет речь о том, как можно грузить файлы по хэшу от контента, а не по урлу с версией, какие инструменты для этого есть и как измерять эффективность этих способов.
* Что такое HTML и чем он не является.
* Гиперссылки.
* Что такое DOM, структура документа?
* HTML-теги. Основные теги.
* Для чего нужны мета-теги?
* Что такое валидный код и зачем делать код валидным?
* Другие штуки.
Олег Мохов "О чём ещё говорят верстальщики"
Я.Субботник в Челябинске в рамках конференции UWDC
О докладе:
О чем говорят верстальщики? О новых CSS-свойствах, о красивых деревьях, о BEM и Bootstrap. А о чём ещё говорят верстальщики?
Алексей Андросов "Тотальная заморозка = быстрая загрузка"Yandex
Все знакомы с различными способами ускорения загрузки страницы. Эта тема уже давно исследована. Но перед каждым проектом встает вопрос: а как жить в условиях постоянных релизов, когда пользователям приходится часто скачивать обновленный код? Как уменьшить объем загрузки или оптимизировать процесс, чтобы частые релизы не сильно увеличивали время загрузки? В докладе пойдет речь о том, как можно грузить файлы по хэшу от контента, а не по урлу с версией, какие инструменты для этого есть и как измерять эффективность этих способов.
Что такое семантическая вёрстка в 2013 году. Какие «уровни» семантики возможны. Какими средствами мы располагаем, чтобы сделать вёрстку семантичной: теги HTML5, атрибуты, микроформаты и другие возможности. Семантическая вёрстка vs. семантический веб. Какой будет семантическая вёрстка в будущем? Позволит ли она сделать веб лучше?
Робота з CSS. Методології, інструменти, оптимізаціяStfalcon Meetups
Антон Тимчук
Front-end developer компанії stfalcon.com
— Методології CSS, особливості переваг та недоліки
— Оптимізація завантаження CSS
— Огляд інструментів для оптимізації роботи з CSS
Лекция #2. Принцип организации World Wide WebЯковенко Кирилл
Web-программирование
Лекция #2. Организация взаимодействия в World Wide Web
Цикл лекций читается в Омском государственном университете им. Ф.М.Достоевского на факультете компьютерных наук.
Лектор: Яковенко Кирилл Сергеевич.
Web-программирование
Лекция #1. Основы Web-технологий.
Цикл лекций читается в Омском государственном университете им. Ф.М.Достоевского на факультете компьютерных наук.
Лектор: Яковенко Кирилл Сергеевич.
Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"Yandex
15 октября 2011, Я.Субботник в Алматы
Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"
О докладе:
Стремительное развитие браузеров и технологий требует от верстальщиков высокой скорости изучения и внедрения новых возможностей в существующую вёрстку. В докладе будет показано, как без изменения HTML можно значительно улучшить «старую вёрстку», а также куда смотрят верстальщики, кроме чейнджлогов браузеров, и чем ещё, кроме вёрстки, они занимаются.
Как Linux работает с памятью — Вячеслав БирюковYandex
Поговорим о том, как Linux считает память и какие есть виды памяти. Проведём обзор средств и утилит. Рассмотрим, зачем нужен page cache и как он помогает системе, а также способы ограничения памяти для приложений.
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)Ontico
Массовая имплементация пользовательских свойств CSS в большинстве популярных браузеров открыла простор для творчества и экспериментов над архитектурой CSS-кода, недостижимой ранее.
- Всесильны ли препроцессоры?
- Можно ли дать CSS второй шанс?
- Наследуемость или БЭМ?
- А что с обратной совместимостью? Решение есть!
В рамках доклада будут детально рассмотрены практические примеры применения CSS Custom Properties. Также будут рассмотрены новые спецификации CSS Extensions (Сustom selectors) и CSS @apply Rule в рамках перспективы отказа от препроцессоров.
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...Ontico
Совместно с университетом ИТМО мы запустили курс, посвященный основам HTML и CSS. Уже на момент регистрации на этот курс записалось более 12 тысяч студентов. Перед нами стояла задача разработать систему, которая будет автоматически проверять итоговые проекты на соответствие заранее подготовленному макету. В качестве основной техники для проверки было выбрано регрессионное тестирование.
В каждом проекте мы проверяли разметку, сетку и стилевое оформление не только страницы целиком, но и отдельных блоков. Одной из главных проблем был поиск этих самых блоков, так как о том, какой будет верстка студентов, мы не знали ничего — ни какие теги они использовали, ни какие классы и идентификаторы были задействованы. Имели только общее представление о структуре.
В докладе я расскажу, от чего мы отталкивались при построении этой системы, как мы разбирали и анализировали проекты. Какие инструменты и технологии мы для этого использовали и почему. Какие подводные камни вылезали, и какие возникали проблемы.
Предсказание оттока игроков из World of TanksYandex
Одна из наиболее часто возникающих задач в бизнес-аналитике для компаний — это предсказание оттока клиентов. Ведь если заранее знать, что клиент собирается уйти к конкуренту, его можно попытаться остановить. Задача будет рассмотрена на примере прогнозирования оттока игроков из World of Tanks.
Лекция #3. Введение в языки разметки web-страницЯковенко Кирилл
Web-программирование
Лекция #3. Введение в языки разметки web-страниц
Цикл лекций читается в Омском государственном университете им. Ф.М.Достоевского на факультете компьютерных наук.
Лектор: Яковенко Кирилл Сергеевич.
Ошибки в разработке интернет-магазинов - Евгений КонцевойЛеонид Гроховский
Содержание:
- Ошибки вебмастера
- Компоненты каталога
- Коварный robots.txt
Более подробную информацию Вы можете получить на полном курсе SEO: http://www.topexpert.pro/seo-kurs.html
Что такое семантическая вёрстка в 2013 году. Какие «уровни» семантики возможны. Какими средствами мы располагаем, чтобы сделать вёрстку семантичной: теги HTML5, атрибуты, микроформаты и другие возможности. Семантическая вёрстка vs. семантический веб. Какой будет семантическая вёрстка в будущем? Позволит ли она сделать веб лучше?
Робота з CSS. Методології, інструменти, оптимізаціяStfalcon Meetups
Антон Тимчук
Front-end developer компанії stfalcon.com
— Методології CSS, особливості переваг та недоліки
— Оптимізація завантаження CSS
— Огляд інструментів для оптимізації роботи з CSS
Лекция #2. Принцип организации World Wide WebЯковенко Кирилл
Web-программирование
Лекция #2. Организация взаимодействия в World Wide Web
Цикл лекций читается в Омском государственном университете им. Ф.М.Достоевского на факультете компьютерных наук.
Лектор: Яковенко Кирилл Сергеевич.
Web-программирование
Лекция #1. Основы Web-технологий.
Цикл лекций читается в Омском государственном университете им. Ф.М.Достоевского на факультете компьютерных наук.
Лектор: Яковенко Кирилл Сергеевич.
Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"Yandex
15 октября 2011, Я.Субботник в Алматы
Олег Мохов "Куда движется вёрстка и верстальщики Яндекса"
О докладе:
Стремительное развитие браузеров и технологий требует от верстальщиков высокой скорости изучения и внедрения новых возможностей в существующую вёрстку. В докладе будет показано, как без изменения HTML можно значительно улучшить «старую вёрстку», а также куда смотрят верстальщики, кроме чейнджлогов браузеров, и чем ещё, кроме вёрстки, они занимаются.
Как Linux работает с памятью — Вячеслав БирюковYandex
Поговорим о том, как Linux считает память и какие есть виды памяти. Проведём обзор средств и утилит. Рассмотрим, зачем нужен page cache и как он помогает системе, а также способы ограничения памяти для приложений.
Пользовательские свойства как основа архитектуры CSS / Павел Ловцевич (LOVATA)Ontico
Массовая имплементация пользовательских свойств CSS в большинстве популярных браузеров открыла простор для творчества и экспериментов над архитектурой CSS-кода, недостижимой ранее.
- Всесильны ли препроцессоры?
- Можно ли дать CSS второй шанс?
- Наследуемость или БЭМ?
- А что с обратной совместимостью? Решение есть!
В рамках доклада будут детально рассмотрены практические примеры применения CSS Custom Properties. Также будут рассмотрены новые спецификации CSS Extensions (Сustom selectors) и CSS @apply Rule в рамках перспективы отказа от препроцессоров.
Радости и гадости регрессионного тестирования вёрстки / Алексей Малейков (HTM...Ontico
Совместно с университетом ИТМО мы запустили курс, посвященный основам HTML и CSS. Уже на момент регистрации на этот курс записалось более 12 тысяч студентов. Перед нами стояла задача разработать систему, которая будет автоматически проверять итоговые проекты на соответствие заранее подготовленному макету. В качестве основной техники для проверки было выбрано регрессионное тестирование.
В каждом проекте мы проверяли разметку, сетку и стилевое оформление не только страницы целиком, но и отдельных блоков. Одной из главных проблем был поиск этих самых блоков, так как о том, какой будет верстка студентов, мы не знали ничего — ни какие теги они использовали, ни какие классы и идентификаторы были задействованы. Имели только общее представление о структуре.
В докладе я расскажу, от чего мы отталкивались при построении этой системы, как мы разбирали и анализировали проекты. Какие инструменты и технологии мы для этого использовали и почему. Какие подводные камни вылезали, и какие возникали проблемы.
Предсказание оттока игроков из World of TanksYandex
Одна из наиболее часто возникающих задач в бизнес-аналитике для компаний — это предсказание оттока клиентов. Ведь если заранее знать, что клиент собирается уйти к конкуренту, его можно попытаться остановить. Задача будет рассмотрена на примере прогнозирования оттока игроков из World of Tanks.
Лекция #3. Введение в языки разметки web-страницЯковенко Кирилл
Web-программирование
Лекция #3. Введение в языки разметки web-страниц
Цикл лекций читается в Омском государственном университете им. Ф.М.Достоевского на факультете компьютерных наук.
Лектор: Яковенко Кирилл Сергеевич.
Ошибки в разработке интернет-магазинов - Евгений КонцевойЛеонид Гроховский
Содержание:
- Ошибки вебмастера
- Компоненты каталога
- Коварный robots.txt
Более подробную информацию Вы можете получить на полном курсе SEO: http://www.topexpert.pro/seo-kurs.html
Приёмы верстки страниц с использованием HTML + CSSDenis Latushkin
Инструменты веб-разработки. Стилевые возможности по относительному расположению элементов. Подключение шрифтов. Примеры верстки страниц. Работа с графическими редакторами.
Анна Тарасенко, «долгожитель» ИТ-лофта, генеральный директор 7bits, организатор таких событий, как IT-субботники в Омске, ИТ-конференций HappyDev и HappyDev-lite, стартап-интенсива Magic Kick Startup MKS рассказывает о своем докладе «Стартап = факап?»:
«Чем больше я общаюсь со стартаперами, инвесторами и бизнесменами, читаю книги, статьи и блоги о бизнесе, тем больше я понимаю, что надо просто браться и делать. Не ждать чудес, а идти ножками к клиенту и стараться решить его проблему. Хочу поделиться опытом проведения 2-х Magic Kick startup, одного Startup weekend и участия в 2-х Стартап-сабантуях, демо дне выпуска 10-го акселератора ФРИИ и многим другим.
Перековывалась из программиста в бизнесмены долго и мучительно. Это потребовало в частности излечения от перфекционизма и типичного российского нытья. Могу и люблю делиться опытом про все подряд».
Гудбай, ИТ-лофт! Денис Нелюбин: Новейшая история ИТ-лофта7bits
Попробует вспомнить, откуда возник IT-лофт, почему он так назвался, что тут было хорошего и интересного. Как проводили субботники и хакатоны. Как кодили, слушали лекции, ели пиццу и печеньки, общались и работали.
Новейшая история ИТ-лофта — такой доклад решил подготовить Денис Нелюбин, системный архитертор 7bits, резидент лофта с 2014 года, организатор хакатонов и частый докладчик на ИТ-событиях Омска (и не только).
Гудбай, ИТ-лофт! Лопатюк Саша: Договоримся не плакать7bits
Реветь никто не собирается, а просто Саша Лопатюк, дизайнер Rosberry и соорганизатор Дизайн-среды, расскажет о том, почему договорённости и коммуникация в команде важнее расстояний, технологий и прочих мелочей.
Саше ИТ-лофт очень близок. Он работал здесь в команде А2 Дизайн, а потом участвовал в хакатонах и сам проводил события. Ему есть, что вспомнить и рассказать. Послушаем!
Гудбай, ИТ-лофт! Гончаровский Игорь: IT-Loft без связи 7bits
Человек, рабочее место которого в IT-лофте всегда можно узнать по большому количеству телефонов — Игорь Гончаровский.
Работая в IT-Loft и занимаясь длительное время вопросами связи, Игорь хотел бы поделиться мыслями о развитии технологий и их востребованности сейчас и в недалеком будущем в своем докладе «IT-Loft без связи».
Игорь также является владельцем ООО «Айтек», менеджером проектов Velvetech LLC и организатором конференций по Asterisk в России.
Доклад-ретроспектива — как Сергей с командой провели 15 Людумов, и какое будущее у проекта. Вы узнаете как вспомогательное IT-мероприятие превращается в городскую тусовку и свободный образовательно-практический проект.
Сергей Мячин настраивает бизнес-процессы в Лайв Тайпинг, помогает клиентам решать бизнес-задачи, кроме всего этого уже 5 лет разрабатывает игры и устраивает геймджемы.
Goodbye, IT-loft! Тараканов Алексей: Идеология в IT7bits
Тараканов Алексей — один из организаторов Omsk Linux User Group, Omsk Ubuntu LoCo, омской GPG-сети доверия (web of trust), евангелист Ubuntu, активист свободного программного обепечения, ведущий специалист ООО «ЛинуксМастер», занимается продвижением свободного программного обеспечения, делает нестандартные решения на базе СПО расскажет близкую ему тему: «Идеология в IT». Доклад о том, что такое OmskLUG, и ИТ-лофт как положительно повлиял на него.
Курс Java-2016. Занятие 04 (часть 2). Git и GitHub7bits
This document discusses setting up and using Git and GitHub for version control of a Java project. It explains how to initialize a Git repository, add and commit files, configure user information, check status and history, ignore files, connect to a remote GitHub repository, authenticate with SSH keys, and push code to GitHub. The steps taken are initializing a Git repository, adding files, committing with a message, configuring user details, viewing status and log, ignoring files, connecting to a remote repository, generating and adding SSH keys, and pushing the local code to the remote GitHub repository.
4. Особенности XHTML
• XHTML – страница является
правильным XML-документом
• В XHTML имена тэгов и атрибутов
только в нижнем регистре
• В XHTML все тэги должны быть
закрыты
• Браузеры не обрабатывают
документ, если в нём ошибка
• Нет обратной совместимости с HTML
5. HTML, doctype
HTML4:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.1:
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml
11.dtd">
8. Тэги HTML
До HTML 5:
http://www.w3.org/TR/html4/index/
elements.html
a
abbr
form
H1, H2, H3, H4, H5, H6
p
iframe
img
strong, small, i
ul, li table, thead,
tbody
title
div
15. CSS
CSS - каскадные таблицы стилей.
Используется для задания:
• цветов, шрифтов элементов
• теней, фона
• расположение блоков, отступов,
границ
• анимации
19. Расположение блоков на странице
Строчные элементы – это
элементы документа, которые
являются частью строки.
Примеры: <img>, <span>, <a>,
<q>, <code>
20. Расположение блоков на странице
Свойства строчных элементов:
• Внутри строчных элементов можно
поместить только строчные элементы
• width, height не работают
• несколько строчных элементов идущих
подряд помещаются на одной строке
• можно выравнивать по вертикали,
используя свойство vertical-align
21. Расположение блоков на странице
Пример:
<p>
Выполните
<span>восемь</span>
повторений
</p>
Пример на htmlbook.ru
22. Расположение блоков на странице
Блочные элементы – элементы,
которые отображаются на
странице в виде прямоугольника.
Примеры: <div>, <form>, <p>,
<table>, <h1>...<h6>, <ul>
23. Расположение блоков на странице
Свойства блочных элементов:
• Элемент занимает всю доступную
ширину
• Элемент начинается на новой строке
• Блоки располагаются по вертикали друг
за другом
• Можно выставить width, height
24. Расположение блоков на странице
Пример:
<div>
<p>Первый абзац</p>
Анонимный блок
<p>Второй абзац</p>
</div>
Пример на htmlbook.ru
25. Расположение блоков на странице
Модификаторы отображения:
• display: block;
• display: inline
• display: inline-block
26. Свойство float
Пример на htmlbook.ru
Определяет, по какой стороне будет
выравниваться элемент, при этом
остальные элементы будут обтекать его с
других сторон.
float: left | right | none | inherit
28. Свойство clear
Пример на htmlbook.ru
clear: left | right | none | both | inherit
Устанавливает, с какой стороны элемента
запрещено его обтекание другими
элементами.
30. Свойство position
Пример на htmlbook.ru
position: absolute| fixed | relative | static
Устанавливает способ позиционирования
элемента на странице относительно окна
браузера или других элементов.
32. Меню с помощью <ul>, <li>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
33. Меню с помощью <ul>, <li>
ul {
list-style-type: none;
background-image: url(navi_bg.png);
height: 80px;
width: 663px;
margin: auto;
}
li {
float: left;
}
Ссылка на пример
34. Кроссбраузерная и адаптивная
вёрстка
Проблемы:
• Много браузеров, движков
• Необходимость поддерживать старые
браузеры
• Различные разрешения экранов
устройств
• Необходимость оптимизации скорости
загрузки
35. Полезности для браузера
• Developer Tools
• Color picker плагины
• Генераторы псевдотекста Lorem Ipsum
• PixelPerfect
• Ruler-плагины
• Stylebot
• LiveCSSEditor
36. Что почитать?
• The W3C Markup Validation Service
• Can I use? http://caniuse.com
• Htmlbook.ru htpp://htmlbook.ru
• http://css-tricks.com/video-screencasts/
• http://jsfiddle.net/