September 21, 2010

What is and How to make a web site или какво и как работи интернет страницита

Най-важното за създаването на един web site и всички други услуги свързани със web site!
Версия: 1.4
comming soon in english
В тази публикация, ще ви запозная с основите за изграждането на интернет страниците.
Всяка една интернет страница е изградена от няколко основни компонента: програмен език и  уеб дизайн. За да може да функционират правилно, те се обслужшат от услугите: уеб сършър и база данни. 
Програмният езикX/HTML, PHP, JAVA, XML, CSS и др. Мислете за него, като за задвижващите елементи по една кола (окачване, гуми).
Web design е самия дизайн на една интернет страниците - менюта, бутони, шрифт, полета, форми за попълване и др. Това е като дизайна на всяка една кола. Това е компонента който контактува директно с потребителя. И накрая някои интернет страници имат по сложна структура и фукционалност. Тези интернет страници се наричат динамични. Това са интернет страници с динамичен контент/съдървание. Най-често такива страници предоставят пазаруване online или база от данни с информация, която се променя или добавя нова. И най-същественото за една интернет страница е web server-а, който функционира като двигателя на една кола. Той кара интернет страницата да се задвижи. Чрез него всички компоненти изграждащи една интернет страница, работат заедно.
За изграждане на интернет страници, често се среща използването на готови системи, чрез които се управлява самта страница. Такива системи се наричат CMS - content management system. Тези системи представляват контролен панел в web базиран interface, чрез който се управляват основните компоненти на страницата. Такива системи са:
Wordpress
Joomla
Magento
Blog
Тези системи също са написани на гореспоменатите програмни езици. Всъщност тяхната структура е изградена от различни компоненти - файлове, взаимно свързани в една обща система. Всеки файл от системата е изграден от компоненти които имат връзка към файловете в самата система.
Като например всяка страница си има CSS (cascade style sheet), който представлява графичната подредба и оформление на картинки, цветове, шрифтове изграждащи страницата. Честа практика е CSS компонента да е отделен файл към, който има връзка:
<html>
<head><title>web site title</title>
<link rel="stlesheet" type="text/css" href="file.css" />
В този пример се вижда, че се използва външен фиайл за архитектурата на дизайна на страницата.

Всъщност всички компоненти са взаимно свързани и заедно карат да работи интернет страницата. Не забравяйте, че всички тези компоненти работят върху платформа. Тази платформа представлява операционната система. Операционната система е като пътищата за един автомобил. Доста често се използва комбинацията от операционна система Linux, web server Apache, page language PHP и DataBase MySQL. Тази комбинация е позната като LAMP стандарт. Нека да разгледаме всеки един компонент Web Server, програмен език и DataBase по отделно.
Web Server
Най-популярния Web Server е Apache. Той се предлага за различни платформи: Linux, Windows и др. Какво прави Apache? Доставя услугата web site/page (интернет страница) до потребителя, така както всеки един от нас я вижда на монитора на своя компютър. Друг известен web server е IIS (Internet Information Service) на Microsoft, който върви с операцтионната систем Windows. Всички web server-и имат главна директория наречена root. Където се съхраняват файловете изграждащи една интернет страница.
Когато отворите вашия web browser (Internet Explorer6/7/8, FireFox, Chrome, Opera, Netscape) и му зададете адреса на вашата любима страница (mail.bg, yahoo.com, google.com, youtube.com), той изпраща запитване за нея до web server-a, който отговарю за съответната интернет станицата. Web server-а отговаря на вашето запитване. Той предоставя достъп на web browser-а до търсената от вас интернет страница. А самия web browser я възпроизвежда.
Вие запитвате уеб сървъра чрез браузъра, а уеб сървъра ви връща отговор в уеб броузъра
Какво всъщност зарежда web server-а? The (source) Code 
Всички файлове които изграждат една интернет страница, са написани на някакъв програмен език. Най-използвания и основен за всички страници HTML - HyperText Markup Language. Всяка интернет страница има следния задължителн код написан на html:
<html>
<body>
</body>
</html>
Тези редове описават, че това файл писан на html и часта наречена body е това което покзва вашия browser. Разбира се може код написан извън частта body, но тя по един или друг начин чрез връзка от други елементи в кода бива възпроизвеждана от browser-а. Има и други програмни езици като споменатите по-горе PHP, JAVA, XML, CSS. Всички те си имат своята специфичнност. Друг пример е PHP. Всеки код PHP има своята отличителност:
<?php
?>
А ето как би изглеждала комбинация от HTML и PHP:

<html>
<body>
<?php
echo "Hello World";
?>
</body>
</html>

Или пък да вземеме пример с комбинация от HTML и JAVA Script.
<html>
<body>
<script type="text/javascript">
document.write("Hello World!");
</script>
</body>
</html>


CSS е това което вкарва в ред визията на една интернет страница. Разбира се един web site не е задължително да е написан на всички тези езици. Може да е използван само един, може да са използвани два или повече езика в комбинация.

<style type="text/css">
body {
background-color:#000;
padding:20px;
}
a:link {text-decoration:none;}
</style>

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

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

За базите данни мислете като за таблици. Таблици изградени от клетки и редове, където е записана информация. Всички тези клетки и редове са свързани в една обща структура. Мислете за базите данни, като за пътна карта или знаците по пътищата по които се оринтирате когато искате да стигнете до желания от вас маршрут. За базите данни мислите като за вашата бибилиотека от книги или от дискове. Базите данни имат подобна идентична структура и функционалност. Това е услуга където информацията е подредена и структурирана. Най-известните такава система за база данни са MySQL и PostGreSQL.
Hosting
Всичко това е средоточено на едно място, наречено hosting. Какво представлят hosting-ите? Това може да е един сървър или няколко, на който/ито е инсталирана операционна система (Windows, Linux), пусната е услугата web server (Apache, IIS), на дисковоте пространство са записани файловете, които изграждат интернет страницата и дори може да има масив от база данни базиран на MySQL
Всеки хостинг има един или няколко сървъра. Може на един сървър с операционна система Windows да има пусната услуга web server IIS, на дисковото пространстов да са записани файловете изграждащи интернет страницата (файлове написани на програмни езици, текстови файлове, картинки и др.), както и да е пусната услуга за база данни. Всички тези услугу могат да бъдат разделени на различни. Като на всеки може да има различна операционна система. Само на един сървър е нужно да има услугата web server или MySQL, но може тези услуги да бъдат предоставяни и от останалите сървъри. Дори и сами файлове изграждащи интернет страницата може да са друг сървър с друга операционна систем, която не предоставя друга услуга, освен FTP. FTP е вид достъп до файловата система на операционната система. Този достъп се извършва отдалечено по мрежата, към която в свързан сървъра. Също така всички сървъри предоставящи различните услуги по отделно, могат да работят като един сървър.
Ето съдържанието на една интернет страница на hosting

Този hosting се упрвлява и поддържа от сустемни администратори. Те не са длъжни да знаят обаче да работят и да пишат на програмни езици или да изграждат бази от данни. Но пък трябва добре да познават операционните системи на които са базирани hosting-ите, както и да познават добре работата на web server-и. Също така един дизайнер на интернет страници не е длъжен да знае как работи операционната система на която е базиран hosting-а или как работи web server-а. Но трябва добре да уме да работи с програми за графична обработка (Adobe Creative Suite collections - Photoshop, Dreamweaver, Flash, Illustrator, както и CoreDraw и др.). Програмистите пък трябва да умеят да пишат на програмните езици, код който да работи в синхрон, синтензиран код, който задвижва интернет страницата. Хората които изграждата базата данни за съдържанието е нужно да умеят да работата с MySQL, PostGreSQL или дори Oracle.

CMS системите представляват файлове с готов написан код, които предоставят среда за управление на интернет страницата. Тази среда е web based. Това всъщност е система за управление на вашата интернет страница. Също така с помоща на тези системи чрез потребителския интерфес, когато с помоща му създавате интернет страница, CMS всъщност генерират код, който изгражва вашата интернет страница, разработена от вас на CMS система.
Domain name - домейн име.
Какво е това и трябва ли ми? На домей името гледайте като на регистрационния номер на автомобилите. Или дори като на вашето собствено име. Yahoo.com, Google.com, YouTube.com, Gmail.com, ABV.bg, FACEBOOK.com, това са домейн името които са асоцирани със съответните интернет страници. Yahoo и Google са световно известни търсачки както и портали, информационни страници и дори имат услуги за електронна коренспонденция - e-mail. Какво всъщност представлява едно домейн име?













