Роль информатики в современном мире

Введение

WWW (World Wide Web) является глобальной компьютерной сетью, которая на данный момент включает в свой состав миллионы сайтов. На этих сайтах размещена самая разная информация. Пользователи имеют доступ к данной информации посредством применения технологии интернет. Чтобы осуществлять навигацию в сети интернет, применяются специализированные программы, именуемые Web-браузерами, которые призваны значительно облегчить навигационные процессы в безграничных просторах WWW. Весь информационный набор в Web-браузерах представлен в формате Web-страниц, являющихся базовым компонентом сайтов сети.

Статья: Средства разработки Web–страниц

Найди решение своей задачи среди 1 000 000 ответов

Web-страницы способны поддерживать мультимедиа технологии, что позволяет им объединить в своём составе разные информационные типы, такие как, текстовый, графический, звуковой, анимационный и видео тип. Успешность Web-страницы в сети интернет во многом определяется качеством и красотой её оформления. Пользователям нравятся те Web-страницы, которые отлично оформлены, но при этом не перегружены сверх меры графическими и анимационными компонентами, обладают быстрой загрузкой и правильным отображением в Web-браузере.

Конструкторы сайтов

Конструктор сайтов — это программное средство, основанное на использовании шаблонов и призванное максимально упростить процессы создания и поддержки сайта.

Можно выделить несколько основных плюсов конструктора сайтов.

1. Экономия времени и денег на поиск хостинга и регистрацию доменного имени будущего сайта. Конструктор дает возможность предоставить бесплатное доменное имя 3-го уровня и бесплатный хостинг. При использовании конструктора необходимо заранее уточнить объем выделяемой памяти под сайт, чтобы в скором времени не возникло проблем.

2. Конструктор дает возможность использовать уже готовый шаблон, направленной тематики, а также дает большой набор настроек. Это значительно упрощает Вашу работу и сокращает время создания сайта в несколько раз. Имея готовые статьи и темы сайт можно создать за 30 минут, используя интуитивно понятный интерфейс.

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

Кроме достоинств конструкторы имеют и недостатки.

Главным недостатком является низкая гибкость. При создании сайтов при помощи конструкторов необходимо учитывать возможные проблемы с функциональностью. CMS позволяет расширить функционал с помощью возможностей редактирования кода (зная языки программирования можно самому внести изменения или же воспользоваться услугами программиста). Конструктор категорически запрещает изменить свой код.

Конструктор также жестко определяет структуру и внешний вид сайта. Поэтому в будущем повлиять на дизайн сайта фактически невозможно.

Трудность переноса сайта, а иногда и нереальность переноса, на другую платформу. Сайт имеет структуру, которая характерна для данного хостинга, и перенос на платный хостинг фактически отсутствует.

Заводной апельсин

DHTML (Dynamic Hyper Text Markup Language), динамический язык разметки гипертекста — это просто улучшенный и собранный воедино ряд web-технологий, расширенный набор средств, которые позволяют создавать интерактивные страницы, при этом уменьшая загрузку сервера.

DHTML базируется на объектной модели документа DOM (Document Object Model), технология эта встроена во все виды браузеров и помогает осуществить доступ к любому отдельно взятому элементу web-страницы (который в дальнейшем можно видоизменить). А потому технология DHTML позволяет нам осуществлять программное управление всеми тегами и атрибутами и создавать сложные пользовательские интерфейсы. DHTML позволит программисту спроектировать такие интерактивные элементы, как движущийся фон, расположенный под статичным текстовым содержимым страницы, любые сложные объекты, выпадающие меню, мигающие при наведении курсора кнопки, анимацию, титры и многое другое.

Не толпимся в дверях! Да, осталось еще много всего интересного, однако наша экскурсия продолжается, а потому попрошу вас проследовать в следующий выставочный зал.

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

В этом зале мы задержимся подольше. Экспонаты подобраны таким образом, что каждый из них представляет интерес. Проходим к первому стенду.

Все описываемые языки программирования относятся к числу объектно-ориентированных.

Из них Perl, РНР, Python, JAVA — языки, исполняющиеся на сервере (серверные языки). JavaScript — язык, исполняющийся на браузере (клиентский). Компьютер, открывающий доступ к собственным ресурсам, носит название сервера, а получающий такой доступ — клиент.

Конструктор сайтов

