Тема урока: HTML и CSS редакторы

27.04.2020

Здравствуйте, ув. обучающиеся!

МДК: Технологии публикации цифровой мультимедийной информации

Тема урока: Программы для создания сайтов

Задание к лекции:

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

Выполненную работу оформить письменно в рабочих тетрадях (либо в электронном виде) и отправить отдельным файлом (электронный документ) в личное сообщение через социальную сеть VK или на электронную почту преподавателя (ol.sklyarova2015@gmail.com).

Если такой возможности нет, выполненное задание предоставить в распечатанном (рукописном) виде после возобновления занятий.

 

1. КРАТКИЕ СВЕДЕНИЯ ИЗ ТЕОРИИ:

Технологии для создания веб-ресурсов можно условно разделить на подвиды:

• Разметка веб-документа

• Языки программирования и базы данных

• Графика и файловая система

• Программы и инструменты

• CMS

Разметка веб-документа

HTML (HyperText Markup Language) — Это стандартный язык разметки практически любого веб-ресурса. Он является заключающим элементом, который воспроизводит браузер пользователя. CSS (Cascading Style Sheets) — Стили CSS — файл (или несколько файлов), в содержании которого находятся стили примененные к различным HTML тегам. Стили CSS по своей сути являются технологией, которая позволяет изменять цвета, размеры и расположение блоков, текста и любых других элементов HTML-разметки. Можно сказать кратко: CSS — это любые «красивости» на веб-сайте.

Языки программирования и БД

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

Php. Язык php можно кратко назвать инструментом для разработки персональных web сайтов. Данный язык является одним из самых популярных в создании сайтов и веб-приложений и поддерживается практически всеми хостинг-провайдерами. Php выполняется на стороне сервера.

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

База данных MySQL. Как правило, в ней хранится вся текстовая информация, которая выводится на вашем сайте: будь то статья, заголовок или же пункт меню.

Графика и файловая система

Технология файловой системы представляет собой набор папок-каталогов, исполнительных файлов (html, css, php, javascript документы) и графики.

Любой современный браузер поддерживает множество форматов графики. Самые популярные: jpg, png, gif, flash, а также появилась возможность вывода векторной графики svg, canvas.

Программы и инструменты — технологии разработки сайта

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

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

• Dreamweaver — удобная программа, позволяющая быстро создавать сайты, визуальный HTML-редактор.

• Photoshop — позволяет редактировать картинки и сохранять их в формате для web.

• Notepad++ — технологичный редактор с подсветкой кода.

• Filezilla — FTP-клиент, который позволяет быстро и без проблем загружать/выгружать документы на хостинге.

CMS (технология — система управления сайтом)

CMS – это система управления сайтом, благодаря которой вы можете запустить веб-проект за считанные минуты. В наше время технология CMS содержит в себе большинство необходимых связей, модулей и плагинов «прямо из коробки». Что бы вы не хотели сделать — интернет магазин, корпоративный сайт или блог — как правило, в какой-либо CMS это уже реализовано. Их есть великое множество, как платных, так и бесплатных, например, BITRITX, MODX, WORDPRESS, JOOMLA, OPENCART и прочие.

 

ЗАДАНИЯ К ЛЕКЦИИ

1. Ознакомиться с теоретическим материалом лекции.

2. На основании текста лекции заполнить схему (рис.1):

