U ovom trenutku, jedno od vodećih područja razvoja softvera je web development. Web development odnosi se na razvoj internetske usluge ili web aplikacije, njeno održavanje, podršku, kao i optimizaciju za tražilice (SEO).

Mlađi web programeri angažirani su u stvarnom stvaranju jednostavnih web aplikacija, uglavnom razvoju na strani klijenta i djelomično programiranju na strani poslužitelja, iako poslužiteljski dio u takvim primjenama obično nije vrlo složen. Iskusniji web programeri rade na složenijim dijelovima pozadinske logike i integracije s njima vanjski sustavi. Za SEO često angažiran pojedinačna osoba ili cijeli tim stručnjaka.

Za potvrdu kvalifikacije Junior Web Developer potrebna su Vam sljedeća znanja:

• Programiranje (poznavanje brojevnih sustava, elementarni algoritmi)
• Prezentacijski jezici HTML/XML/CSS (osnovni pojmovi i principi, sintaksa)
• JavaScript jezik (sintaksa, rukovanje događajima, rad s DOM-om)

Ovaj popis ne uključuje znanje poslužiteljske web tehnologije, kao što su PHP, Python ili Java. Oni će biti uključeni u napredniju kvalifikaciju web programera sa specijalizacijama. Za provjeru temeljnog znanja iz područja poslužiteljskog logičkog programiranja, kvalifikaciji je dodan test iz osnova programiranja.

Obavezni testovi

Programiranje - Osnove

Budući da Junior mora znati JavaScript, mora poznavati osnove programiranja. Ovaj test sadrži prilično elementarna pitanja o Booleovoj algebri, brojevnim sustavima (osobito binarnim i heksadecimalnim) i jednostavnim algoritmima.

HTML - Osnove

HTML test provjerava Juniorovo poznavanje glavnih tagova i elemenata jezika koji će mu biti potrebni u radu.Test sadrži i pitanja o nekim kraticama, preglednicima, a posredno io XML-u.

CSS - Osnove

Junior "trebate poznavati CSS uz HTML, inače će razvoj manje ili više ozbiljne stranice biti pun poteškoća. Test pokriva poznavanje osnovnih svojstava i atributa, box-modela, selektora.

XML - Osnove

Poznavanje XML-a nije kritično za Juniora kao poznavanje HTML/CSS-a, već je potrebno više kao osnovno znanje koje će Junioru dobro doći u budućnosti. Osim toga, ne smijemo zaboraviti da se većina drugih formata označavanja temelji na XML-u: isti XHTML, WSDL ili sve popularnija standardizacija HTML 5 SVG. Ispitna pitanja su većinom teorijska i pokrivaju poznavanje osnovne XML specifikacije.

JavaScript - Osnove

Ako je ranih 2000-ih poznavanje JavaScript Juniora bilo izborno, sada, 10 godina kasnije, to je jedan od primarnih uvjeta. Poznavanje JavaScripta, uz dinamičke mogućnosti u pregledniku klijenta, otvara put za učenje složenijih tehnologija kao što je AJAX, koji vam omogućuje stvaranje bogatih internetskih aplikacija (Rich Internet Applications, RIA). Testna pitanja provjeravaju sintaksu, osnovne funkcije i objekte JavaScripta.

Pisanje članaka

Tema članka se predlaže upravi i prihvaća ili odbija alternativnim prijedlogom. Tema bi trebala biti predmetno područje. Ovaj zahtjev testira Juniorovu sposobnost da brzo razumije bit određene tehnologije / pristupa / okvira. Alternativno, možete predložiti 3-4 teme za članak na razmatranje od strane administracije, a administracija će ponuditi jednu od njih za pisanje. Članak koje ste napisali nije trebalo biti prethodno objavljeno na drugim izvorima.

Sastavljanje pitanja

Potreba za sastavljanjem pitanja slijedi iste ciljeve kao i pisanje članka: sposobnost analitičkog pristupa razvoju novih stvari, odvajanja važnih aspekata od nevažnih. Teme pitanja također se dogovaraju s administracijom (to je potrebno jer u nekim testovima ima dosta pitanja, a kada se doda još jedno, velika je vjerojatnost da slično pitanje već postoji).

Važno: Pitanja o članku možete postaviti u komentarima na stranici vaše kvalifikacije (nemojte brkati s javna stranica opis), kojem se može pristupiti s poveznice na profilu u bloku kvalifikacija.

Radujemo se vašim komentarima i povratnim informacijama.

Web programer Mozilla Incredible korisno proširenje. Instalira se u preglednike i blogeru donosi opsežne informacije o stanju stranica. U početku se ovaj dodatak mogao instalirati samo u Firefox, ali kasnije ga je isti autor, Chris Pederik, razvio i za Chrome. Možete ga preuzeti i instalirati, u najnovijoj verziji, na engleskom jeziku.

