<
  • Главная
Статьи

Програмування: швидкий старт для новачків

  1. НTML
  2. CSS
  3. JavaScript
  4. Bootstrap
  5. PHP
  6. Бази даних
  7. висновки

WEB-програмування включає в себе досить багато мов і технологій. Але, щоб не заплутатися у всьому цьому різноманітті, уявляю схему типового web-додатки:

Як видно зі схеми, є кілька блоків: це верстка, серверне програмування і бази даних Як видно зі схеми, є кілька блоків: це верстка, серверне програмування і бази даних.
Web-програмісту, по-хорошому, потрібно вміти розбиратися в цьому хоча б поверхово. Навіть вузькоспеціалізованого верстальщику знадобилися б знання в області баз даних, тому що тоді йому буде зрозуміліше, звідки беруться дані для відтворення його красивою сторінки. А без знань основ серверного програмування він не зможе створити в повній мірі інтерактивну сторінку, яка використовує технологію ajax (спілкування з сервером, без необхідності перезапуску сторінки). На практиці буває неможливо передбачити, з чим доведеться працювати. Наприклад, кілька тижнів поспіль можуть потрапляти завдання тільки на верстку, або з'явиться дуже важливий проект зі складною серверної частиною. Тому вміти робити більше, "ніж треба", корисно і для роботи відділу в цілому і для кожного програміста особисто, тому що підвищує персональну конкурентоспроможність. Якщо є бажання розвиватися в програмуванні і ти зовсім новачок, то найпростіше почати з верстки. Верстка - це створення зовнішнього вигляду web-додатки. Те, що ви зараз читаєте - теж прив'язано кимось з використанням наступних технологій.

НTML

