Logo



Omeragic on the web

Opcenito

Prije nego zapocnemo govoriti vise o samom webdesignu mislio sam da bi bilo korisno upoznati se opcenito sa pojmom interneta, web stranica i webdesigna. Web stranica jeste naime jedna prezentacija koja je napravljena kako bi se neko predstavio na internetu bilo da je taj neko privatna osoba, kompanija, institucija ili bilo ko a zamislja da bi njegovi podaci mogli interesovati nekoga drugoga. Za kreiranje prezentacija imamo jako puno alata recimo PowerPoint je jedan od najpoznatijih, mislim na prezentacije lokalnog tipa koje napravimo na osobnom racunaru pa na nekom skupu pomocu prezentacije predstavimo nasu kompaniju ili ustanovu.

Web prezentacija jeste isto to samo napravljena drugim alatima i predstavljena globalno, mislim tako da je moze vidjeti svako na internetu. Prije nego sto kreiramo nasu prezentaciju moramo obezbjediti osnovne predpostavke i to:

Web stranicu bilo da se ona pokrene na vlastitom racunaru ili na nekom serveru pokrece u principu jedna aplikacija /serverska aplikacija koja se naziva iis /Internet Infornation Services/ aplikacija u nekom od Windows Operativnih sistema. Na web serverima tipa Linux je to opet aplikacija Apache HTTP server ali princip je isti. Znaci to opet da nasu stranicu kopiramo na neki od servera ili web hotela bilo da je to Windows ili Linux kako bi ista bila na dohvatu web aplikaciji.

IIS Zakretni fajl starnice mora biti naziva index.html ili default.html ili nemora to biti .html moze i .php ili .asp ali ime mora biti index. ili default. Naravno da se stranica moze zakrenuri sa bilo kojim imenom medjutim to onda moramo podesiti u samom iis-u ili kazati da ce web stranica kao zakretni fajl koristiti bla, bla.

Web stranica se kreira jezikom koji je razumljiv web citacima ili Internet Exploreru naprimjer a to je HTML kodiranje. HTML kodiranje ili tagovi drze ustvari strukturu stranice ili odredjuje glavne dijelove stranice kao zaglavlje stranice, tijelo stranice itd.

Kad smo odrediti ili registrirali web adresu /domain i povezali web adresu sa nasom stranicom ostaje nam samo da kopiramo nase fajlove stranice na server i to je to. Kad smo startali nas Internet Explorer i upisali ime trazene stranice mi smo poslali jedan Request /zahtjev web serveru trazeci da nam kopira i posalje trazenu stranicu. Isti to cini i web stranica se lageruje na nas racunar kao privremeni, povremeni fajlovi u nasem profilu a odatle se pohranjuje u radnu memoriju racunara te biva prikazana na nasem ektanu u otvoru ili prozoru naseg Internet Explorera. To je ustvari tehnika koja stoji iza kominikacije Internet pretrazivaca i web servera.



Webdesign te alati za kreiranje web prezentacija


Webdesign

Internet i danasnje mogucnosti komunikacije su u poslednjoj deceniji napravili pravu revoluciju u nacinu prezentacije preduzeca i ustanova te njihovom povezivanju ili popularno kazano umrezavanju u jednu cijelinu. E upravo to ce biti tema ovog poglavlja dakle webdesign ili internet prezentacije i njihova izrada te alati i tehnike koji se koriste u te svrhe.

Na stranici w3schools.com naci cete vjerovatno najvise na mrezi kad se radi o edukaciji i tehnikama koje se primjenjuju kreirajuci jednu web stranicu. Tu su razni kursevi iz alata ili aplikacija koje se koriste na mrezi ali i resursi koje mozete iskoristiti prilikom ucenja ili programiranja.

Za one koji se tek upustaju u ovaj posao napravio sam dole spisak razlicitih kodnih rijesenja koji se danas koriste kod kreiranja Web stranice. Amatersko kreiranje stranice ne trazi naravno poznavanje ovolikog broja programskih jezika ali je dobro znati sta koja od kratica dole znaci makar.

Mnogi koriste danas takozvane CMS /content management source/ ili open source sisteme kao Drupal, Joomla ili Wordpress. Navedeni sistemi se koriste tako sto se sve karakteristike web portala kao i kreiranje novih stranica radi u kontrol panelu tako da korisnik i nemora znati puno o samom web programiranju. To se ustvari i nemoze nazvati programiranje nego administracija ili administriranje gotovih alata.