Web programer mozilla ruska verzija

Za Ruski bloger moguće je instalirati ovo proširenje na ruskom, ali u ovom slučaju nije instalirana najnovija verzija, već prethodna - Web Developer 1.19.

Prvo, u postavkama preglednika Firefox, proširenje je instalirano, na engleskom jeziku. Idemo na karticu "Dodaci". U novom prozoru s desne strane vidjet ćemo gumbe za nekoliko programa, uključujući "Web Developer". Uključite gumb "postavke", nakon čega će se pojaviti prozor za postavke ovog alata.

Da biste omogućili ruski jezik, morate slijediti vezu do verzija. U novom prozoru odaberite broj 1.19, kliknite gumb "dodaj u Firefox". Nakon ponovnog pokretanja preglednika, gornja ploča proširenja bit će na ruskom. Tada sve postaje jasno. Učitajmo prvo našu stranicu i počnimo je analizirati uz pomoć brojnih opcija na gornjoj ploči.

Kada ponovno otvorite preglednik, ploča je ponovno na engleskom, tako da morate ponovo instalirati ruski jezik.

Web Developer mozilla onemogućuje neke značajke

U padajućem izborniku vidjet ćemo da možete onemogućiti brojne funkcije kako biste mogli vidjeti druga svojstva.

• • Onemogući "cache" i " mali font", ali možete onemogućiti java skripta i druge funkcije.

• • "Klik na kolačiće" otvara veliku stranicu s popisom. Ovdje se pojedinačni kolačići mogu mijenjati ili brisati, ali za sada sam pogledao ne dirajući ništa. Nakon što pogledam karticu, zatvaram je i prelazim na sljedeće odlomke.

• • "CSS greške" - također otvara traku padajućeg izbornika. Stilovi se mogu onemogućiti. Ali želim ih vidjeti, pa kliknem na redak: CSS info. Kao rezultat, otvorio se list sa svim stilovima ugrađenim u temu, dodacima i widgetima, što je rezultiralo dugom web stranicom.

« Obrasci" - str Prilikom pregledavanja stranice, trake stranica, obrasci za pretplatu i pretraživanje bili su istaknuti bojom. Ova kartica je potrebna webmasterima prilikom izrade predložaka, jer ima puno redaka s parametrima.

Web Developer mozilla - ostali paneli za ocjenu stranice

• • Grafika - prikaži atribute alt - opisi iznad slika su istaknuti. Možete pregledati sve stranice stranice i identificirati gdje nema opisa za ispravak. Veličina slika nam je poznata, ali je ovdje navedena težina i broj slika. Kod mene je sve u redu - težina je mala, svaka slika je 3 kb. Pronaći oštećene slike- na glavnoj stranici - nije pronađeno. otvara poseban list, gdje se nalaze opisi svih slika, uključujući brojače i favicon. Kada sve vidimo, uklanjamo kvačice.

• • Na informacijskoj ploči ima puno redaka. Kliknem na “prikaži id i klasu”, dok su linkovi istaknuti na svom mjestu, odnosno na stranici. Ovo je vrlo impresivno, jer su atributi naslova i ugniježđenost dokumenata prikazani bojanjem.

• • Težina dokumenta - stranica je otvorena, ali je u početku bila prazna. Za preuzimanje morate malo pričekati. Međutim, ubrzo se pojavljuje vrijedne informacije o težini pojedinih odjeljaka. Pogađa veliki broj skripte i njihovu veličinu. Vrijedno je razmotriti kako se mogu smanjiti i smanjiti.

• • Veze iz početna stranica. Sve se uzima u obzir: naslov stranice, kategorije, label cloud oznake, slike, brojač, jvascript widgeti, komentari. Pokušao sam slijediti neke poveznice do stranica stranice. Adrese u komentarima su zatvorene, hvala, Međutim, broj veza se ne smanjuje zbog osobitosti Word Press koda, što je teško popraviti. Ukupno ispada 74 - 86 internih veza, ali SEO pravila, nije dopušteno da njihov broj bude veći od 100.
  • Postoje informacije o meta oznakama glavne stranice.

Informacije Razno

• • Razno - sadrži: ravnalo, povećalo, html editor, skrivene elemente.

• • Obrisi - prikazuje granice naslova, poveznica, obrisa blokova. Možete vidjeti konture dva ili tri elementa stranice u isto vrijeme.

• • Dimenzije - prikazuje dimenzije prozora, prozora. Moguće je podesiti veličinu prozora i font pritiskom na gumb za povećavanje i smanjivanje.

