Уеб разработка и дизайн 101

web_development_101Искате ли да знаете основите на уеб разработката и дизайна? Страхотен …


Но има проблем с този ред на мисли или с редица от тях всъщност …

  • Каква е целта на уебсайта? Наистина ли всеки има нужда от такъв?
  • Ако е така, как да изградите качествен уебсайт? Или с други думи, как да научите основни уеб разработки и дизайн, които биха ви позволили сами да изградите този качествен уебсайт?
  • По-важното е, че можете да създадете качествен уебсайт на ПЪРВИЯ си опит? Или имате нужда от години опит зад гърба си, преди да можете да се надявате на някакъв резултат над ужасен?

Нека отговорим на всичко това в това ръководство за начинаещи за уеб разработка и дизайн.

[Внимание спойлер. Да, можете да създадете качествен уебсайт при първия си опит.]

Contents

Какво е обхванато в това ръководство?

Добре, първо, първо, радваме се, че сте продължили да четете и че сте решили да опитате уеб разработка! Ето как ще се играе:

Главите са представени по много прост начин, като основното съдържание е вляво, а делимите елементи вдясно. Така:

Въведение в ръководството: Глава 1

Сега, как да продължите:

  • Докато сте на първо четене: Препоръчваме ви да прочетете цялото нещо отгоре надолу. Това ще ви даде добър 10 000 фута оглед на темата и ще ви помогне да разберете най-важните части от нея. Също така ще ви предостави основни инструменти и методи за това как да се справите с отделни задачи.
  • Докато сте на второ четене и по-нататък: Използвайте TOC и преминете към частта, която ви интересува най-много. Също така, не се колебайте да използвате бутоните за споделяне до всяка глава и да изпращате линковете до себе си или до вашите приятели / последователи, които може да се интересуват.

Готов? Нека да преминем към глава 1.

За кого е това ръководство?

Ако искате да научите основни уеб разработки и дизайн, това ръководство е за вас. Каквато и да е мотивацията ви.

Освен това не са ви необходими предварителни технически познания, за да започнете работа (освен основните „уеб умения“). Целта на това ръководство е да бъде един вид „101” курс за всички, които се интересуват от създаване на уебсайтове и обучение на уеб разработки.

Ето някои общи причини, поради които може да се интересувате:

  • 1. Нуждаете се от уебсайт за вашия бизнес (и искате да видите дали можете сами да го изградите).
  • 2. Искате да НАУЧИТЕ уеб разработка от страст или временен интерес (нищо лошо в това).
  • 3. Нуждаете се от уебсайт за училище.
  • 4. ПОМОГНЕТЕ на приятел или член на семейството си, за да получите уебсайта им онлайн.

Основната идея, която ни ръководи

Това е важно! И моля, не се сърдете на нас, ако сте напреднал уеб разработчик, който чете това, но основната идея, която ще ни води в целия ресурс за уеб разработка и дизайн 101, е:

„Подходът за най-малко съпротива“

Ето трите принципа на подхода с най-малко съпротива:

  • Бяха да не разрушава нещата на молекулно ниво. Т.е. няма да стигнем до края на това как работят езиците за програмиране или как работи уеб сървърът.
  • Бяха да не преоткрива колелото. Т.е. ако някой вече е решил даден проблем и е направил достъпно решението, ще го използваме.
  • Бяха вземане на просто решение страхотно, а не сложно и на пръв поглед функционално решение бъги и не е разбираемо.

ГЛАВА 1: Планът

Вашата идея, тип уебсайт, име на домейн и хостинг.

Преди да настроите уебсайт, ще ви трябва план

Колкото и иронично да звучи – хитовото шоу от 80-те години „A-Team” ни е научило, добър план е ключ към успеха.

Ако сте имали уебсайт, който седи в вас известно време, тогава със сигурност сте развълнувани от единствената идея най-накрая да го извадите, за да могат другите да четат и разглеждат..

Искате вашия уебсайт да бъде страхотен. Вероятно знаете как ще изглежда до известна степен. Или може би дори имате готовото перфектно лого.

Но…

Това изобщо не е мястото, където трябва да започнете. Ако започнете с предварително установени очаквания, това ще ви доведе само до много объркване по пътя и до резултата от подравнение в края.