DNS сървър...
Това са сървъри на интернет доставчици или на интернет регистъри на имена. Тези сървъри предоставят услугата Name Resolution. Какво означава това? В интернет пространството, компютрите се регистрират със собствен IP адрес. Това е все едно адреса на вашата къща, на улицата на която се намира. Но както се сещата в една къща могат да живеят много хора. Но всеки ползва само този адрес, който е и адреса на къщата.
Това което прави всъщност DNS сървъра (услуга), е да преобразува запитванията за domain имена (имена за интернет адреси - интернет страници) в IP адреси, разбираеми за компютъра. Както и обратното, да преобразува IP адреси в domain име. Но това не означава, че ако напишете  yahoo.com или google.com DNS сървъра (услугата) изчислява някаква еквивалентност в цифри (IP адреси) на тези имена. DNS сървъра отговаря на запитването "Знаеш ли адреса на yahoo.com, където той се намира (хоства)?" Т.е. някъде в интернет пространството е адреса на yahoo.com, който има предварително зададен IP адрес.
Ето и самия процес на запитване и отговор:
Изписвайки името на интернет страница (domain name) която искате да отворите, в адресното поле на вашия browser (IE, FireFox, Chrome, Safari), вие изпращате запитване за определено име. Това запитване отива до маршрутизатора на вашия интернет доставчик, опътено от вашия компютър. След което маршрутизатора на интернет доставчика, има предварително записани адреси на DNS сървъри, които може би знаят адреса на yahoo.com. След което вашето запитване за пренасочва към някои от тях. И така запитването пътува през интернет мрежата, докато най-накрая достигне до DNS сървъра, който отговаря за адреса на yahoo.com. Този DNS сървър разбира се може да отговаря за хиляди адреси на имена на интернет страници (domain name). Когато вашето запитване достигне до DNS сървъра, който отговаря за yahoo.com, бива препратено до web сървъра, който отговаря за страницата на yahoo.com. След което вашето запитване се връща до вашия компютър с IP адреса на страницата на yahoo.com, който ще бъде използван от вашия browser, за да може да отваря страницата на yahoo.com за вас. За улеснение, вашето запитване предоставя тази информация и на маршрутизатора на вашия интернет доставчик за бъдещи запитвания. Целия този процес с нормална интернет връзка се случва за около 3-10 секунди. Времето в комютрите върви по доста, различен начин.

Какво първо да направа ако искам да си направа интернет страница?
Първо да осмисля идеята ми за интернет страница. Дали ще е написан изцяла на един програмен език или в комбинация от няколко. Дали ще съдържа динамично съдържание в бази данни. Дали интернет страцнита ми ще е управлявана от CMS система за мое улеснение, тъйкато аз нямам време да научавам програмни езици и в детайли и скам да използва готови шаблони (template) за wordpress, joomla, blog. Какво ще съдържа моято  интернет страцниа? Към какви потребители ще е ориентирана? Как ще поддържа популярността й в интернет пространството.
Второ на каква платформа ще работи. Windows или Linux? Съответно кой web server ще обслужва моята интернет страница Apache или IIS?
Трето къде ще е хостната моята интернет страница? На отделни сървъри или на един предоставящ всички услуги необходими за пълната работа на моята страница? На моя домашен компютър който ще го превърна в сърсър. На него ще инсталирам web server или ще използвам този който се предоставя с операционната система.
Четвърто аз ли ще програмирам и ръчно ще управлявам моята интернет страница? Или ще използвам CMS ситема за управление и ще потърса template с подходяща тема, който ще използвам за графично уформление на страницата или ще си подготвя сам template? Ако аз реша да напиша изцяло страницата, тя на един езки ли ще е написана или ще трябва да е в комбинация от два или повече и кои програмни езици ще иползвам - HTML, PHP, XHTML, XML, JAVA, CSS?
Когато става въпрос за комбиниране на няколко програмни езика в изграждането на  интернет страница, най-често се използва когато единия език не дава достатъчна свобода и гъвкавост за разработката на интернет страницата. В наши дни тези комбинации са нещо нормално. Самият HTML присъства в кода на всички интернет страници. HTML е базов език за всички страници.  Всички останали програмни езици, допълват кода на една интернет страница със своята гъвкавост. Разбора се може да намерите интернет страница в кода на която ще присъства само един програмен език (това най-често са статични HTML страници). Може да срещнете статична интернет страница, с основа HTML и добавен един или повече JAVA скриптове, които допълват дизайна (мигащи, светкащи или преминаващи надписи) или добавят динамични елементи (елементи от страницата, които се обновяват или се биват променяни от посетителите, също така изкачащи прозорци и други рекламни съобщения) към страницата  Комбинацията от HTML и PHP, най-ччесто се прави като се използва за основа HTML и се добави гъвкавоста и способността на PHP да се свързва с бази от данни - MySQL. Самите CMS, са системи изградени от няколко програмни езика в комбинация.

