Єдина Країна!

Головне меню

Наша кнопка

Українські уроки про ІТ

Друзі

Підтримка української армії


Головна Програмування - Основи програмування Концептуальне введення в веб-розробку

Концептуальне введення в веб-розробку
Написав Pavlo   
Неділя, 09 лютого 2014 17:59
Переглядів: 6800

Шановний початківець,

Я знаю, про що ти думаєш. Є так багато статей "Введення в х програмування", то чому ти повинен витратити даремно час на читання ще однієї. Реальність така, що безліч уроків/статтей, масових відкритих онлайн-курсів та інших освітніх ресурсів тільки й чекають, щоб навчити вас, як почати свій шлях в програмуванні до супер розробника X-мови програмування. Те, чого я вважаю не вистачає в просторах інтернету, це пояснення загальних основ, перш ніж відкривати редактор коду. Це розуміння того, як працює Інтернет, і як це відображається у веб-розробці.

Багато людей запитують мене, з чого почати і що вони повинні вчити далі, і я завжди відповідаю списком сайтів, які вони можуть переглянути. Але, коли вони відвідують ці сайти і бачать там величезну кількість інформації, яка є там, вони можуть бути приголомшеними і не знати з чого почати. Я пишу це з наміром допомогти заповнити цю прогалину.

Зверніть увагу: розумію, що деякі терміни й метафори я використовую не на 100% правильно. Вони використовуються, щоб зробити навчання легшим для повного новачка.

По-перше, огляд того, що ж таке Інтернет і як він працює:

Як працює інтернет. Відео 1(англ.)

Як працює інтернет. Відео 2 (англ.)

 

Прим. від перекладача.

Як аналог, можна почитати українську статтю про інтернет

Як працює інтернет?

або з цієї книги

Основи інтернету Левченко О.М. та ін.

 

Ви, напевно, тепер знаєте більше про Інтернет, ніж будь-хто з ваших друзів і сім'ї. Тепер ви можете подумати: "Ну, це чудово, і все таке, але чи я повинен знати, як програмувати IP-адрес, всі ці пакети і як вони подорожують, і де, і як? Я просто хочу створити простий блог!". Правда в тому, що ви могли б, ймовірно, отримати роботу веб-розробника, не знаючи інформації у цих відео. Тоді чому я показував вам ці відео? Тому що Інтернет є тим, що потрібно мати на увазі і те як легко можна отримати сайт і запустити його, слід мати на увазі також. Завдяки інженерам, ми маємо доступ до цієї великої технології і єдиною перешкодою є ваша сила волі, щоб шукати нові знання.

Тепер давайте продовжимо...

 

Front end (клієнтська сторона)

Ці пакети, які ми отримуємо від серверів, про які ми тільки, що дізналися, в кінцевому підсумку складаються у файли, які отримує наш комп'ютер. Що ми використовуємо для того, щоб побачити ці файли? Браузери! Firefox, Chrome, Safari, Internet Explorer (ви в підсумку з'ясуєте, чому розробникам не подобається IE) приймають ці файли і створюють сайти, які ви любите відвідувати. Отже, як же нам створити сайт? Ми створюємо ці файли і копіюємо їх на сервер (зазвичай з допомогою процесу, названого FTP). Отже, що це за файли?

 

HTML (мова гіпертекстової розмітки)

HTML файли використовуються для "маркування" тексту. Якщо щось має бути параграфом, тоді позначаємо це саме так. Заголовок. Посилання на інший сайті. Список елементів. Щоб зберегти наш сайт організованим і структурованим, ми повинні позначити це таким чином, щоб ми змогли звернутися до цих частин пізніше. По правді кажучи, HTML файл насправді потрібен тільки для створення дійсно дуже простого веб-сайту (я маю на увазі, дійсно простого).

Ось приклад:

http://codepen.io/marlonlandaverde/pen/tfjas

 

CSS (каскадні таблиці стилів)

Це те, де ви додаєте колір, стиль і положення! Хочете зробити кнопку синьою? Жирніший шрифт? Зелену рамку? Ці файли використовують "маркування" створене в ваших HTML файлах, щоб додати стиль на ваш сайт (без цього, ваш сайт буде виглядати досить нудно).

Приклад:

http://codepen.io/marlonlandaverde/pen/iLDkt

 

JavaScript (мова програмування)