Вместо това помислете за следното:

  1. Отделете се от всякакви технически цели, които може да имате. Като например целта да се научат технологии на уебсайтове или определен софтуер за уебсайтове.
  2. Задайте си един основен въпрос: „За какво ми трябва сайтът?“

Това не е за вас, а за целта на сайта.

Въпроси, които трябва да си зададете, преди да настроите уебсайта си

  1. Какво има за цел постигането на сайта?
  2. Какво ще бъде основното „нещо”, представено през сайта? (напр. вашия бизнес, продукт, публикации в блога ви и т.н.)
  3. Ще има ли уебсайт някаква специална цел? (напр. магазин за електронна търговия, портфолио на фотографа и т.н.)
  4. Кой е целевата аудитория?
  5. Защо се интересуват от темата на сайта?
  6. Каква болка решава сайтът за отделните членове на аудиторията?

За тези последни 3 въпроса, нека поговорим с аудиторията за минута …

Има 2 основни правила за изграждане на уебсайт. Ето правило №1:

 Читателят / посетителят е на първо място. Те са основното лице, което вашият уебсайт трябва да угоди.

По някакъв начин уебсайтът ви не е ваш. Тяхно е.

(Правило №2 ще обсъдим след минута.)

Забравянето на тази проста насока може да ви доведе по напълно погрешен начин, дори до момента, в който се окажете с уебсайт, който е объркващ за всички наоколо, но вие.

“Уф! Хората просто не разбират за какво става въпрос за този сайт. Как могат да бъдат толкова невежи ?! “ – завършваш да мислиш. Но както се оказва, невежият бяхте вие.

Единственият начин да избегнете това е да изградите уебсайта си с читателя предвид още от началото.

Така че … вземете този лист хартия и отговорете на всички въпроси по-горе.

След като сте готови, имате своя последен набор от насоки, върху които ще действате, докато работите на уебсайта си.

Тези отговори ще бъдат изключително мощен инструмент, когато продължавате заедно. Ще можете да се свържете с тях винаги, когато се сблъскате с решение относно уебсайта си.

Трябва ли да направите това * или * това *? Отидете на листа с отговори и разберете. Трябва ли да използвате широка или тясна странична лента? Отидете на отговорите и разберете кое е по-вероятно да резонира с целевия четец. И т.н.

Имена на домейни и уеб хостинг

Ако искате да сте собственик на уебсайт, имате нужда от име на домейн и уеб хост.

Е, добре, технически погледнато, можете да създадете тестов уебсайт на собствения си компютър и след това да го стартирате от локален уеб сървър (също инсталиран като софтуер на вашия компютър), но това не би било решение за използване за 99% от случаи, така че нека просто го пропуснем.

И така, хост и домейн …

Лошата новина тук е, че и двамата струват пари.

Добрата новина … не са толкова много пари в голямата схема на нещата. Освен това, докато научавате, можете дори да стартирате множество малки уебсайтове с едно име на домейн и под един уеб хост.

Но нека започнем в началото.

Уеб хостове:

  • Казано по-просто, уеб хост е мястото, където вашият уебсайт седи и където посетителите могат да го намерят. По някакъв начин уеб хостовете за уебсайтове са точно като апартаменти за хора. Под капака уеб хостове са компании, които отдават под наем сървърите си в замяна на пари (… малки апартаменти за вашите уебсайтове).
  • За да започнете, ще бъде направен стандартен споделен хостинг план. Можете да получите тези за всичко, като започнете от $ 3 / месец. Ето хубаво сравнение на популярни уеб хостове. Проверете го и преценете коя от тези компании изглежда точно за вас. Нашите препоръки обаче са за SiteGround, A2 хостинг и Dreamhost.

домейни:

  • Ако уеб хост е апартамент, то домейн е адресът на този апартамент. Например, домейнът на този уебсайт е hostingfacts.com.
  • Начинът да започнете е да изберете желаното име на домейн и след това да го купите от регистратор. Ето изчерпателно ръководство за това как да купите име на домейн и ето списък на генераторите на имена на домейни.

 

Предложения и съвети за избор на име на домейн

Добре, така че да отидете при някой регистратор на домейни и всъщност да купите домейна е едно, но как да изберете правилното име на домейн?

Има няколко училища:

  • Маркови имена на домейни. Това са домейни, състоящи се от несъществуващи думи. Помислете, неща като Google.com или Yahoo.com. Преди тези компании да се появят, тези думи не означават нищо. Преобладаващото име на марковото име на домейн е, че то е … добре, силно маркируемо, запомнящо се и е лесно да разграничите вашия сайт от останалите.
  • Имена, базирани на ключови думи. Те се състоят от съществуващи думи, поставени в последователност, която описва целта на сайта. Помислете, неща като Pizza.com или StartBloggingOnline.com. С подобно име на домейн посетителите ви ще могат точно да предскажат вида на уебсайта, който тепърва ще посетят. Недостатъкът е, че тези домейни обикновено са по-малко манипулируеми.
  • Комбинирани имена. Това са маркови домейни и базирани на ключови думи домейни, взети заедно. Помислете, Facebook.com или Copyblogger.com. Такива имена подсказват „някаква“ част от природата на уебсайта на посетителя, но те все още са силно маркирани.

Някои общи насоки, независимо от типа на домейна, който сте избрали:

  • Направете домейна лесен за запаметяване.
  • Направете го кратко и опростено. Колкото по-дълъг е домейнът, толкова по-объркващ е той.
  • Вземете .com (ако е възможно). .Com е основният наличен „домейн от най-високо ниво“. Не се примирявайте с нищо друго.
  • Опитайте се да избягвате тирета. Вземете името си под формата на едноцветни като „cakerecipes.com“ вместо „cake-recipes.com“

Неща, които трябва да сте готови след тази глава:

  • Име на домейн.
  • Уеб хост.
  • Вашият лист с отговори – целите на вашия сайт и как ще служи на аудиторията.

Нуждаете се от повече помощ? Ето по-нататъшно четене за вас:

  • Защо споделен хостинг? Сравнени основни типове хостове
  • 10 неща, които правят уеб хост добър
  • 12 правила за избор на правилното име на домейн
  • Изчерпателно ръководство за планиране на уебсайтове

ГЛАВА 2: Проектиране и фиксиране

Вземете хартия и химикалка и надраскайте заедно със структурата на уебсайта си

Добре, да влезем във фазата на проектиране.

Първо, първо, ето работната етика, която ще вървим тук:

  • Използваме химикалка и хартия толкова дълго, колкото можем, и едва след това преминаваме към компютъра. Повярвайте ни, всяка минута, прекарана в работата върху вашия дизайн на хартия, е спестена час, след като започнете да настройвате нещата на компютъра.
  • Правим итеративна работа … Правим »проверка на резултатите» подобряване »проверка на резултатите» повтаряне, докато не е готово.

В глава 1 споменахме нещо, което нарекохме правило №1 за изграждане на уебсайт. Сега е времето за правило №2:

Правило №2 от изграждането на уебсайт:

Първо помислете за съдържанието.

Съдържанието е важното на уебсайта. Не дизайнът. съдържание.

Хората идват за съдържанието. Те не идват за дизайна. Дизайнът е само средство за доставяне на съдържанието.

Никога не започвайте с това как изглежда уебсайтът ви. Започнете със съдържание. Съдържание. Съдържание. съдържание.

И така, какво имаме предвид под „съдържание“? Накратко, това е нещото, което хората искат да получат от вашия уебсайт. Блог публикации, продукти в магазина, теми във форума, ако изграждате форум, статии за новини, бизнес оферта и т.н..

“Наистина ли? Изглежда наистина няма значение? ” – Ти питаш.

Вместо нас да победим това, вижте тази страница:

Прост уебсайт

Тази проста уеб страница далеч не е най-доброто обяснение какво е дизайнът и каква цел служи онлайн.

Така че запомнете, първо съдържание!

Съдържание и структура на уебсайта

Добре, така че тъй като съдържанието е най-важното, трябва предварително да сте го подготвили (повечето). Или поне трябва да имате добра представа колко съдържание ще има и под каква форма.

Забележка. Знаем, че тази част може да бъде трудна. Започването със съдържание изглежда доста неестествено за дизайна на уебсайтове, но наистина това е най-добрият начин да постигнете превъзходен резултат в крайна сметка. Затова помислете за съдържанието, което искате да споделите с читателя, и как искате да го представите.

Следващата стъпка е да отделите отделните типове страници, от които ще се нуждаете (като начална страница, страница с продукти, страница с категории, страница за страница, страница за контакти, главна страница за продажби, целева страница за абонамент за бюлетин, главен списък с блогове, отделни публикации, магазин в магазина и всичко друго, което изглежда необходимо).

Помислете какъв е най-ефективният начин да организирате съдържанието си на уебсайта?

Направете всичко това на хартия. Вероятно за вас ще е по-лесно и по-бързо, отколкото да научите на място някой софтуер за рисуване на диаграми.

Пример:

съдържание структура

Задраскайте заедно телена рамка

Тел рамка в уеб дизайна е просто страница или схема или план – визуално ръководство, което представлява рамката на уебсайт (Уикипедия ни казва).

Wireframes са страхотни! Ние ги използваме за повечето неща, които правим, които са предназначени да се появяват онлайн. Например, ето тел за това много ръководство:

Задраскайте заедно телена рамка

Както можете да видите отново, това е на хартия. Въпреки че има много приложения за този вид работа, всъщност не съветваме да ги използвате. Те може да са чудесни за професионалните дизайнери, но начинаещ или междинен човек само ще загуби време, за да ги научи, и в крайна сметка няма да постигнат много подобрение в сравнение с това, което биха постигнали чрез писалка и хартия.

И така, как да направите телена рамка?

Е, има два подхода, ако сте начинаещ:

  • Отидете с течението, ако се чувствате силни, и просто се изтеглете (не винаги перфектно решение).
  • Вземете няколко бързи знания за правилното поставяне на рамка (обикновено по-добре).

За последното, отидете тук – страхотно ръководство.

(Уверете се, че създадете телена рамка на всеки важен тип страница, която сте посочили в предишната стъпка.)

Неща, които трябва да сте готови след тази глава:

  • По-голямата част от съдържанието за сайта или поне по-голямата част от него е предвидена (например, ако разчитате на генерирано от потребители съдържание, трудно е да го имате предварително).
  • Структурата на съдържанието на уебсайта Ви е подготвена като графика.
  • Тел рамка на отделните типове страници, от които ще се нуждаете.

Допълнителна информация:

  • 9 стъпки за планиране на съдържанието на уебсайта
  • Нови за уеб дизайна? Започни тук.

ГЛАВА 3: UX и UI

Никога не подценявайте значението на потребителското изживяване и потребителския интерфейс

Както и в потребителския опит и потребителския интерфейс.

WebDesignerDepot ни дава доста поетично определение на двете:

UI е седлото, стремената и царува.

UX е усещането, че можеш да яздиш коня и да въжеш добитъка си.

За по-практично определение:

  • UI е това, което потребителят вижда, когато гледа вашия сайт.
  • UX е как се чувстват за това.

Двойката и колко добре се изпълнява, определя основно полезността на уебсайта Ви за крайния потребител / посетител.

И UX и UI дизайн са големи теми сами по себе си и има много по-малки елементи, които играят роля в крайния резултат.

Накратко, има какво да научите, ако едва започвате пътуването си.

Така че вместо ние да се опитваме да прекъснем цял курс на UX и UI дизайн тук, нека просто посочим шепа важни елементи и след това да ви изпратим някъде другаде за допълнително четене.

Цели на потребителя

UX се отнася до целите на потребителите … Не толкова от целите ви … Цели на потребителите.

Добре, какво означава това? Първо, върнете се към целта на вашия уебсайт – нещото, върху което сте работили в предишните глави. Причината, поради която изграждате уебсайта и как помага на потребителя / посетителя.

Как се превръща в целта на посетителя? … Кое е единственото нещо, което посетителят иска да получи или постигне, когато дойде на вашия сайт? Това е тяхната цел.

Колко лесни са тези цели за постигане?

След това се съсредоточете върху следния въпрос:

  • Може ли посетителят да постигне целта си лесно? – Могат ли да стигнат до точната информация, за която са дошли по прост начин?

За да отговорите на това, трябва да се върнете към телесната си рамка, структурата на съдържанието си и да проверите двойно нещата.

Уверете се, че съдържателната структура и страниците, които сте измислили, имат смисъл от гледна точка на потребителя. Уверете се, че е възможно да се движат между важните страници свободно и по неясен начин.

По същество тук ние гарантираме, че уебсайтът дава на посетителите си стойност.

Трудно е да разберете всичко това сами, нали??

Силно препоръчително е да проверите ресурсите, изброени в раздела „по-нататъшно четене“ на тази глава…, но можете също да опитате „хак“, така да се каже.

Именно помислете какво ви смущава, когато посещавате уебсайтове, които са подобни на този, който искате да изградите? Може би има някаква информация, до която наистина е трудно да се стигне, или някакъв интерфейсен елемент, който прави сайта объркващ.

Правете си бележки, правете заключения, не правете същите грешки с вашия уебсайт.

Използване на емоцията като инструмент

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

Искате те да се чувстват по определен начин, който след това ще ги убеди да действат по определен начин. По този начин, което прави вашия уеб сайт наистина полезен.

За да работите върху емоционалната част от работата, един от най-добрите инструменти е цветът.

Цветовете имат различни значения в различните култури. Разбирането на тези разлики може да направи работата ви много по-лесна. Ето хубав лист за мами.

След като сте запознали какви цветове искате да използвате (евентуално), ето няколко общи насоки при работа с цвят:

  • Изберете една основна цветова схема, състояща се от няколко цвята, които вървят добре заедно. Ето един страхотен генератор на цветови схеми.
  • Изберете един цвят, който ще бъде вашият акцент цвят – цветът, който ще се използва за бутони за действие, бутони за купуване и т.н. По принцип всичко, което се нуждае от вниманието на потребителя.

книгопечатане

В много случаи типографията е мястото, където печелите (или загубите) играта на изграждането на уебсайт.

Толкова е лесно да забравите напълно за типографията и просто да използвате Arial за всичко.

Не се препоръчва.

В наши дни работата с персонализирани шрифтове е лесна за uber и дори не е необходимо да правите нищо техническо, за да активирате тези персонализирани шрифтове на вашия сайт.

Голямата, грандиозна типография е много на мода в наши дни и това също прави работата на дизайнера – особено работата на начинаещия дизайнер – много по-лесно.

Вижте този сайт, например:

бонобо

Забелязали ли сте нещо? Да, шрифтовете са огромни и изглеждат страхотно!

Ето как да работите по този начин:

  • По принцип всеки дизайн на уебсайт се нуждае от два типа текст: заглавията и параграфи. В повечето случаи ще се прави само по един шрифт на всеки.
  • Отворете Google Fonts – собствената библиотека на безплатни шрифтове на Google, която можете да използвате на уебсайта си – и потърсете шрифт на заглавието, който наистина ви харесва.
  • След това вземете името на този шрифт и го потърсете в Font Pair – това е библиотека от предварително направени двойки шрифтове, които вървят добре заедно.
  • Изберете двойка, която изглежда страхотно.
  • Запишете имената на двата шрифта, ще ви трябват по-късно.

По този начин ще ускорите процеса си и все пак ще дадете страхотен резултат.

Например в Google Fonts намерихме шрифт, наречен Bree Serif:

Бри-Serif

След това го занесохме в Font Pair и сайтът ни предложи Bree Serif да върви добре с Open Sans. Отлични резултати:

Бри-Serif-отворени ДАНС

Крайната структура

И накрая, последната стъпка!

Целият смисъл на тази глава е да се ориентирате към окончателно оформление / структура, която ще използвате за вашия сайт. На този етап трябва да сте почти сигурни по отношение на нещата, които искате да направите с вашия дизайн и потребителски интерфейс.

Неща, които трябва да сте готови след тази глава:

  • Вашите потребителски цели ясно изброени.
  • Вашата телена рамка провери два пъти, за да се уверите, че тези цели не са объркващи.
  • Избраната цветова схема.
  • Типографията разбра.
  • Цялото ви оформление / структура / организация на уебсайта.

Допълнителна информация: 

  • UX Magazine
  • UX щанд
  • Психологията и емоцията зад цвета в уеб дизайна
  • Какво представлява дизайнът на потребителското изживяване? Преглед, инструменти и ресурси
  • Поставяне на интелигентни бизнес цели за уебсайт
  • 8 правила за създаване на ефективна типография

ГЛАВА 4: WordPress, HTML или шаблони?