Misljenja sam da ako se hocemo baviti web programiranjem onda se moramo nauciti sta to ustvari predstavlja i nauciti se programiranju upisivanjem cistog koda. Kakvu ili koju god tehniku kod programiranja koristili svejedno ce nam trebati odredjene korekcije u samom kodu pa samim tim znaci da moramo znati i kako funkcionise ili kako se koriste pojedini dijelovi koda.

Inace postoji mnogo raznih alata koji mogu pomoci da se napravi neka stranica ili neki element na stranici a najkompletniji je zaista Adobe Dreamweaver. Sad je aktuelan verzije CC. Kako god da kreiramo neku web prezentaciju moramo u nekom segmentu moci korigirati i kodni dio stranice. Ja cesto koristim obicni Notepad ++ i on mi sluzi svrsi makar je Adobe Dreamweaver alat koji se nemoze porediti sa ostalima

Web design jeste izuzetno obimna materija samim tim sto se koristi veoma veliki broj tehnika i alata prilikom kreiranja web stranica i bilo bi potrebno napisati cak nekoliko knjiga da bi se objasnilo ili opisalo do u detalje kako i sta. Nadam se da ce ova skola biti makar jedan korak u pravom smjeru do jednog web programera.



Alati za webdesign


HTML-kod

Osnova kodiranja na Internetu. To je ustvari kratica za Hyper Text Markup Language i osnovu kodiranja jedne Web stranice cini upravo ovaj text ili cijeli jezik. Sve Web stranice na Internetu su u osnovi napravljene u ovom jeziku koji izmedju ostalog omogucava kreiranje linkova na druge stranice i tako dalje.

DHTML

Kratica za Dinamicki HTML a HTML ko HTML, njega smo vec spomenuli. Uz pomoc ovog kodiranja mozemo napraviti recimo pokretne img i preciznije odrediti poziciju na ekranu za neki objekat. Mozemo recimo napraviti jedan text preko img sto u obicnom HTML kodiranju nemozemo i mnogo vise.

XML

Kratica za Extensible Markup Language. Jedan skup kodnih finesa uveliko slican HTML samo sto se moze napraviti mnogo vise sa ovim jezikom nego obicnim HTML.

CSS

Cascading Style Sheets, jeste ustvari jedan dio Dinamickog HTML. Odlika ovog nacina kreiranja Web stranica je da mozemo pomocu CSS kreirati jednake formate recimo teksta, linkova i tako dalje Formatiranje mozemo napraviti kreirajuci jedan fajl te stranice linkamo do takvog fajla ili svaku stranicu ponaosob. CSS funkcionise dobro na vecini web citaca a sada je aktivan CSS verzije 3. Po menimnajbolja stranica za opis CSS formatiranja jeste CSS Tutorial.

CGI

CGI, Common Gateway Interface, nije uistinu neki programski jezik kao HTML ili neki drugi nego je mozemo to reci pomocno ssredstvo za kreiranje formulara na Web stranicama. CGI script omogucuje komunikaciju ili link izmedju racunara ili Web stranice i servera te se tako mogu napraviti brojaci broja posjetilaca i tako dalje.

ASP

Znaci Active Server Pages. Koristi se za kreiranje odredjenih cjenovnika i tako dalje u komercijalne svrhe naravno. Vecina koda se ocitava vec na serveru. Napravljen je od strane Microsofta I upotrebljava se skupa sa Microsoftovim server programima. Vecina funkcija se moze dobiti i koristeci CGI. Tako kreirane stranice se zovu jos i interaktivne Web stranice.

Javascript

Radi se o programskom jeziku koji ima za cilj pravljenje funkcija koje opet olaksavaju navigaciju i kontrolisu funkciju recimo formulara na stranicama kao knjige gostiju i tako dalje. Vecina danasnjih alata kao FrontPage ili pak DreamViewer imaju mogucnost kreiranja funkcija u kojima se koristi Javascript. Javascript je neovisan programski kod i ne moze se mijesati sa programskim jezikom Java recimo. To su dvije potpuno odvojene cjeline. Javascript funkcionise dobro u vecini danasnjih Web citaca.