• • Alati - izvršen je prijelaz na usluge validatora. Dobio sam puno CSS i HTMI grešaka prilikom provjere. Na primjer, prvo se provjerava CSS, a zatim se nudi generirana ispravna stilska datoteka.

• • Po ovo vijeće učinio sljedeće: aktivirao drugi, jednostavna tema/nakratko/. Kopirao sam svoju stilsku datoteku, prebacio je u bilježnicu, spremio i izbrisao iz uređivača web-mjesta. Preuzeo sam ispravnu datoteku s validatora i umetnuo je umjesto svoje.

• • Otišao na stranicu. I što vidim, s novim, ispravnim stilovima? Stranica postoji, ali koja? Izgled je odvratan. Predložak je postao jedan stupac. Tekstovi su razvučeni od ruba do ruba, boja nema.
  • Stoga sam radije vratio svoju datoteku s CSS pogreškama i sve je bilo popravljeno. S druge strane, treba ispraviti greške pri provjeri valjanosti, ali to mi još nije dostupno.

Za preglednik Chrome

Web verzija. developer za preglednik Chrom, od istog autora, poboljšan i nadopunjen. U usporedbi s ekstenzijom za Mozilla preglednik, nešto drugačije opcije. Tekst je engleski, ali su neke početne stranice prevedene.

Bolje je kada osoba bar zna engleski jezik, jer Internet to treba. Nakon pregledavanja interneta. developer, ideje o strukturi bloga su poboljšane.

Analiza u ovoj ekstenziji bi trebala biti trajna, stoga je poželjno da je svaki bloger instalira u preglednik. Barem kako bi se kontrolirao broj poveznica na svakoj stranici.

Dakle, odlučili ste postati web programer. Znate li tri magije HTML izraz/ CSS / JS i mislite da ćete biti traženi nakon što savladate sva tri. Zamišljate kako ćete ih učiti redom, jednog po jednog. Dovršite svoj portfelj. Pronađite juniorsku poziciju. Obrišite nos onima koji sumnjaju.

Zapravo, čak Frontend programer- ugrožena vrsta. Ali ne zato što je manje posla :) Dapače, naprotiv. Svakodnevno sve veća količina znanja ne ostavlja šanse širokim kategorijama. Apstraktni "programeri" postoje samo u hakerskim filmovima i pučkoj mašti. Tako front-end programeri postupno postaju apstrakcija, dijeleći se na sve uže specijalnosti.

Nažalost, većina regrutera slabo razumije specifičnosti rada ljudi koje zapošljava. Uzmimo u obzir činjenicu da je IT regrutiranje također mlada disciplina. Voljno ili nesvjesno, regruteri stvaraju svojevrsno "polje dezinformacija".

Ako imate iskustva s iznajmljivanjem kuće, vjerojatno ste naišli na frazu " Internet WiFi". Trgovci nekretninama vole ovu frazu. Ne pokušavajte im objasniti da je Wi-Fi metoda distribucije iz neuspješnog izvora, a vas zanima ovo drugo. "Internet Wi-Fi" može biti bilo što: ADSL, 3G, fiber...

Temeljni nesporazum ne sprječava trgovce nekretninama da repliciraju besmislenu frazu. Ista priča s regrutima.

Pogledajmo koji su nazivi poslova koji odgovaraju definiciji "web razvoja" danas popularni. Odmah napominjem da ovaj vodič ne tvrdi da je potpun i odražava gledište osobe koja koristi JS kao glavni jezik.

Nazivi poslova

web programer

Sinonimi: web programer, web inženjer

Obično to podrazumijeva korištenje bilo kojeg CMS-a. Neki ljudi ozbiljno vjeruju da početnici koriste "jednostavni CMS", a stručnjaci koriste "napredni CMS". Savjet: ako osoba pita - Koji CMS koristite? sa skupinom programera u konferencijskoj sobi – vjerojatno je potpuni noob. I ovo nije optužba, već izjava činjenica. ozbiljan moderni projekti nemojte koristiti CMS, pa, možda kao pomoćni alat. Wordpress za bloganje tvrtki – da, moguće je. Wordpress kao trgovina je već upitna. " Društvena mreža na Joomli" - fantazije tinejdžera. CMS imaju svoje mjesto na tržištu, ali su odavno prestali biti "državotvorni" element.

"Izrada web stranice na CMS-u" otprilike je isto što i "zakivanje dizajna pod ThemeForest". "Peni štedi rublju!" - Dosta rečeno.

Web inženjer se bavi sadržajem, “vlada” izgledom, radi razne stvari i (povremeno) programira. web programer- ovo je najniža razina svih mogućih "web programera". U slučaju slobodnjaka, web programer, obično, to znači "čovjek-orkestar", odnosno "čovjek-radnik".

požuri!!! Tražimo strpljivog web developera!

CSS/HTML Developer/Markup Developer

Sinonimi: slagač

Položaj u kojem želite izraditi dizajn. Uvjeti za poznavanje JS-a i programiranja su minimalni ili ih nema. Poželjno je poznavati osnove projektiranja jer. dizajn se gotovo nikad ne prevodi iz PSD-a u HTML jedan na jedan. "Pixel-Perfect" - fraza-"zvono". Marker menadžera tiranina koji nema pojma kako funkcionira preglednik i mjeri kvalitetu rada piksel po piksel (sa zumom!) usporedbom PSD izgleda i HTML stranice. Pokušaji da se objasni razlika između iscrtavanja fontova u Photoshopu i pregledniku obično se percipiraju kao "svađanje umjesto rada". Izbjegavajte poslove "po pikselu" pod svaku cijenu.

Dizajner izgleda uvijek završava nakon dizajnera. Web programer uvijek završi nakon dizajnera izgleda. Susjedski parovi u ovom lancu se gotovo uvijek ne vole zbog toga.

Ivan ne samo da zna sve o zanimanjima iz ovog članka, već će i vama pomoći da ih savladate, napišete pravi životopis i pripremite se za razgovor.

Front End dizajner / web dizajner

Sinonimi: Web dizajner

Samiznaetekto™. Od stručnjaka se traži poznavanje vizualnog dizajna (eventualno dizajn sučelja), poznavanje tipografije, poznavanje Photoshopa. Poznavanje JS-a obično nije potrebno.

Na zapadnom tržištu dizajneri obično rade i layout. Prvo modernog rasporeda, uzeti u obzir uzvratni- i adaptivna prefiksa i animacija osrednje opisuje statična slika. Jeste li često vidjeli dizajnera kako prikazuje animaciju i mobilna verzija? Ja isto. Obično su njihove mogućnosti ograničene na odabir animacija iz knjižnice (koje odabire programer!). Drugo (ali iz istog razloga), pravom stručnjaku često je lakše napraviti dizajn odmah u obliku izgleda. Zašto raditi X + Y kada možete proći s Y?

Na našem tržištu, zbog tehnološkog zaostajanja, dizajneri i layouts su različiti ljudi.

Developer sučelja / UI dizajner

Slično prethodna verzija, ali s fokusom na dizajn interakcije. Specijalisti na ovoj poziciji obično puno komuniciraju s programerima, s klijentima, s menadžerima, pa opet s programerima... Iz tog razloga poželjno je poznavanje osnova razvoja softvera i komunikacijskih vještina. Vrlo često natječaj zahtijeva i specifična znanja mobilni razvoj, jer dva UI/UX stručnjaci rijetko se zapošljavaju. Imajte na umu da je u ovom području teško pronaći gradivo za samostalno učenje, što može biti ili plus (manja konkurencija) ili minus (teže ga je savladati). Ako možete učiti na primjerima, onda ne bi trebalo biti problema.

Front End Developer za mobitel/tablet

Pozicija za programera specijaliziranog za mobilne uređaje. Zahtijeva specifično znanje IOS platforme i Android. React Native je moderna verzija ove specijalizacije koja vam omogućuje korištenje web tehnologija za izradu izvornih aplikacija. Savjet: web aplikacije, hibridne aplikacije, izvorne aplikacije a izvorne aplikacije na web tehnologijama različite su stvari.

Front End Developer/Inženjer

Sinonimi: front-end developer, front-end developer

Generalizirani naziv posla za programera koji posjeduje HTML / JS / CSS. Obično se nalazi u malim tvrtkama gdje je širok raspon zadataka dodijeljen jednoj osobi. Znanje dizajna vjerojatno nije potrebno, ali bi bilo bonus. NA modernim uvjetima, sve više se zamjenjuje naslovom specifične tehnologije: jQuery programer, Razvojni programer okosnice, React Developer, Angular Developer... Vještine programiranja i slaganja teksta uključene su u paket zahtjeva.

JS Developer / Front End programer

Sinonimi: JS programer* / JS programer

Isti kao i prethodni, s više naglaska na programiranje, a manje na izgled i dizajn. Općenito, pojam programer (Inženjer u manjoj mjeri) umjesto programer, može značiti da će biti manje programiranja, a "stvari" - više. Osim kada je programski jezik izričito naveden (JS developer ~= JS programer).

JS programer također može značiti puni stog(Pogledaj ispod). U ovom slučaju tvrtka vjerojatno planira kasnije odlučiti o vašoj specijalizaciji – kada budu jasne vaše snage i slabosti. Ili kad se raspodijele drugi poslovi. Zato, JS programer gotovo uvijek ide uz Junior ili Stariji / sredina.