Решете кой път да отидете – системи за управление на съдържанието или го кодирайте от нулата

Ето откъде започва истинската, мръсна с ръце работа под капака!

Това вероятно е и най-страшната част от процеса (признайте!).

За веднъж е подходящият момент да оставите писалка и хартия настрана и да започнете да работите с някакъв софтуер.

И веднага на портата, има много въпроси …

  • Трябва ли да науча HTML?
  • Ами CSS?
  • Готовите шаблони на уебсайтове за HTML ще направят ли труда за мен?
  • Трябва ли да науча език за програмиране като PHP?
  • Чух, че WordPress е начинът да се изгради сайт в наши дни.
  • Видях онази реклама на Squarespace Super Bowl. Какво става с това?
  • Как се казва това Joomla? или Drupal?
  • и на и на и на.

Отговорът на всички тях е да.

Както в, да, можете да направите едно или всички тези неща и само вие ще решите кой път да изберете.

Това, което се опитваме да кажем, е, че тук няма най-добър подход №1. Всичко зависи от това доколко искате да се включите в уеб разработката, каква част от основите за изграждане на уебсайт искате да научите, колко бързо имате нужда от качествен сайт и колко персонализирано искате да бъде след това.

И така, ето как ще продължим от тази глава напред. първи, изберете персона, който ви определя най-добре:

  • а) Искам да науча какво представлява уеб разработката, всички основи, всички вътрешни работи на уебсайт и всички механизми, които правят един уебсайт работещ.
  • б) Искам да науча как да използвам надежден конструктор на уебсайтове, който ще се справи с повечето тежки повдигания за мен.
  • ° С) Не знам какво да правя. Просто искам уебсайт, който сам мога да създам и който ще функционира правилно.

Отговорено a)? Отидете на глава 5.

Отговор б)? Отидете на глава 6.

В отговор? Чувствайте се свободни да разгледате тази статия и след това да се върнете (тя трябва да ви помогне да изберете перфектния път):

  • Прегледани 8 най-добри платформи за блогове и уебсайтове … Всяка платформа е описана заедно със своите плюсове и минуси, а ресурсът също предлага най-добрият наличен избор (Wix или SB) за вашите конкретни нужди.

Прочетохте ли го? Страхотен! И така, коя от персоните по-горе ви описва най-добре – а) или б)?

Инструментите, които могат да ви бъдат полезни по пътя:

  • Графика: Paint.NET, Gimp, Pixlr.
  • Писане на код: Notepad ++, TextWrangler, SublimeText.
  • Управление на работата: Trello.
  • Дизайн: цветни схеми, Google Fonts, инструментите от тук.
  • Фотография: Unsplash, AllTheFreeStock

ГЛАВА 5: Въведение в HTML, CSS & Javascript

Как уебсайтовете са вградена реалност

В тази глава ще посочим основните положения на уеб разработката, ще обясним най-важните термини и след това ще ви изпратим към някои специфични ресурси, където можете да разширите своите знания и умения.

HTML

HTML е езикът на уебсайтовете. Всяка уеб страница е изградена или преобразувана в HTML в даден момент.

Например, за да видите HTML структурата на това ръководство, което четете тук, просто натиснете „Ctrl + U“ на клавиатурата си.

HTML определя всеки блок, който виждате на уеб страница. В края на деня, за да се покаже нещо на уеб страница, трябва да бъде преобразувано в HTML.

За да научите ефективно HTML, ви съветваме да се запишете в един от (безплатните или платени) курсове, достъпни в мрежата. Някои от най-добрите могат да бъдат намерени в Codeacademy или Treehouse.

Например, ето конкретен раздел за Codeacademy, всичко за HTML и CSS.

Начална страница на CodeCademy

Това е цялостният подход към HTML.

CSS

CSS – за да пропуснете скучните технически подробности – е отговорен за стилизирането на всичко, което се вижда на уеб страница.

CSS взема HTML тагове и след това структурира и добавя стилистика към тях. Неща като: удебелен текст, корекции на цветовете, сенки, оформления, дори анимации, сега се извършват главно с CSS.

За по-добро разбиране на това как точно работи, прескочете този бърз курс в Codeacademy.

За по-задълбочено обучение проверете също CSS секциите или на Codeacademy, или на Treehouse.

JavaScript, jQuery, Bootstrap и т.н..