HTML - мова розмітки сторінки. Це власне каркас будь-якої сторінки (якщо ви натиснете в вашому браузері Ctrl + U, то ви побачите весь html код цієї статті. Ця мова розмітки лякає, але він дуже простий. Щоб його освоїти, досить пройти короткий інтерактивний самовчитель ( htmlbook.ru , htmlacademy.ru , w3schools.com ) Або щось аналогічне. Головне, що потрібно запам'ятати про html - це каркас сторінки, його не варто використовувати для додання зовнішнього вигляду (хоча так вийшло, що він це вміє робити).

CSS

Наступна технологія це CSS - каскадні таблиці стилів. Ось CSS якраз і займається наданням вашій сторінці гарного зовнішнього вигляду. З його допомогою можна розташовувати елементи, зафарбовувати фон, надавати тексту різний розмір і т.д. Структура css ще простіше, ніж html - він складається з селектор (для чого застосовується правило) і правил (власне саме оформлення). Наприклад, щоб зробити текст всіх абзаців тексту (а це html тег <p>) червоним, досить написати таке правило: p {color: red; }.

JavaScript

І остання технологія в верстці - це повноцінний клієнтський мову програмування - JavaScript. Сучасні тенденції web-розробки підштовхують до того, щоб використовувати його частіше, але ми поки зупинимося на його базовому використанні - надання інтерактивності сторінці. Якщо ви хочете, щоб блок розкривався при натисканні, або додавався після натискання кнопки "додати" - це все js. Найчастіше він відповідає за обробку якихось подій (натискання, наведення, ...) і запуск певних змін слідом за цим. Також важливу роль відіграє технологія ajax - яка дозволяє робити запити на сервер, без необхідності перезавантаження сторінки.

На рахунок CSS і JavaScript я б сказав так - прочитати про них потрібно, але не треба вдаватися в деталі. Справа в тому, що на чистому js і css доводиться писати не так часто. Для вирішення типових задач вже давно були придумані бібліотеки і фреймворки, які значно спрощують роботу.

Bootstrap

І перший фреймворк це Bootstrap. Він включає в себе css і js компоненти. Подивитися список всього, що в ньому є можна тут . Так, сторінки зверстані з його допомогою виглядають однаково, і на реальному сайті ви, швидше за все, будете його сильно допрацьовувати. Але є великий клас web-додатків, які використовуються всередині організацій, а значить зовнішній вигляд не є ключовим моментом. У них акцент робиться на функціоналі і зручність використання - а bootstrap-а для цього цілком достатньо. Крім того, вибираючи якусь готову красиву тему для сайту, ви з подивом виявите, що більшість хороших тим зроблені з використанням цього фреймворка. А значить bootstrap потрібно як мінімум знати і вміти ним користуватися.

На цьому етапі ви зможете зверстати сторінки з використанням bootstrap-а або розібратися в купленій красивою темі для сайту. Але це "мертві" сторінки, тому що вони не реалізують ніякого функціоналу.

PHP

Вся логіка програми, найчастіше, робиться на сервері. Для цього потрібно використовувати серверний мова програмування. Їх величезна кількість, але ми в своїй роботі використовуємо php. Якщо ви коли-небудь працювали з с / с ++ або подібними мовами - то освоїти php буде легко. Якщо ж ні - не турбуйтеся, він досить простий. Для роботи на базовому рівні досить знати синтаксис мови і мати загальні уявлення про об'єктно-орієнтованого програмування (ООП).
У синтаксис зазвичай включають роботу зі змінними, масивами, функціями, умовними операторами, циклами. А в області ООП треба знати що таке класи, об'єкти, поля і методи, модифікатори доступу (публічний, приватний, ...), успадкування і статичні поля і методи. Це може бути зайвим, але фреймворки, здебільшого, все об'єктно-орієнтовані. І якщо ви пропустите цей блок, то не зможете ними скористатися у своїй роботі. До речі майже всі, що потрібно знати з основ php можна побачити в цій шпаргалці .

Бази даних

Останній блок - це бази даних. Звичайно, web-додаток може бути написано і без їх використання, але саме БД дозволяє вирішувати деякі завдання вкрай швидко і ефективно. Так якщо у вас є список студентів, і вам треба вибрати всіх, хто народився до 2000 року, у кого день народження в лютому, хто вчиться на "4 і 5" з математики, відвідує гурток "Вишивання" і вільний після 6 вечора - їх всіх можна знайти за частки секунди, за умови, що ця інформація зберігається в базі даних. Щоб працювати з БД потрібно знати, що таке: база даних, таблиця, поля в таблиці, типи полів, що таке запис. Ну і кілька найбільш поширених запитів, які для простоти називають CRUD - C reate R ead U pdate D elete, тобто додавання записів в базу, пошук потрібних даних, зміна даних та видалення їх.

І після того, як ви вмієте верстати, розумієте як писати код на php і розумієте принципи роботи з базами даних - можете приступати до вивчення якого-небудь php фреймворка. Ми використовуємо Yii2 - який досить простий і функціональний. Він покриває майже весь круг вирішуваних нами завдань. Якщо не терпиться його побачити - то ось посилання на офіційну документацію, де про нього досить докладно написано. Більш детально про використання фреймворка в роботі я розповім як-небудь іншим разом, адже ця стаття для тих, хто тільки хоче вступити на шлях освоєння web-технологій.

висновки

Таким чином можна запропонувати наступний план освоєння професії:

  1. HTML-самовчитель (основні теги і структура сторінки).
  2. CSS + JS на базовому рівні (загальні моменти, не вдаючись у подробиці)
  3. Bootstrap (css / js фреймворк, який досить простий і функціональний)
  4. Основи PHP і об'єктно-орієнтованого програмування, на рівні шпаргалки.
  5. Основні поняття баз даних.

Будь-який напрямок в web-розробці так чи інакше стосується всіх цих тем. Отримані знання не будуть зайвими. Крім того, освоївши все вищеперелічене (а це реально зробити за тиждень, приділяючи трохи часу кожен день), ви вже сміливо можете претендувати на посаду учня програміста в нашому відділі. Сподіваюся, вам стало зрозуміліше, що таке web-розробка і наскільки просто зробити перший крок до своєї мрії стати Програмістом.



Новости
    Без плагина
    На сайте WordPress имеется файл, именуемый как .htaccess. Многие пользователи не предают ему особого внимания и не используют все его возможности. На самом деле файл .htaccess – это дополнительные конфигурации

    Плагин подписки wordpress
    Очень трудно найти один плагин подписки wordpress , который объединил бы в себе все виды подписок, которые так необходимы сайту. Именно поэтому я решил сделать подборку лучших плагинов, которые смогут

    Слайд-шоу с помощью плагина для WordPress UnPointZero Slider
    Плагин для cms WordPress UnPointZero Slider – новостной слайдер. Он отражает в форме слайд-шоу изображения со ссылками на ваши статьи и краткие выдержки оттуда. Его можно установить и на новостной сайт,

    Плагины для Wordpress
    С помощью этого плагина вы легко сможете интегрировать Google диск на ваш WordPress сайт или блог . Gravity Forms — лучший плагин для создания форм на WordPress, от самых простых (например, форма

    Подписки плагином JetPack: размещение и редакция формы подписки
    Вступление Здравствуйте! В этой статье я покажу, как использовать плагин JetPack для создания пользовательской формы подписки и как эту формы подписки плагином JetPack добавлять в статьи сайта, а при

    Чистка сайта WordPress плагином WP-optimize
    От автора Со временем использования система WordPress накапливает не нужные файлы, комментарии и неиспользуемые данные в базе данных. Эти файлы и данные создаются в процессе работы и нужны для этого,

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

    Резервное копирование WordPress сайта без плагинов
    Вступление Резервное копирование WordPress это второе, что нужно научиться делать после установки WordPress. Можно сколько угодно говорить о безопасности сайта и его защите, но лучшего варианта защиты

    Плагины на приват для Майнкрафт ПЕ
    > > Плагины на приват для Майнкрафт ПЕ Порой всем нам хочется попробовать себя в роли администратора сервера и испытать эту ответственность, но, к сожалению, вы не всегда все знаете о создании

    Плагин WordPress Database Backup. Архивация базы данных блога на WordPress
    Привет друзья! Сегодня на очереди еще один простой, НО, необходимый и полезный плагин — плагин WordPress Database Backup , который с легкостью и самостоятельно произведет процесс, который научно называется:

  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью