Trenutno, jedno od vodećih područja razvoja softvera je web razvoj. Web razvoj se odnosi na razvoj internet servisa ili web aplikacije, njegovo održavanje, podršku i optimizaciju pretraživača (SEO).

Junior web developeri se bave stvarnim kreiranjem jednostavnih web aplikacija, uglavnom razvojem na strani klijenta i dijelom programiranjem na strani servera, iako serverski dio u takvim aplikacijama obično nije jako složen. Iskusniji web programeri rade na složenijim dijelovima pozadinske logike i integracije sa eksterni sistemi. Za SEO često angažovani pojedinac ili cijeli tim specijalista.

Da biste potvrdili kvalifikaciju Junior Web Developer, potrebna su vam sljedeća znanja:

• Programiranje (poznavanje sistema brojeva, elementarnih algoritama)
• Jezici za prezentaciju HTML/XML/CSS (osnovni koncepti i principi, sintaksa)
• JavaScript jezik (sintaksa, rukovanje događajima, rad sa DOM-om)

Ova lista ne uključuje znanje serverske web tehnologije, kao što su PHP, Python ili Java. Oni će biti uključeni u napredniju kvalifikaciju Web Developer sa specijalizacijama. Za provjeru osnovnih znanja iz oblasti serversko logičkog programiranja, kvalifikaciji je dodat i test iz osnova programiranja.

Obavezni testovi

Programiranje - osnove

Pošto se od juniora traži da zna JavaScript, potrebno je da zna osnove programiranja.Ovaj test sadrži prilično elementarna pitanja o Bulovoj algebri, brojevnim sistemima (posebno binarnim i heksadecimalnim) i jednostavnim algoritmima.

HTML - Osnove

HTML test testira Juniorovo znanje o glavnim tagovima i elementima jezika koji će biti potrebni u radu.Test takođe sadrži pitanja o nekim skraćenicama, pretraživačima i indirektno o XML-u.

CSS - Osnove

Junior" treba da zna CSS zajedno sa HTML-om, inače će razvoj manje-više ozbiljnog sajta biti bremenit poteškoćama. Test pokriva poznavanje osnovnih svojstava i atributa, box-modela, selektora.

XML - Osnove

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

JavaScript - Osnove

Ako je ranih 2000-ih poznavanje JavaScript Juniora bilo opciono, sada, 10 godina kasnije, ovo je jedan od primarnih zahtjeva.Poznavanje JavaScripta, pored dinamičkih mogućnosti u klijentskom pretraživaču, otvara put za učenje složenijih tehnologija kao što je AJAX, koji vam omogućava da kreirate bogate Internet aplikacije (Rich Internet Applications, RIA). Test pitanja provjeravaju sintaksu, osnovne funkcije i objekte JavaScripta.

Pisanje članaka

Predmet članka se predlaže upravi i prihvata ili odbija uz alternativni prijedlog. Tema bi trebala biti predmetna oblast. Ovaj uslov testira Juniorovu sposobnost da brzo shvati suštinu određene tehnologije/pristupa/okvira. Alternativno, možete predložiti 3-4 teme za članak na razmatranje administraciji, a administracija će ponuditi jednu od njih za pisanje. koji ste napisali nije trebalo prethodno biti objavljeno na drugim resursima.

Pitanja za izradu nacrta

Potreba za sastavljanjem pitanja ima iste ciljeve kao i pisanje članka: sposobnost da se analitički pristupi razvoju novih stvari, da se odvoje važni aspekti od nevažnih. Teme pitanja su takođe dogovorene sa administracijom (ovo je neophodno jer u nekim testovima ima dosta pitanja, a kada se doda još jedno, velika je verovatnoća da slično pitanje već postoji).

Bitan: Pitanja o članku možete postaviti u komentarima na stranici vaše kvalifikacije (ne brkati sa javna stranica opis), kojem se može pristupiti sa linka na profilu u bloku Kvalifikacije.

Radujemo se vašim komentarima i povratnim informacijama.

Web Developer Mozilla Incredible korisno proširenje. Instalira se u pretraživače i blogeru donosi sveobuhvatne informacije o stanju sajtova. U početku je ovaj dodatak mogao biti instaliran samo u Firefox-u, ali kasnije ga je isti autor, Chris Pederik, razvio i za Chrome. Možete ga preuzeti i instalirati, u najnovijoj verziji, na engleskom.

Web Developer mozilla ruska verzija

Za ruski bloger moguće je instalirati ovu ekstenziju na ruskom, ali u ovom slučaju nije instalirana najnovija verzija, već prethodna - Web Developer 1.19.

Prvo, u postavkama pretraživača Firefox, ekstenzija je instalirana, na engleskom. Idemo na karticu "Dodaci". U novom prozoru sa desne strane vidjet ćemo dugmad za nekoliko programa, uključujući "Web Developer". Uključite dugme "Postavke", nakon čega će se pojaviti prozor za podešavanja ovog alata.

Da biste omogućili ruski jezik, morate pratiti vezu do verzija. U novom prozoru odaberite broj 1.19, kliknite na dugme "dodaj u Firefox". Nakon ponovnog pokretanja pretraživača, gornja ploča ekstenzije će biti na ruskom jeziku. Tada sve postaje jasno. Prvo učitajmo našu stranicu i počnimo je analizirati, uz pomoć brojnih opcija, na gornjoj ploči.

Kada ponovo otvorite pretraživač, panel je ponovo na engleskom, tako da morate ponovo da instalirate ruski jezik.

Web Developer mozilla onemogućuje neke funkcije

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

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

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

• • "CSS greške" - takođe otvara traku padajućeg menija. Stilovi se mogu onemogućiti. Ali želim da ih vidim, pa kliknem na liniju: CSS info. Kao rezultat, otvorio se list sa svim stilovima ugrađenim u temu, dodacima i widgetima, što je rezultiralo dugačkom web stranicom.

« Obrasci” – str Prilikom pregleda stranice, trake web stranica, obrasci za pretplatu i pretraga bili su istaknuti bojom. Ova kartica je potrebna webmasterima prilikom kreiranja predložaka, jer ima puno linija s parametrima.

Web Developer mozilla - drugi paneli za evaluaciju stranice

• • Grafika - prikaži atribute alt - opisi iznad slika su istaknuti. Možete pogledati sve stranice stranice i utvrditi gdje nema opisa za ispravljanje. 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. Nađ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 informativnoj tabli ima puno linija. Klikom na „prikaži id i klasu“, dok su linkovi istaknuti na njihovoj lokaciji, odnosno na sajtu. Ovo je vrlo impresivno, jer su atributi naslova i ugniježđenje dokumenata prikazani bojama.

• • Težina dokumenta - stranica je otvorena, ali je u početku bila prazna. Morate malo pričekati za preuzimanje. Međutim, ubrzo se pojavljuje vrijedne informacije o težini pojedinih sekcija. Udara veliki broj skripte i njihovu veličinu. Vrijedi razmisliti kako se mogu smanjiti i smanjiti.

• • Linkovi iz početna stranica. Sve se uzima u obzir: naziv stranice, kategorije, oznake u oblaku oznaka, slike, brojač, jvascript widgeti, komentari. Pokušao sam da pratim neke linkove do stranica sajta. Adrese u komentarima su zatvorene, hvala, međutim, broj linkova se ne smanjuje zbog posebnosti Word Press koda, što je teško popraviti. Ukupno, ispada 74 - 86 internih veza, ali SEO pravila, nije dozvoljeno da njihov broj prelazi 100.
  • Postoje informacije o meta tagovima glavne stranice.

Information Miscellaneous

• • Razno - sadrži: ravnalo, lupu, html editor, skrivene elemente.

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

• • Dimenzije - prikazuje dimenzije prozora, okvir za prikaz. Moguće je podesiti veličinu prozora i fonta pritiskom na dugme za uvećanje i smanjenje.

• • Alati - vrši se prelazak 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.