JavaScript е език за програмиране, който ви позволява да въвеждате някои динамични действия на вашия уебсайт. Например, можете да правите неща като валидиране на уеб формуляри или да взаимодействате с потребителя по по-рационален начин, без да се налага да презареждате страницата, на която са. Ето един хубав урок от w3schools.

Имайки това предвид, jQuery е JavaScript библиотека, която ви позволява да създавате разширени неща с по-малко кодиране. Много удобен за уеб програмист. Научете повече тук.

И накрая, Bootstrap е много интересно изобретение. Първоначално представен от Twitter, това е в основна среда среда, която ускорява процеса на изграждане на уебсайт, като доставя повечето от вече създадените елементи на сайта. Звучи сложно, нали??

Но не е. Просто проверете този курс за начинаещи в Codeacademy (между другото, така първоначално научихме Bootstrap).

Неща, които трябва да сте готови след тази глава:

  • По принцип първата чернова на вашия HTML / CSS уебсайт е напълно изградена. Оттам можете да започнете да повтаряте и подобрявате крайния резултат.

ГЛАВА 6: Платформи за изграждане на уебсайтове

Настройка на първия ви сайт? Опитайте безплатни платформи за уебсайтове като WordPress, Joomla или Drupal

Глава 6: Платформи за изграждане на уебсайтове

  • Squarespace
  • WordPress
  • Joomla & Drupal

Има повече строители на уебсайтове, отколкото можете да разклатите пръчка. (Ако сте от типа човек, който разклаща пръчки.)

Добре, шеги настрана.

Ясно е, че ако нямате желание да научите как да кодирате нещата на ръка, те със сигурност са множество решения, които могат да ви помогнат.

Забележка. Моля, имайте предвид, че всичко останало, което обсъдихме в глави 1-4, все още се прилага тук. Дори и да работите с решение за изграждане на сайт, което е своеобразна ръка, все пак трябва да внимавате, за да направите крайния продукт приятен за потребителите и в синхрон с целите на всички. Тези инструменти за изграждане на сайтове са точно тези … инструменти.

Започвайки с най-лесните за разбиране:

Squarespace

Единствената платформа за уебсайтове, която се рекламира по време на Super Bowl.

Накратко, много удобно решение, което може да се използва от всеки. Не са необходими предварителни умения.

Тя ви позволява да създавате класически уебсайтове, блогове, дори магазини за електронна търговия, дори написахме рецензия за тях. Интерфейсът и целият процес на използването му са доста лесни за разбиране, плюс момчетата от Squarespace предоставят много интересни уроци. Вижте ги тук.

WordPress

Честно казано, ние обичаме WordPress.

През повечето време това е перфектната платформа за създаване на уебсайт. Той има перфектния баланс между сложността и лекотата на използване и е безкрайно персонализируем.

WordPress анимация

В момента това е най-популярната платформа за уебсайт от всички тях. Както сподели създателят на WordPress – Matt Mullenweg – WordPress вече захранва 25% от целия интернет. Могат ли всички тези хора да грешат?

Добре, така че за да започнете работа с WordPress, обикновено се нуждаете само от вашия домейн и хостинг. Самият софтуер за WordPress е напълно безплатен.

За начало, не се колебайте да следвате един от тези пътища:

а) „Пътят за бърз старт“

  • Отидете тук, за да научите опростения начин за инсталиране на WordPress и стартиране на вашия сайт след следобед.
  • Изберете безплатна тема от официалната директория – уверете се, че тя е в съответствие с целите на вашия сайт и че оформлението / дизайна не е далеч от желаната структура (ще го коригирате леко).
    • Проверете тези два ресурса, за да научите как да персонализирате съществуваща тема.
    • Като алтернатива можете да изберете многоцелева премиум тема, която може да се регулира чрез удобен потребителски интерфейс (без кодиране). Темата X е добър пример за такова нещо.
  • Инсталирайте някои от най-популярните и най-добрите приставки, за да получите допълнителни функции.

б) „Дълбокият път“

  • Започнете с изучаването на WordPress чрез онлайн курс. Treehouse предлага страхотно.
  • Изберете вашата тема и приставки точно както по-горе. Алтернативно, изградете своя собствена тема от самото начало.