Frontend SEO stručnjak

Rijetka pozicija gdje trebate optimizirati HTML kod prema zahtjevima i željama tražilice(Google / Yandex). Specifična znanja: mikroformati, mikrooznačavanje. S obzirom da SEO izumire i zamjenjuje ga klasični marketing, preporučam izbjegavanje svega što sadrži ovu kraticu. Ako vam traženje posla nije hobi, naravno.

Stručnjak za front end pristupačnost

Naglasak na optimizaciji stranice za posebne čitatelje (na primjer, za osobe s ograničenim vidom). Izuzetno rijetka pozicija. Uvršten u Crvenu knjigu. Javlja se samo na velikim projektima.

front end dev. Ops

Pozicija specijalista za asembleru, automatizaciju, integraciju front-end aplikacija. Javlja se uglavnom u velike tvrtke, jer podrazumijeva prilično uzak krug zadataka. Trenutno znanje: Webpack / Gulp / Grunt. S vremenom će vas početi pitati što zapravo radite...

Front End Testiranje / QA

Pozicija za QA / QA specijalista za front-end aplikacije. Nalazi se u velikim i srednjim tvrtkama. Trenutno znanje: jedinični testovi, funkcionalni testovi, A/B testovi, ručno testiranje i automatizacija. Komunikacijske vještine su na popisu zahtjeva.

Mnogi ljudi pogrešno vjeruju da je "tester" više jednostavan rad nego "programer". Da, ponekad ima slobodnih radnih mjesta gdje možete "kliknuti na linkove" i "sastaviti izvješća". Ali to su izuzeci.

Natjerati Selenium NightmareJS da hoda po aplikaciji snimajući snimke zaslona i izvršavajući regresijske testove nije tako jednostavno. Uostalom, ovo je, zapravo, full-stack razvoj. Rad se izvodi u nekoliko okruženja odjednom (Electron + Chromium) i zahtijeva dobro osnovno znanje.

Full Stack Developer/Inženjer/Programer

Mjesto za stručnjaka za cijeli niz web tehnologija. Podrazumijeva razumijevanje interakcije klijent-poslužitelj, iskustvo rada s bazama podataka, poznavanje asinkronog programiranja itd. Izbor ozbiljnih ljudi.

puni stog podijeljen je u dvije kategorije: FullStack-JS i sve ostalo. U prvom slučaju, kao što možete pretpostaviti, JS se koristi na poslužitelju i na klijentu. U drugom slučaju, na poslužitelju se koristi Ruby / Python / PHP.

Za početnike, da se ne prskaju između različiti jezici i platforme, toplo preporučujem davanje prednosti prvoj opciji (ako je moguće). Učenje više jezika odjednom težak je posao.

FullStack JS uključuje korištenje web okvira temeljenih na NodeJS. To može biti monolitni full-stack framework (poput MeteorJS), reaktivna pozadina s minimalističkim klijentom (poput HorizonIO) ili sklop iz neovisnih biblioteka (poput KoaJS + ReactJS). Svi oni imaju svoje prednosti i nedostatke.

FullStack JS često se koristi u aplikacijama u stvarnom vremenu: sobe za čavrljanje (a la Slack / Gitter), financijske aplikacije (skalabilnost, PayPal...), serveri za igre. Sposobnost prosljeđivanja informacija klijentu (stvaranje u stvarnom vremenu) gotovo izvan kutije glavni je pokretač rasta ove tehnologije.

arhitekt

Najviši stupanj klasičnog programiranja. Svako slobodno radno mjesto s riječju Arhitekt pretpostavlja višeg stručnjaka i vjerojatno vas kratkoročno neće zanimati, dragi čitatelju.

voditi

Upražnjena radna mjesta za voditelje vrlo su različita. Koliko tvrtki - toliko različitih potencijalnih kupaca. S druge strane, to je slučaj kada osoba definira mjesto, a ne mjesto – osobu. Za početnike to nije od interesa, jer. Junior Lead je ista glupost kao i Junior Architect.

NodeJS Developer / BackendJS Developer

JS pozadina. "Sjajan i užasan" NodeJS - što samo o njemu nisu rekli. Pohvale, optužbe za "hipsterizam" - sve je to bilo...

Pozdrav, dragi čitatelji bloga. Predstavljam vam još jedan članak koji će biti posvećen pregledu mogućnosti dodatka za Firefox () pod web ime programer.

Ovaj dodatak za preglednik Firefox () je vrsta švicarski nož za webmastere, koji u svom sastavu ima mnogo značajki i alata.

Web Developer ni na koji način ne oduzima dostojanstvo onome o čemu smo ranije govorili, već ga uvelike nadopunjuje. Ako još niste dobro upoznati s mogućnostima Firebuga, o tome možete pročitati na priloženoj poveznici.