• • By ovaj savet uradio sljedeće: aktivirao drugi, jednostavna tema/nakratko/. Kopirao sam svoj stilski fajl, prenio ga u notepad, sačuvao ga i izbrisao iz uređivača stranice. Skinuo sam ispravnu datoteku iz validatora i ubacio je umjesto svoje.

• • Otišao na stranicu. I šta ja vidim, sa novim, ispravnim stilovima? Stranica je postavljena, ali koja? Izgled je odvratan. Šablon je postao jednostupačan. Tekstovi su razvučeni od ruba do ruba, nema boja.
  • Stoga sam radije vratio svoj fajl sa CSS greškama i sve je bilo popravljeno. S druge strane, potrebno je ispraviti greške u validaciji, ali to mi još nije dostupno.

Za preglednik Chrome

Web verzija. programer za Chrom pretraživač, istog autora, poboljšan i dopunjen. U poređenju sa ekstenzijom za Mozilla pretraživač, malo drugačije opcije. Tekst je engleski, ali neke početne stranice su prevedene.

Bolje je kada čovjek barem poznaje engleski jezik, jer Internetu to treba. Nakon pregledavanja weba. programer, ideje o strukturi bloga su poboljšane.

Analiza u ovoj ekstenziji treba da bude trajna, stoga je poželjno da je svaki bloger instalira u pretraživač. Barem da bi se kontrolirao broj linkova na svakoj stranici.

Dakle, odlučili ste da postanete web developer. Znate li tri magije HTML termin/ CSS / JS i mislite da ćete biti traženi kada savladate sva tri. Zamišljate kako ćete ih učiti redom, jednog po jednog. Upotpunite svoj portfolio. Pronađite juniorsku poziciju. Obrišite nos sumnjičavcima.

U stvari, čak Frontend developer- ugrožene vrste. Ali ne zato što ima manje posla :) Dapače, naprotiv. Svakodnevno rastuća količina znanja ne ostavlja šanse za široke kategorije. Apstraktni "programeri" postoje samo u hakerskim filmovima i popularnoj mašti. Tako front-end programeri postepeno postaju apstrakcija, dijeleći se na sve uže specijalitete.

Nažalost, većina regrutera slabo razumije specifičnosti rada ljudi koje zapošljavaju. Uzmimo u obzir činjenicu da je IT zapošljavanje također mlada disciplina. Voljno ili nesvjesno, regruteri stvaraju neku vrstu „polja dezinformacija“.

Ako imate iskustva sa iznajmljivanjem kuće, vjerovatno ste naišli na frazu " Internet WiFi". Realtori vole ovu frazu. Ne pokušavajte im objasniti da je Wi-Fi metoda distribucije iz neuspjelog izvora, a da vas zanima ovaj drugi. "Internet Wi-Fi" može biti bilo šta: ADSL, 3G, fiber...

Osnovni nesporazum ne sprečava prodavce nekretnina da repliciraju besmislenu frazu. Ista priča sa regruterima.

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

Nazivi poslova

web developer

Sinonimi: Web developer, web inženjer

Obično to podrazumijeva korištenje bilo kojeg CMS-a. Neki ljudi ozbiljno vjeruju da početnici koriste "jednostavan CMS", a stručnjaci "napredni CMS". Savjet: ako osoba pita - Koji CMS koristite? sa grupom programera u konferencijskoj sali - verovatno je potpuni noob. I ovo nije optužba, već konstatacija činjenice. ozbiljno savremeni projekti nemojte koristiti CMS, pa, možda kao pomoćni alat. Wordpress za blogovanje kompanije - da, moguće je. Wordpress kao prodavnica je već sumnjiv. " Socijalna mreža na Joomla" - fantazije tinejdžera. CMS-ovi imaju svoje mjesto na tržištu, ali su odavno prestali biti "državotvorni" element.

“Izrada web stranice na CMS-u” je otprilike isto što i “zakivanje dizajna pod ThemeForestom”. "Peni štedi rublju!" – rekao je Nuff.

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

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