JavaApplet

Tako se nazivaju funkcije ili kodovi kreirani u programskom jeziku Java. Pomocu JavaAppleta mogu se napraviti veoma fina rjesenja sistema za navigaciju ili druga graficka rijesenja. Koriste se veoma mnogo u poslednje vrijeme odlika im je sto su veoma brzi.

PHP

To je programski jezik koji se sve vise upotrebljava na Internetu. Zelimo li kreirati tzv. interaktivne stranice sa koristenjem daza podataka na Internetu onda nam je na raspolaganju dva jezika koji mogu upravljati bazom podataka ASP i PHP. Asp se koristi obicno na Windows Serverima i koristi uglavnom Access baze podataka dok PHP Upotrebljavamo uglavnom na serverima sa platformom Linux i web serverom apache. PHP se uglavnom koristi zajedno sa bazom podataka SQL ili MySQL na kako sam rekao Apache serverima.

CMS

To nije nikakav programski jezik, pogotovo ne neki alat za programiranje web prezentacija. CMS /Content Management System/ jeste ustvari izraz za pripremljene alate koji nam omogucuju kreiranje web prezentacije bezda mi nesto programiramo. Tako alati kao Drupal, Joomla ili Wordpress nam omogucavaju kreiranje web prezentacija koristeci njihove vlastite template u kojima mi ne radimo fakticki nikakvo programiranje nego vise administriranje jednog alata na nacin da kreiramo stranice, kreiramo linkove, mjenjamo slike ili tekst nasim vlastitim itd ali sama struktura stranice je ustvari vec zadata. Cesto mozemo primjetiti da pojedini recimo koristeci Joomlu ne obrisu niti naziv pojedinih stranica jer sama struktura je prilicno komplikovana i tesko je naci nacin za izmijeniti svaku sitnicu.

Bootstrap

To isto tako nije programski jezik ili skripta nego open source alat ili nacin kako najbolje ukomponovati sve mogucnosti HTML5, CSS te Javascripta odnosno Jquery skripti. Ovdje se radi o gotovim rjesenjima dizajna pomocu jednog CSS fila pod nazivom bootstrap.min.css, jednog ili vise Javascript filova pod nazivom bootstrap.min.js te popper.min.js kao i jquery.min.js. Ove filove mozemo koristiti sa njihovih pozicija tako sto kreiramo njihove linkove u head stranice ali mozemo ih i downlodati u vlstite kataloge na nasoj stranici i koristiti ih kao nase vlastite. U fajlovima se vec nalaze gotova kreirana rijesenja koja mi samo implementiramo na nasoj stranici. vise o bootstrap rijesenjima moze se naci na stranici https://www.w3schools.com. Trenutno je na snazi Bootstrap 4 izdanje i nudi veoma kreativna rjesenja.

Bootstrap filove CSS, Javascript i Jquery ja sam upakovao skupa a mozete ih naci i na ovoj stranici koristeci link ovdje. Radi se o vise izdanja fajlova a koje cete Vi koristiti jeste do Vas. Jedan template stranice kako je ja zamisljam sam spakovao i moze se naci ovdje. Template jeste jedan prazan HTML fajl ali sa izgradjenom strukturom stranice.



HTML tagovi


Structure

  • html
  • head
  • body
  • div
  • span

Meta information

  • DOCTYPE
  • title
  • link
  • meta
  • style

Tekst

  • p
  • h1, h2, h3, h4, h5, and h6
  • strong
  • em
  • abbr
  • acronym
  • address
  • bdo
  • blockquote
  • cite
  • q
  • code
  • ins
  • del
  • dfn
  • kbd
  • pre
  • samp
  • var
  • br

Links

  • a
  • base

Scripting

  • script
  • noscript

Images and Objects

  • img
  • area
  • map
  • object
  • param

Lists

  • ul
  • ol
  • li
  • dl
  • dt
  • dd

Tables

  • table
  • tr
  • td
  • th
  • tbody
  • thead
  • tfoot
  • col
  • colgroup
  • caption

Forms

  • form
  • input
  • textarea
  • select
  • option
  • optgroup
  • button
  • label

Presentational

  • b, i, tt, sub, sup, big, small, hr


Sigurne boje na internetu


To top
© Copyright 2018 - All Rights Reserved - Powered by Alome DC