Pametni telefoni postaju sastavni dio života, pa udio mobilni saobraćaj stalno raste. Raspored u HTML5 i CSS3 omogućuje vam prilagođavanje stranica preglednika na radnoj površini sučelju mobilnih medija. Video kurs o responzivnom izgledu kreiran je kako bi vam pomogao da savladate profesionalno okruženje i učinite svoju stranicu praktičnijom.

Autor kursa "Responsive Layout na HTML5 i CSS3" Oleg Kasyanov je iskusni web programer, osnivač internetskog resursa JoomlaTown.net, bloger i kreator programa obuke za početnike i iskusne profesionalce.

Responsive web dizajn - obuka

Svaki video tutorijal prati autorski komentar sa objašnjenjima. Naučit ćete o posebnostima korištenja HTML5 i CSS3 tehnologija, poboljšati svoje razvojne vještine, a također ćete naučiti kako napraviti prilagođeni izgled.

Video kurs Olega Kasjanova sastoji se od teoretskih osnova, prakse i dodatnih materijala. Dobićete odgovore na sledeća pitanja:

• koja je funkcionalnost u HTML5 i CSS3 izgledu;
• šta je semantičko označavanje;
• kako raditi sa različite vrste medijski objekti;
• koje su faze izrade odredišnih stranica;
• zašto je važno miješati tipove stranica i vizualizacije;
• velike poteškoće u stvaranju mobilna verzija site.

Kurs "Responsive Layout u HTML5 i CSS3" je praćen šablonima za rad, skriptama i cheat sheets sa kodom. Oleg uvelike olakšava proces učenja, zahvaljujući čemu je zaista moguće nekoliko puta brže savladati rad sa HTML5 i CSS3.

Responsivan HTML5 i CSS3 izgled

Rezultati kursa neće dugo čekati: naučićete da analizirate trenutnu situaciju, vidite projekat budućeg veb resursa, a takođe ćete napraviti korisne promene. Kurs Olega Kasjanova će vam pomoći da savladate responzivni izgled u HTML5 i CSS3.

Ne možete daleko stići bez HTML5 i CSS3

Moderne web stranice i razvoj weba već je nemoguće zamisliti bez HTML5 i CSS3, kako god netko rekao.
Za svaki projekt, svakog kupca potreban je važeći cross-browser i moderan izgled u HTML5 i CSS3 i moraju biti prilagođeni mobilnim uređajima.
Ako znate kucati u HTML5 i CSS3 i prilagoditi projekat za mobilne uređaje, onda možete sigurno podići cijenu sata svog rada.
Pa, ako kreirate web stranicu za sebe, onda će ovo znanje pomoći da bude bolja, funkcionalnija i praktičnija. To se u pravilu prevodi u povećanje pozicija, povećanje prometa i, shodno tome, prihoda.

Znaš li to...

Upravo sada unutra Rezultati pretrage(u TOP 10) Yandexa 55% su sajtovi sa responsive design koji se mogu prilagoditi mobilnim uređajima. Ovo sugerira da Yandex (i Google također) daje veću prednost web lokacijama sa responzivnim dizajnom. One. one na kojima je korisniku udobno.
I HTML5 i CSS3 su dodati za stranicu dodatne funkcije, uz pomoć kojih web stranicu možemo učiniti još prikladnijom.
I za korisnike i za robote.
Odredišna stranica ( Landing page, landing page) služi za pretvaranje posjetitelja u pretplatnike ili kupce.
Također se ponekad koristi za segmentaciju prometa.
Odredišna stranica može biti ili jedna zasebna stranica na domeni ili kao dio punopravne web stranice.
U ovom slučaju, stranica se promovira u pretrazi, a odredišna stranica se koristi za oglašavanje u Yandex.Direct, Google Adwods, Target Vkontakte itd.
Takav paket vam omogućava da maksimalno iskoristite razne internet marketinške alate.
Sada postoji prilika da sve to brzo nauče i primjene u svojim aktivnostima.

HTML5 + CSS3 + Responzivnost + odredišna stranica
Uz ovaj kurs ćete moći:

kreirajte responzivne web stranice i stranice
prilagoditi ih mobilnim uređajima
koristite mogućnosti HTML-a i CSS-a u svojim ili klijentskim projektima
stvoriti bilo koju odredišnu stranicu: stranice za snimanje, stranice za pretplatu, odredišne ​​stranice proizvoda itd.
odredišnoj stranici dodajte različite efekte i skripte
kreirajte i koristite napredne forme povratne informacije i mnogo više.
Sa ovim video kursom neće biti teško!

Pregled kursa

Uvodni dio

Nove funkcije u HTML5 i CSS 3 koje pojednostavljuju i olakšavaju proces izgleda.
Semantičko označavanje - njegove tajne i čemu služi.
Umetanje medijskih objekata - kako umetnuti audio i video bez plejera.

Praktični dio

Kreiranje odredišne ​​stranice korak po korak.
Od planiranja izgleda, izgleda svakog bloka različite složenosti, do povezivanja skripti i php rukovalaca za obrasce
Vrtuljak / klizač, glatko pomicanje, dugmad, CSS sprites, validacija obrasca itd.

Dodati. materijala

Dodatni materijali sadrže sve skripte i izvore sa kojima ćemo raditi + cheat sheets sa kodom koji samo trebate kopirati i zalijepiti na pravo mjesto.
I drugi korisni izvori.
Broj video lekcija: 23

Šta možete učiniti nakon završetka ovog kursa?

U pripremi

Shvatite PSD izgled uz PhotoShop
Izrežite željene slike iz PSD izgleda
Nađi prekrasni dizajni odredišne ​​stranice i web stranice
Dizajn blokova i faze rasporeda
Kombinirajte ikone u CSS sprijtove
Radite sa PhpDesigner-om

U pogledu rasporeda

Povežite se prelepi fontovi iz google skladišta
Efikasno koristite pseudo-klase
Prilagodite stranicu za sve mobilne uređaje
Koristite 2 ili više pozadina za blok, animaciju, transformaciju, RGBA itd.
Radite sa @media upitima
Umetnite interaktivne Yandex karte
Kreirajte CSS sprite i ubrzajte učitavanje stranice
Koristite unaprijed dizajnirane stilove (slično okvirima kao što je Bootstrap)

U smislu poboljšanja

Kreirajte efekte lebdenja ("animirajte" pri lebdenju)
Napravite glatko skrolovanje do blokova i do dugmeta "Gore".
Potvrdite obrasce za povratne informacije pomoću jQueryja
Kreirajte pametne obrasce za povratne informacije s prijenosom UTM oznaka
Povežite i konfigurirajte ciljeve u Ya.Metrici pomoću događaja
Olakšajte stranice tako da se brže učitavaju
Provjerite i popravite nedostatke na stranicama

Venecuelanski lider Nicholas Maduro je u emisiji Rafaela Correa na RT-u rekao da je američki predsjednik Donald Trump opsjednut narodima Latinske Amerike. "Otvoreno govorim ...

Trump rat s Iranom naziva "posljednjim mjerom"
Nema govora o ratu s Iranom u svjetlu napada na naftna postrojenja Saudijske Arabije, postoji mnogo opcija, izjavio je u srijedu američki predsjednik Donald Trump. "Postoji mnogo opcija. Postoji ekstremna opcija...

Zelenski je vodio telefonske razgovore sa Pensom
Ukrajinski predsjednik Volodymyr Zelenskyy razgovarao je telefonski s potpredsjednikom SAD -a Mikeom Pensom. To prenosi "Strana.ua" Ukrajinski lider zahvalio je Pensu na produženju...

Pentagon naziva Rusiju najvećim američkim sigurnosnim izazovom
Šef Pentagona Mark Esper rekao je da je Rusija najveći američki sigurnosni izazov u bliskoj budućnosti. “Rusija ostaje naš najveći sigurnosni izazov...

Napad nije iz Jemena: Saudijska Arabija krivi Iran za napad na rafineriju
Vlasti Saudijske Arabije javno su otkrile olupine dronova i drugih letjelica koje su ispaljene na državnu rafineriju u subotu navečer, 14. septembra. U Ministarstvu odbrane Kraljevine ...

Tramp je reagovao na smanjenje osnovne stope američkih Federalnih rezervi
Američki predsjednik Donald Trump ponovo je bio nezadovoljan radom američkih Federalnih rezervi nakon što se saznalo da je bazna stopa smanjena. O tome je napisao na Tviteru. On je napomenuo da je šef menadžera ...

Ukrajina je ponovo postavila uslove za primjenu "Steinmeierove formule"
Na redovnom sastanku kontakt grupe održanom u srijedu u Minsku, ukrajinska delegacija je ponovo postavila stroge uslove Kijevu da ispuni političke tačke sporazuma iz Minska. Ovo je potvrđeno ...

Johnson i Trump razgovaraju o neophodnom odgovoru na napad na saudijske rafinerije
LONDON, 18. septembra - RIA Novosti, Marija Tabak. Britanski premijer Boris Johnson i američki predsjednik Donald Trump proglasili su potrebu za jedinstvenim diplomatskim odgovorom međunarodnih partnera...

Kličko je stigao na most koji je bio blokiran zbog prijetnje eksplozijom
Gradonačelnik Kijeva Vitalij Kličko rekao je da je čovjek koji je prijetio miniranjem mosta Metro u Kijevu bio pijan ili pod utjecajem droga. Prethodno je šef kijevske policije ...

Juncker, koji je kritizirao Belgijce, optužen je za pijanstvo
Čelnici dva grada u Belgiji zatražili su da se predsjednik Evropske komisije Jean-Claude Juncker službeno izvini što je rekao da su ljudi koji govore francuski jezik netolerantni u belgijskim gradovima...

Netanyahu je Izraelcima dao izbor
Izraelski premijer Benjamin Netanyahu komentirao je preliminarne izborne rezultate na kojima je nacionalistička stranka Likud drugoplasirana. Odgovarajući post se pojavio...

Steinmeier -ova formula: Kijev je napravio ustupke po Donbasu
Ukrajinski ministar vanjskih poslova Vadim Pristaiko pristao je koristiti "Steinmeierovu formulu" za rješavanje sukoba u Donbasu. Ovom inicijativom predviđeno je da se regionu pruži poseban ...

Sjedinjene Države su vratile Rusiji ukradene dekrete Nikole II
Sjedinjene Američke Države predale su ruskoj strani 16 ukaza koje je potpisao car Nikolaj II tokom ceremonije u rezidenciji američkog ambasadora u Moskvi. Ukradeni su istorijski dokumenti...

Dok niste zaspali: Centralna banka je smatrala da je legalno blokirati račune Rusa
"Oni će trčati sami": novi plan za "vraćanje" Krima RIA Novosti Krimljani će pobeći u Ukrajinu ako se ne širi trulež i stvori prozor mogućnosti. O tome, kako prenosi "Savezna agencija...

Mediji: Netanyahu je otkazao odlazak u Generalnu skupštinu UN-a zbog političke situacije u zemlji
Izraelski premijer Benjamin Netanyahu sljedeće sedmice neće otputovati u New York kako bi učestvovao u opštoj političkoj debati 74. zasjedanja Generalne skupštine UN-a zbog političke situacije u zemlji...

Ukrajina je donijela odluku o posebnom statusu Donbasa
Ukrajinski ministar vanjskih poslova Vadym Pristaiko govorio je o dogovoru koji su postigli učesnici "Normandijske četvorke" prema takozvanoj "Steinmeierovoj formuli" o davanju specijalnog statusa Donbasu. O tome...

Tramp je pronašao zamenu za Boltona
Novi savjetnik američkog predsjednika za nacionalnu sigurnost bit će Robert O'Brien, koji je trenutno specijalni predsjednikov izaslanik za taoce...

Ukrajina se pripremala za povlačenje trupa u Donbasu
Komandant Operacije združenih snaga (JF) Vladimir Kravčenko najavio je pripremu za povlačenje naoružanja duž linije razgraničenja u Donbasu. O tome je govorio tokom sastanka sa stalnim ...

Vremenski okviri i mape puta: planovi za integraciju Rusije i Bjelorusije
Plan integracije Rusije i Bjelorusije predsjednici Vladimir Putin i Aleksandar Lukašenko mogu odobriti do 8. decembra. "Mape puta" su razvijene u 31 smjeru. Do 1. novembra Moskva...

Pobjednik ne odlučuje: ko će formirati vladu Izraela?
Prijevremeni parlamentarni izbori u Izraelu još uvijek nisu otkrili jasnog pobjednika u utrci, iako je, prema preliminarnim podacima CIK-a zemlje, desničarski blok Likud ispred svog rivala - ...