CSS / HTML Developer / Markup Developer

Sinonimi: slagač

Pozicija u kojoj želite da napravite dizajn. Zahtjevi za poznavanje JS-a i programiranja su minimalni ili ih nema. Poželjno je poznavati osnove dizajna, jer. dizajn se gotovo nikada ne prevodi sa PSD u HTML jedan na jedan. "Pixel-Perfect" - fraza-"zvono". Marker menadžera tiranina koji nema pojma kako pretraživač radi i mjeri kvalitet rada piksel po piksel (sa zumiranjem!) poređenjem PSD izgleda i HTML stranice. Pokušaji da se objasni razlika između prikazivanja fontova u Photoshopu i u pretraživaču obično se doživljavaju kao "svađanje umjesto rada". Izbjegavajte poslove "po pikselu" po svaku cijenu.

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

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

Front End dizajner / Web dizajner

Sinonimi: Web dizajner

Samiznaetekto™. Od specijaliste se traži poznavanje vizuelnog dizajna (eventualno dizajn interfejsa), poznavanje tipografije, poznavanje Photoshopa. Poznavanje JS-a obično nije potrebno.

Na zapadnom tržištu, dizajneri obično rade i raspored. Prvo moderan raspored, s obzirom odzivan- i adaptivni prefiksi i animacije je osrednje opisano statičnom slikom. Jeste li često vidjeli dizajnera koji prikazuje animaciju i mobilna verzija? I ja isto. Obično su njihove mogućnosti ograničene na izbor animacija biblioteke (odabrane od strane programera!). Drugo (ali iz istog razloga), pravom stručnjaku je često lakše napraviti dizajn odmah u obliku izgleda. Zašto raditi X + Y kada se može snaći sa Y?

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

Programer interfejsa / Dizajner korisničkog sučelja

Slicno prethodna verzija, ali s fokusom na dizajn interakcije. Specijalisti na ovoj poziciji obično dosta komuniciraju sa programerima, sa klijentima, sa menadžerima, pa opet sa programerima... Iz tog razloga je poželjno poznavanje osnova razvoja softvera i komunikacijskih veština. Vrlo često, konkurs zahtijeva i specifična znanja mobilni razvoj, jer dva UI/UX stručnjaci rijetko se zapošljavaju. Imajte na umu da je u ovoj oblasti teško pronaći materijal za samostalno učenje, što može biti i plus (manja konkurencija) i minus (teže savladati). Ako ste u mogućnosti učiti iz primjera, onda ne bi trebalo biti problema.

Mobile/tablet Front End Developer

Pozicija za programera specijaliziranog za mobilne uređaje. Zahteva specifično znanje IOS platforme i Android. React Native je moderna verzija ove specijalizacije koja vam omogućava da koristite web tehnologije za kreiranje izvornih aplikacija. Savjet: web aplikacije, hibridne aplikacije, izvorne aplikacije i izvorne aplikacije na web tehnologijama su različite stvari.

Front End Developer / Inženjer

Sinonimi: front-end programer, front-end developer

Generalizirani naziv posla za programera koji posjeduje HTML / JS / CSS. Obično se nalazi u malim kompanijama u kojima je širok spektar zadataka dodijeljen jednoj osobi. Znanje dizajna vjerovatno nije potrebno, ali bi bilo bonus. V savremeni uslovi, sve više se zamjenjuje naslovom određene tehnologije: jQuery Developer, Backbone Developer, React Developer, Angular Developer... Vještine programiranja i montaže su uključene u paket zahtjeva.

JS Developer / Front End programer

Sinonimi: JS programer* / JS programer