Создание сайтов «с нуля» – процесс достаточно трудоемкий, к счастью, существуют готовые инструменты, выполняющие большинство рутинных операций по разработке сайтов в автоматическом режиме. К таким инструментам относятся конструкторы сайтов.

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

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

Публикация

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

Язык разметки гипертекста HTML

В четвертом уроке мы узнали, что любая информация, получаемая из сети Интернет представляет собой последовательность байт, разбитую на фрагменты, называемые пакетами. Так как же сервер понимает, какие именно пакеты нужно слать и в какой момент, и откуда наш браузер знает, как эти пакеты превратить в красивую и динамичную веб-страницу?

Любая страница сайта имеет свой URL-адрес (тот самый адрес, отображаемый в адресной строке браузера и включающий в себя протокол, домен и адрес ресурса). Когда мы вводим этот адрес, браузер отправляет по этому адресу специальный запрос (GET-запрос), в ответ на который сервер возвращает все содержимое веб-страницы в виде одной строки текста. Эта строка разбивается на пакеты, доставляемые к нам разными маршрутами. На нашем компьютере или смартфоне пакеты снова собираются в строку и передаются в браузер, как ответ на его запрос.

Содержимым веб-страницы может быть простой текст, и веб-браузер корректно отобразит его, как отображает содержимое текстового файла программа «Блокнот» или текстовый процессор MS Word. Однако этот текст будет очень невыразительным. Он будет написан одни шрифтом, одним цветом, без отступов, абзацев, выравнивания и переносов слов. В нем не будет никаких таблиц, графиков, иллюстраций и ссылок, не говоря уже о видео и интерактивных элементах интерфейса. Совсем не похоже на содержимое современных сайтов, не правда ли?

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

Язык разметки гипертекста (Hyper Text Markup Language, HTML) – стандартизированный набор правил отображения веб-страниц в Интернет-браузерах.

Имена тегов, описываемых этим языком, помещаются в угловые скобки:

<b>

 Начало области действия тега отмечается открывающим тегом, конец – закрывающим (добавляется косая черта перед именем):

обычный текст<b>жирный текст</b>обычный текст

Не все теги обязаны иметь закрывающую «пару», но большинство имеют.

Теги могут быть вложенными друг в друга:

обычный<p>параграф<b>полужирный текст внутри параграфа</b>параграф</p>

Современная версия языка описывает более сотни тегов, полный перечень которых вы легко найдете в многочисленных справочниках в сети Интернет.

Приведем несколько распространенных тегов:

CMS (Content Management System)

CMS (Content Management System) — это программное обеспечение, которое позволяет разрабатывать и поддерживать динамические информационные web-сайты. Разные cms позволяют проектировать сайты различной сложности.

Существует два основных вида cms:

1. Сms работающие и располагающиеся в Интернете;

2. Сms установленные на компьютере и соединенные с сайтом автоматически или через интерфейс обновления файлов.

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

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

Создание сайтов на основе Joomla! CMS не привязывает заказчика к конкретной студии дизайна. В любой момент можно передать сопровождение сайтов другому исполнителю. Широкое распространение Joomla! положительно сказывается на количестве опытных специалистов в совершенстве владеющих секретами данной CMS. Популярность Joomla! CMS заставила многих хостинг-провайдеров предоставлять возможность использования данной системы по умолчанию.

Тонкий инструмент

Языки разметки используют для того, чтобы задать структуру документа. HTML, к примеру, используется только для определения структуры, тогда как XML может задать помимо структуры еще и содержимое web-страницы. XML (eXtensible Markup Language, расширяемый язык разметки), как многим может показаться, не относится к прямым потомкам языка HTML. Да, XML во многом похож на HTML и использует тот же синтаксис, однако уместнее будет сказать, что XHML был создан на основе HTML для того, чтобы переход к стандарту XML получился более плавным. Стандарт XML не допускает «вольностей», свойственных HTML, наподобие непарных тегов и нечувствительности к регистру.

Главное преимущество XML заключается в том, что язык этот можно дописывать и расширять, добавляя новые тэги, создавая свои пользовательские XML-словари. По мнению аналитиков, XML постепенно должен стать основным стандартом во всемирной сети, включив в себя большинство других использующихся ныне форматов.