3. Выполнить обзор популярных конструкторов веб-сайтов (https://www.plerdy.com/ru/blog/website-builders-review/, https://www.internet-technologies.ru/review-of-website-builder.html).

4. Ответить на контрольные вопросы.

 

		Рис.1

КОНТРОЛЬНЫЕ ВОПРОСЫ

1. Какие средства необходимы для создания сайта?

2. Назовите известные Вам системы управления сайтом? Какие преимущества этих систем?

3. Кому подойдут конструкторы сайтов?

4. Как вы думаете, почему веб-разработчики не рекомендуют использовать конструкторы сайтов?

27.04.2020

Здравствуйте, ув. обучающиеся!

МДК: Технологии публикации цифровой мультимедийной информации

Тема урока: HTML и CSS редакторы

Задание к лекции:

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

Выполненную работу оформить письменно в рабочих тетрадях (либо в электронном виде) и отправить отдельным файлом (электронный документ) в личное сообщение через социальную сеть VK или на электронную почту преподавателя (ol.sklyarova2015@gmail.com).

Если такой возможности нет, выполненное задание предоставить в распечатанном (рукописном) виде после возобновления занятий.

 

1. КРАТКИЕ СВЕДЕНИЯ ИЗ ТЕОРИИ:

HTML-редакторы

 

Самый популярный язык для создания сайтов - HTML. Для создания сайта на HTML существует множество различных программ. Одни из них являются редакторами html, другие – редакторами серверных или клиентских скриптов, а третьи – редакторами таблиц css. Все они зачастую визуализируют процесс редактирования, и Вы можете видеть как будет выглядеть тот или иной элемент на Вашем сайте. Каждый веб-сайт состоит из веб-страниц, каждая из которых, в свою очередь, состоит из кода на языке html, который отвечает за оформление страницы, и собственно содержимого. Поэтому редакторы html – программы, создание сайта без которых невозможно. Какие они бывают? Что можно сделать с их помощью? Давайте попробуем разобраться. HTML-редакторы можно разделить на две условные основные группы: текстовые и визуальные. В текстовых html-редакторах можно писать и править html-код вручную. А при помощи визуальных редакторов Вы можете, не зная язык html, создавать веб-страницы, используя визуализированные компоненты. Блокнот Итак, самый верный и надежный редактор – обычный встроенный в ОС Windows текстовый редактор «Блокнот» (Notepad). Для того чтобы написать в блокноте html-код веб-страницы не нужно никаких дополнительных инструментов – достаточно запустить блокнот, написать в нем html-код и сохранить документ с расширением.html. Однако чтобы писать и редактировать html-код в блокноте, необходимо очень хорошо знать язык html и внимательно следить за написанием кода, так как написание больших объемов кода вручную повышает вероятность возникновения ошибок. Notepad ++ Notepad ++ - расширенная версия обычного блокнота, которая поставляется отдельно и обычно бесплатна. В Notepad ++ html-тэги подсвечиваются цветным шрифтом, и разработчик может визуально отличить код от основного текста страницы. Поэтому вероятные ошибки и неточности в коде легче выявить, однако,так же как и при работе в обычном блокноте, в Notepad ++ требуется хорошее знание языка html. Microsoft FrontPage Microsoft FrontPage – html-редактор из пакета MS Office. Microsoft FrontPage является визуальным редактором (WYSIWYG – What You See Is What You Get – что видишь, то и получишь), но в Microsoft FrontPage код можно также редактировать вручную. Интерфейс Microsoft FrontPage похож на интерфейс Microsoft Word, привычный для большинства пользователей, поэтому очень удобен для новичков в веб-дизайне. В Microsoft FrontPage для работы доступны три режима: Normal, HTML и Preview. В режиме «Normal» пользователь может редактировать текст и картинки как в обычном текстовом файле. Средства редактирования в Microsoft FrontPage позволяют легко форматировать текст, добавлять таблицы (даже таблицы MS Excel!) и рисунки, создавать маркированные и нумерованные списки пользователям без знаний языка html. В режиме «HTML» пользователь может просматривать и редактировать код создаваемой веб-страницы, а в режиме «Preview» может увидеть как будет выглядеть создаваемая веб-страница в браузере. Macromedia HomeSite Macromedia HomeSite является одним из наиболее популярных html-редакторов. Этот редактор помогает ускорить процесс создания html-кода страниц и сайта в целом. Рабочее пространство делится на три части. Первая – окно с html-кодом, вторая – перечень документов, находящихся на диске пользователя, третья – разнообразные панели инструментов, которые могут настраиваться пользователем на свой вкус. В процесс написания html-кода, HomeSite дает пользователю удобные всплывающие подсказки с перечнем возможных атрибутов для текущего тэга, подсвечивает тэги по определенной цветовой схеме, которую можно изменять, располагает на панели инструментов наиболее часто используемые тэги для ускорения доступа к ним. Adobe Dreamweaver В популярном визуальном редакторе Adobe Dreamweaver можно редактировать html-коды, причем делать это легко и непринужденно. Если Вы достаточно хорошо знаете язык разметки html, то можете воспользоваться режимом «code», в котором на экране отображается только окно для редактирования кода. Если же Вы не знаете html или знаете его не очень хорошо, можете воспользоваться режимом «design», в котором Вы «один к одному» увидите, как будет выглядеть Ваш сайт в результате. Присутствует режим «split», который отображает два окна, визуального и обычного редактирования html-кодов. Кроме того, если Вы забудете какой-нибудь html-тэг, Adobe Dreamweaver даст Вам всплывающую подсказку со всеми доступными в данном месте документа вариантами тэгов и их атрибутов. Преимущества и недостатки К преимуществам текстовых редакторов, таких как Блокнот и Notepad ++ относится их простота и доступность. Кроме того, текстовые html-редакторы часто бесплатны, не создают «лишнего» кода, что позволяет уменьшить размер веб-страницы. Однако существенным недостатком таких редакторов является невозможность просмотреть «на лету» вид создаваемой страницы и необходимость хорошего знания языка html. К преимуществам визуальных редакторов относят возможность сразу видеть, как будет выглядеть веб-страница, наличие подсказок и подсветки тэгов, возможность легкой и удобной вставки различных объектов в страницу без знаний языка html. Недостатком же визуальных редакторов является их стоимость – хорошие визуальные html-редакторы платны. К тому же многие визуальные редакторы создают «лишний» код, который «утяжеляет» страницу.

CSS редакторы

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

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

· Sublime Text 3;

· Atom;

· VS Code;

· WebStorm.

Возможности программ-редакторов:

Большинство современных редакторов имеют ряд особенностей, необходимых для разработчика:

• подсветка синтаксиса;

• автоматические отступы;

• автодополнение;

• разделение рабочей области;

• мини-карта;

• внешний вид;

• проекты;

• интеграция приложений;

- система контроля версий;

- emmet;

- консоль;

- дебаггер;

- единый стиль написания кода в команде;

- библиотека плагинов;

• горячие клавиши.

Sublime Text 3

Для Sublime Text 3 написано множество пакетов, которые делают работу в редакторе более комфортной.

Для того чтобы добавить пакет, нужно открыть интерфейс для ввода команд. Сделать это можно через пункт меню Tools → Command Palette или вводом горячих клавиш command (control) + shift + p. После этого в интерфейсе для ввода команд нужно выбрать пункт Package Control: Install Package. После этого программа покажет список пакетов. Здесь можно выбрать и установить нужный пакет.

Atom

Продукт, произведённый командой GitHub Inc. Приятный на вид, кроссплатформенный бесплатный редактор. Имеет встроенную интеграцию с Git и GitHub.

Visual Studio Code

Бесплатный кроссплатформенный редактор компании Microsoft. Является одним из самых популярных редакторов на данный момент.

WebStorm

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

Продукт платный и доступен к использованию по подписке. Каждый из продуктов отвечает за определённую сферу. WebStorm, к примеру, больше подходит для фронтенд-разработки, а PHPStorm — для написания серверного кода на языке PHP.

Итоги:

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

Если для работы важна скорость редактора, то тут лучшим выбором будет Sublime Text. Он легковесный и мало тратит ресурсов компьютера.

Если приоритетно удобство или вы совсем новичок в разработке, то тут хорошо подойдёт Atom. У него приятный интерфейс и хорошо проработана интеграция с сервисами Git и GitHub.

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

Некоторой золотой серединой выступает VS Code. C одной стороны, он из коробки обладает большим количеством возможностей, с другой — интуитивно понятный и легко настраиваемый. При этом программа достаточно быстро работает.

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

ЗАДАНИЯ К ЛЕКЦИИ

1. Ознакомиться с теоретическим материалом лекции.

2. Создать презентацию по обзору программных средств для создания сайтов, в т. ч. и HTML и CSS редакторы.

3. Ответить на контрольные вопросы.

КОНТРОЛЬНЫЕ ВОПРОСЫ

1. Каким HTML редактором на практике пользуетесь Вы? Чем он Вам нравится?

2. Назовите преимущества и недостатки визуальных редакторов.

3. Какие возможности у современных редакторов кода?