Как най-бъзро и безплатно да си направа интернет страница?
1. След като сте измислили името на домейна за вашата интернет страница, можете да използвате един от безплатните регистери на домейн имена, като например DynDNS. Това е ресигистър за безплатно ребигистриране на суб-домен, към тяхните домейни. Безплатно е, макарче регистъра предлата и платени услуги. Регистрирането става бързо и лесно. Ето един пример за регистриран домейн в DynDNS - http://smedia.webhop.com
а). smedia e вашето име на домайне, който се явява под домейн
б). webhop е основния домейн към който регистрирате вашето име за интернет страница
в). .com е корена на пълния домейн.
2. Следващата стъпка е хостинг. Безплатен хостинг е 000webhost. Съшо предлага както безплатни услуги така и платени. Хостинга има доста удобен web базиран контролен панел за управление на вашия хостинг, където ще се намира страницата ви.

3. И така първите два компинента са налични. Следващата е стъпка е самата интернет страница. Това са дизайна, който е изграден от "тексотви" файлове написание на програмен език, картинки, фласш анимации и други елементи на дизайн, взаимно свързани в една структура. И най-същественото, съдържанието на една страница - контента. Информацията която ще предоставя самата страница. Разбира се по-голямата част е текста, както и (но не тези, които са включени в дизайна), снимков материал и дори аудио и видео файлове достъпни през интернет страницата. Всичко това се намира на хостинга. А е достъпно за потребителите като интернет стрница, бладорение на web server-а.
Самите CMS системи както споменах, представляват готови структури на интернет страница, към които могат да бъдат добавяни изображения и текст, както към дизайна на страницата, така и към съдържанието.
4. Блог системата сабира в себеси първите две стъпки: web server, design. Съдържанието си добавя. Блог системите предоставят готови template-и за дизайн, който може да бъде сменян, променян или дори да бъде заменен от ваш собствен.
5. Ако вашата интернет страница искате да бъде динамична, то тя най-вероятно ще се нуждаен и от база данни. Тогава вече компонентите стават три: web server, hosting и база данни. Безпралтните хостинги предоставят достъп до услугата база данни, която е необходима за създаването на интернет страница със динамично съдържание.
6. Друг варянт е да изпозвате совбоден хостинг с услуга, база данни, на който да инсталирате WORDPRESS или някоя друга CMS.
7. Можете да започнете да водите blog, който в последствие да се превърне във ваша интернет страницата. За голямо щастие, Blogspot са направили видео уроци за улесние на потребителите на тяхната блог система. Изгледате видео уроците от youtube.com канала на Blogger и за около един ден вече ще имате блог страница, в която да пишете и качвате ваше съдържание (текст, снимки и връзки към видео материали).

В домашни условия! - за напреднали и любознателни
Малко преди да се появат в интернет свободните хостинги, се появиха приложения, които комбинират в себеси услугите web server и база данни, които могат да се инсталират на домашния ви компютър, който пък от своя странина ще ви предостави услугата хостинг. XAMP това е програма комбинираща в себеси услугите web server и база данни. XAMP може да изтеглите и от офицялниата страница и да инсталиране на вашия компютър. Когато XAMP, бъде инсталирана на вашата система, тя ще стартира web server и сървър за база данни. След което трябва да направите нужните настройки за всяка една от услугите, което е възможно през контролния панел на XAMP. И така имаме си услугите web server и база данни. Какво друго ни трябва? Самата интернет страница, която също се намира на вашия компютър, поствена в коренната директория на XAMP, зададена предварително от вас при инсталацията на XAMP. 
Последното нещо което остана е, вашата интернет стрница да бъде достъпна по интернет от посетителите. За да могат те да посещават вашата страница, така както биха я посещавали ако бъде качена на хостинг, трябва да вашия компютър да е включен към интернет (което в наши дни е като тока за електроуредите) и съответно да имате IP адрес. Разбире за IP адреса може да попитате вашия интернет доставчик. В почето случаи той бива динамичен, което означава, че на определено време се мени, което няма да е удобно за вашите посетители на страницата. Тъй като всеки път трябва да знаят новия ви IP адрес. Има случаи когато интернет доставчиците предоставят статичен IP адрес, което значи, че винаги вашият компютър ще отговаря на един и същ IP адрес в интернет. Но какво означава това? Самият IP адрес представлява цифри, които са специфични.
Едва ли това е удобен начин за име на интернет страницата ви. Или по-точно казано, няма да е много лесно да запомнят вашите посетите или такива бъдещи, вашия IP адрес. Затова може да използвате услугите на някой домейн регистер платен или безплатен като DyDNS. Също така е възможно да използвате link-преобразователя на Google Goo.gl. Този инструмент превръща всяка връзка във връзка с начало goo.gl и след това код от цифри и букви. Но той също не е лесен за запомняне, но е по-кратък. Също така Google ви дава възможност да следите броя click върху преобразувания връзка.

