Веб развој и дизајн 101

веб_девелопмент_101Желите да знате основе веб развоја и дизајна? Авесоме…


Али постоји проблем са овом врстом размишљања или њиховим бројем заправо …

  • Која је сврха постојања веб странице? Да ли је свима заиста потребан?
  • Ако је тако, како направити квалитетну веб страницу? Или другим ријечима, како научити основни веб развој и дизајн који би вам омогућио да сами направите тај квалитетан веб сајт?
  • Што је још важније, можете ли прво израдити квалитетну веб страницу у вашем првом покушају? Или вам требају године искуства иза вас, пре него што се можете надати било ком резултату изнад страшног?

Одговоримо на све ово у овоме водич за почетнике за развој и дизајн веба.

[Упозорење за спојлер Да, можете да направите квалитетну веб страницу у првом покушају.]

Contents

Шта је обухваћено у овом водичу?

У реду, прво ствари, драго нам је да сте наставили читати и да сте одлучили да испробате веб развој! Ево како ће се одиграти:

Поглавља су представљена на врло једноставан начин, са главним садржајем са леве стране и делотворним ставкама са десне стране. Овако:

Увод у водич: Поглавље 1

Сада, како поступити:

  • Док сте на првом читању: Препоручујемо вам да прочитате целу ствар одозго према доле. Ово ће вам пружити добар поглед на тему од 10.000 стопа и помоћи вам да разумете најважније његове делове. Такође ће вам пружити основне алате и методе како се носити са појединачним задацима.
  • Док сте на другом читању и даље: Користите ТОЦ и пређите на део који вас највише занима. Такође, слободно користите тастере за дељење поред сваког поглавља и пошаљите линкове себи или пријатељима / пратиоцима који би могли бити заинтересовани.

Спреман? Идемо на прво поглавље.

За кога је ово Водич?

Ако желите да научите основни веб развој и дизајн, овај водич је за вас. Каква год да је ваша мотивација.

Такође, за почетак рада вам није потребно никакво претходно техничко знање (осим основних „вештина веба“). Цела смисао овог водича је да буде својеврсни курс „101“ за све који су заинтересовани за прављење веб локација и учење веб развоја.

Ево неколико уобичајених разлога због којих би вас могли занимати:

  • 1. Потребна вам је веб локација за ваше предузеће (и желите да видите да ли можете сами да је направите).
  • 2. Желите да НАУЧИТЕ веб развој из страсти или привременог интереса (ништа лоше у томе).
  • 3. ПОТРЕБНА је веб локација за школу.
  • 4. Помажете пријатељу или члану породице како би добили веб локацију на мрежи.

Главна идеја која ће нас водити

То је важно! И молим вас, немојте се љутити на нас ако сте напредни веб програмер који ово чита, али главна идеја која ће нас водити кроз целокупан ресурс веб за развој и дизајн 101 јесте:

„Приступ најмањег отпора“

Ево три принципа приступа најмање отпора:

  • Су не разбијајући ствари на молекуларном нивоу. И.е. нећемо доћи до дна како функционишу језици програмирања или како функционише веб сервер.
  • Су не измислити точак. И.е. ако је неко већ решио одређени проблем и решење учинио доступним, ми ћемо га користити.
  • Су чинећи једноставно решење феноменалним, пре него компликовано и наизглед функционалније решење бугги и није разумљиво.

ПОГЛАВЉЕ 1: План

Ваша идеја, врста веб локације, име домена и хостинг.

Пре него што поставите веб локацију, требаће вам план

Колико год иронично звучало – хит емисија из 80-их „А-Теам“ нас је научила, добар план је кључ успеха.

Ако сте неко време седели у вама, онда сте сигурно узбуђени због једине идеје да се коначно извучете из ње да је други прочитају и прегледају.

Желите да ваша веб локација буде сјајна. Вероватно знате како ће то изгледати до одређене мере. Или можда имате чак и савршен логотип спреман.

Али…

Ово уопште не треба да започнете. Ако започнете са унапред утврђеним очекивањима, то ће вас само довести до велике збрке на путу и ​​резултата подпарабора на крају.

Уместо тога, размислите о следећем:

  1. Одвојите се од било каквих техничких циљева. Као, на пример, циљ је научити технологије веб локација или одређени софтвер веб локације.
  2. Поставите себи једно главно питање: „За шта ми треба сајт?“

Ово није за вас, ово је за циљ странице.

Питања која требате себи поставити пре него што поставите веб локацију

  1. Шта је циљ сајта постићи?
  2. Шта ће бити главна „ствар“ представљена на веб локацији? (нпр. ваше предузеће, производ, постове на блогу итд.)
  3. Да ли ће веб локација имати било какву посебну намену? (нпр. продавница е-трговине, портфељ фотографа итд.)
  4. Ко је циљна публика?
  5. Зашто их занима тема странице?
  6. Који бол решава сајт за поједине чланове публике?

О ова задња 3 питања, разговарајмо публику на минут…

Постоје 2 главна правила за израду веб локација. Ево правила бр. 1:

 Читалац / посетилац је први. Они су главна особа којој се ваша веб локација мора угодити.

На неки начин веб локација није ваша. То је њихова.

(Правило бр. 2 разговараћемо за минут.)

Заборављање на ову једноставну смерницу може вас водити потпуно погрешним путем, чак и до тачке када се нађете са веб локацијама која је збуњујућа за све око вас, осим вас.

„Ух! Људи само не разумеју о чему се ради на овој веб локацији. Како могу бити тако незналице ?! “ – завршиш размишљати. Али како се испоставило, ти си био незналица.

Једини начин да се то избегне је да направите веб страницу са читатељем на уму одмах од почетка.

Дакле … узми тај комад папира и одговори на сва горња питања.

Након што завршите, имате свој коначан сет смерница по којима ћете деловати током рада на својој веб локацији.

Ови одговори биће изузетно моћан алат док идете даље. Моћи ћете им се обратити кад год се будете суочили са одлуком која се тиче ваше веб локације.

Да ли би требало да урадите ово * или * то *? Идите на листу одговора и сазнајте. Да ли би требало да користите широку или уску бочну траку? Идите на одговоре и сазнајте који је вероватнији одјек са циљаним читачем. И сл.

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

Ако желите да будете власник веб странице, потребно вам је име домена и веб домаћин.

Па, технички гледано, можете направити тестни веб сајт на свом рачунару, а затим га покренути са локалног веб сервера (такође инсталираног као софтвер на рачунару), али то не би било корисно решење за 99% случајева, па само прескочимо.

Дакле, домаћин и домен …

Лоша вест је да обоје коштају новац.

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

Али кренимо од почетка.

Веб домаћини:

  • Једноставно речено, веб домаћин је место где ваша веб локација седи и где је посетиоци могу да је пронађу. На неки начин веб хостови за веб локације су баш попут станова за људе. Под хаубом, веб домаћини су компаније које изнајмљују своје сервере у замену за новац (… мали апартмани за ваше веб локације).
  • За почетак ће радити стандардни план дељеног хостинга. Можете их набавити за све што почиње од $ 3 месечно. Ево лепе поређења популарних веб хостова. Погледајте и одлучите која од тих компанија вам се чини баш најбоља. Међутим, наше препоруке односе се на СитеГроунд, А2 хостинг и Дреамхост.

Домене:

  • Ако је веб домаћин стан, онда је домена адреса тог стана. На пример, домен ове веб локације је хостингфацтс.цом.
  • Начин да започнете је да одаберете жељено име домена, а затим га купите од регистрара. Ево опсежног водича о томе како купити име домена, а овде је списак генерација имена домена.

 

Предлози и савети за избор имена домена

У реду, па одлазак до неког регистрара домена и заправо куповина домена једна је ствар, али како одабрати право име домена?

Постоји неколико школа:

  • Брендирана имена домена. То су домени који се састоје од непостојећих речи. Размислите, ствари попут Гоогле.цом или Иахоо.цом. Пре него што су се појавиле те компаније, те речи нису значиле ништа. Наглашена марка имена домена је да је … добро, високо маркирано, памтљиво и лако је разликовати веб локацију од осталих.
  • Имена заснована на кључним речима. Они се састоје од постојећих речи, стављених у низ који описује сврху веб локације. Размислите, ствари попут Пизза.цом или СтартБлоггингОнлине.цом. Уз такво име домена, посетиоци ће моћи тачно да предвиде какву веб локацију желе да посете. Лоша страна је што су ти домени углавном мање марљиви.
  • Комбинована имена. То су домене марки и домене засноване на кључним ријечима. Мислите, Фацебоок.цом или Цопиблоггер.цом. Таква имена сугеришу посетиоцу „неки“ део веб странице, али они су и даље високо маркирани.

Неке опште смернице без обзира на врсту домена који одаберете:

  • Учините домен лако памтити.
  • Нека буде кратак и једноставан. Што је домен дуже, то је збуњујуће.
  • Набавите .цом (ако је могуће). .Цом је главна „домена највишег нивоа“ која је доступна. Не слажите се ни са чим другим.
  • Покушајте да избегавате цртице. Назовите своје име у облику једног блоба попут „цакереципес.цом“ уместо „цаке-реципес.цом“

Шта треба да буде спремно након овог поглавља:

  • Име домена.
  • Веб домаћин.
  • Ваша листа одговора – циљеви ваше веб локације и како ће послужити публици.

Требате више помоћи? Ево следећег читања за вас:

  • Зашто дељени хостинг? Поређење главних типова домаћина
  • 10 ствари због којих је веб домаћин добар
  • 12 правила за избор правог имена домена
  • Опсежан водич за планирање веб локација

ПОГЛАВЉЕ 2: Дизајнирање и жичано уоквиривање

Узмите папир и оловку и огреботине заједно са структуром веб странице

Ок, уђимо у фазу дизајна.

Прво ствари, ево радне етике којом ћемо овде ићи:

  • Ми користимо оловку и папир онолико дуго колико можемо, а тек потом прелазимо на рачунар. Верујте нам, сваки минут проведен на раду на вашем дизајну на папиру уштедио је сат времена када започнете подешавање ствари на рачунару.
  • Радимо итеративни рад … Радимо »провјеравамо резултате« побољшавамо »провјеравамо резултате» понављамо док не завршимо.

У првом поглављу смо споменули нешто што смо назвали правилом бр. 1 веб локације. Сада је време за правило бр. 2:

Правило бр. 2 веб локације:

Прво размислите о садржају.

Садржај је најважнији на веб локацији. Не дизајн. Садржај.

Људи долазе због садржаја. Не долазе за дизајн. Дизајн је само возило за испоруку садржаја.

Никада не започињте с изгледом ваше веб странице. Почните са садржајем. Садржај. Садржај. Садржај.

Па шта мислимо под “садржајем”? Укратко, то је ствар коју људи желе да добију са ваше веб локације. Постови на блоговима, производи у трговини, теме на форумима ако правите форум, чланке о вијестима, вашу пословну понуду итд.

“Стварно? Изгледи заиста нису битни? ” – Питате.

Уместо да победимо ово, погледајте ову страницу:

Једноставна веб локација

Ова једноставна веб страница далеко је најбоље објашњење шта је дизајн и чему служи у мрежи.

Зато запамтите, прво садржај!

Садржај и структура веб локација

У реду, па пошто је садржај најважнија ствар, морате га претходно припремити (већину). Или барем требате добро да знате колико ће садржаја бити и у ком облику.

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

Сљедећи корак је издвајање појединих врста страница које ће вам требати (попут почетне странице, странице производа, странице категорије, странице о страници, контакт страници, главне продајне странице, одредишне странице претплате на билтен, главни попис блогова, појединачни постови, можда продавница и све друго што се чини потребним).

Размислите који је најефикаснији начин да организујете свој садржај на веб локацији?

Све то радите на папиру. То ће вам вероватно бити лакше и брже од учења неког дела софтвера за цртање графикона на лицу места.

Пример:

садржај-структура

Испричите заједно жичани оквир

Жичани оквир у веб дизајну је једноставно шема странице или нацрт странице – визуелни водич који представља оквир веб странице (каже нам Википедиа).

Жичани оквири су феноменални! Ми их користимо за већину ствари које радимо и које су намијењене појављивању на мрежи. На пример, ево решетка за овај водич:

Стисните заједно жичани оквир

Као што видите, опет, то је на папиру. Иако постоји више апликација за овакав посао, ми заправо не саветујемо њихово коришћење. Они могу бити сјајни за дизајнере, али почетник или средња особа само ће изгубити време док их научи, и на крају неће имати много побољшања у односу на оно што би постигли оловком и папиром.

Дакле, како жичати оквир?

Постоје два приступа ако сте почетник:

  • Идите уз ток ако се осећате јаким и само се одвуците (није увек савршено решење).
  • Набавите неко брзо знање о томе како правилно успоставити оквир (обично боље).

За последње, идите овде – сјајан водич.

(Обавезно направите жичани оквир сваке важне врсте страница коју сте навели у претходном кораку.)

Шта треба да буде спремно након овог поглавља:

  • Већина садржаја за веб локацију или бар највећи део је предвиђен (на пример, ако се ослањате на садржај који је генерисао корисник, тешко је имати то унапред).
  • Садржајна структура ваше веб локације припремљена је као графикон.
  • Жичани оквир појединих врста страница које ће вам требати.

Додатна литература:

  • 9 корака за планирање садржаја на веб локацији
  • Ново у веб дизајну? Почните овде.

ПОГЛАВЉЕ 3: УКС и корисничко сучеље

Никада не подцените важност корисничког искуства и корисничког интерфејса

Као и корисничко искуство и корисничко сучеље.

ВебДесигнерДепот даје нам прилично поетичну дефиницију та два:

УИ је седло, стремена и краљују.

УКС је осећај који добијате могућност да јашете коња и конопите стоку.

За практичнију дефиницију:

  • Корисничко сучеље је оно што корисник види кад погледа вашу веб локацију.
  • УКС се осећају због тога.

Пар, и колико је добро изведен, у основи дефинише корисност веб локације за крајњег корисника / посетиоца.

И УКС и УИ дизајн су велике теме саме по себи, а постоји пуно мањих елемената који играју улогу у коначном резултату.

Укратко, постоји много тога за научити ако тек крећете на пут.

Дакле, уместо да овде покушавамо да убацимо читав течај дизајна за УКС и УИ, назовимо само неколико важних елемената, а затим ћемо вас послати негде другде на даље читање.

Кориснички циљеви

УКС се односи на корисничке циљеве … Не баш ваше циљеве … Корисничке циљеве.

Ок, шта ово значи? Прво се вратите на сврху своје веб странице – на чему сте радили у претходним поглављима. Разлог зашто правите веб страницу и како помаже кориснику / посетиоцу.

Како се то претвара у циљ посетиоца? … Шта је оно што посетилац жели да постигне или постигне када дође на вашу локацију? То је њихов циљ.

Колико су ти циљеви лако постићи?

Затим се усредсредите на следеће питање:

  • Да ли посетилац може лако да постигне свој циљ? – Могу ли на једноставан начин доћи до тачних информација?

Да бисте одговорили на то, вратите се на свој жичани оквир, структуру садржаја и двоструко проверите ствари.

Уверите се да структура садржаја и странице које сте смислили имају смисла са становишта корисника. Проверите да ли је могуће да се слободно и несметано крећу између важних страница.

У суштини, овде се бринемо да веб локација даје посетиоцима вредност.

Тешко је све то схватити сам, зар не??

Веома се препоручује да проверите ресурсе наведене у одељку „даље читање“ овог поглавља … али можете и да покушате „хацк“, да тако кажем.

Наиме, помислите шта вас фрустрира када посјетите веб странице које су сличне ономе које желите изградити? Можда постоје неке информације до којих је заиста тешко доћи или неки елемент интерфејса који чини веб локацију збуњујућом.

Водите белешке, правите закључке, не правите исте грешке са веб страницом.

Коришћење емоција као алата

Када радите на корисничком сучељу и УКС-у ваше веб локације, оно што у основи циљате је призивање одређене емоције у посетиоцу.

Желите да се они осећају на одређени начин, што ће их онда убедити да се понашају на одређени начин. Дакле, чинећи вашу веб страницу заиста корисном.

Да бисте радили на емоционалном делу посла, једно од најбољих оруђа је боја.

Боје имају различита значења у различитим културама. Разумевање тих разлика може ваш посао знатно олакшати. Ево лепог листа за варање.

Након што сте упознали које боје желите да (евентуално) користите, ево неколико општих смерница за рад са бојом:

  • Изаберите једну главну шему боја која се састоји од неколико боја које добро иду заједно. Ево одличног генератора шема боја.
  • Изаберите једну боју која ће бити ваша акцентна боја – боју која ће се користити за акционе тастере, дугме за куповину итд. У основи, све што треба корисниковој пажњи.

Типографија

У многим случајевима типографија је победа (или губљење) игре изградње веб страница.

Тако је лако заборавити на типографију у потпуности и једноставно користити Ариал за све.

Не препоручује се.

Ових дана је рад са прилагођеним фонтовима једноставан за убер, па чак ни не морате да радите било шта техничко да бисте омогућили те прилагођене фонтове на вашој веб локацији..

Велика, велика типографија је у моди ових дана, а посао дизајнера, посебно дизајнер почетника, много олакшава.

Погледајте, на пример, ову веб локацију:

бонобос

Приметили нешто? Да, фонтови су огромни и изгледају сјајно!

Ево како треба радити на овоме:

  • Опћенито, сваки дизајн веб страница треба двије врсте текста: наслови и параграфе. У већини случајева радиће само по један фонт.
  • Идите на Гоогле фонтове – Гоогле-ову сопствену библиотеку бесплатних фонтова које можете користити на својој веб локацији – и потражите фонт наслова у коме заиста уживате..
  • Затим узмите име тог фонта и потражите га у Фонт Паир – то је библиотека унапред направљених упаривања фонтова која иду добро заједно.
  • Изаберите упаривање које изгледа сјајно.
  • Забележите имена оба фонтова, требаће вам касније.

Ако то постигнете, убрзаћете процес и још увек ћете дати одличан резултат.

На пример, у Гоогле фонтовима смо пронашли фонт под називом Брее Сериф:

Брее-Сериф

Затим смо га однели у Фонт Паир, а сајт је предложио да Брее Сериф добро иде уз Опен Санс. Савршен:

Брее-Сериф-опен-санс

Коначна структура

Коначно, последњи корак!

Цела поанта овог поглавља је да се снесете на коначни изглед / структуру коју ћете користити за своју веб локацију. У овом тренутку требали бисте бити сигурни у ствари које желите да учините са својим дизајном и корисничким сучељем.

Шта треба да буде спремно након овог поглавља:

  • Ваши кориснички циљеви су јасно наведени.
  • Ваш жични оквир је двапут потврђен како бисте били сигурни да ти циљеви нису збуњујући.
  • Одабрана схема боја.
  • Типографија је схватила.
  • Ваш читав изглед / структура / организација веб странице.

Додатна литература: 

  • УКС Магазине
  • УКС Боотх
  • Психологија и емоција која стоји иза боје у веб дизајну
  • Шта је дизајн корисничког искуства? Преглед, алати и ресурси
  • Постављање паметних пословних циљева за веб локацију
  • 8 правила за прављење ефикасне типографије

ПОГЛАВЉЕ 4: ВордПресс, ХТМЛ или предлошци?

Одлучите којом рутом ћете ићи – системи за управљање садржајем или је кодирајте од почетка

Овде почињу прави, прљави, руке испод хаубе!

Ово је такође вероватно најстрашнији део процеса (признајте!).

Једном је право време да оставите оловку и папир и почнете да радите са неким софтвером.

И одмах иза капије, постоји тона питања …

  • Да научим ХТМЛ?
  • Шта је са ЦСС-ом?
  • Хоће ли спремне шаблоне ХТМЛ веб страница урадити трик за мене?
  • Да ли морам да научим програмски језик као што је ПХП?
  • Ових дана чуо сам да је ВордПресс начин за израду сајта.
  • Видео сам оглас Скуареспаце Супер Бовл. Шта је са тим?
  • Како се ово зове Јоомла? Или Друпал?
  • и даље и даље.

Одговор на све њих је да.

Као и да, можете учинити било које или све те ствари, а на вама је да одлучите који пут да одаберете.

Оно што ми желимо да кажемо је да овде нема најбољег приступа. Све зависи од тога колико желите да се бавите развојем веба, колико основа за изградњу веб локација желите да научите, колико брзо вам је потребно квалитетно веб место и колико прилагодљивог желите да то буде касније.

Дакле, ево како ћемо ићи даље од овог поглавља. Први, одаберите особу која вас најбоље дефинише:

  • а) Желим да научим о чему се ради веб развој, све основе, унутрашњи рад веб странице и сви механизми који чине да веб страница функционише.
  • б) Желим да научим како да користим поузданог градитеља веб страница који ће се носити са већином тешких дизања за мене.
  • ц) Не знам шта да радим. Само желим веб страницу коју могу сама да направим и која ће правилно функционисати.

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

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

Ц)? Провјерите овај чланак, а затим се вратите (требао би вам помоћи да одаберете савршен пут):

  • Прегледано је 8 најбољих платформи за блогање и изградњу веб локација … Свака платформа је описана заједно са својим предностима и недостацима, а ресурс такође предлаже најбољи расположиви избор (Вик или СБ) за ваше специфичне потребе.

Јесте ли је прочитали? Велики! Дакле, која од горе описаних личности вас најбоље описује – а) или б)?

Алат који вам може бити користан на путу:

  • Графика: Паинт.НЕТ, Гимп, Пиклр.
  • Писање кода: Нотепад ++, ТектВранглер, СублимеТект.
  • Управљање радом: Трелло.
  • Дизајн: шеме боја, Гоогле фонтови, алати одавде.
  • Фотографија: Унспласх, АллТхеФрееСтоцк

ПОГЛАВЉЕ 5: Увод у ХТМЛ, ЦСС & Јавасцрипт

Како су веб локације уграђена у стварност

У овом поглављу указаћемо на голе основе веб развоја, објаснити најважније појмове, а затим ћемо вам послати неке конкретне ресурсе на којима можете надоградити своје знање и вештине.

ХТМЛ

ХТМЛ је језик веб локација. Свака веб страница се гради или претвара у ХТМЛ у неком тренутку.

На пример, да бисте видели ХТМЛ структуру овог водича који овде читате, само притисните „Цтрл + У“ на тастатури.

ХТМЛ дефинише сваки блок који видите на веб страници. На крају дана, да би се било шта приказало на веб страници, потребно га је претворити у ХТМЛ.

Да бисте ефикасно научили ХТМЛ, саветујемо вам да се пријавите на један од (бесплатних или плаћених) курсева који су доступни на интернету. Неке од најбољих можете пронаћи у Цодеацадеми или Треехоусе.

На пример, ево посебног одељка о Цодеацадеми, који се односи на ХТМЛ и ЦСС.

Почетна страница ЦодеЦадеми

То је свеобухватни приступ ХТМЛ-у.

ЦСС

ЦСС – да прескочи досадне техничке детаље – одговоран је за стилизовање свега што је видљиво на веб страници.

ЦСС узима ХТМЛ ознаке, а затим их структурира и додаје стилинг. Ствари попут: подебљани текст, подешавања боја, сенке, изгледа, чак и анимације, сада се раде углавном помоћу ЦСС-а.

Да бисте боље разумели како ово тачно функционише, пређите на овај брзи курс код Цодеацадеми.

За дубље учење, такође погледајте ЦСС одељке било на Цодеацадеми или Треехоусе.

ЈаваСцрипт, јКуери, Боотстрап, итд.