Sa pojavom mobilnih uređaja: tableti i pametni telefoni, mogućnost prilagođavanja izgleda web stranica postala je vrlo popularna.
To znači da se web lokacija treba normalno pregledavati na bilo kojem uređaju. Pa, i već, ako nije potpuno isto kao što je prikazano na desktop računar onda blizu toga. Glavna stvar je da je zgodno raditi s njim: pretraživati, tražiti nešto, pritiskati dugmad itd.

Na internetu sam pronašao zanimljiv, besplatan mini-tečaj o responzivnom izgledu web stranice zasnovan na HTML5 i CSS3. Proučio to.
** Ovaj kurs možete preuzeti za sebe popunjavanjem gornjeg ili donjeg obrasca zahtjeva za testiranje. **

Novo u HTML5 i CSS3

Odlučio sam provjeriti je li moguće (?) Web stranicu prilagoditi svim uređajima, WITHOUT upotreba tehnologije HTML5 i CSS3 .

Trudim se!

Raspored u kodiranju "ANSI" , i sa punim servisnim zapisom: "HTML 4.01 Transitional" , umjesto postavljenim pravilima HTML5:

Nove oznake: zaglavlje, odjeljak, članak nije koristio. Ispostavilo se da je raspored blokova dovoljan, kao i obično za oznake div .

Novo atribut oblika kod oznaka unos "placeholder" (nagoveštaj) u pregledaču IE8 NE radio. U ostalom - radi.

Isto tako. Novo atribut "type". kod oznaka unos type = "e-mail" radi samo u modernim pretraživačima.

Atribut "vrijednost" i dalje se koristi za unos vrijednosti u forme.

Najvažnija stvar! Prvo se stranica postavlja na običan monitor, a tek onda u oznaku glava unosi se red koda:

Ovaj unos govori pretraživaču ( ** Ovo je objašnjeno u kursu!), pa on pravilno skalirano sadržaj stranice za uređaj koji se koristi.
Iako je, u stvari, takav rekord Pretraživač ne govori apsolutno ništa... Ovo je "apel" za pretraživače.
Ali oni su već oh-oh-veoma "ljubomorni" na prisustvo/odsustvo takvog unosa u oznaci glava posebno nedavno. Provjereno!

Međutim, mora se reći da savremeni pretraživači mobilnih uređaja izgleda da je naučio da čita "tuđa pisma".

**Na primjer. Dok sam testirao takvu liniju koda, dodao sam je neprilagođen web stranicu, i ... ... ... I odmah ga brzo uklonio!

Provjeravajući njegov ekran na pametnom telefonu, vidio sam da pretraživač pametnog telefona odaje "horor", tj. prikazao je PUNU VELIČINU stranice, pružajući priliku dugačak horizontalni skrol.

Novi atribut za oznake img "srcset" u testiranoj verziji "HTML 4.01" ne radi!

Dozvolite mi da vas podsjetim i naglasim da ja NIJE postavljao nikakve medijske upite... Suđenja!

Primjeri unosa CSS tablice

Prije svega, o kojima (?) se provjeravaju CSS svojstva i kako (?) su radili.

Svojstvo veličine pozadine: korice; bolje Nemojte koristiti... Crteži su "rezani", tj. idite dalje od ekrana monitora. Morate umanjiti prikaz da biste ih vidjeli u potpunosti.

I naprotiv!

Svojstvo veličine pozadine: sadrži; radi odlično! U svim pretraživačima! Optimalno za "centar"crteži... To je njihovo vaga odlična za bilo koju veličinu monitora.

Isto tako.

Isto svojstvo je background-size: contain; radio ODLIČNO za "bočno"crteži, tj. lijevo desno. Probala sam!

Prikazane bočne slike kroz oznake raspon dajući im da plutaju: lijevo ili desno, ali GLAVNO!
Glavna stvar da je crtež prikazan kao pozadina uključena 2 znaka razmaka bez prekida davanje veličina teksta, jednake visine pozadinska slika (** smanjenjem veličine teksta, slika se smanjuje proporcionalno, bez izobličenja).

Dijagrami izlaza su ispod.

  <— это HTML

Raspon # proba8 ( <— здесь CSS
pozadina: url (images / proba8.jpg) bez ponavljanja;
float: lijevo;
veličina fonta: 240px;
background-size: sadrži;
margina: 0 20px;
padding-bottom: 0;
}

Probni crtež prikazan prema gornjoj šemi je imao prava veličina 210x240px... Dobro se prilagodio i u potpunosti je prikazan na monitoru sa rezolucija 120x150.

Sve radi! ALI!

Nakon što sam provjerio korištenje takve sheme zaključivanja na svom "Poligonu", otkrio sam pojavu značajnog praznine prije i poslije crteža kada gledate stranicu na pametnom telefonu. To je bilo posebno uočljivo kada se gleda vertikalno. Čak!
Iako je napisano u CSS pravilima: uklonite gornje/donje margine!

Zato, svi bočni crteži za izlaz ove stranice na uobičajen način, bez ikakvih adaptivnih "čudnosti".

Štoviše, veličina najvećeg bočnog crteža je to omogućila.

Istina, u ovom slučaju bočno slike su prikazane prevelike, što zapravo ne odgovara njihovim centralno(prilagođeno) "kolege", ali ... ... ....
Ovdje svako bira šta je najbolje. Radije sam izabrao najjednostavnije od "dva zla".

** I posljednji. File "nuliranje" stilova "reset.css" nije se povezao na ovu stranicu. Za tako jednostavne stranice to nije potrebno. Da, i ... ... ne volim ga. Pij i pij pa sve iznova.

Pa, ozbiljno - brzina skidanja... Svaki dodatni fajl je pristup serveru.

Sada nekoliko redaka o adaptaciji.

Kao prvo dao primjer pisanja koda za smanjenje dva polja za unos (ime i e-mail) u oznakama obrasca na veličinu od 200px (ako se gleda na mobilnim uređajima) dakle, kako je to dato na mini kursu . Čudan ulaz!

medijski ekran i (maksimalna širina: 900px) (

širina: 200px;))

Zapravo, kod medijskog upita bi trebao izgledati drugačije.

@media (maks. širina: 900px) (
.subscribe input, .subscribe input (
širina: 200px;))

* Prim. Koristeći fiksna širina, bolje je to naznačiti maksimalna veličina.

Optimalno za fiksnu širinu je 1200px ±

Ove "medijski upiti" Podsjetio sam se na dizajn ako (uvjet) (izvrši) sa jezika: PHP i JavaScript... Koristimo ih za rekonstrukciju stilova sajta u zavisnosti od veličine ekrana.

referenca

Za ispravan rad sa fontovima, savjetuje se da se njihove veličine naznače ne u "px", već u "em", a također se uzimaju i sami fontovi iz tzv. "sigurni CSS fontovi".

Napravio sam poseban crtež u Photoshopu iz kojeg možete saznati koji su fontovi povezani "sigurno", i najvažnije - zašto (?!):

1em = 16px

Istina, mora se reći da je takav prijevod prilično "uslovan", iako u mini kursu o tome nema ni riječi!

Detaljno o postojećim mjernim jedinicama i kako se one prevode jedna u drugu možete saznati u odličnom članku iz priložene arhive.

Jedinice uzoraka za prilagodljivi raspored

Probala sam. Kroz ove jedinice su propisane neke veličine fonta. Works! Ali ja sam više naviknut na rad sa pikselima. Zato sam ih koristio za izgled ove stranice.

Štaviše, pikseli, po mom mišljenju, savršeno pristajanje za responzivni izgled, jer su "vezani" tačno za veličine i rezolucije monitora korišćeni uređaji.

Drugim riječima, svaki uređaj će imati svoju veličinu piksela, a ako ne "trzate" s jedne jedinice na drugu, već sve izražavate u istim jedinicama, rezultat će biti pozitivan!

Šta, u stvari, vidite na svom uređaju, gledajući ovu stranicu.

Za elementi koji nisu fontovi: slike, veličine blokova, savjet izračunati, i koristite postotak "%", a ovo je drugačija tehnika izračuna - ovisno o veličini "roditeljski blok".
Ukratko - "jezivi hemoroidi".

Stoga sam, nakon što sam malo vježbao na ovoj probnoj stranici, "pljunuo" na sve vrste adaptivnih rasporeda, i počeo kucati na uobičajen, meni poznat način. Umoran od toga!

