Разработка и создание web сайта parproduction

Так было до 2006 года, когда на сцене появился jQuery - быстрая небольшая кроссплатформенная библиотека JavaScript, призванная упростить интерфейсный процесс. За счет абстрагирования многих функций, которые обычно оставались разработчикам на самостоятельное решение, jQuery позволил расширить возможности для создания анимации, добавления подключаемых модулей или даже просто навигации по документам. И он явно успешен - jQuery была, безусловно, самой популярной библиотекой JavaScript из существующих в 2015–2019 годах, ее устанавливали на 65% из 10 миллионов сайтов с наибольшим посещаемостью в Интернете.4. GitHubЭто худший кошмар каждого разработчика - вы работаете над новой функцией проекта и облажаетесь. Войдите в системы контроля версий (VCS), а точнее, GitHub.Развернув свой проект с помощью этой службы, вы можете просмотреть любые внесенные вами изменения или даже вернуться к своему предыдущему состоянию (делать досадные ошибки в прошлом). Служба хостинга репозитория также может похвастаться богатым сообществом разработчиков с открытым исходным кодом (что упрощает сотрудничество между командами), а также предоставляет несколько других компонентов, таких как отслеживание ошибок, запросы функций, управление задачами и вики для каждого проекта.5. TwitterBootstrapУстали вводить тот же стиль для контейнера? Как насчет кнопки, которая постоянно появляется? Как только вы начнете регулярно создавать интерфейсные приложения, вы начнете замечать те же закономерности.Фреймворки пользовательского интерфейса — это попытка решить эти проблемы путем абстрагирования общих элементов в повторно используемые модули — это означает, что разработчики могут быстро и легко создавать строительные леса для элементов новых приложений.Наиболее широко используемый из этих фреймворков - Bootstrap, комплексный пакет пользовательского интерфейса, разработанный командой Twitter. В комплекте с инструментами для нормализации таблиц стилей, создания модальных объектов, добавления плагинов JavaScript и множества других функций Bootstrap может значительно сократить количество кода (и времени), необходимое для создания вашего проекта.6. Angular.jsHTML обычно является краеугольным камнем набора инструментов любого фронтенд-разработчика, но у него есть то, что многие считают серьезным недостатком: он не был разработан для управления динамическими представлениями.Именно здесь на помощь приходит AngularJS, фреймворк для веб-приложений с открытым исходным кодом. AngularJS, разработанный Google, позволяет расширить синтаксис HTML вашего приложения, что приводит к более выразительной, удобочитаемой и быстрой среде разработки, которая в противном случае не могла бы быть создана с помощью Только HTML.7. SassИнструменты веб-разработки, которые экономят время, - ваш лучший друг, и первое, что вы узнаете о коде, это то, что он должен быть сухим («Не повторяйся»). Второе, что вы, вероятно, узнаете, это то, что CSS обычно не очень сухой.Войдите в мир препроцессора CSS, инструмента, который поможет вам писать поддерживаемый, ориентированный на будущее код, при этом уменьшая объем CSS, который вам нужно писать.Наиболее популярным среди них является Sass, проект с открытым исходным кодом восьмилетней давности, который в значительной степени определил жанр современных препроцессоров CSS. Хотя сначала немного сложно разобраться с комбинацией переменных, вложенности Sass, при компиляции они будут отображать простой CSS, что означает, что ваши таблицы стилей будут более читабельными и (что наиболее важно) сухими. Инструменты бэкенд-разработкиЕсли вы столкнетесь с бэкенд-разработкой, легко почувствовать себя ошеломленным набором доступных бэкэнд-инструментов.Самособой разумеется, что вы должны использовать то, что работает для вас и ваших задач, но иногда не так просто понять, что именно вам нужно.Для этого тоже стоит обратить свое внимание на лидеров в этой сфере. Node.jsБолее 50% респондентов заявили, что предпочитают Node.js, популярную серверную платформу кодирования JavaScript. Node.js - это среда выполнения JavaScript, которая работает на движке среды выполнения V8 JavaScript. Node.js добавляет возможности JavaScript (интерфейсный язык), позволяя ему делать больше, чем просто создавать интерактивные веб-сайты. Он использует управляемую событиями неблокирующую модель ввода-вывода, что делает его легким и эффективным.ASP.NETCoreСледующей популярной альтернативой был ASP. NETCore, причем более 25% разработчиков одобряют его в качестве своей серверной инфраструктуры. ASP.NETCore - это кроссплатформенная платформа с открытым исходным кодом для создания серверных программ, веб-приложений и служб, а также приложений Интернета вещей. Согласно опросу о повышении квалификации, это также был один из самых популярных фреймворков, используемых разработчиками. Он предоставляет готовую к работе в облаке систему конфигурации на основе среды. Он легко интегрируется с популярными клиентскими фреймворками и библиотеками, включая Angular, React и Bootstrap.Express.jsРазработчики и технические специалисты также любят работать с ExpressJS. ExpressJS - это предварительно созданная среда NodeJS, которая может помочь разработчикам создавать более быстрые и умные веб-сайты и веб-приложения. Express в основном расширяет Node.js для создания полных веб-приложений.Это идеальный фреймворк для изучения для разработчиков, которые свободно владеют Node.js, но хотят перейти к созданию приложений только на основе серверных технологий. Express является легким и поставляется с дополнительными встроенными функциями веб-приложения и ExpressAPI для поддержки и без того надежной многофункциональной платформы Node.js.Express не ограничивается только NodeJS. Он также без проблем работает с другими модулями и предлагает утилиты HTTP и промежуточное ПО для создания API. Он может помочь разработчикам освоить одностраничные и многостраничные веб-сайты, а также некоторые сложные веб-приложения.LaravelLaravel, видный представитель нового поколения веб-фреймворков. Это один из самых популярных PHP-фреймворков, который также бесплатен и имеет открытый исходный код. Его особенности:Простой и быстрый движок маршрутизацииМощный контейнер для внедрения зависимостейНесколько бэкэндов для хранения сеансов и кэшаМиграция схемы, независимой от базы данныхНадежная обработка фоновых заданийТрансляция событий в реальном времениJavaEEПятый по популярности инструмент для серверной части - JavaEE. Стандарт Enterprise Java или Java EE - это набор технологий и API-интерфейсов для платформы Java, предназначенных для поддержки Enterprise. Под предприятием мы имеем в виду приложения, классифицируемые как крупномасштабные , распределенные, транзакционные и высокодоступные, разработанные для поддержки критически важных бизнес-требований.Приложения, написанные в соответствии со спецификацией JavaEE, не привязывают разработчиков к конкретному поставщику; вместо этого их можно развернуть на любом сервере приложений, совместимом с JavaEE. Серверное приложение JavaEE реализует API-интерфейсы платформы JavaEE и предоставляет стандартные службы JavaEE.Последний стабильный выпуск, JavaEE 8, содержит множество функций, в основном ориентированных на новые архитектуры, такие как микросервисы, модернизированные API-интерфейсы безопасности и облачные развертывания.Несколько менее популярных, но все равно активно используемых инструментов:Spring - модель программирования и конфигурации для создания современных корпоративных приложений на основе Java на любой платформе развертывания.Django, мощный веб-фреймворк Python для создания веб-сервисов RESTful. Он уменьшает количество тривиального кода, что упрощает создание веб-приложений и приводит к более быстрой разработке.Flask, фреймворк для создания веб-серверов на Python. Это микро-фреймворк, что означает, что это не полнофункциональный фреймворк для разработки веб-приложений. Он просто дает разработчикам основы для запуска веб-сервера.Firebase, мобильная платформа Google, которая помогает разработчикам запускать мобильный бэкэнд-код без управления серверами и разрабатывать высококачественные приложения.RubyonRails, одна из старейших серверных технологий. Определенный процент людей по-прежнему предпочитает использовать RubyonRails для своего внутреннего кода. Rails - это гибкий и дружественный к IDE фреймворк с простыми функциями и манипуляциями, а также поддержкой мощного языка ruby.РАЗРАБОТКА И СОЗДАНИЕ САЙТА КОМПАНИИ «ВЫСОТА»Разработка концепции сайтаВысота - это молодой и амбициозный российский проект по развитию архитектуры. Они предлагают уникальные дизайнерские решения для многоэтажных жилых домов, офисов и выставочных павильонов. Слоган компании: «Высота - строим от земли до облаков».Такое говорящее название и слоган сразу создают яркие ассоциации в голове любого человека: небо, чистота, облака, небоскребы, величественность, заметность. Именно от этих ассоциаций и хотелось оттолкнуться в разработке концепции сайта. Были подобраны изображения-референсы, которые сложились в коллаж (рис.1).Рис.1Так как разрабатываемый сайт является визиткой компании, не хотелось перегружать его лишним визуальным шумом, поэтому в основу лег белый цвет, гармонирующий с приглушенными синими и желтыми акцентами. Логотип компании (рис. 2) выполнен в стиле минимализм, но помещать его в центр внимания оказалось неудачной идеей, так как пространство выглядело не просторным и чистым, а пустым и унылым.Рис.2Из-за неудачи с логотипом возникла задача интересно обыграть продаваемые решения и название компании, чтобы главная страница практически без слов раскрывала суть компании. Пришлось снова обратиться к ассоциативному ряду и подумать, что же является отличительной особенностью небоскребов. Ответ простой: окна, но не простые, а кристально чистые, красиво и четко отражающие в себе повседневность. Стандартная концепция «окна в мир» звучала немного заезжено, поместить вид из окна посреди титульной страницы казалось слишком очевидным решением.Пришлось отойти немного в сторону и покреативить, чистые окна ведь не возникают сами, их кто-то моет. Кто моет? Специально обученные скалолазы, но вот скалолаз и архитектурная компания как-то плохо стыковались, зато инструменты, которые они используют, подкинули интересную идею. На рисунке 3 можно заметить один из главных инструментов мойщика окон в высотках: специальную щетку, оставляющую ровные линии.Рис.3А что если этой щеткой попробовать нарисовать что-то на очень грязном стекле? Мы увидим мир в форме этого рисунка сквозь грязное стекло. А в нашем случае рисунком станет название «Высота», а вместо грязного стекла будет наш чистый белый фон. Что же мы можем увидеть через высоту? Конечно, самые высокие здания, проектированием которых и занимается наша компания.Так и появилась идея для оформления главной страницы (рис. 4).Рис.4В шапку сайта мы поместили логотип и дополняющий его слоган компании, а также сетку навигации.В футере (или подвале) нашего сайта разместилась информация о местоположении офиса компании.Обе эти части мы отделили линиями, перекликающимися по цветовой гамме с изображением небоскребов, которое лежит под нашим словом.В итоге мы получили стартовую страницу, которая дает основную информацию о компании, знакомит с ее миссией и концепцией, а также обладает интуитивно понятной навигацией, ведь мы использовали стандартные названия подразделов сайта, кратко и лаконично отражающие их содержание.Следующей страницей стала «Галерея»: основная кладезь информации о том, насколько хороша компания в том, что она делает, ведь лучше один раз увидеть, чем десять раз услышать. Лучше чем увидеть один раз может быть только увидеть много раз: именно поэтому на вкладке «Галерея» разместились 8 изображений работ (рис. 5), уже спроектированных компанией «Высота», в эту подборку вошли не только небоскребы, но и экспериментальные архитектурные решения, выходящие за стандартные рамки компании. Никогда не будет лишним упомянуть как хорошо вы умеете работать с нетипичными и креативными задачами, ведь это отражает широту взглядов и возможностей компании. Рис.5.Когда восторженный клиент увидит на сайте архитектурный проект своей мечты, он сразу же захочет связаться с компанией и для этого ему пригодится вкладка «Контакты» (рис. 6). Ничего лишнего: напоминание о том, насколько крута ваша работа, в качестве фона, блок с адресом и возможность сразу обратиться в компанию с вопросом по электронной почте. Номер телефона не указан намеренно, так как компания пока еще не очень большая, возможности поддерживать круглосуточный колл-центр нет, зато есть менеджер, который обязательно ответит всем на почту в рабочие часы.Рис.6Последняя (но не по важности вкладка) будет рассказывать клиентам, что же за команда стоит за этими проектами и какими задачами она готова заниматься (рис. 7). Для любых уточнений снова добавим форму для обращения, которая позволит не упустить ни одного клиента.Рис.7Создание сайта компанииКогда все части сайта спроектированы, настало время приступить к их воплощению. Для удобства работы используем текстовый редактор Brackets, изначально он был разработан именно для нужд веб-разработки, поэтому имеет несколько приятных особенностей, например, режим LivePreview, который позволит следить за изменением сайта по мере его написания.Создадим папку проекта, назовем ее по имени компании – высота, в ней создадим четыре файла с htmlрасширением, назовем их index.html (главная/домашняя страница), galerie.html (страница с галереей), contakt.html (страница с контактами)и about.html (страница о нас), папку images, в которой будем хранить все изображения, используемые на сайте, а также файл style.css, который будет задавать стили нашего сайта. В папку images добавим все подготовленные изображения.Начнем работу с файла со стилями. Почему? Так как все страницы построены по одному основному шаблону, логичнее задавать стили не для каждой страницы отдельно, а объединив их по определенным категориям (классы). Мы уже спроектировали наш сайт, поэтому выделить основные классы не составит труда. Для того чтобы в разных браузерах и при разном размере окна сайт отображался корректно, некоторые стили придется прописать по отдельности, для каждого вида браузера, а также использовать медиазапросы, которые будут определять поведение сайта при определенном размере окна.Поочередное комментирование всех строк файла стилей не является необходимостью, поэтому просто приведем несколько примеров заданий стилей под разные задачи:Обработка ссылокРис.8Различная обработка для разных браузеровРис.9Разное поведение при разных размерах экранаРис.10Раздел галереиРис.11В файле index.htmlна основе доступных стилей создадим следующую структуру:Рис.12Она будет основой для всех страниц, меняться будет только наполнение контентом и ссылки на файлы в шапке.Скопируем эту структуру во все страницы и изменим наполнение в зависимости от спроектированного дизайна сайта, например, вот так будет выглядеть измененный шаблон для страницы «Галерея»:Рис.13После того как мы отредактировали все страницы, проверим, что все работает корректно, ссылки ведут на правильные страницы и обнаружим, что форма отправки сообщения не работает. Так и должно быть, ведь это просто демонстрационный макет, для того чтобы заставить эту форму работать по-настоящему, понадобятся более глубокие и обширные знания в веб-разработке, а также инструменты для бэкенд-разработки, которыми мы пока не владеем.Несмотря на это, мы получили отличный демонстрационный вариант сайта, который отражает особенности бизнеса, а также современные тенденции в дизайне сайтов.ЗАКЛЮЧЕНИЕВ данной работе мы успешно изучили все аспекты создания сайтов для бизнеса, а также познакомились с инструментами и тенденциями, используемыми для создания качественных и функциональных сайтов. Применили полученные знания для анализа, проектирования и разработки сайта для компании «Высота».СПИСОК ЛИТЕРАТУРЫДуванов А. А. Web-конструирование. – Петербург: 2009. - 384 с.Едомский Ю. Е. Техника Web-дизайна для студента. – Петербург: 2010. - 491 с.Крамер Э. HTML: наглядный курс Web-дизайна. - Киев: 2009. - 304 с.Леонтьев Б. Web-дизайн. Руководство пользователя. - Киев: 2011. - 384 с.Печников В. Н. Создание Web-страниц и Web-сайтов. - М.: Триумф: 2010. - 370 с.Роббинс Д. Web-дизайн. Справочник. - "КУДИЦ-ПРЕСС": 2009. - 816 с.Смирнова И. Е. Начала web-дизайна. –Петербург: 2010. - 491 с.HTML и Web дизайн для начинающих: [Электронный ресурс]. - http://sovet.h1.ru (дата обращения: 29.03.2021)Основы CSS и HTML: [Электронный ресурс]. - http://www.web-lesson.ru (дата обращения: 1.03.2021)Создание сайтов: HTML: [Электронный ресурс]. - http://www.codeharmony.ru (дата обращения: 15.03.2021)Архитектурная мастерская. Создание сайта: [Электронный ресурс]. - http://wonderfulstyle.ucoz.com (дата обращения: 23.03.2021)Создание страниц сайта с помощью HTML: [Электронный ресурс]. - http://roumik.ru (дата обращения 31.03.2021)Создание шаблона сайта с помощью CSS: [Электронный ресурс]. - http://ruseller.com (дата обращения 1.04.2021)