ЈаваСцрипт је програмски језик који вам омогућава увођење неких динамичних акција на вашу веб локацију. На примјер, можете радити ствари као што су провјеравање веб образаца или интеракцију с корисником на поједностављенији начин без потребе за поновним учитавањем странице на којој се налази. Ево доброг водича за в3сцхоолс.

Имајући то у виду, јКуери је ЈаваСцрипт библиотека која вам омогућава да креирате напредне ствари са мање кодирања. Веома корисно за веб програмера. Сазнајте више овде.

Коначно, Боотстрап је веома занимљив изум. Првобитно представљен од стране Твиттера, он је у основи фронт-енд окружење које убрзава процес израде веб странице испоруком већине уобичајених елемената веб локације већ унапред уграђених. Звучи компликовано, зар не??

Али није. Погледајте само почетни курс на Цодеацадеми-у (успут, тако смо првобитно научили Боотстрап).

Шта треба да буде спремно након овог поглавља:

  • У основи, први нацрт ваше ХТМЛ / ЦСС веб локације је у потпуности изграђен. Одатле можете започети итератирати и побољшати крајњи резултат.

ПОГЛАВЉЕ 6: Платформе за изградњу веб локација

Постављање вашег првог сајта? Испробајте бесплатне платформе веб локација попут ВордПресс, Јоомла или Друпал

Поглавље 6: Платформе за изградњу веб локација

  • СкуареСпаце
  • ВордПресс
  • Јоомла & Друпал

Вани има више произвођача веб сајтова него што их можете решити штапом. (Ако сте врста особе која тресе штапове.)

Ок, шале на страну.

Јасно је да, ако немате жељу да научите како да кодирате ствари руком, сигурно су то многа решења која вам могу помоћи.

Белешка. Имајте на уму да све остало о чему смо разговарали у поглављима 1-4 још увек важи овде. Чак и ако идете са решењем за израду веб локација које је врста руке, и даље морате бити опрезни да коначни производ учините пријатељским за кориснике и у складу са циљевима свих. Ти алати за прављење веб локација су управо то … алати.

Почевши од оних које је најлакше схватити:

СкуареСпаце

Једина веб локација која се оглашава током Супер Бовла.

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

Омогућује вам израду класичних веб локација, блогова, чак и продавница е-трговине, чак смо написали и критику о њима. Интерфејс и цео процес његовог коришћења су прилично једноставни за разумевање, а плусови из Скуареспаце-а пружају много занимљивих упутстава. Погледајте их овде.

ВордПресс

Искрено, волимо ВордПресс.

Већину времена је то савршена платформа за изградњу веб странице. Има савршену равнотежу између сложености и лакоће употребе и у основи је бескрајно прилагодљив.

ВордПресс анимација

Такође, ово је тренутно најпопуларнија платформа веб локација од свих. Као што је поделио и творац ВордПресс-а – Матт Мулленвег – ВордПресс сада покреће 25% целокупног интернета. Могу ли сви ти људи погријешити?

У реду, да бисте започели са ВордПресс-ом, у основи вам је потребан само ваш домен и хостинг. Софтвер за ВордПресс сам је потпуно бесплатан.

За почетак, слободно слиједите један од ових стаза:

а) „Пут брзог старта“

  • Идите овде да научите поједностављени начин инсталирања ВордПресс-а и покретања ваше веб странице у поподневним сатима.
  • Изаберите бесплатну тему из званичног директоријума – проверите да ли је у складу са циљевима ваше веб локације и да изглед / дизајн нису далеко од ваше жељене структуре (мало ћете је прилагодити).
    • Проверите та два ресурса да бисте сазнали како да прилагодите постојећу тему.
    • Алтернативно, можете одабрати вишенаменску премијску тему која се може прилагодити помоћу корисног интерфејса (без кодирања). Кс тема је добар пример таквог.
  • Инсталирајте неке од најпопуларнијих и најбољих додатака да бисте добили додатне функције.

б) “Дубина пута”

  • Започните учењем ВордПресс-а путем онлине курса. Треехоусе нуди фантастичну.
  • Изаберите тему и додатке баш као горе. С друге стране, израдите своју тему из темеља.