Чесно кажучи, ви не можете контролювати багато чого за допомогою всього двох перших файлів. Саме тому був створений JavaScript: щоб додати функціональності і додаткових можливостей, що було б в іншому випадку неможливо з першими двома типами файлів. Ви знаєте, що коли ви починаєте набирати в рядку пошуку Google, результати автоматично відображаються? Це було зроблено з JavaScript. Ви знаєте, що коли ви розміщуєте щось на Facebook, це появляється нижче без перезавантаження сторінки? JavaScript. Ця мова дозволила розробникам створити Інтернет більший захопливим для користувачів.

Приклад:

http://codepen.io/marlonlandaverde/pen/fcmbs

Ці три мови утворюють ядро, що відоме як Front End Development і Web Design (клієнтську частину, тобто, все те, що бачить користувач в браузері). Front end developers (програмісти, які мають акцент на цій частині веб-розробки) зосереджуються більше на використанні HTML/JavaScript для створення веб-застосунків, в той час як веб-дизайнери зосереджуються більше на HTML/CSS, Photoshop і UI/UX (в основному, те, що робить сайти красивішими).

 

Back end (серверна сторона)

До цього моменту ви знаєте достатньо про речі, які вам знадобляться, щоб почати створення веб-сайтів. Справді, за допомогою того, про що ми тільки що говорили ви може створити сайт, наприклад, як CSS Quiz . Але ви пройшли точку лише простих сайтів. Ви хочете створювати сайти, які роблять більше! Ви хочете обробляти дані, що приходять і може бути, навіть зберегти їх. Ви хочете створювати веб-застосунки (веб-програми). Ви пам'ятаєте, що говорили в попередніх відео про сервери? Ви дізнаєтесь, що таке програмування на стороні сервера.

У самому ядрі, ця частина веб-розробки зосереджена на двох основних сферах:

 

Server side Languages (серверні мови програмування)

Ці мови програмування допоможуть вам створювати веб-застосунки, які будуть обробляти інформацію, яка поступає від користувачів, так що ви можете віддати їм очікуваний результат. Ця інформація може змінюватись від простого клацанні по певній частині сайту до, наприклад, їх дати народження, що вони заповнили у формі. Є багато мов програмування, які служать цій меті, багато з них мають ентузіастів, які готові допомогти вам навчитись. Далі наведено одні з найпопулярніших:

- PHP

- Ruby

- Python

- Node (це JavaScript!)

 

Databases (Бази даних)

Інтеграція з базою даних означає, що ви хочете мати можливість зберігати дані, щоб отримувати їх пізніше. Ви можете використовувати вищезгадані серверні мови, щоб «говорити» з базою даних для створення, читання, оновлення та видалення (CRUD – create, read, update, delete) інформації. Ви можете використовувати ці дані для створення логінації користувачів, збереження статтей в блозі, відправки форми. Як правило, будь-який сайт, який зберігає ваші дані, використовує базу даних. Є кілька типів баз даних. Найбільш поширений тип — реляційні бази даних, а найбільш поширеною з них є MySQL.

Ці дві сфери, серверні мови та бази даних утворюють те, що називається  Back End (серверна сторона) в веб-розробці. Програмісти, які зосереджені на цій частині веб-розробки, як правило відомі як "веб-розробники".

Це основні поняття в веб-розробці! Як ви можете почати робити щось далі?

Вивчайте HTML і CSS, а потім зробіть веб-сайт. Ніщо не заважає вам.

 

Це переклад статті: Conceptual Introduction to Web Development


( 11 Проголосувало )

Схожі статті:
Новіші матеріали:
Старіші матеріали:

Коментарі
Добавити новий
Залишити коментар
Ім`я:
e-mail:
 
Тема:
 
:angry::0:confused::cheer:B):evil::silly::dry::lol::kiss::D:pinch:
:(:shock::X:side::):P:unsure::woohoo::huh::whistle:;):s
:!::?::idea::arrow:
 
Введіть цей настирливий код
Русская редакция: www.freedom-ru.net & www.joobb.ru

3.26 Copyright (C) 2008 Compojoom.com / Copyright (C) 2007 Alain Georgette / Copyright (C) 2006 Frantisek Hliva. All rights reserved."

 

Підписка

Хто онлайн?

Немає
На даний момент 30 гостей на сайті

Український рейтинг
TOP.TOPUA.NET