Instalacija i značajke WebDevelopera

Možete vidjeti kako je posložen onaj koji vas zanima html obrazac, promijeniti neke njegove parametre, na primjer, omogućiti prikaz unesenih znakova u poljima zaporke ili pretvoriti GET zahtjeve u POST i obrnuto.

Ostali alati ovog prekrasnog dodatka

U području "Grafike" postoje stavke koje će vam omogućiti da onemogućite prikaz slika (bilo svih slika ili samo onih preuzetih s vanjski resursi, ili samo animirane). Također možete jednostavno potvrditi okvire pored prave bodove u izborniku "Grafika" konfigurirajte prikaz informacija o sadržaju atributa ALT ( alternativni tekst), kao i informacije o težini zadane fotografije, njezinoj veličini u pikselima i putu do slikovne datoteke.

Također će biti moguće konfigurirati dodatak Web Developer za prikaz obrisa slika, pronalaženje oštećenih slika, prikaz sažetih informacija o svim fotografijama na otvorenoj web stranici i, na primjer, umjesto toga postaviti prikaz sadržaja ALT atributa.

U području "Informacije" ovaj dodatak može pružiti veliki iznos informacije o web stranici otvorenoj u pregledniku kao cjelini. Na ovom jelovniku ima puno stavki. Na primjer, aktiviranjem stavke "Prikaži veličine blokova" odabrat ćete sve blokove (DIV spremnike) na web stranici i pored njih prikazati njihove točne veličine u pikselima.

Također će biti moguće uz pomoć dodatka Web Developer vidjeti strukturu naslova ove stranice, podatke o poveznicama na njoj i još mnogo toga.

U području "Razno" koncentrirane su one značajke koje nisu našle mjesta u drugim grupama alata. Zanimljiv iz ove skupine je "vladar" čijom aktivacijom dobivate priliku da izmjerite udaljenost između elemenata web stranice ili za definiranje veličine u pikselima ovog ili onog bloka.

Nakon što aktivirate ravnalo iz dodatka, kursor miša se pretvara u križić i možete pritisnuti i držati lijevi gumb miš, označite željeni element stranice. Ispod alatne trake web-programera na vrhu prozora preglednika Firefox nalazi se alatna traka ravnala koja će prikazati informacije o veličini odabira.

U rubrici "Razno" dosta zanimljivih i korisne značajke. Na primjer, stavka " HTML editor» otvara dodatni prozor s HTML kodom ove stranice. Sve promjene napravljene u njemu odmah će se prikazati u pregledniku. Vrlo praktičan za brze eksperimente s dizajnom web stranice. U ovom slučaju, naravno, neće biti napravljene nikakve promjene u stvarnim datotekama mehanizma web projekta.

Ali možete sa koristeći Web Programer u stvarnom vremenu za simulaciju različitih opcija za izradu određene stranice putem Firefoxa. Ako vam odgovara nova verzija koda modelirana s njom, tada ćete morati napraviti izmjene u stvarnim datotekama motora web stranice, koje možete pronaći koristeći opisanu metodu.

Područje "Obrisi" bit će vam od velike pomoći pri proučavanju elemenata dizajna web stranice. Aktiviranjem jedne ili druge stavke u izborniku "Konture" možete odabrati na stranici pojedinačne vrste njegovi elementi, na primjer, elementi na razini bloka (DIV spremnici), elementi Html tablice(), okviri (članak živi) ili poveznice na stranici koje nemaju atribut Title. Uvelike poboljšava vidljivost izgleda.

Izbornik Veličine sadrži nekoliko opcija za kontrolu veličine prozora preglednika. Također možete postaviti prozor na proizvoljnu veličinu kako biste vidjeli ponašanje ove stranice kada se naprave promjene.

Grupa "Alati" sadrži značajke za provjeru valjanosti (sukladnost sa suvremenim zahtjevima za web razvoj). Možete provjeriti valjanost HTML-a, CSS-a, WAI-a i odjeljka 508. Validacija se vrši putem online validatora od .

Dodatak se može konfigurirati odabirom stavke s istim nazivom u grupi alata "Postavke". Zaključno, želim reći da pomoću mogućnosti Web Developera možete lako shvatiti kako je uređena ova ili ona web stranica koja vam se sviđa, a također će biti vrlo korisna pri izradi i uklanjanju pogrešaka na web stranicama.

Sretno ti! Vidimo se uskoro na stranicama bloga

Više videa možete pogledati ako odete na

");">

Možda će vas zanimati

