Creating Effective Web Pages

Во рамките на предметот Учење на далечина, јас изработив интерактивна дигитална содржина во облик на SCORM пакет. Мојата тема беше Creating Effective Web Pages. 

Creating Effective Web Pages.

Случај: Полициската станица во Lakeside

Во полициската станица во Lakeside се вработиле 18 полициски службеници, шест со полно работно време диспечери и 10 други вработени со полно работно време на одделот патроли во Lakeside, Illinois, мала населба надвор од Chicago. Полицајците обезбедат услуги кои не ги праваат полицајците  во повеќето големи метрополински области, како што се служење како чувари во училиштата,како ментори на деца кои одат во локалните училишта, како и обезбедување на контрола на сообраќајот на градски настани. Шефот на полицијата, Mary Silva, смета дека образованите програми за заедницата се важен дел од обезбедувањето на ефективни полициски патроли и услуги. Најновата програма за образование на заедницата на шефот Mary Silva е серија на часови во самоодбрана. Овие часови се насочени кон одредени групи, вклучувајќи ги и децата, постарите жители, жени, како и луѓе со посебни потреби. Иако, стапката на криминал во Lakeside е на ниско ниво, многу жители работаат во Чикаго, каде што стапката на криминал е поголема и луѓето во овие групи се полесни цели за напад .Шефот на полицијата сака да се создаде веб-сајт на кој ќе се објавуваат информации за полицијата. Потребна ќе биде и вашата помош за да се разберат полесно недостатоците и проблемите кои се вклучени во создавањето и одржувањето на веб-страницата. Ќе се создаде страница во која ќе биде опишана програмата за самоодбрана.

Сесија 8.1 визуелен преглед

Што е HTML ,а што е XHTML

  • HTML(HyperText Markup Language) - претставува основен метод за приказ на податоци на веб страницата.
  • Претставува полуструктуриран jазик коj е дефиниран за приказ на податоци во рамките на веб страницата.
  • Постои множество на дефинирани елементи кои може да се вгнездат во рамките на веб страницата.
  •  XHTML(Extensible HyperText Markup Language) преставува реформулациjа на HTML за да биде компатибилен со XML стандардот
  • Страниците напишани во HTML не мора да значи дека имаат правилен XHTML
  • Препорачливо е користењето на XHTML поради подобра контрола врз кодот
  • Документите со правилна XHTML синтакса се добро формирани XML документи

Што е HTML ,а што е XHTML

 


Разлики помеѓу HTML и XHTML

Тагови и атрибути

HTML (како и сите XML) документи се состои од дефинициjа на документот (Document Type Definition) и елементи. Елементите може да се вгнездуваат како и да имаат одредени атрибути. Еден елемент се состои од таг, атрибути за тагот, содржина на елементот и соодветен таг за затварање Доколку елементот нема содржина тогаш може да се отвори и затвори елементот во еден таг.