Обобщение.
Всъщност ако все пак имате въпроси, по статията или неща които бихте искали да ви бъдат разяснени може да споделите в коментарите към тази статия. Но сега ще се опитам накратко да разкажа отнов това което се опитах да обясна в по-горните редове.
Web site/page е изграден от файлове които за да функционират като web site/page са написани на програмен език HTML, PHP, JAVA/java script, CSS, .NET и др. Те са свързани помеждуси, като изграждата структурата и design на един web site/page. Към всеки web site/page може да бъде добавено като съдържание, текст, изображения, снимки, ауди и видео файлове. Web web site/page се възпоризвежда от web browser-ите като IE6/7/8, FireFox, Chrome, Safari, Opera и др. За да може web site/page да бъде зареден от web browser-а, се грижи услугата web server, намираща се на сървър на hosting. Такива програми са Apache, IIS. Самият hosting освен web server, предоставя и други услуги като FTP, DataBase и други. Също така може да използвате програми предоставящи до тука споменатите услуги в себесе. Такава програма е XAMP.
Предлагат се системи за генериране, управление, обновяване и структуриране на web site/page, наречени CMS. Такива са: WORDPRESS, JOOMLA, BLOG system, MAGENTO.
Web site/page  е добре да бъде придрожен от име наречено domain name. Това име представлява адреса на интернет страницата в интернет пространството. Това име може да бъде закупен от интернет регистрите като GoDaddy или да бъде регистрирано в безплатните регистъри като DyDNS.
Надявам се с тази статия да сте си изградили правилна представа за това как работят интернет стрниците, от какво са изградени, кои услуги биват засегнати в тяхната разработка и дейност и кои са най-важните моменти за изграждането на една интернет страница.
Какво представлява сама по себеси интернет страницата?
Този въпрос незнам колко от вас си го задават, но трябва да му отговориме. Той е свързан със същността на всяка интернет страница.
Самата интернет страница без съдържани, контент, информация не представлява нищо друго освен един празен екран на монитора. Всяка интернет страница има инфомация, която е насочена към определан  аудиториа или към всички посететители. Интернет страницата е като книга, като списание, като аудио или видео компакт диск, като дневника който си водите, като
тефтера в който си водите бележки, като рекламните брошири, като вестниците които се продават на бутката пред вашия блог, като библиотека пълна с книга. Дори може да предоставят услуги като магазин от който можете да си поръчате дрехи, храна, спортни съуражения. Има дори интернет страници предлагащи развлечения като малки игра които ползвате през свободното си време на работа ;) Има и информационни страници в които можете да намерите инфомармация за предсотящи филма, да прочетете клюки за известни личности, новини или дори да разберете какво ще е времето. Съществуват интернет страници в полза на обществото предлагащи услиги като общинска информация или извършване на справки и изплащане на такси. През странците на вече може всички банки е възможно да проверите движенито на на вашите спестявание, сметки , дебитни карти и дори да извършвате разплащане. Доста доставчици на телевизия, интернет, телефонни оператори, предлагат информация за вашата сметка и дори извършване на плащания на услугите предоставяни от тях. Университети предоставят в своите интернет страници инфомация за прием, инфомрация за учащи студенти както и вече навлезналото дистанционно убочение, което се извърша точно през университетските интернет страници.
Интернет страниците са едни извори на информаци и предоставящи различни видове услуги.

1 comment:

  1. Саше, всичко хубаво, ама имаш доста правописни грешки на български, спелчекър ?

    ReplyDelete