На крају, ВордПресс је вероватно најсвестранија платформа веб страница на тржишту. Помоћу њега можете направити готово било коју врсту веб локација, не само блогове или једноставне пословне сајтове. Ево листе 47 (!) Различитих начина да користите ВордПресс, само да бисте размишљали.

Јоомла и Друпал

Иако се мало разликују једни од других, Јоомла и Друпал су оба одлична система за управљање садржајем за напредније веб пројекте.

Нису тако снажни дизајнирани, али су високо прилагодљиви и способни да рукују било којом веб страницом коју можда имате у плану.

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

За детаљнији тренинг, на Линда.цом постоје сјајни курсеви, и за Јоомла и за Друпал.

Шта треба да буде спремно након овог поглавља:

  • Први нацрт ваше веб странице је у потпуности направљен, без обзира да ли сте се одлучили за ВордПресс или неку другу платформу.
  • Уверите се да је у складу са вашим почетним циљевима, циљном публиком и да нуди добар УКС.

ПОГЛАВЉЕ 7: Дизајн за мобилне уређаје

Више од 60% људи користи мобителе и таблете за прегледавање веба

Одзивност мобилних уређаја сада је врло важан аспект изградње веб страница, вјероватно више него икад прије.

Ево о чему се ради у читавом издању:

У основи, тренутно више људи користи мобилне уређаје за приступ интернету него икад прије. У ствари, процењено је да је сада више корисника мобилног интернета него корисника десктоп рачунара (75,1% у односу на 52,7%).

Али постоји проблем.

Није сваки дизајн веб страница оптимизиран за гледање на мобилним уређајима одмах кроз капију.

Неки уобичајени проблеми укључују:

  • фонтови су премали,
  • сам распоред се уопште не прилагођава мањем екрану,
  • или технологија која се користи за прављење веб локације није доступна на мобилном уређају.

Ту се појављује идеја мобилне реакције.

Веб локација која реагује одговара на окружење на коме се гледа. Ако је то десктоп рачунар, веб локација се приказује на одређени начин. Ако је мобилни, приказат ће се на други начин.

Ево бољег објашњења: Шта је ово, доврага, веб дизајн?

Дакле, сада би требало урадити ствар да провјерите и провјерите функционише ли ваша веб локација на мобилним уређајима. Употријебите своје уређаје да бисте то провјерили, али испробајте и Гооглеов тест за мобилне уређаје или прескочите алат попут Респонсиве Десигн Тестер.

Ако постоје проблеми, треба да их отклоните.

Нека решења:

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

ПОГЛАВЉЕ 8: Обједињавање свега

Знате основе, сада је на вама ред

Чекај, скоро смо тамо!

Ово је последње поглавље нашег прилично дугог пута.

У овом тренутку би требало да имате изграђену прву веб локацију … Било да је то са ВордПресс-ом, ручно направљеним ХТМЛ / ЦСС-ом, неким градитељем веб локација или било којим другим алаткама које сте одабрали за посао..

Укратко, честитамо! Али још увек треба учинити неколико ствари:

  • Двапут проверите ствари о којима смо разговарали у поглављима 1 и 2. Уверите се да циљеви заиста делују за крајњег корисника и да веб локација не смета.
  • Провјерите структуру кода путем В3Ц услуге провјере маркирања.
  • Проверите да ли на сајту нема проблема са сигурношћу. За то користите скенер Суцури.
  • Добијајте повратне информације од заједнице. Проверите шта други људи мисле о вашем раду. Форуми на Ситепоинт могу бити добри за то.

Ако вам је ово прво читање овог ресурса, онда вас заиста охрабрујемо да му се вратите пар пута и третирате га као референтну датотеку за ваше даље образовање.

Као што смо рекли на почетку, слободно користите ТОЦ и навигацију из поглавља у поглавље и ресурса до извора како сматрате прикладним.

И на крају, радознали смо … који је ваш највећи изазов када је реч о изради веб локација, развоју веб или дизајну? Молимо вас да поделите у коментарима или преко Твиттера. Сви смо уши!

Хвала на читању, сјајни сте!

  • Укупно116
  • Фацебоок116
  • Твиттер0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map