В крайна сметка WordPress е може би най-универсалната платформа за уебсайтове на пазара. С него можете да изградите практически всеки тип уебсайт, не само блогове или прости бизнес сайтове. Ето списък от 47 (!) Различни начина за използване на WordPress, само за да ви накара да се замислите.

Joomla и Drupal

Въпреки че са малко по-различни един от друг, Joomla и Drupal са отлични системи за управление на съдържанието за по-напреднали уеб проекти.

Те не са толкова силни в дизайна, но са изключително адаптивни и способни да обработват всякакъв вид уебсайт, който може да имате в план.

Понякога, в зависимост от сложността на вашия проект, може да им е необходимо много повече време за овладяване и много повече усилия за това.

За по-задълбочено обучение има страхотни курсове в Lynda.com, както за Joomla, така и за Drupal.

Неща, които трябва да сте готови след тази глава:

  • Първият проект на вашия уебсайт е напълно изграден, без значение дали сте решили да използвате WordPress или някоя друга платформа.
  • Уверете се, че тя е в съответствие с първоначалните ви цели, с целевата аудитория и че предлага добра UX.

ГЛАВА 7: Мобилен отзивчив дизайн

Повече от 60% от хората използват мобилни телефони и таблети, за да сърфират в интернет

Отзивчивостта на мобилните устройства сега е много важен аспект на изграждането на уебсайт, вероятно повече от всякога.

Ето какъв е целият проблем:

По принцип в момента има повече хора, които използват мобилни устройства за достъп до мрежата от всякога. Всъщност се изчислява, че сега има повече потребители на мобилен интернет от потребителите на настолни интернет (75,1% срещу 52,7%).

Но има проблем.

Не всеки дизайн на уебсайт ще бъде оптимизиран, за да бъде гледан на мобилни устройства направо.

Някои често срещани проблеми включват:

  • шрифтовете са твърде малки,
  • самата подредба изобщо не се приспособява към по-малък екран,
  • или технологията, използвана за изграждането на сайта, която не е достъпна за мобилни устройства.

Именно тук влиза в действие идеята за мобилна отзивчивост.

Чувствителният уебсайт реагира на средата, в която се гледа. Ако е настолен компютър, уебсайтът се изобразява по определен начин. Ако е мобилен, той се представя по друг начин.

Ето едно по-добро обяснение: Какво по дяволите е отзивчив уеб дизайн?

Така че сега трябва да се направи проверка и да се уверите, че уебсайтът ви работи на мобилни устройства. Използвайте собствените си устройства, за да проверите това, но също така опитайте мобилния тест на Google или прескочете към инструмент като Responsive Design Tester.

Ако има проблеми, трябва да ги отстраните.

Някои решения:

  • Отзивчив уеб дизайн – как да го направите
  • Как да направите уебсайт отзивчив за около 15 минути

ГЛАВА 8: Съчетаване на всичко

Знаете основите, сега е ваш ред

Дръжте, почти сме там!

Това е последната глава от доста дългото ни пътуване.

На този етап трябва да имате първия си уебсайт … Бъдете го с WordPress, ръчно изработен HTML / CSS, някакъв конструктор на уебсайтове или каквито и други инструменти, които сте избрали за работата.

Накратко, поздравления! Но все още има няколко неща, които си струва да направите:

  • Проверете два пъти нещата, които обсъдихме в глави 1 и 2. Уверете се, че целите наистина работят за крайния потребител и че уебсайтът не е объркващ.
  • Валидирайте кодовата си структура чрез услугата за проверка на маркирането на W3C.
  • Проверете дали няма проблеми със сигурността на сайта. Използвайте скенера от Sucuri за това.
  • Получете обратна информация от общността. Проверете какво мислят другите за вашата работа. Форумите в Sitepoint могат да бъдат полезни за това.

Ако това е вашето първо четене на този ресурс, тогава наистина ви насърчаваме да се върнете към него няколко пъти и да го разглеждате като референтен файл за по-нататъшното ви образование.

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

И накрая, любопитни сме … кое е най-голямото ви предизвикателство, когато става въпрос за изграждане на уебсайт, уеб разработка или дизайн? Моля, споделете в коментарите или чрез Twitter. Всички сме уши!

Благодаря за четенето, вие сте страхотни!

  • Total116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map