Файл: Конспект лекций по дисциплине прикладные компьютерные технологии Направление подготовки 09. 03. 01 Информатика и вычислительная техника.docx

ВУЗ: Не указан

Категория: Не указан

Дисциплина: Не указана

Добавлен: 20.03.2024

Просмотров: 69

Скачиваний: 0

ВНИМАНИЕ! Если данный файл нарушает Ваши авторские права, то обязательно сообщите нам.


Эластичный макет по своему виду может не отличаться от фиксированного или резинового макета. Размер элементов задаѐтся в em, привязанных к размеру шрифта. Значение em можно использовать не для всех элементов, оставляя ширину некоторых фиксированной.

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

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

Front End и Back End

Frontend – интерфейсная часть: отображение текста, кнопок, изображений, анимаций. Языки программирования в браузере: HTML, CSS, JavaScript (TypeScript)

Backend – серверная часть: загрузка информации с сервера сайта, отправка сообщений, поиск информации. Языки программирования на стороне сервера SQL, PHP, Python, Java, ASP.NET, Ruby, JavaScript (Node.js), Go. Бэкэнд состоит из трех частей: сервера; приложения и базы данных.

Бэкэнд отвечает:

  • за хранение и организацию данных;

  • взаимодействует с интерфейсом;

  • отправляет и получает информацию, отображаемую в виде веб-страницы.

Для разработки серверной части сайта программист должен владеть такими backend языками: php, javascript, java, python. SQL – это язык запросов к базе данных, который позволяет разработчикам взаимодействовать с ними. Независимо от того, какую структуру вы используете для создания веб-приложений, вы будете применять SQL, чтобы ваши приложения выглядели функционально.

Языки программирования и другие вспомогательные сервисы

JavaScript - язык программирования, который применяется в основном для разработки клиентской части сайтов (front-end). JavaScript является интерпретатором и выполняется внутри браузера (программы, которая визуализирует веб-страницу). Браузер вначале анализирует текст программы, интерпретирует его, и только затем выполняет нужные действия. Это медленно. Поэтому программы на JavaScript работают медленно и не всегда одинаково для разных браузеров.


Почему тогда интепретатор, а не компилятор? Язык JavaScript был специально разработан как интерпретатор, чтобы была возможность исключить из него все операции работы с файлами (чтение, запись и т.п.). Это необходимо для того, чтобы веб-страница, загруженная из сети Интернет и содержащая программу JavaScript, не могла повредить компьютер у пользователя (например, заразить его вирусом). Если заражение вирусом и происходит, то из-за каких-то других причин, но не по вине JavaScript.

JavaScript предназначен для:

  1. Автоматизации процесса набора текста страниц;

  2. Обработки событий, происходящих на странице (придания странице интерактивности);

  3. Изменения содержимого веб-страниц во время их просмотра, анализ данных веб-страниц;

  4. Формирование запросов к серверу и получение ответов без перегрузки веб-страницы;

  5. Работа с cookies (данные веб-страницы, хранящиеся в браузере на компьютере пользователя).

Ничего из этого нельзя добиться с помощью HTML и CSS, поэтому JavaScript дополняет эти инструменты вебпрограммирования, а не заменяет или дублирует их.

PHP - расшифровывается как язык гипертекстовой обработки. Основными функциями языка PHP являются:

Реализация серверной части сайтов (хранение, анализ и обработка данных) - back-end приложения;

  1. Автоматическая генерация текстов веб-страниц на сервере;

  2. Обработка запросов веб-страниц;

  3. Загрузка и анализ веб-страниц других сайтов;

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

В отличие от JavaScript это практически полноценный язык программирования с возможностью работы с файлами и с операционной системой. В то же время это интерпретатор (как и JavaScript), а не компилятор. Как видно, для автоматического генерирования вебстраниц можно использовать и JavaScript и PHP. Преимуществом PHP является то, что он исполняется на сервере и имеет доступ к файлам, хранящимся на сервере. Кроме того, пользователь после загрузки веб-страницы может посмотреть текст JavaScript в браузере, а текст PHP удаляется сервером из кода страницы после исполнения.

MySQL - свободно распространяемая система управления базами данных. Обычно это сервер, к которому обращаются с запросами (командами) удаленные и локальные клиенты. MySQL позволяет облегчить работу с базами данных для программиста (доступ к базе данных одновременно многих клиентских приложений, удобный поиск в базе данных, составление сводок и т.д.). Однако за удобство

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

Библиотека JQuery создана с единственной целью - облегчить и упростить программирование на языке JavaScript. Она написана на языке JavaScript - это достаточно большой файл с расширением “.js”, который подключается к веб-странице, как кусок скрипта, и который загружается в браузер вместе с веб-страницей и выполняется браузером. При желании можно посмотреть и попытаться понять текст исходного кода библиотеки JQuery. Кроме того, что текст программы на JQuery выглядит короче и проще, чем на JavaScript, JQuery еще и обеспечивает программе совместимость со всеми браузерами. Разные браузеры могут по-разному реагировать на один и тот же текст программы на JavaScript, однако JQuery специально разрабатывался так, чтобы одинаково выполняться во всех браузерах. Он обеспечивает кроссбраузерность. JQuery - одна из наиболее известных, но не единственная из существующих библиотек для JavaScript.

CMS - это аббревиатура от Content Management System, что в дословном переводе означает "система управления контентом сайта" или просто "система управления сайтом".

CMS решает следующие задачи:

  • сокращает время на разработку сайта – многие решения уже готовы, остается только подключить и настроить;

  • позволяет впоследствии владельцу сайта управлять контентом (добавлять, редактировать, удалять) без привлечения стороннего программиста;

  • сайт работает на стабильной системе, которая постоянно обновляется и адаптируется к новым реалиям;

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

Самих CMS огромное количество. На сегодня по данным CMS Magazine их зарегистрировано около 350. Самые популярные: WordPress, Joomla!, Drupal, 1C Битрикс. При выборе CMS следует ориентироваться на задачи.

Виды движков:

В зависимости от лицензии CMS разделяются на свободно распространяемые (бесплатные) и коммерческие (платные). Среди бесплатных очень много действительно хороших и стабильных систем. Причем отдельные модули могут быть платными. Бесплатные движки растут и совершенствуются общими усилиями, их поддерживают и развивают энтузиасты. Преимущество платных CMS – наличие
гарантированной поддержки разработчика этой системы, которому можно предъявить претензии, если что-то пошло не так.

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

Также разделяют движки по степени отчуждаемости:

  • индивидуальные или студийные – это самописные CMS, которые используются конкретной студией или разработчиком и никем больше;

  • коробочные решения, которые используются широким кругом разработчиков;

  • SaaS – онлайн-конструкторы сайтов, о которых мы уже рассказывали.

Объектная модель Dynamic HTML

Динамический HTML (DHTML) – совокупность приемов, позволяющих динамически изменять оформление и содержание веб-страницы в ответ на действия пользователя. DHTML является продуктом взаимодействия трех технологий: языка HTML, каскадных таблиц стилей (CSS) и языка сценариев (JavaScript). Для предоставления сценариям доступа к HTML и CSS содержимое документа представляется в виде дерева объектов в программной модели.

Объект window является вершиной иерархии объектной модели. Все остальные объекты являются дочерними или более отдаленными потомками объекта window. Браузер создает, как правило, единственный объект window, когда открывает документ в окне, однако если документ содержит фреймы (элементы frame и iframe), то дочерние объекты window создаются также для каждого фрейма. Доступ к дочерним окнам возможен через коллекцию frames родительского окна.

Существуют объекты:

  • document – указывает на некоторые свойства, коллекции и методы документа, загруженного в окно браузера.

  • navigator содержит информацию о браузере.

  • location содержит полную информацию об адресе страницы.

  • history содержит информацию об адресах, посещенных пользователем с момента открытия браузера.

  • screen содержит информацию о мониторе:

  • event – это сообщение, отправляемое в ответ на некоторое действие, например, завершение загрузки документа, перемещение или щелчок мыши, нажатие клавиши. Обработчик события – это, как правило, функция, написанная на языке сценариев (например, JavaScript), которая выполняет действия, когда произошло соответствующее событие. Объект window.event создается браузером автоматически в момент возникновения.


Разработка мобильного приложения

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

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

  2. С тратегия. Составить план работы над проектом, анализ конкурентов (количество загрузок, оценка отзывов, история компании). Далее определиться с монетизацией и маркетингом, дорожной картой и MVP.

  3. Дизайн:

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

    2. В айрфрейм. Далее рисуются экраны с располагаемыми на них необходимыми элементами и данными. Несмотря на то, что один и тот же элемент может присутствовать на нескольких экранах, у него должен быть «дом». Инструменты: Balsamiq, Sketch, Axure, Figma, RealtimeBoard,  Wireframe.cc и Whimsical.

    3. Пользовательские сценарии. Определяют способы взаимодействия пользователя с приложением (сколько касаний, например). При этом после любого изменения все пользовательские сценарии проверяются заново на случай, если мы, упростив одно действие, усложнили другое. Инструменты: маркеры, плюс Invision, Adobe XD и Figma.

    4. Проверка на аудитории. Проверка UX-дизайн – проход реальными пользователями сценариев по отрисованным вайрфреймам. Речь о проверке навигации. После исправления – тестирование начинается заново. Инструменты те же, что и для пользовательских сценарий: Invision, Adobe XD и Figma.

    5. U I-дизайн. Стайлгайды - стройматериалы для отделки «интерьера» мобильного приложения и повышения его юзабилити. Без продуманного стайлгайда элементы дизайна будут менять цвета и плавать по экрану, сбивая пользователя с толку. Опытный UI-дизайнер предложит сотню вариантов цветовой палитры, шрифтов и виджетов (кнопок, форм, значков и т.д.).
    6. 1   2   3   4   5   6   7   8   9   ...   14