Pa, ali ozbiljno, pisao sam o tome na kraju stranice.

Svako kome je potrebna prilagodljivost treba da obrati pažnju na alate koji su već ugrađeni u pretraživače.

Korisni alati za web razvoj

Za razvoj responzivnog izgleda u pretraživaču Firefox postoje odlični (!) alati.

Takva kartica se otvara kada pritisnete tipku F12

Dugme "adaptivni dizajn" omogućava vam da vidite kako će stranica izgledati na različitim veličinama monitora, iu njihovoj različitoj orijentaciji (vertikalno/vodoravno).

Kako koristiti dugme ovog alata detaljno je objašnjeno u pomenutom mini kursu.

Istina, želim reći da mi je draže provjeriti urađeno na pravi uređaji , koji eliminiše "nedostatke" pretraživača.
Dugme je svakako vrlo korisno i od velike pomoći, ali ... ... ...

Za one koji nemaju takvu priliku da provjere svoje web stranice, mogu preporučiti zanimljiv izvor za testiranje prilagodljivosti: "Quirktools" (otvara se u novom prozoru).

**ALI! Zapamtite!
Prikazuje samo stranice već postavljeno na internet.
Osim toga, njegov server vrlo često "padne" (tj. nedostupan).

Općenito, siguran znak ispravan odzivni raspored - nema donjeg listanja.

Još jedna stvar koju treba znati: uključeno pravi mobilni uređaji stranice izgledaju drugačije, a ne onako kako ih prikazuju razne usluge verifikacije.

Zaključak, zaključci

Kao što sam već napisao, nakon malo vježbanja ovdje na ovoj stranici, "pljunuo" sam na prilagodljivost, i počeo da kucam na uobičajen način. I to uopšte nije slučajno!

Kao prvo: složenost izgleda značajno se povećava, a time i veličina CSS koda.
Šta je tu loše, detaljno ovdje: "Izrada web stranice"(u novom prozoru).

drugo: i bez "adaptivne mudrosti" možete napraviti web stranice koje se normalno prikazuju na mobilnim uređajima, za koje im treba dati više fiksnoširina.
primjer: "Lična stranica" (otvara se u novom prozoru).

Treće: slijedi iz prethodnog, budući da sadržaj fiksno stranica neće biti "razmazana" po celom monitoru ako se sajtu pristupa na računaru sa velikim ekranom.

Četvrto:Često viđam samo sajtove smatra se adaptivnim, već sebe sadržaj je isječen tako mora njihov izgled smanjiti za 2-3 puta!

peto: proizilazi iz četvrte tačke. Pa koja je razlika (?!) da je moja neprilagođene stranice on pametni telefoni moraju biti razdvojeni prstima do željene veličine. Da, i onda! Samo radi pogodnosti. Sadržaj je netaknut!

Inače, pametni telefoni nisu kritični za moju stranicu. Ukoliko, više od 97% posjetioci mu dolaze sa normalnih kompjutera i tableta, i manje od 3% od pametnih telefona.

I dalje možete nastaviti ovu "listu žalosti", ali mislim da je to dovoljno. Rekao sam dovoljno o razlozima zašto sam se umorio od adaptivnog izgleda, koji studirao ali se prijavi NE ide na.

Zašto?!

Zašto otežavati ono što može biti lakše?! Bez ikakvih "šamanskih adaptivnih plesova".

Izlaz - nema potrebe!

Ovo je zaključak koji sam napravio za sebe od svega navedenog. Na kraju, na apsolutno bilo kom uređaju: bilo da se radi o običnom računaru, tabletu ili pametnom telefonu, sajt se može pogledati!

Ako je nešto teško vidjeti, možete ga razdvojiti prstima. Ništa ružno! Moderni elektronski uređaji su pametni! Oni vam omogućavaju da skalirate vidljivost ekrana monitora.

Osim toga, pokušajte da "držite korak" u kodu (konstantno ga povećavajući) za sve moguće veličine postojećih uređaja - UTOPIJA!