Правила за добро формиран XHTML

  • Не треба да има празни места или нови редови пред XML декларациjата.
  • Секоj елемент мора да има отворен и затворен таг, освен ако е празен елемент.
  • Ако е празен елемент, мора да содржи затворачка цртичка пред краjот (пр. <br />).
  • Сите отворени и затворени тагови мора да се коректно вгнездени. (пр. <p>I can <em>fly</em></p>
  •  Не треба да има празно место ме´гу симболот <и името на елементот.
  • Елементот не може да има два атрибути со исто име.
  • Сите атрибути треба да се меѓу наводници (единечни или двоjни, но да се употребуваат конзистентно).
  • Да нема празни места пред или после наводниците
  •  Коментари и инструкции за процесирање не може да има во таговите.
  • Не смее да има необележени <или & симболи во податоците на елементот или атрибутот.
  •  Документот мора да има единствен основен елемент коj го опфаќа целиот документ.
  • Мора да се поjавува само еднаш во документот.
  • Имињата на атрибутите и елементите мора да се со мали букви (пр. <img> а не <Img> или <IMG>)
  • Сите атрибуити мора да имаат експлицитна вредност (пр. checked="checked")
  • Употреба на id наместо name како идентификатор
  •  Скриптите мора да се содржат во CDATA дел со цел да се сметаат како текст и да не се парсираат како XML <script type="type/javascript // <![CDATA[ ... JavaScript goes here... // ]]> </script>
  • Не може елементи p да се вгнездуваат (пр. <p> <p> Параграф </p></> не е дозволено)
  • Не може елементи a да се вгнездуваат
  • Не може елементи form да се вгнездуваат
  • Не може елементи label да се вгнездуваат
  • Елементот pre не смее да ги содржи елементите img, object, big, small, sub и sup
  • Елементот button не смее да ги содржи елементите input, select, textarea, label, button, form, fieldset, iframe и isindex

Што се поставува во head тагот

head делот е првата информациjа од html документот коjа се доставува до корисникот.

Освен името на документот поставен во title тагот, други тагови во head делот се:

  • base – дефинира default адреса за сите линкови на документот
  • link – овозможува поврзување со екстерен ресурс
  • meta – метаподатоци за документот
  • script – внесување на клиентски скрипти
  • style – дефинирање на стил за документот

Што се поставува во body тагот

  • Во body тагот се сместува целата содржина коjа терба да му се прикаже на корисникот
  • Иако за него се дефинирани атрибути, тоj метод на работа се смета за застарен (HTML 4), односно забранет (HTML 5)
  • Сите атрибути може да се пристапат преку CSS или JavaScript
  • Мора да има само еден body таг во рамките на HTML документ или воопшто да нема, ако се работи со рамки

Креирање на head и body секцијата

Meta тагот

  • meta тагот овозможува да се внесат метаподатоци за HTML документот
  • Деловите во  тагот не се рендерираат на екран
  • Секогаш се наоѓа во head делот на една веб страна
  • Има огромна примена, пред се при SEO (Search EngineOptimization), емулирање на употребата на HTTP Responseхедерот, додавање на дополнителни атрибути и сл.

Коментари

Наслови h1...h6

Листи

Постоjат 3 видови на листи во HTML:

  • подредена (ol)
  • неподредена (ul)
  • дефинициска (dl)

Како елементи подредените и неподредените листи имаат li (listitem) елементи, но може да вгнездуваат други листи, па и други HTML елементи

Табели

Параграфи

Преформатиран текст <pre>

Форматирање на текст

Слики

Линкување на документи <a>

Секоjа веб страница си има адреса (URL)

Линковите ни овoможуваат да поврземе различни документи.Со кликнување на линкот се префрламе од една страна водруга или се преместуваме во рамките на истата страна Преддефинирано, линковите се рендерираат на следниовначин:

  • непосетен линк е подвлечен и син
  • посетен линк е подвлечен и виолетов (пурпурен)
  • активен линк е подвлечен и црвен

Наjважен атрибут при дефинирање на линк е „href“. Овоjатрибут кажува кон кое URI ´ке покажува линкот


Како се „испорачуваат“ веб страниците кaj т.н. статички веб саjтови

Саjтови каj кои нема обработка на податоци од клентската страна и каj кои информациите се од статичен карактер (сите корисници ги гледаат истите податоци)

Како се „испорачуваат“ веб страниците кaj т.н. динамички веб саjтови

Страниците по потреба се генерираат за секоj посетител иподатоците кои се прикажуваат не се исти за секоj посетител.

Користење на алатки за менаџирање на Веб страната

Microsoft Expression Web


Dreamweaver


Скрипти (SCRIPTS)


  • client-side scripting се однесува на програмите (скриптите) кои се извршуваат на клиентската страна, при вчитувањето на web-страниците, во рамките на прелистувачот (web browser) – (client-side scripting languages: JavaScript, VBScript, AppleScript, Perl и др.)
  • Server-side scripting се однесува на програмите (скриптите) кои се извршуваат директно на web-серверот, при што се генерираат динамички HTML страници. Оваа технологија вообичаено се користи за дизајнирање на интерактивни web-страници, кои во позадина се поврзани со бази на податоци или слични складишта на податоци. – (server-side scripting languages: JSP (Java Server Pages), ASP, ASP.NET, PHP, Perl, и др.)

 

Mултимедиjални додатоци

  • Претставуваат широк спектар на дигитални податоци како анимации, аудио, видео . . .
  • Додатоците се посебни датотеки
  • За користење на мултимедиjалните додатоци, треба да се инсталира соодветен додаток (plug-in)
  • Додатоците се бесплатни, меѓутоа ако корисникот ги нема инсталирано, ќе треба да ги инсталира, што доведува до дополнителна нервоза и наjчесто треба да се напушти вашата страница (прашање е дали воопшто ќе се врати...)
  • Со воведувањето на новите технологии (како HTML5), се очекува дека додатоците нема да бидат „потребни“.

Mултимедиjални додатоци

Креирање на анимирана содржина

Flash Player


Adobe Illustrator


Едитирање на слики

Растерски слики

  • Adobe Photoshop (стандардот при обработка на растерскислики)
  • GIMP (Open Source алтернатива на Photoshop)
  • Paint.Net
  •  и уште многу останати . . .

Векторски слики

  • Adobe Illustrator (стандардот при обработка на векторскислики)
  • CorelDraw (алтернатива на AI)
  • Inkscape (Open Source алтернатива)
  • и уште многу останати . . .

Сервери и хостирање

Под веб сервер се подразбира и хардверскиот склоп и соодветниапликации кои треба да се конфигурирани за да може да сеопслужуваат корисниците. Хардверски гледано, веб серверможе да е секоj компjутер. Софтверски тоа е компjутер коj имаинсталирано апликациjа за комуникациjа со веб клиенти.

Потребни работи за веб сервер се:

  • статички веб саjт - веб сервер + интернет конекциjа
  • динамички веб саjт - веб сервер + интернет конекциjа- апликациски сервер (може да биде посебна машина)- база на податоци (наjчесто треба да е посебна машина)- страниците по потреба се генерираат за секоj посетител иподатоците кои се прикажуваат не се исти за секоj посетител.

Веб Сервери

Задачата на веб серверите е да го примат барањето одпосетителот, соодветно тоа барање да го опслужат (статичкисаjтови) или да го проследат до апликацискиот сервер(динамички саjтови).

Веб серверот не влиjае на тоа како изгледа веб станицата оддизаjнерски аспект.

Веб Прегледувачи

Различни веб прегледувачи:

  • Mozilla Firefox
  • Microsoft Internet Explorer
  • Google Chrome / Apple Safari
  • Opera
  • Konqueror, Netsurf, Elinks, w3m, Lynx - ако имате ептен слободно време

Алатки за инспекциjа на веб страни (Firebug, Developer Tools,Webkit Inspector, Dragonfly).

Останати алатки (Web Developer, Measure Tools, JavaScriptDebugger, . . . ).

Internet

Document Object Model (DOM)

  • DOM претставува конвенциjа за репрезентациjа иинтеракциjа со обjекти во HTML, XHTML и XMLдокументи.
  • Веб прегледувачите користат алатки за да се парсираатHTML документите во DOM.
  • Целта на DOM е да се креира структура коjа ´ке можеефективно да се искористи од страна на соодветнитебиблиотеки (JavaScript) за динамички да се провери илипромени веб страницата.

Внатрешна структура на веб прегледувач

Кориснички интерфеjс – контроли кои овозможуваат комуникациjа со прегледувачот без делот каде што се прикажуваат веб страните.

Енџин на прегледувачот – ги координира акциите помеѓу енџинот за рендерирање и корисничкиот интерфеjс.

Енџин за рендерирање – е одговорен за приказ напобараната содржина.

Мрежна комуникациjа – дел одговорен за комуникациjасо серверите.

Интерпретер на JavaScript – задолжен за извршувањена JavaScript команди.

Зачувување на податоци – одговорен за траjнозачувување на податоците на диск.

Позадински кориснички интерфеjс – одговорен за пристап до UI елементите на ОС

Структура на веб саjт

Објавување на веб сајт

1.Што значи кратенката HTML?

  • HyperText Markup Language
  • Extensible HyperText Markup Language

2.Какви типови на web-страници постојат?

  • статичка web-страница
  • динамичка web-страница
  • виртуелна web-страница
  • конгитивна web-страница

3.Кои тагови се користат за дефинирање на заглавија (headings)?

  • <h1> HTML </h1>
  • <h2> HTML </h2>
  • <h9> HTML </h9>
  • <h8> HTML </h8>

4.Кој таг се користи за креирање hyperlink?

  • <a href="url">Link text</a>
  • <b href="url">Link text</b>
  • <c href="url">Link text</c>
  • <d href="url">Link text</d>

5.Сликите во HTML се дефинираат со тагот <img> ?

  • Да
  • Не

6. Кој таг се користи за да биде текстот со bold (здебелени) букви?

  • <b> HTML </b>
  • <i> HTML </i>
  • <u> HTML </u>
  • <sub> HTML <sub>

7.Block елементите почнуваат во нов ред и може да содржат

  • Да
  • Не

8.Inline елементите дефинираат текст или податок во документот

  • Да
  • Не

9.Видови на листи во HTML се:

  • подредена (ol)
  • неподредена (ul)
  • дефинициска (dl)
  • сите наведени

10.Имињата на атрибутите и елементите мора да се со мали букви

  • Да
  • Не

11.Кои елементи не може да се вгнездуваат?

  • елементи a
  • елементи form
  • елементи label
  • не постои вгнездување

12.Елементот pre не смее да ги содржи елементите?

  • img
  • object
  • big
  • сите наведени

13.Strict DTD ги вклучува сите застарени eлементи за да има компатибилност со застарените страни кои повторно се искористуваат. Застарените елементи се можни, но добро е да не се користат.

  • Да
  • Не

14.HTML 5 е компатибилен со претходните верзии на (X)HTML

  • Да
  • Не

15.Дозволени елементи во meta тагот се:

  • content
  • name
  • scheme 
  • нема дозволени елементи