Дальше речь пойдет о дополнительных средствах разметки web-документов. Мы рассмотрим CSS: хотя многие могут сказать, что по сути это только расширение к HTML/XML, но ознакомиться с этой технологией нужно непременно.

Средства разработки Web–страниц

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

Существуют различные инструментальные наборы, позволяющие создавать веб-страницы. Например, это могут быть программы MS FrontPage или Macromedia DreamWeaver, Allaire HomeSite или Front Page. В самом простом варианте можно использовать текстовый редактор, например, Блокнот (Notepad).

Текстовые редакторы позволяют формировать небольшие, упрощённые страницы, они имеют следующие недостатки:

  1. Нет поддержки проектов.
  2. Нет так называемой «подсветки» текста.
  3. Использовать их для создания страниц сайтом способен лишь профессиональный программист, который знает язык HTML.

Web является гипертекстовой системой и может рассматриваться как:

  1. Набор представляемых страниц, которые связаны при помощи гипертекстовых переходов.
  2. Совокупность простых информационных объектов, которые составляют представляемые страницы. Это может быть текст, графика, мобильные коды и тому подобное.

Во втором варианте набор гипертекстовых переходов страницы является информационным фрагментом подобно встроенной в текст картинке. В этом варианте гипертекстовая сеть определена на совокупности элементарных информационных объектов самими страницами, выступающими как гипертекстовые связи. Такой подход считается более продуктивным с позиций формирования отображаемых страниц непосредственно из уже существующих элементов.

Когда осуществляется генерация страниц в Web, то появляется дилемма, которая связана с архитектурой клиент-сервер. Страница может быть сгенерирована как с клиентской стороны, так и со стороны сервера.

Фирма Netscape ещё в 1995-ом году реализовала механизм, позволяющий управлять страницами на стороне клиента. Этим механизмом был язык программирования JavaScript. То есть, JavaScript является языком управления сценариями просмотров гипертекстовых страниц на клиентской стороне. Но если говорить более точно, то JavaScript считается также средством подстановок на серверной стороне Netscape. Но самую большую известность JavaScript приобрёл именно за счёт возможности программирования на клиентской стороне.

К числу основных достоинств JavaScript относятся следующие возможности:

  1. Возможность отображения изменяющихся информационных данных, например, текущего времени или даты.
  2. Возможность программирования переменного содержания, которое может зависеть от даты, пользовательского браузера или иных условий.
  3. Возможность изменения внешнего вида компонентов страницы, в случае, когда пользователь сделал щелчок указателем мыши или провёл им над компонентом.

Кроме этого, высокоуровневый язык JavaScript имеет ещё целый ряд достоинств. У него нет возможности работы с машинными кодами, но при этом пользователь имеет доступ ко всему набору возможностей браузеров, Web-страниц, а часто и системы, где установлен браузер. В отличие от других языков, программы, написанные на JavaScript, не нуждаются в компиляции, а используемому браузеру не нужно выполнять загрузку виртуальной машины для исполнения программного кода.

JavaScript, аналогично языку С++, использует объектно-ориентированную архитектуру. Среди других возможностей языка следует отметить наличие конструкторов и наследования на основе прототипов. Эти возможности способны добавить в схему разработки новые уровни абстракции, что может способствовать многократному применению программных кодов.

Одной из основных причин, которая определила принятие проектировщиками Web-страниц языка программирования JavaScript, стала возможность исполнения на клиентской стороне значительного функционального набора, который раньше мог быть выполнен только на серверной стороне. Типичным примером может служить проверка форм. Буквально несколько лет назад, чтобы проверить пользовательский ввод в формах HTML, нужно было отправить данные на сервер, где и осуществлялась проверка занесённой информации согласно сценарию CGI.

В случае отсутствия ошибок, сценарий CGI мог продолжить работу. Но если обнаруживались ошибки, то сценарий выполнял возврат пользователю сообщения, где описывалась проблема.

Бездонная библиотека

С 26 февраля 2008 года MySQL — собственность компании Sun Microsystems. MySQL относится к реляционным СУБД, характеризуется простотой структуры данных и удобным для пользователя табличным представлением. Реляционная модель в MySQL ориентирована на организацию данных в виде таблиц. Каждая таблица представляет собой двумерный массив и обладает следующими свойствами:

  • один элемент таблицы — один элемент данных;

  • все элементы в столбце имеют одинаковый тип данных;

  • каждому столбцу дано уникальное имя;

  • строки и столбцы следуют в произвольном порядке.