Na primjer, neki dan je moj nećak pokazao svoju novu akviziciju. Sat za pametni telefon, nešto veći od kutije šibica.
Pa šta?!
Požuriti sada "bezglavo" sa pisanjem koda za veličinu kutije šibica ?! A onda će se pojaviti kompjuter veličine broša (ili se već pojavio). Pa šta?!
Opet promijeniti kod?! Da, pa, smokva, takve "problematične web stranice" za napraviti! Jednostavnije .......

Zapravo, cijeli moj resurs namijenjen je onima koji žele naučiti kako napraviti jednostavne stranice, i napraviti ih sa zadovoljstvom, a ne tražiti sami "glavobolja"... Nešto slično tome... ... ...

Međutim, ovo je moje lično mišljenje. Ko bi to sigurno želio, neka traži dalje.

Važan dodatak

Toplo preporučujem onima koji žele bolje razumjeti različite vrste izgleda kao prvo(prije proučavanja mini kursa) preuzmite i pročitajte dva dobra, zanimljiva članka: "Reaktivni izgled ili mobilna verzija" i "Adaptivni dizajn".

I pored toga!

Neophodno pročitajte članak i iz donje priložene arhive.

Zašto je obavezno?!

Sastavio sam ga koristeći materijale iz knjige o web dizajnu poznatog dizajnera u Runetu i riječi autora knjige o mobilni verzije web lokacije dramatično drugačije iz onoga što ste mogli pročitati u prethodnoj arhivi.

Ali najvažnija stvar (!)- iz drugog razloga.

A popunjavanjem ovog obrasca možete dobiti zanimljiv edukativni video kurs za adaptivni izgled.

Izdali smo novu knjigu, Marketing sadržaja na društvenim mrežama: Kako doći do glava pretplatnika i zaljubiti se u svoj brend.

Konkretno, ova tehnologija se aktivno koristi tako da se stranica prikazuje na isti način na različitim vrstama uređaja: računarima / laptopima i pametnim telefonima / tabletima s različitim veličinama ekrana.

Danas je responzivna stranica izgrađena korištenjem HTML5 jezika za označavanje i CCS3 kaskadnih stilova. Ali sve do vremena kada su odgovarajuće tehnologije postale standard za sve popularne pretraživače, programski jezik JavaScript se koristio u odgovarajuće svrhe. Još ranije (prije 2010. godine) bilo je potrebno napraviti nekoliko verzija istih stranica, ali s različitim oznakama, kako bi se stranica koju su razvijali ispravno prikazivala na različitim ekranima.

Čemu služi responzivni izgled stranice?

Do relativno nedavno, kada ste posjećivali mnoge web stranice na dnu pretraživača, mogli ste vidjeti klizač koji horizontalno pomiče stranicu. To se dogodilo, na primjer, ako prozor internet pretraživača nije bio uvećan na cijeli ekran, već je zauzimao relativno malu površinu. Također, to se gotovo uvijek moglo vidjeti kada je rezolucija ekrana na kojem je prikazana slika bila 800 x 600 ili, još više, 640 x 480 piksela.

Danas se čak i vlasnici mobilnih uređaja rijetko susreću s tim. A razlog tome ne leži samo u činjenici da je rezolucija modernih ekrana HD ili viša, već i u činjenici da je prilagodljivi izgled stranica sada postao gotovo standard.

Zašto i kada se pojavio responzivni dizajn?

Do početka druge decenije 21. stoljeća postojala je snažna potreba za stvaranjem tehnologija koje bi omogućile razvoj univerzalnih web stranica. Glavni preduslovi koji su doveli do stvaranja i razvoja responsive dizajna su:

• veliki priliv novih korisnika na Internet;
• pojava mnogih uređaja s različitim rezolucijama ekrana;
• pritisak pretraživača, koji su počeli da uvode sankcije sajtovima na kojima se nalazi više verzija stranica sa istim sadržajem.

Osoba koja je prva kreirala službeno je web dizajner Ethan Marcotte. Sredinom 2010. godine objavio je materijal u kojem govori o tehnologiji koja bi trebala riješiti problem normalnog prikaza web stranica u pretraživačima s različitim rezolucijama radnog područja.

Nešto kasnije, drugi poznati podkaster predložio je dopune konceptima o kojima je njegov kolega govorio.

Čime i kako se stvara adaptivni izgled?

