html {
height: 100%;
}
body{
font: 18px 'Arial'; height: 100%; margin: 0;
}
.container{
min-height: 100%; max-width: 1280px; margin: 0 auto;
}
header, aside, footer{
padding: 15px;
}
header, footer{
color: #fff;
background-color: #0066ff;
border: 2px solid #000,
min-height:20vh;
height: 80px;
}
header{
background-color: #0066ff;
float:left;
}
main{
min-height:60vh;
}
aside{
float:left;
display: inline-block;
width: 16%;
min-height: 75vh;
border-left: 2px solid #000;
border-right: 2px solid #000;
margin-bottom:10px;
}
aside, .row{
background-color: #ffcc00;
}
*{
box-sizing: border-box;
}
header,footer{
height: 80px;
border: 2px solid #000;
width: 99.96%;
}
main{
max-height: calc(100vh - 160px);
}
header{
margin-top: 10px;
}
footer{
margin-top:90px;
}
.content{
display :inline-block;
width: 84%;
min-height: 60vh;
}
.text{
overflow: scroll;
max-height:100%;
box-sizing: border-box;
}
.content{
border-right: 2px solid #000;
}
.row{
padding: 15px; border-bottom: 2px solid #000;
}
.text{
padding: 15px;
box-sizing: border-box;
}
.headerLink{
display: inline-block;
margin-left: 230px;
margin-right: 60px;
margin-top: 0px;
margin-bottom: 0px;
align-items: : center;
font-size:18px;
}
.headerLogo{
display: inline;
float: left;
position: static;
background-image: url('../image/Kvasnuk_logo.png');
background-image: no-repeat;
background-position: left top;
background-size: 100%;
margin-left: auto;
margin-right: auto;
width: 40px;
height: 40px;
}
a{
text-decoration: none;
color: yellow;
}
h1{
text-align: center;
}
#menuVertical{
width: 60px;
height: auto;
position: fixed;
z-index: 5;
top: 79px;
transition: .3s;
}
#menuVertical ul{
display: block;
width: 30px;
height: auto;
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
#menuVertical ul li{
display: block;
width: 175px;
position: relative;
}
#menuVertical ul li a{
position: relative;
display: block;
width: 198px;
height: auto;
box-sizing: border-box;
font-size: 16px;
text-transform: uppercase;
font-weight: bold;
color: #ccc;
line-height: 2em;
padding: 10px 15px;
text-decoration: none;
text-shadow: 2px 2px 3px #222;
}
#menuVertical ul li a:hover,
#menuVertical ul li:hover a{
background: rgb(30, 60, 67);
color: #fff;
}
#menuVertical ul li ul{
position: absolute;
top: 0px;
left: 198px;
display: none;
width: auto;
}
#menuVertical ul li:hover ul{
display: block;
}
#menuVertical ul li ul li a{
white-space: nowrap;
text-transform: none;
padding: 10px 20px;
width: 153px;
}
#menuVertical ul li ul li a:hover{
background: rgb(38, 79, 88);
color: #fff;
}
.image{
width: 70px;
}
.images{
margin-top:-10px;
display: flex;
align-items: center;
}
#text{
text-align: center;
}
table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
border-radius: 10px;
border-spacing: 0;
text-align: center;
}
th {
background: #BCEBDD;
color: white;
text-shadow: 0 1px 1px #2D2020;
padding: 10px 20px;
}
th, td {
border-style: solid;
border-width: 0 1px 1px 0;
border-color: white;
}
th:first-child, td:first-child {
text-align: left;
}
th:first-child {
border-top-left-radius: 10px;
}
th:last-child {
border-top-right-radius: 10px;
border-right: none;
}
td {
padding: 10px 20px;
background: #F8E391;
}
tr:last-child td:first-child {
border-radius: 0 0 0 10px;
}
tr:last-child td:last-child {
border-radius: 0 0 10px 0;
}
tr td:last-child {
border-right: none;
}
<!DOCTYPE html>
<html>
<head>
<title>Завдання 1</title>
<link rel="stylesheet" type="text/css" href="../style/Kvasnuk_style_exercise1.css">
</head>
<body>
<div class="container">
<header>
<div class='headerLogo'></div>
<div class="headerLink"><a href="https://uk.wikipedia.org/wiki/HTML">❄HTML❄</a></div>
<div class="headerLink"><a href="https://uk.wikipedia.org/wiki/CSS">❄CSS❄</a></div>
<div class="headerLink"><a href="https://uk.wikipedia.org/wiki/JavaScript">❄JAVASCRIPT❄</a></div>
</header>
<main>
<aside>
<nav id="menuVertical">
<h2 class="logo">
<a href="../../index.html">❉Навігація❉</a>
</h2>
<ul>
<li><a href="#front"><div class="img_n"></div><span>❋Front end та back end❋</span></a></li>
<li><a href="#text"><div class="img_n"></div><span>+ Порівняння✪</span></a>
<ul>
<li><a href="#frontend">◐Front end◑</a></li>
<li><a href="#backend">◐Back end◑</a></li>
</ul>
</li>
<li><a href="#text1"><div class="img_n"></div><span>+ Статистика✫</span></a>
<ul>
<li><a href="#front-end">◐Front end◑</a></li>
<li><a href="#back-end">◐Back end◑</a></li>
</ul>
</li>
<li><a href="#fact"><div class="img_n"></div><span>©Інтересні факти©</span></a></li>
<li><a href="../Kvasnuk_index.html"><div class="img_n"></div><span>«Вихід«</span></a></li>
</ul>
<div class="images"><img src="../image/html5.png" class="image">
<img src="../image/css3.png" class="image"></div>
</nav>
</aside>
<section class="content">
<div class="row">
<h1>✯Front end та back end✯</h1>
</div>
<div class="text">
<p id="front">В програмній інженерії терміни «front end» та «back end» розрізняють за принципом розділення відповідальності між рівнем представлення та рівнем доступу до даних відповідно.</p>
<p>Front end — це інтерфейс для взаємодії між користувачем і back end. Front end та back end можуть бути розподілені між однією або кількома системами.</p>
<p>В програмній архітектурі може бути багато рівнів між апаратним забезпеченням та кінцевим користувачем. Кожен з цих рівнів може мати як front end, так і back end. Front — це абстракція, спрощення базового компоненту через надання користувачу зручного (user-friendly) інтерфейсу.</p>
<p>В проектуванні програмного забезпечення, наприклад, архітектура Модель-Вид-Контролер надає front end та back end для бази даних, компонентів обробки користувачів і даних. Розділення програмних систем на front end та back end спрощує розробку і розділяє підтримку. Емпіричне правило полягає в тому, що front (чи «клієнтська») сторона — це будь-який компонент, яким керує користувач. Код серверної сторони (чи «back end»-у) знаходиться на сервері. Плутанина виникає, коли хтось повинен зробити front-end зміни файлів на боці серверу. Більшість HTML-дизайнерів, наприклад, не повинні бути на сервері під час розробки HTML; і навпаки, серверні інженери, за визначенням, не повинні бути ніде окрім серверу. Потрібні обидва розробники, щоб в кінцевому результаті створити функціональний, інтерактивний веб-сайт.</p>
<p>Для більшості комп'ютерних підсистем, графічні файлові менеджери є «front end»-ом для комп'ютерних файлових систем, і оболонкою для операційної системи. Користувач діє від імені «front end»-у, а back end запускає програми операційної системи у відповідь.</p>
<p>Використання інтерфейсу командного рядка (CLI) потребує знання спеціальної термінології і памʼятання команд, а графічний інтерфейс користувача (GUI) виступає замість нього «front end»-ом як стільничне середовище. В Unix-середовищі, ncurses — це простий псевдографічний front end для інтерфейсу командного рядка. На рівні інтерфейсу командного рядка Unix найбільше байтових потоко-орієнтованих (тобто таких, що використовують stdin/stdout/stderr як інтерфейс) програм діють як фільтри — автономні програми, які також можуть слугувати «front end»-ами і «back end»-ами для інших програм. (Вони функціонують завдяки передачі даних між собою через конвеєр, в основному для обробки тексту; наприклад: $ grep word ~user/dir/infile | sort | tee ~user/dir/outfile)</p>
<p>В компʼютерній мережі front end може належати до будь-якого апаратного забезпечення, що оптимізує чи захищає мережевий трафік. Така річ називається апаратним front end додатком, бо вона знаходиться перед зовнішньою мережею чи на її межі. Мережевий трафік проходить через апаратний front end перед входом до мережі.</p>
<p>В системах керування вмістом (CMS) терміни front end та back end можуть належати до тієї частини CMS, яка відображається кінцевому користувачу і до адміністративної частини відповідно.</p>
<p>В компіляторах front end транслює компʼютерний програмний сирцевий код в проміжне представлення, а back end працює з проміжним представленням, щоб генерувати машинний код. Back end зазвичай оптимізований для генерації коду, який працює швидше. Front-end/back-end відмінності можуть розділитись на парсерну частину і back end, який генерує і оптимізує код. Деякі проекти, такі як GCC, надають вибір між кількома «front end»-ами (синтаксичний аналіз різних сирцевих мов) чи «back end»-ами (генерація коду для процесорів різного призначання).</p>
<p>В синтезі мовлення, front end належить до частини системи синтезу, яка конвертує вхідний текст у символьно-фонетичний образ, а back end конвертує символьно-фонетичний образ безпосередньо в звуки.</p>
<p>В контексті WWW-програм, посередник — це сервіс, який функціонує одночасно як сервер на «front end»-і та як клієнт на «back end»-і.</p>
<h3 id="text">Порівняння FRONT END ТА BACK END</h3>
<p>Мови, платформи і методи можуть відрізнятися. Але є два аспекти веб-розробки, які загальні для всіх завдань: front-end і backend. Мета цієї статті полягає в тому, щоб пояснити front-end і back-end розробку з професійної точки зору. </p>
<h3 id="frontend">Frontend-розробка</h3>
<p>Це те, що користувач бачить, чіпає і відчуває. Frontend-додатки - це менше коду і більше турботи про те, як користувач буде сприймати інтерфейс.</p>
<p>Якщо в 2004 році ви користувалися MySpace, то залишилися задоволені досвідом взаємодії. Але як тільки почали використовувати Facebook, напевно отримали кращий досвід. Ви зрозуміли, що можете взаємодіяти з більш простим дизайном без миготливих рекламних банерів, з легкістю знаходити друзів і т. д.</p>
<p>Технічні навички, необхідні для frontend-розробників:</p>
<ul>
<li>
<strong>HTML.</strong> Весь код в веб-додатку конвертується в HTML. Розуміння веб-розробником HTML-коду аналогічно розумінню викрутки теслею;
</li>
<li>
<strong>CSS.</strong> Сам по собі HTML досить простий. Він реалізує основні стилі, але для створення гарного інтерфейсу розробники повинні мати досвід роботи з CSS. Каскадні таблиці стилів надає кольору, кнопки, підсвічування і багато іншого, що можна використовувати для поліпшення веб-сторінок. Такі мови, як Sass і LESS, також відомі, як прекомпілятора CSS, вони використовуються для написання більш ефективного і керованого коду CSS;
</li>
<li>
<strong>JavaScript.</strong> Це не тільки мову backend розробників. JavaScript виконується на комп'ютері користувача. Перетягування, безкінечна прокрутка і відео, що оживають на веб-сторінці, можуть бути запрограмовані за допомогою JavaScript. Ця мова настільки популярний, що цілі фреймворки побудовані виключно для спрощення створення інтерфейсів додатків. Такі фреймворки, як Angular, Ember, React і Backbone, використовуються для реалізації складних JavaScript-інтерфейсів.
</li>
<h3 id="backend">Backend-розробка</h3>
<p>Інтерфейс програми може бути найкрасивішою веб-сторінкою, але це нічого не коштує, якщо програма не працює. Backend розробка відповідає за обчислення, бізнес-логіку, взаємодія з базами даних і продуктивність. Велика частина коду, необхідна для роботи програми, буде виконуватися на сервері. Внутрішній код запускається на сервері. Це означає, що розробники повинні розуміти не тільки мови програмування і бази даних, а й архітектуру сервера.</p>
<p>Технічні навички, необхідні веб-розробнику back-end:</p>
<ul>
<li><strong>Ruby.</strong> Синтаксис Ruby легко читається навіть людьми, які не знають цієї мови. Ruby on Rails, який представляє собою фреймворк (побудований на основі Ruby) для створення веб-додатків. Це один з найпопулярніших інструментів веб-розробки для малого бізнесу і стартапів. Такі компанії, як Twitter, Hulu і Github використовують Ruby on Rails;</li>
<li><strong>Python.</strong> Популярний веб-фреймворк Django робить Python популярним для створення веб-додатків. Dropbox був побудований з використанням Python для виконання більшої частини свого серверного коду;</li>
<li><strong>SQL.</strong> Це універсальна мова запитів до бази даних. SQL використовується для взаємодії з базами даних, які є частиною кожного веб-додатки. Незалежно від того, яка мова вибрали для створення веб-додатки, frontend і backend розробку, ви все одно будете використовувати SQL для взаємодії з базою даних.</li>
<h3 id="text1">Статистака FRONT END ТА BACK END</h3>
<h4 id="front-end">Front End</h4>
<table>
<tr>
<th>Міста України</th>
<th>Заробітна плата</th>
<th>Навики</th>
<th>Мови програмування</th>
<th>Бази даних</th>
</tr>
<tr>
<td>Київ</td>
<td>35000 грн</td>
<td>ECMAScript 6,HTML5 API,SVG,DOM</td>
<td>Node.js, PHP, Ruby, .NET</td>
<td>SQL, MySql, NoSQL, MongoDB</td>
</tr>
<tr>
<td>Львів</td>
<td>40000 грн</td>
<td>ECMAScript 6,HTML5 API,SVG,DOM</td>
<td>Node.js, PHP, Ruby, .NET</td>
<td>SQL, MySql, NoSQL, MongoDB</td>
</tr>
<tr>
<td>Івано-Франківськ</td>
<td>30000 грн</td>
<td>ECMAScript 6,HTML5 API,SVG,DOM</td>
<td>Node.js, PHP, Ruby, .NET</td>
<td>SQL, MySql, NoSQL, MongoDB</td>
</tr>
<tr>
<td>Одеса</td>
<td>37500 грн</td>
<td>ECMAScript 6,HTML5 API,SVG,DOM</td>
<td>Node.js, PHP, Ruby, .NET</td>
<td>SQL, MySql, NoSQL, MongoDB</td>
</tr>
</table>
<h4 id="back-end">Back end</h4>
<table>
<tr>
<th>Міста України</th>
<th>Заробітна плата</th>
<th>Навики</th>
<th>Мови програмування</th>
<th>Бази даних</th>
</tr>
<tr>
<td>Київ</td>
<td>47500 грн</td>
<td>Symfony, Codeigniter, Yii, Zend Framework, Kohana</td>
<td>PHP, Python, Ruby, Java, Perl, Node JS</td>
<td>MySQL/SQLite, Mongo DB и PostgreSQL.</td>
</tr>
<tr>
<td>Львів</td>
<td>45000 грн</td>
<td>Symfony, Codeigniter, Yii, Zend Framework, Kohana</td>
<td>PHP, Python, Ruby, Java, Perl, Node JS</td>
<td>SQL, MySql, NoSQL, MongoDB</td>
</tr>
<tr>
<td>Івано-Франківськ</td>
<td>35000 грн</td>
<td>Symfony, Codeigniter, Yii, Zend Framework, Kohana</td>
<td>PHP, Python, Ruby, Java, Perl, Node JS</td>
<td>MySQL/SQLite, Mongo DB и PostgreSQL.</td>
</tr>
<tr>
<td>Одеса</td>
<td>42000 грн</td>
<td>ECMAScript 6,HTML5 API,SVG,DOM</td>
<td>Symfony, Codeigniter, Yii, Zend Framework, Kohana</td>
<td>MySQL/SQLite, Mongo DB и PostgreSQL.</td>
</tr>
</table>
<h3 id="fact">Інтересні факти</h3>
<p># 1. Проблема Internet залежності</p>
<p>У Китаї є спеціальні табори для реабілітації Інтернет-залежних.</p>
<p># 2. Великий сегмент мережі</p>
<p>37% мережі Інтернет - матеріали "для дорослих".</p>
<p># 3. Питання безпеки сучасних сайтів</p>
<p>Щодня реєструють хакерські атаки на більш 30000 веб-сайтів.</p>
<p># 4. Доступ навіть в найвіддаленіших точках</p>
<p>На шляху до вершини гори Еверест є доступ до високошвидкісного Інтернету.</p>
<p># 5. Тиха робота електронних систем</p>
<p>Більшість Інтернет-трафіку генерується не людьми, а ботами шкідливих програм і пошуковими роботами.</p>
<p># 6. Доменна зона для кожної країни</p>
<p>Коли Чорногорія здобула незалежність від Югославії, національне доменне ім'я змінили з ".yu" на ".me".</p>
<p># 7. Усвідомлення ролі журналістів і ЗМІ</p>
<p>Відповідальність в Інтернеті: американському журналісту загрожує до 105 років в'язниці за розміщення шкідливого посилання.</p>
<p># 8. Дорослі користувачі світової павутини</p>
<p>15% дорослих американців взагалі не використовують мережу Інтернет.</p>
<p># 9. Технології як засіб автоматизації звичайний завдань</p>
<p>Перша веб-камера була створена в Кембриджі і використовувалася для відстеження кількості кави в кавнику.</p>
<p># 10. Швидкість розвитку мережі Інтернет</p>
<p>Більш 100000 нових доменів ".com" реєструються в Інтернеті щодня.</p>
<p># 11. Британські користувачі Internet</p>
<p>9 млн. Дорослих жителів Великобританії ніколи не використовували мережу Інтернет.
</p>
<p># 12. Перший веб сайт працює і сьогодні</p>
<p>Перший сайт в Інтернет сайт був запущений 6 серпня 1991 року. Сайт http://info.cern.ch містив тільки 153 слова.</p>
<p># 13. Частка користувачів Інтернету серед всього населення
</p>
<p>2,4 млрд. Або 37,7% загальної чисельності населення в світі заходять в Інтернет щодня.</p>
<p># 12. Світове кількість веб сайтів</p>
<p>Згідно компанії Netcraft, в даний час є більш 227 млн. Сайтів, які містять понад 65 млрд. </p>Веб-сторінок.
</div>
</section>
</main>
<footer>
<div class='headerLogo'></div>
<div class="headerLink"><a href="https://uk.wikipedia.org/wiki/HTML">⁂HTML⁂</a></div>
<div class="headerLink"><a href="https://uk.wikipedia.org/wiki/CSS">⁂CSS⁂</a></div>
<div class="headerLink"><a href="https://uk.wikipedia.org/wiki/JavaScript">⁂JAVASCRIPT⁂</a></div>
</footer>
</div>
</body>
</html>