SEObar - praktičan i informativan SEO dodatak za Operu
Firebug - kako koristiti najbolji dodatak za webmastere
CSS optimizacija i kompresija u Page Speed ​​​​- kako onemogućiti vanjske datoteke stilove i spojite ih u jedan za brže učitavanje
Traka Rds i traka Promotor stranice za pomoć webmasteru
Safari - gdje preuzeti i kako prilagoditi besplatni preglednik za Windows od Applea
Proširenja i teme za Google Chrome
Dodaci i teme za Mozilla Firefox- koje dodatke i ekstenzije treba preuzeti i instalirati

Vlad Merzhevich

Iako postoji produžetak za dvoje različitim preglednicima, verzija za Firefox je ažurirana i redovito se ažurira, što se ne može reći za verziju za Chrome. Osim toga, podržava ruski jezik. Stoga će ubuduće opis vrijediti samo za Firefox.

Instalacija je vrlo jednostavna, dovoljno je otići na web stranicu autora s Firefoxom i kliknuti na "Preuzmi", nakon čega ćete biti preusmjereni na stranicu gdje trebate kliknuti na "Dodaj u Firefox" (Slika 7.1).

Riža. 7.1. Dodavanje u Firefox

Također možete otići izravno na stranicu s proširenjem.

Nakon dodavanja pojavit će se prozor upozorenja (Sl. 7.2), kliknite gumb "Instaliraj sada" i postupak instalacije je završen.

Riža. 7.2. Web instalacija programer

Drugi način za instaliranje različitih proširenja je korištenje izbornika Alati > Dodaci. U okvir za pretraživanje upišite " web programer”, Pritisnite Enter, dodatak koji nam je potreban pojavit će se na donjem popisu (Sl. 7.3).

Riža. 7.3. Prozor dodataka za Firefox

Samo proširenje izgleda kao traka izbornika iznad kartica (Sl. 7.4), a dostupno je i putem izbornika Alati > Web Developer. Panel se može uključiti/isključiti putem izbornika. Pogled > Alatne trake ili desnim klikom na traku proširenja.

Riža. 7.4. web programer u pregledniku

Prođimo kroz stavke izbornika Web Developer.

Onemogući predmemoriju

Onemogućuje ugrađenu predmemoriju preglednika. Preglednik obično pohranjuje slike i kopije pregledanih stranica na lokalni disk kako biste uštedjeli vrijeme preuzimanja. Kada se stranica ponovno otvori, preglednik uspoređuje lokalnu kopiju s originalom i ako se podudaraju, učitava se lokalna kopija. U nekim slučajevima, učitavanje lokalna verzija stranici, čak i ako je izvornik izmijenjen. Na primjer, u postavkama preglednika može se postaviti provjera svaka dva sata da se vidi je li stranica u predmemoriji ažurirana na poslužitelju. Međutim, Firefox vam ne dopušta fino podešavanje predmemorije kao što to radi Opera.

Također možete osvježiti stranicu zaobilazeći predmemoriju pomoću kombinacije tipki Ctrl + F5 , podržavaju je svi preglednici.

Java je programski jezik koji je razvio Sun Microsystems. Mali programi u ovom jeziku (tzv. appleti) koriste se za proširenje funkcionalnosti web stranica. Firefox ima ugrađenu podršku za ovaj jezik, koja se može onemogućiti putem ove stavke izbornika. NA verzije Firefoxa 3.6 ne radi.

Onemogući JavaScript

Programski jezik dizajniran za pokretanje skripti - programa integriranih s web stranicom. JavaScript se naširoko koristi pri izradi web stranica za poboljšanje njihove funkcionalnosti, na primjer, stvaranje raznih izbornika, obrazaca, efekata itd. Ako odaberete Onemogući JavaScript > Potpuno, tada će sve funkcije na stranici prestati raditi. Ova stavka izbornika može se koristiti za testiranje stranice bez skripti, kao i za zaobilaženje raznih ograničenja koja postavljaju autori stranice, poput onemogućavanja desne tipke miša. Web Developer kaže da ne postoje ograničenja koja se ne mogu zaobići.

Onemogući META preusmjeravanje

S oznakom može se automatski preusmjeriti na navedeni dokument nakon određenog vremena. Za to se koristi oznaka. i vrijednost Refresh atributa http-equiv (Primjer 7-1).

Primjer 7.1. Automatsko prosljeđivanje

Prosljeđivanje se može primijeniti u chatovima za ažuriranje trenutni dokument ili preusmjeriti na nova adresa. Ali također se koristi sa zlonamjernim namjerama, na primjer, za često prikazivanje kontekstualnog oglašavanja ili bannera. Ova stavka izbornik vam omogućuje blokiranje slične oznake .

Onemogući minimalnu veličinu fonta