Prije nego što pređemo na razmatranje pitanja kako napraviti responzivni izgled, potrebno je ukratko razmotriti glavne tehnologije koje se koriste. Sada ih ima dva: HTML5 i CSS3. Donedavno su se koristili HTML4 i CSS2, ali da biste kreirali univerzalni dizajn sa njima, morali ste koristiti i JavaScript.

CSS3 je sljedeća generacija kaskadnih stilova. Ova tehnologija ima za cilj stvaranje pravila za prikaz elemenata stranice u pregledniku korisnika. Koristeći ga, možete odrediti, na primjer, koju veličinu elementa treba imati pri određenoj rezoluciji ekrana korisnika ili postaviti pravilo da uvijek zauzima određeni postotak prostora (100% - ispunjava cijelu radnu površinu pretraživač).

U trećoj generaciji pojavilo se pravilo "medijskih upita", pomoću kojeg dizajner izgleda može kreirati zasebne klase za svaku konkretnu rezoluciju.

Veoma važna tačka!

Svatko tko planira koristiti CSS3 za responzivni dizajn trebao bi biti svjestan da, za razliku od CSS2, treća generacija kaskadnih stilskih tablica koristi postotke umjesto piksela za određivanje veličine objekata.

Što se tiče HTML5, on se koristi za direktno označavanje stranice, odnosno označava gdje se određeni elementi trebaju postaviti. Da bi se objekti prilagodili rezoluciji, parametri HTML-oznaka sadrže klase prethodno stvorene pomoću CSS3.

Jednostavan primjer responzivnog izgleda

Da biste razumjeli šta je responzivni izgled, primjeri bi trebali biti što jednostavniji. Stoga ćemo razmotriti opciju u kojoj se pripremljena slika automatski prilagođava rezoluciji radnog prostora pretraživača.

Prvo, koristite HTML da postavite sam element na stranicu:

DIV tag - označava da je sve sadržano u njemu zaseban blok. Kada ima mnogo takvih blokova na stranici, specificira se atribut "class". Ovo je neophodno da bi pretraživač shvatio koje pravilo primijeniti za određeni blok.

Sada morate direktno kreirati samo pravilo, tzv.

CSS kontejner:

Div (širina: 100%; poravnavanje teksta: centar;) div img (težina: 100%; visina: auto;)

Ovaj kod postavlja dozvole za responzivni izgled. Konkretno, navodi se da težina uvijek treba biti 100% širine faze web pretraživača, dok se visina automatski podešava.

Provjera responzivnog izgleda

Postoje posebni alati za testiranje responzivnog izgleda. Na primjer, u pregledniku Google Chrome možete pritisnuti tipku "F12", a zatim, na panelu koji se otvori, kliknite na ikonu sa slikom pametnog telefona i tableta. Nakon ove akcije, pojavit će se još nekoliko panela u kojima morate odrediti rezoluciju koja vas zanima.

Može se učiniti još lakšim. Da biste provjerili funkcionira li responzivni dizajn, morate držati pritisnutu tipku CTRL, a zatim pritisnuti "+" ili "-". Nakon ove radnje, stranica bi se u skladu s tim trebala povećati ili smanjiti, ali element na koji je primijenjen adaptivni izgled zadržat će svoj omjer (ili će učiniti nešto drugo, kako je navedeno u pravilima).

Alati za pojednostavljenje responzivnog dizajna

Izgled responzivnog dizajna je prilično naporan zadatak. Stoga je radi smanjenja vremena provedenog na provedbi svih ovih postupaka bolje koristiti posebne alate. Jedan od njih je dobro poznati okvir Bootstrap *.

Ovaj skup alata za HTML i CSS, na primjer, uključuje veliki broj unaprijed definiranih klasa koje možete koristiti u svom dizajnu. Sadrži i dinamičke, koje, u skladu sa svim pravilima i standardima, omogućavaju kreiranje adaptivnih elemenata.

Da biste ga počeli koristiti, prvo morate steći direktno znanje o samim CSS3 i HTML5, a zatim proučiti karakteristike okvira. Međutim, pošto ste razumjeli većinu zamršenosti rada s njim, možete naknadno smanjiti vrijeme utrošeno na razvoj responzivnog dizajna web stranice.

* Bootstrap je softver otvorenog koda koji je razvio Twitter Inc. Distribuira se besplatno i ima široku zajednicu od koje uvijek možete zatražiti savjet.