Isto kao i prethodni, sa više naglaska na programiranju, a manje na izgledu i dizajnu. Općenito, termin developer (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 eksplicitno specificiran (JS programer ~= JS programer).

JS Developer takođe može značiti full stack(vidi dolje). U ovom slučaju, kompanija vjerovatno planira kasnije odlučiti o vašoj specijalizaciji – kada vam budu jasne prednosti i slabosti. Ili kada se raspodijele drugi poslovi. dakle, JS Developer skoro uvek ide uz Junior ili Senior / Srednji.

Frontend SEO stručnjak

Rijetka pozicija gdje je potrebno optimizirati HTML kod prema zahtjevima i željama tražilice(Google / Yandex). Specifična znanja: mikro-formati, mikro-oznake. S obzirom na to da SEO odumire i zamjenjuje ga klasični marketing, preporučujem izbjegavanje svega što sadrži ovaj akronim. Ako vam traženje posla nije hobi, naravno.

Stručnjak za pristupačnost prednjeg kraja

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

front end dev. Ops

Pozicija za specijaliste za montažu, automatizaciju, integraciju front-end aplikacija. Javlja se uglavnom u velike kompanije, jer podrazumijeva prilično uzak spektar zadataka. Trenutno znanje: Webpack / Gulp / Grunt. Vremenom ćete početi da se pitate šta zapravo radite...

Front End Testiranje / QA

Pozicija za QA / QA stručnjaka za front-end aplikacije. Nalazi se u velikim i srednjim preduzećima. Trenutna znanja: jedinični testovi, funkcionalni testovi, A/B testovi, ručno testiranje i automatizacija. Komunikacijske vještine su na listi zahtjeva.

Mnogi ljudi pogrešno vjeruju da je "tester" više jednostavan rad nego "programer". Da, ponekad postoje slobodna radna mjesta na kojima možete "kliknuti na linkove" i "sastaviti izvještaje". Ali ovo su izuzeci.

Natjerati Selenium NightmareJS da hoda po aplikaciji i pravi snimke ekrana i pokreće regresijske testove nije tako lako. Na kraju krajeva, ovo je, u stvari, kompletan razvoj. Rad se izvodi u nekoliko okruženja odjednom (Electron + Chromium) i zahtijeva dobro osnovno znanje.

Full Stack programer/inženjer/programer

Pozicija za stručnjaka u cijelom nizu web tehnologija. Podrazumijeva razumijevanje klijent-server interakcije, iskustvo sa bazama podataka, poznavanje asinhronog programiranja, itd. Odabir ozbiljnih ljudi.

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

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

FullStack JS uključuje korištenje web okvira zasnovanih na NodeJS-u. To može biti monolitni full-stack framework (kao MeteorJS), reaktivni backend sa minimalističkim klijentom (kao HorizonIO) ili sklop iz nezavisnih biblioteka (kao što je KoaJS + ReactJS). Svi oni imaju svoje prednosti i nedostatke.

FullStack JS se često koristi u aplikacijama u realnom vremenu: chat sobe (a la Slack/Gitter), finansijske aplikacije (skalabilnost, PayPal...), serveri za igre. Mogućnost prosljeđivanja informacija klijentu (stvaranje u realnom vremenu) gotovo iz kutije je glavni pokretač razvoja ove tehnologije.

architect

Najviši stepen klasičnog programiranja. Svako slobodno radno mjesto sa riječju Arhitekt pretpostavlja Senior specijalista i vjerovatno nije od interesa u kratkom roku za vas, dragi čitatelju.

dovesti

Slobodna radna mjesta za vodeće pozicije su veoma različita. Koliko kompanija - toliko različitih tragova. S druge strane, to je slučaj kada osoba definira mjesto, a ne mjesto - osobu. Za početnike nije od interesa, jer. Junior Lead je ista glupost kao i Junior Architect.

NodeJS Developer / BackendJS Developer

JS backend. "Veliki i strašni" NodeJS - ono što jednostavno nisu rekli o tome. Pohvale, optužbe za "hipsterizam" - sve je to bilo...

Pozdrav, dragi čitaoci blog stranice. Skrećem vašu pažnju na još jedan članak koji će biti posvećen pregledu mogućnosti dodatka za Firefox () pod web ime developer.

Ovaj dodatak za Firefox pretraživač () je neka vrsta Švicarski nož za webmastere, koji u svom sastavu ima puno funkcija i alata.

Web Developer ni na koji način ne umanjuje dostojanstvo onoga o čemu je ranije bilo riječi, već ga uvelike nadopunjuje. Ako još niste dobro upoznati sa mogućnostima Firebuga, o tome možete pročitati na navedenom linku.

Instalacija i karakteristike WebDeveloper-a

Možete vidjeti kako je uređena ona koja vas zanima html obrazac, promijeniti neke od njegovih parametara, na primjer, omogućiti prikaz unesenih znakova u poljima lozinke ili pretvoriti GET zahtjeve u POST i obrnuto.

Ostali alati ovog divnog dodatka

U oblasti "Grafika" postoje stavke koje će vam omogućiti da onemogućite prikaz slika (bilo svih slika ili samo onih preuzetih sa eksterni resursi, ili samo animirani). Također možete jednostavno označiti kućice pored prave tačke u meniju "Grafika" konfigurišite prikaz informacija o sadržaju atributa ALT ( alternativni tekst), kao i informacije o težini date fotografije, njenoj veličini u pikselima i putanji do datoteke slike.

Također će biti moguće konfigurirati dodatak Web Developer da prikazuje obrise slika, pronalazi oštećene slike, prikazuje sažete informacije o svim fotografijama na otvorenoj web stranici i, na primjer, umjesto toga podesiti prikazivanje sadržaja atributa ALT.

U oblasti "Informacije", ovaj dodatak može pružiti velika količina informacije o web stranici otvorenoj u pretraživaču u cjelini. Na ovom meniju ima mnogo stavki. Na primjer, aktiviranje stavke "Prikaži veličine blokova" će odabrati sve blokove (DIV kontejnere) na web stranici i prikazati njihove točne veličine u pikselima pored njih.

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

U oblasti „Razno“ koncentrisane su one karakteristike koje nisu našle mesto u drugim grupama alata. Zanimljiv iz ove grupe je "Vladilac", čijom aktivacijom dobijate priliku izmjerite udaljenost između elemenata web stranice ili definirati veličinu u pikselima ovog ili onog bloka.

Nakon aktiviranja ravnala iz dodatka, kursor miša se pretvara u križ i možete pritisnuti i držati lijevo dugme miš, označite željeni element stranice. Ispod trake sa alatkama Web Developer na vrhu prozora pretraživača Firefox nalazi se traka sa alatkama Ruler, koja će prikazati informacije o veličini selekcije.

U oblasti "Razno" dosta zanimljivog i korisne karakteristike. Na primjer, stavka " HTML editor» otvara dodatni prozor sa HTML kodom ove stranice. Sve promjene napravljene u njemu bit će odmah prikazane u pretraživaču. Vrlo zgodno za brze eksperimente s dizajnom web stranice. U ovom slučaju, naravno, neće biti napravljene nikakve promjene u stvarnim datotekama motora web projekta.

Ali možete sa koristeći Web Programer u realnom vremenu za simulaciju različitih opcija za pravljenje date stranice putem Firefoxa. Ako vam odgovara nova verzija koda koji je modeliran s njom, tada ćete morati napraviti izmjene u stvarnim datotekama web engine-a, koje možete pronaći opisanim načinom.

Područje "Outlines" će vam biti od velike pomoći prilikom proučavanja elemenata dizajna web stranice. Aktiviranjem jedne ili druge stavke u meniju "Konture" možete odabrati na stranici pojedinačni tipovi njegovi elementi, na primjer, elementi na nivou bloka (DIV kontejneri), elementi Html tabele(), okviri (članak živi) ili linkovi na stranici koji nemaju atribut Naslov. To uvelike poboljšava vidljivost izgleda.

Meni Veličine sadrži nekoliko opcija za kontrolu veličine prozora pretraživača. Također možete postaviti prozor na proizvoljnu veličinu kako biste vidjeli ponašanje ove stranice kada se izvrše promjene.

Grupa "Alati" sadrži funkcije za provjeru validacije (usklađenost sa savremenim zahtjevima za web razvoj). Možete provjeriti HTML, CSS, WAI i odjeljak 508. Validacija se vrši putem online validatora iz .

Dodatak se može konfigurirati odabirom stavke s istim imenom u grupi alata "Postavke". U zaključku, ž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 kreiranju i otklanjanju grešaka na web lokacijama.

Sretno ti! Vidimo se uskoro na stranicama bloga

Više videa možete pogledati ako odete na

");">

Možda ste zainteresovani

SEObar - zgodan i informativan SEO dodatak za Opera
Firebug - kako koristiti najbolji plugin za webmastere
CSS optimizacija i kompresija u Brzini stranice - kako onemogućiti eksterne datoteke stilove i spojite ih u jedan za brže učitavanje
Rds traka i traka za promociju stranice za pomoć webmasteru
Safari - gdje preuzeti i kako prilagoditi besplatni pretraživač za Windows od Apple-a
Ekstenzije 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 pretraživačima, verzija za Firefox je ažurirana i redovno se ažurira, što se ne može reći za verziju za Chrome. Osim toga, podržava ruski jezik. Stoga će u budućnosti opis važiti samo za Firefox.

Instalacija je prilično jednostavna, samo idite na web stranicu autora sa Firefoxom i kliknite na "Preuzmi", nakon čega ćete biti preusmjereni na stranicu na kojoj trebate kliknuti na "Dodaj u Firefox" (slika 7.1).

Rice. 7.1. Dodavanje u Firefox

Također možete ići direktno na stranicu sa ekstenzijom.

Nakon dodavanja pojaviće se prozor sa upozorenjem (slika 7.2), kliknite na dugme "Instaliraj sada" i postupak instalacije je završen.

Rice. 7.2. Web instalacija developer

Drugi način za instaliranje različitih ekstenzija je korištenje menija Alati > Dodaci. U polje za pretragu upišite " web developer”, Pritisnite Enter, dodatak koji nam je potreban pojaviće se na listi ispod (slika 7.3).

Rice. 7.3. Prozor dodataka za Firefox

Sama ekstenzija izgleda kao traka menija iznad kartica (slika 7.4), a dostupna je i kroz meni Alati > Web Developer. Panel se može uključiti/isključiti preko menija. View > Toolbars ili desnim klikom na traku za proširenje.

Rice. 7.4. web programer u pretraživaču

Idemo kroz stavke menija Web Developer.

Onemogući keš memoriju

Onemogućuje ugrađenu keš memoriju pretraživača. Pretraživač obično pohranjuje slike i kopije pregledanih stranica lokalni disk da uštedite vrijeme preuzimanja. Kada se stranica ponovo otvori, pretraživač uspoređuje lokalnu kopiju s originalom, a ako se podudaraju, učitava se lokalna kopija. U nekim slučajevima, učitavanje lokalna verzija stranicu, čak i ako je original izmijenjen. Na primjer, u postavkama pretraživača može se postaviti provjera svaka dva sata da se vidi da li je keširana stranica ažurirana na serveru. Međutim, Firefox vam ne dozvoljava fino podešavanje keša kao što to radi Opera.

Također možete osvježiti stranicu zaobilazeći keš memoriju koristeći kombinaciju tipki Ctrl + F5, podržavaju je svi pretraživači.

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

Onemogućite JavaScript

Programski jezik dizajniran za pokretanje skripti - programa integriranih s web stranicom. JavaScript se naširoko koristi prilikom kreiranja web stranica za poboljšanje njihove funkcionalnosti, na primjer, kreiranje raznih menija, obrazaca, efekata itd. Ako odaberete Onemogući JavaScript > Potpuno, tada će sve funkcije na stranici prestati raditi. Ova stavka menija se može koristiti za testiranje sajta bez skripti, kao i za zaobilaženje raznih ograničenja koja postavljaju autori sajta, kao što je onemogućavanje desnog dugmeta miša. Web Developer kaže da ne postoje ograničenja koja se ne mogu zaobići.

Onemogućite META preusmjeravanje

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

Primjer 7.1. Automatsko prosljeđivanje

Prosljeđivanje se može primijeniti u chatovima radi ažuriranja aktuelni dokument ili preusmjeriti na nova adresa. Ali se također koristi sa zlonamjernom namjerom, na primjer, za često prikazivanje kontekstualnog oglašavanja ili banera. Ova stavka meni vam omogućava da blokirate sličnu oznaku .

Onemogući minimalnu veličinu fonta

V Firefox postavke možete postaviti minimalnu veličinu fonta, on će se koristiti za tekst koji je manji od navedene veličine. Ovo vam omogućava da pregledavanje učinite lakšim za čitanje, posebno na web lokacijama koje prikazuju tekst u fontu koji je premali za udobno čitanje.

Da biste postavili minimalnu veličinu fonta, izaberite iz menija Alati > Opcije..., otvorite tablu sa sadržajem i kliknite na dugme Napredno u grupi Fontovi i boje. Možete odabrati minimalnu veličinu fonta iz padajućeg menija Najmanja veličina fonta.

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

Onemogućite boje stranice

Isključuje sve boje postavljene svojstvom pozadine ili boje pozadine. Također pogođeno pozadinske slike, koji su postavljeni sa pozadinom .

Onemogući blokator iskačućih prozora

Iskačući prozori se obično koriste za reklame, tako da su obično blokirani i nisu dozvoljeni u pretraživačima. Ova stavka vam omogućava da brzo uključite i isključite ovu opciju.

Onemogući proxy

Pod proksijem se obično podrazumeva server ili program koji vam omogućava da se povežete na Internet, kao iu svrhu postavljanja zahteva u ime drugih klijenata. Ako u postavkama Firefoxa ( Alati > Opcije.., panel Napredno, kartica Mreža, dugme Konfiguriši) postavljeno na "Koristi sistemske proxy postavke", tada je ova stavka neaktivna.

Onemogući Referrere

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

Kolačići, ili kolačići kako ih se u žargonu naziva, su male 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 informacije koje se koriste na stranici. Firefox postavlja postavke kolačića preko menija Alati > Opcije..., panel za privatnost. Iz sigurnosnih razloga, općenito možete onemogućiti prihvaćanje kolačića sa web lokacija.

Sami kolačići su skup nekih parametara:

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

Onemogućite kolačiće

Onemogućuje prihvatanje kolačića sa web lokacija.

Izbrišite kolačiće sesije

Kolačići se često koriste za provjeru autentičnosti korisnika. Nakon unosa imena i lozinke, generira se jedinstveni kod koji se pohranjuje u kolačiće. Kada ponovo posjetite stranicu, ovaj kod se provjerava, a ako se poklapa sa serverskim kodom, onda stranica „prepoznaje“ korisnika. Odabirom ove stavke brišete sve sačuvane sesije.

Izbrišite kolačiće za domenu

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

Izbrišite kolačiće za putanju

Briše sve kolačiće za stranicu, čija se putanja poklapa sa putanjom stranice otvorene u pretraživaču.

Informacije o kolačićima

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

Rice. 7.5. Informacije o kolačićima sa youtube.com

Dodaj kolačiće

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

Rice. 7.6. Prozor za dodavanje

Dodavanje je obično potrebno za otklanjanje grešaka u radu kolačića i ponašanju stranice kada su prisutni.

css

Ovaj meni je odgovoran za stilove trenutne stranice.

Onemogući stilove

Dizajniran da onemogući stilove na nekoj osnovi.

Svi stilovi

Onemogućuje sve stilove koji se koriste na stranici.

Zadani stil pretraživača

Onemogućuje stil za sve elemente kojima ga pretraživač po defaultu dodaje. Na primjer, tekst unutra

i

Ima drugačiju veličinu.

header

Nakon onemogućavanja stila, veličina teksta ovih elemenata će biti ista.

Inline Styles

Onemogućuje oblikovanje unutar oznake