NA Firefox postavke možete postaviti minimalnu veličinu fonta, ona će se koristiti za tekst koji je manji od navedene veličine. To čini pregledavanje lakšim za čitanje, posebno na stranicama koje prikazuju tekst u fontu koji je premalen za udobno čitanje.

Za postavljanje minimalne veličine fonta odaberite iz izbornika Alati > Opcije..., otvorite ploču Sadržaj i kliknite gumb Napredno u grupi Fontovi i boje. Možete odabrati minimalnu veličinu fonta iz padajućeg izbornika Najmanja veličina slova.

Web Developer vam omogućuje da brzo omogućite ili onemogućite ovu značajku. Međutim, ako minimalna veličina fonta nije postavljena u postavkama, ova stavka ni na koji način ne utječe na rezultat.

Onemogući boje stranice

Isključuje sve boje postavljene pomoću svojstva pozadine ili boje pozadine. Također pogođeno pozadinske slike, koji su postavljeni s pozadinom .

Onemogući blokator skočnih prozora

Skočni prozori obično se koriste za reklame, pa su obično blokirani i nedopušteni u preglednicima. Ova stavka omogućuje brzo uključivanje i isključivanje ove opcije.

Onemogući proxy

Proxy se obično shvaća kao poslužitelj ili program koji vam omogućuje povezivanje s internetom, kao i u svrhu postavljanja zahtjeva u ime drugih klijenata. Ako u postavkama Firefoxa ( Alati > Opcije.., ploča Napredno, kartica Mreža, gumb Konfiguriraj) je postavljen na "Koristi postavke proxy sustava", tada je ova stavka neaktivna.

Onemogući preporuke

Referrer je jedno od zaglavlja HTTP protokola i omogućuje vam da dobijete adresu stranice s koje je korisnik došao na stranicu. Ako vam je stalo do sigurnosti vaših podataka, omogućite ovu stavku.

Kolačići ili kolačići kako se u žargonu nazivaju male su tekstualne datoteke na lokalnom računalu koje pohranjuju informacije korisne za stranicu. Uz pomoć kolačića možete zapamtiti ime korisnika, njegov status i druge podatke koji se koriste na stranici. Firefox postavlja postavke kolačića putem izbornika Alati > Opcije..., ploča Privatnost. Iz sigurnosnih razloga općenito možete onemogućiti prihvaćanje kolačića sa stranica.

Sami kolačići su skup nekih parametara:

• jedinstveno ime;
• značenje;
• put - slanje kolačića samo ako se put i adresa stranice podudaraju, put "/" označava bilo koju stranicu;
• domena - za koju adresu stranice je zapis relevantan;
• datum isteka - govori pregledniku kada se kolačić može izbrisati.

Onemogući kolačiće

Onemogućuje prihvaćanje kolačića s web-mjesta.

Izbriši kolačiće sesije

Kolačići se često koriste za provjeru autentifikacije korisnika. Nakon unosa imena i lozinke generira se jedinstveni kod koji se sprema u kolačiće. Kada ponovno posjetite stranicu, ovaj kod se provjerava i ako odgovara kodu poslužitelja, tada stranica "prepoznaje" korisnika. Odabirom ove stavke brišu se sve spremljene sesije.

Brisanje kolačića za domenu

Briše sve kolačiće za stranicu koja je trenutno otvorena u pregledniku.

Izbrišite kolačiće za put

Briše sve kolačiće za stranicu čija se putanja podudara s putanjom stranice otvorene u pregledniku.

Informacije o kolačićima

Otvara se dodatna stranica na kojoj su u tabelarnom obliku prikazani svi kolačići s ove stranice. Njihovi se parametri mogu uređivati ​​ili se kolačići mogu u potpunosti izbrisati (Slika 7.5).

Riža. 7.5. Informacije o kolačićima s youtube.com

Dodajte kolačiće

Omogućuje vam da umjetno postavite kolačiće za trenutnu stranicu ili bilo koju drugu, kao i da postavite potrebne parametre (Sl. 7.6).

Riža. 7.6. Prozor za dodavanje

Dodavanje je obično potrebno za otklanjanje pogrešaka u radu kolačića i ponašanju web mjesta, ako postoji.

css

Ovaj izbornik je odgovoran za stilove trenutne stranice.

Onemogući stilove

Dizajnirano za onemogućavanje stilova na nekoj osnovi.

Svi stilovi

Onemogućuje sve stilove koji se koriste na stranici.

Zadani stil preglednika

Onemogućuje stil za sve elemente kojima ga prema zadanim postavkama dodaje preglednik. Na primjer, tekst unutra

i

Ima drugu veličinu.

Zaglavlje

Nakon isključivanja stila, veličina teksta ovih elemenata bit će ista.

Umetnuti stilovi

Onemogućuje stil unutar oznake