Популярность MySQL объясняется просто: эта СУБД ориентирована на большое количество платформ, а также обладает возможностью загрузки оптимизированных под конкретную операционную систему модулей и поддержкой транзакций на уровне отдельных записей. API (интерфейс программирования приложений) MySQL подходит для всех языков, описанных нами выше. То есть существуют библиотеки MySQL для языков Perl, РНР, Python, JAVA.

Средства разработки web-приложений

Перед нами открылись двери последнего выставочного зала. Глаза разбегаются — столько здесь представлено экспонатов. К сожалению, время, отведенное на экскурсию, не бесконечно, потому пройдемте сразу к стенду, демонстрирующему средства разработки.

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

Все языки программирования, используемые при разработке web-сайтов, можно разделить на две большие группы.

К первой относятся те из них, код которых выполняется на компьютере посетителя сайта — в его браузере. Это известные JavaScript, VBScript, Java — апплеты. Программы, написанные на этих языках, встраиваются в код web-страниц (или выносятся в отдельный файл с вызовом из web-страницы).

Во вторую группу попадают те языки, программы на которых выполняются на том компьютере, где расположен web — сервер. Примером является язык PHP, который отличается от других языков своей простотой. Создавая программы на этом языке, нет необходимости учитывать все те мелочи, с которыми сталкиваются программисты при работе с С++ или Perl: не нужно заботиться о правах доступа к файлам сценария или прописывать точные пути к различным модулям и т.д. Для тестирования PHP-программ на локальном компьютере не обязательно устанавливать на нем ту же операционную систему, что и у провайдера хостинг сайта, где они будут применяться, достаточно лишь загрузить соответствующий web-сервер и подключить к нему модуль PHP и целиком сосредоточиться на решаемой задаче.

Программы, написанные на PHP, выполняются на стороне сервера, т.е. начинают работать до загрузки страницы после подачи запроса клиента (например, ввода адреса). Они обрабатываются программой — сервером и в качестве ответа на запрос выдают динамически (т.е. в зависимости от запроса, интерактивно) генерируемые страницы. Эти страницы могут содержать как стандартные HTML-тэги, так и «скрипты» (маленькие программы WEB-приложения, выполняемые на стороне клиента), написанные на JavaScript или VBScript, которые начнут выполняться после полной загрузки браузером сгенерированной на сервере страницы.

JavaScript и VBScript предназначены, в основном, для придания динамичности (подвижности) страницам — выпадающие меню, мерцающие кнопки, эффектные переходы и т.п. Функции JavaScript, позволяют работать только с ресурсами клиентской машины и только с локальной файловой системой.

Скорость выполнения скрипта или программы. Среди локальных языков наивысшим быстродействием обладает JavaScript, среди серверных рекордсменом по обработке небольших объемов данных и текста является Perl. PHP на втором месте, но при этом имеет широчайшие возможности доступа практически к любым серверам баз данных.

Скрипты на JavaScript и VBScript встраиваются непосредственно в web-страницу и остаются видны в коде страницы во время её просмотра. То есть исходный текст любого скрипта, написанного на встроенном языке, можно просмотреть, открыв HTML-код страницы. Естественно, ни о какой секретности, безопасности или соблюдении авторских прав в данном случае речь не идет — кто захочет, тот и просмотрит, скопирует и переделает на свой лад. Программы на Perl пишутся в виде отдельных файлов и подключаются к странице с помощью директив SSI, тэгов IFRAME или JMG. При этом в коде страницы мы получаем результат выполнения скрипта, а не его исходный код. Режим секретности — максимальный. Программы на PHP, так же как и на JavaScript, встраиваются в тело страницы и возвращают пользователю только результат выполнения.

Web-активы

ASP (Active Server Pages, активные страницы сервера) — это мощная технология от компании Microsoft, позволяющая легко разрабатывать интернет-приложения и служащая для создания динамических web-страниц. ASP нельзя назвать языком программирования, так как это только технология предварительной обработки, позволяющая подключать программные модули во время процесса формирования страницы. Ее можно сравнить с библиотекой для сети: этакий «Большой энциклопедический словарь» с возможностью поиска по архивам. ASP имеет преимущество в скорости по сравнению с другими технологиями, основанными на скриптах.

Удобство ASP заключается в том, что она работает на специальном сервере PWS (Personal Web Server), который входит в состав операционной системы Windows.

Системы управления базами данных

За этим определением скрывается специализированный комплекс программ, служащий для организации и ведения баз данных.

Перед нами следующий зал, где в красивых витринах выставлены примеры различных СУБД, однако наше внимание привлечет только один экспонат — MySQL

Кто такой веб-дизайнер

Хорошо подобранное оформление сайта может кардинально поменять в лучшую сторону его восприятие пользователями. В настоящее время каждый из нас сотни и тысячи раз ежедневно использует различные графические интерфейсы. Популярные сайты, поисковые страницы, социальные сети, мессенджеры и даже панель набора номера в смартфоне – все это имеет свой дизайн.

От простоты, понятности и удобства дизайна интерфейса зависят, в том числе, и принимаемые нами решения, причем не обязательно это дизайн в цифровой сфере. Простой пример: вы в незнакомом городе хотите доехать на автобусе до места, название которого вам известно. Подходя к остановке, вы видите автобус, который вот-вот уедет. Поскольку его номер вам ни о чем не говорит, то, успеете ли вы в него сесть, и отвезет ли он вас куда надо, зависит от грамотного дизайна списка остановок, размещенного на табличке с номером.

Веб-дизайнер – это специалист по разработке внешнего вида сайтов.

Работа веб-дизайнером сейчас считается одним из самых престижных пунктов в карьере, даже начинающие веб-дизайнеры могут легко находить заказы, благодаря специфике работы – она может выполняться удаленно, в удобном формате времени, достаточно разместить свое портфолио на специализированных Интернет-площадках. Лучшие веб-дизайнеры, владеющие иностранными языками, могут работать над заказами престижных международных компаний.

Практикум: создание и размещение сайта на бесплатном хостинге

В качестве практического задания мы разработаем простой сайт, посвященный первому разделу этого урока «Этапы создания сайтов» и разместим его на бесплатном хостинге.

Хостинг – услуга по размещению веб-сайта пользователя на сервере организатора этой услуги.

Для проектирования сайта воспользуемся бесплатным онлайн конструктором WIX.

Шаг 1. Зайдите на сайт wix.com и нажмите кнопку «Войти». В появившейся форме введите свои регистрационные данные и нажмите кнопку «Создать».

Рисунок 2 – Создание аккаунта в конструкторе сайтов WIX

Шаг 2. Сервис wix предлагает два способа создания нового сайта: самостоятельно, или используя искусственный интеллект (Wix ADI). Выберите вариант ADI.

Рисунок 3 – Выбор механизма генерации сайта

Шаг 3. Ответьте на вопросы искусственного интеллекта (они могут меняться со временем). Некоторые вопросы можно пропускать.

Рисунок 4 – Ответы на вопросы искусственного интеллекта ADI 

Здесь приведены вопросы, заданные на момент написания урока, и ответы на них:

Шаг 4. Выберите понравившийся дизайн.

Рисунок 5 – Выбор дизайна главной страницы 

Шаг 5. На следующем этапе добавьте страницы «О нас», «Учебная программа», «Отзывы» и нажмите кнопку «в редактор».

Шаг 6. В редакторе страниц нажмите на кнопку «редактировать», а затем на центральный элемент с приветствием и замените текст на «Здравствуйте!».

Рисунок 6 – Редактирование страниц 

Шаг 7. Нажмите кнопку «Опубликовать». Конструктор WIX содержит свой сервер хостинга, и вам будет предложено размещение сайта на бесплатном домене 3 уровня (выделение домена второго уровня – платная услуга).

Шаг 8. Нажмите кнопку «Опубликовать и продолжить». Ваш сайт будет размещен в сети Интернет, по адресу, который был вам выдан на предыдущем шаге.

Шаг 9. Для тестирования сайта наберите его адрес в строке браузера. Проверьте работоспособность страниц, информацию, размещенную на сайте.

Рисунок 7 – Тестирование сайта 

Шаг 10. Проверьте работу чата. Введите любое сообщение.

Рисунок 8 – Тестирование чата 

Поздравляем! Вы только что создали свой собственный сайт и опубликовали его в сети Интернет.

Понравилась статья? Поделиться с друзьями: