În prezent, una dintre domeniile de vârf ale dezvoltării software este dezvoltarea web. Dezvoltarea web se referă la dezvoltarea unui serviciu de Internet sau a unei aplicații web, întreținerea acestuia, suportul, precum și optimizarea pentru motoarele de căutare (SEO).

Dezvoltatorii web juniori sunt angajați în crearea propriu-zisă de aplicații web simple, în principal dezvoltare pe partea clientului și parțial programare pe partea serverului, deși partea de serverîn astfel de aplicații nu este de obicei foarte complex. Dezvoltatorii web mai experimentați lucrează la părți mai complexe ale logicii și integrării back-end cu sisteme externe. Pentru SEO angajat des persoana individuala sau o întreagă echipă de specialiști.

Pentru a confirma calificarea de Junior Web Developer, aveți nevoie de următoarele cunoștințe:

• Programare (cunoașterea sistemelor numerice, algoritmi elementari)
• Limbaje de prezentare HTML/XML/CSS (concepte și principii de bază, sintaxă)
• Limbajul JavaScript (sintaxă, gestionarea evenimentelor, lucrul cu DOM)

Această listă nu include cunoștințele tehnologii web server, cum ar fi PHP, Python sau Java. Aceștia vor fi incluși în calificarea mai avansată de Dezvoltator Web cu specializări. Pentru a testa cunoștințele de bază în domeniul programării logicii serverului, la calificare a fost adăugat un test privind bazele programării.

Teste obligatorii

Programare - Noțiuni de bază

Deoarece Junior trebuie să cunoască JavaScript, el trebuie să cunoască elementele de bază ale programarii.Acest test conține întrebări destul de elementare despre algebra booleană, sisteme de numere (în special binar și hexazecimal) și algoritmi simpli.

HTML - Noțiuni de bază

Testul HTML testează cunoștințele lui Junior cu privire la principalele etichete și elemente ale limbajului care vor fi necesare în lucrare.Testul conține și întrebări despre unele abrevieri, browsere și indirect despre XML.

CSS - Noțiuni de bază

Junior „trebuie să cunoașteți CSS împreună cu HTML, altfel dezvoltarea unui site mai mult sau mai puțin serios va fi plină de dificultăți. Testul acoperă cunoașterea proprietăților și atributelor de bază, model-cutie, selectoare.

XML - Noțiuni de bază

Cunoașterea XML nu este la fel de esențială pentru Junior precum cunoașterea HTML/CSS, dar este necesară mai mult ca o cunoaștere de bază care va fi utilă pentru Junior în viitor. În plus, nu trebuie să uităm că majoritatea celorlalte formate de marcare se bazează pe XML: același XHTML, WSDL sau standardizarea HTML 5 SVG din ce în ce mai populară. Întrebările testului sunt în mare parte teoretice, acoperind cunoștințele despre specificația XML de bază.

JavaScript - Noțiuni de bază

Dacă, la începutul anilor 2000, cunoașterea JavaScript Junior era opțională, acum, 10 ani mai târziu, aceasta este una dintre cerințele principale.Cunoașterea JavaScript, pe lângă capabilitățile dinamice din browserul clientului, deschide calea spre învățarea unor tehnologii mai complexe. cum ar fi AJAX , care vă permit să creați aplicații Internet bogate (Rich Internet Applications, RIA). Întrebările de test verifică sintaxa, funcțiile de bază și obiectele JavaScript.

Scrierea articolului

Subiectul articolului este propus administrației și fie acceptat, fie respins cu o propunere alternativă. Subiectul ar trebui să fie domeniul subiectului. Această cerință testează capacitatea lui Junior de a înțelege rapid esența unei anumite tehnologii/abordări/cadru Alternativ, puteți propune 3-4 subiecte pentru un articol pentru a fi luate în considerare de către administrație, iar administrația va oferi unul dintre ele pentru scris. ai scris nu ar fi trebuit să fi fost publicat anterior pe alte resurse.

Întrebări de redactare

Nevoia de a compune întrebări urmărește aceleași scopuri ca și scrierea unui articol: capacitatea de a aborda analitic dezvoltarea lucrurilor noi, de a separa aspectele importante de cele neimportante. Subiectele întrebărilor sunt convenite și cu administrația (acest lucru este necesar pentru că există destul de multe întrebări la unele teste, iar atunci când se adaugă alta, este foarte probabil ca o întrebare similară să existe deja).

Important:Întrebările despre articol pot fi adresate în comentariile de pe pagina calificării dvs. (nu confundați cu pagina publica descriere), care poate fi accesat din linkul de pe profil din blocul Calificări.

Așteptăm cu nerăbdare comentariile și feedback-ul dumneavoastră.

Dezvoltator web Mozilla Incredible extensie utilă. Este instalat în browsere și aduce bloggerului informații complete despre starea site-urilor. La început, acest plugin putea fi instalat doar în Firefox, dar mai târziu, același autor, Chris Pederik, l-a dezvoltat și pentru Chrome. Îl poți descărca și instala, în cea mai recentă versiune, în limba engleză.

Web Developer mozilla versiunea rusă

Pentru blogger rus este posibil să instalați această extensie în limba rusă, dar în acest caz, nu este instalată cea mai recentă versiune, ci cea anterioară - Web Developer 1.19.

Mai întâi, în setările browserului Firefox, extensia este instalată, în engleză. Să mergem la fila „Suplimente”. În noua fereastră din dreapta, vom vedea butoane pentru mai multe programe, inclusiv „Web Developer”. Activați butonul „Setări”, după care va apărea o fereastră pentru setările acestui instrument.

Pentru a activa limba rusă, trebuie să urmați linkul către versiuni. În fereastra nouă, selectați numărul 1.19, faceți clic pe butonul „adăugați la Firefox”. După repornirea browserului, panoul superior al extensiei va fi în limba rusă. Atunci totul devine clar. Să încărcăm mai întâi site-ul nostru și să începem să-l analizăm, cu ajutorul a numeroase opțiuni, în panoul de sus.

Când deschideți din nou browserul, panoul este din nou în engleză, așa că trebuie să reinstalați din nou limba rusă.

Dezvoltatorul web mozilla dezactivează unele funcții

În meniul drop-down vom vedea că puteți dezactiva o serie de funcții, astfel încât să puteți vedea alte proprietăți.

• • Dezactivați „cache” și „ font mic", dar puteți dezactiva script javași alte funcții.

• • „Clic pe cookie-uri” deschide o pagină mare cu listă. Aici, cookie-urile individuale pot fi modificate sau șterse, dar deocamdată m-am uitat fără să ating nimic. După ce am vizualizat fila, o închid și trec la paragrafele următoare.

• • „Erori CSS” - deschide, de asemenea, bara de meniu drop-down. Stilurile pot fi dezactivate. Dar vreau să le văd, așa că dau clic pe linia: CSS info. Ca rezultat, s-a deschis o foaie cu toate stilurile încorporate în temă, pluginuri și widget-uri, rezultând o pagină web lungă.

« Forme” - p La vizualizarea site-ului, barele de site, formularele de abonare și căutarea au fost evidențiate color. Această filă este necesară de către webmasteri atunci când creează șabloane, deoarece există o mulțime de linii cu parametri.

Web Developer mozilla - alte panouri pentru evaluarea site-ului

• • Grafică - arată atributele alt - descrierile de mai sus imaginile sunt evidențiate. Puteți vizualiza toate paginile site-ului și puteți identifica unde nu există descrieri de corectat. Mărimea imaginilor ne este cunoscută, dar aici sunt indicate greutatea și numărul de imagini. Totul este în regulă pentru mine - greutatea este mică, fiecare imagine are 3 kb. A găsi imagini corupte- pe pagina principală - nu a fost găsit. se deschide foaie separată, unde există descrieri ale tuturor imaginilor, inclusiv contoare și favicon. Când vedem totul, eliminăm bifele.

• • Există o mulțime de rânduri pe panoul de informații. Dau clic pe „show id and class”, în timp ce linkurile sunt evidențiate la locația lor, adică pe site. Acest lucru este foarte impresionant, deoarece atributele titlului și imbricarea documentelor sunt arătate prin colorare.

• • Greutatea documentului - pagina s-a deschis, dar inițial era goală. Trebuie să așteptați puțin pentru descărcare. Cu toate acestea, apare curând informatie pretioasa despre greutatea secțiunilor individuale. Se lovește un numar mare de scripturile și dimensiunea lor. Merită să luați în considerare modul în care acestea pot fi reduse și reduse.

• • Link-uri de la pagina principala. Totul este luat în considerare: titlul site-ului, categorii, etichete cloud etichete, imagini, contor, widget-uri jvascript, comentarii. Am incercat sa urmaresc cateva link-uri, catre paginile site-ului. Adresele din comentarii sunt închise, mulțumesc, Cu toate acestea, numărul de linkuri nu scade din cauza particularităților codului Word Press, care este greu de remediat. În total, rezultă 74 - 86 de link-uri interne, dar Reguli SEO, nu este permis ca numărul lor să depășească 100.
  • Există informații despre metaetichetele paginii principale.

Informații Diverse

• • Diverse - conțin: riglă, lupă, editor html, elemente ascunse.

• • Contururi - afișează marginile titlurilor, legăturilor, contururile blocurilor. Puteți vizualiza contururile a două sau trei elemente ale site-ului în același timp.

• • Dimensiuni - arată dimensiunile ferestrei, ferestrei de vizualizare. Este posibil să reglați dimensiunea ferestrei și a fontului apăsând butonul de mărire și micșorare.

• • Instrumente - se realizează trecerea la serviciile validatorilor. Am primit o mulțime de erori CSS și HTMI la verificare. De exemplu, CSS este verificat mai întâi și apoi este oferit fișierul de stil corect generat.

• • De acest consiliu a făcut următoarele: a activat altul, temă simplă/pentru scurt timp/. Mi-am copiat fișierul de stil, l-am transferat în notepad, l-am salvat și l-am șters din editorul site-ului. Am descărcat fișierul corect din validator și l-am inserat în loc de al meu.

• • Am mers pe site. Și ce văd, cu stiluri noi, corecte? Site-ul este pe loc, dar care? Aspectul este dezgustător. Șablonul a devenit o singură coloană. Textele sunt întinse de la margine la margine, nu există culori.
  • Prin urmare, mi-am returnat mai degrabă fișierul cu erori CSS și totul a fost reparat. Pe de altă parte, erorile de validare trebuie remediate, dar acest lucru nu este încă disponibil pentru mine.

Pentru browserul Chrome

Versiune web. dezvoltator pentru browserul Chrom, de același autor, îmbunătățit și completat. Comparativ cu extensia pentru Browser Mozilla, opțiuni ușor diferite. Textul este în limba engleză, dar unele pagini de început sunt traduse.

Este mai bine atunci când o persoană este cel puțin familiarizată cu limba engleză, deoarece Internetul are nevoie de ea. După navigarea pe web. dezvoltator, ideile despre structura blogului sunt îmbunătățite.

Analiza din această extensie ar trebui să fie permanentă, de aceea este de dorit ca fiecare blogger să o instaleze în browser. Cel puțin pentru a controla numărul de link-uri de pe fiecare pagină.

Deci te-ai decis să devii dezvoltator web. Cunoști cele trei magie Termen HTML/ CSS / JS și crezi că vei fi solicitat odată ce le-ai stăpânit pe toate trei. Îți imaginezi cum îi vei preda secvenţial, unul câte unul. Completează-ți portofoliul. Găsiți un post de junior. Ștergeți nasul celor care se îndoiesc.

De fapt, chiar Dezvoltator interfețe- specii pe cale de dispariție. Dar nu pentru că ar fi mai puțină muncă :) Mai degrabă, dimpotrivă. Cantitatea de cunoștințe în creștere zilnică nu lasă nicio șansă pentru categorii largi. „Programatorii” abstracti există doar în filmele cu hackeri și în imaginația populară. Deci, dezvoltatorii front-end devin treptat o abstractizare, împărțindu-se în specialități din ce în ce mai înguste.

Din păcate, majoritatea recrutorilor au o înțelegere slabă a specificului muncii oamenilor pe care îi angajează. Să ținem cont de faptul că recrutarea IT este și o disciplină tânără. De bunăvoie sau fără să vrea, recrutorii creează un fel de „câmp de dezinformare”.

Dacă aveți experiență în închirierea unei locuințe, probabil că ați dat peste sintagma „ Internet WiFi". Agenții imobiliari adoră această frază. Nu încercați să le explicați că Wi-Fi-ul este o metodă de distribuție dintr-o sursă eșuată, iar aceasta din urmă este cea care vă interesează. „Internet Wi-Fi” poate fi orice: ADSL, 3G, fibră...

O neînțelegere fundamentală nu împiedică agenții imobiliari să reproducă o expresie fără sens. Aceeași poveste cu recrutorii.

Să vedem ce titluri de post care se potrivesc definiției „dezvoltare web” sunt populare astăzi. Observ imediat că acest ghid nu pretinde a fi complet și reflectă punctul de vedere al unei persoane care utilizează JS ca limbă principală.

Titluri de post

dezvoltator web

Sinonime: Dezvoltator web, inginer web

De obicei, implică utilizarea oricărui CMS. Unii oameni cred serios că începătorii folosesc „CMS simplu”, iar experții folosesc „CMS avansat”. Sugestie: dacă o persoană întreabă - Ce CMS folosești? cu un grup de programatori într-o sală de conferințe - probabil că este un noob complet. Și aceasta nu este o acuzație, ci o declarație de fapt. serios proiecte moderne nu utilizați CMS, ei bine, poate ca instrument auxiliar. Wordpress pentru bloggingul companiei - da, este posibil. Wordpress ca magazin este deja îndoielnic. " Rețea socială pe Joomla" - fanteziile unui adolescent. CMS-urile își au locul pe piață, dar au încetat de mult să mai fie un element „formator de stat”.

„Crearea unui site web pe CMS” este aproximativ același lucru cu „nituirea designurilor sub ThemeForest”. „Un ban economisește o rublă!” – a spus Nuff.

Un inginer web se ocupă de conținut, „regulează” aspectul, face diverse lucruri și (ocazional) programe. dezvoltator web- acest Cel mai mic nivel dintre toți „dezvoltatorii web” posibili. În cazul freelancing-ului, dezvoltator web, de obicei, înseamnă „om-orchestră”, sau mai bine zis, „om-lucrător”.

Grabă!!! Căutăm un dezvoltator web pacient!

Dezvoltator CSS / HTML / Dezvoltator de markup

Sinonime: compozitor

Poziția în care doriți să alcătuiți designul. Cerințele pentru cunoașterea JS și programare sunt minime sau absente. Este de dorit să cunoașteți elementele de bază ale designului, deoarece. designul nu este aproape niciodată tradus din PSD în HTML one-to-one. "Pixel-Perfect" - o expresie - "clopot". Marker al unui manager tiran care habar n-are cum funcționează browserul și măsoară calitatea muncii prin comparație pixel cu pixel (cu zoom!) a aspectului PSD și a paginii HTML. Încercările de a explica diferența dintre redarea fonturilor în Photoshop și în browser sunt de obicei percepute ca „certând în loc să funcționeze”. Evitați cu orice preț lucrările „pe pixel”.

Designerul de layout termină întotdeauna după designer. Un programator web termină întotdeauna după un designer de layout. Cuplurile vecine din acest lanț aproape întotdeauna se displac unul pe celălalt din acest motiv.

Ivan nu numai că știe totul despre profesii din acest articol, dar te va ajuta și să le stăpânești, să scrii CV-ul potrivit și să te pregătești pentru un interviu.

Designer front-end / Web Designer

Sinonime: Web designer

Samiznaetekto™. Specialistul trebuie să aibă cunoștințe de design vizual (eventual design de interfață), cunoștințe de tipografie, cunoștințe Photoshop. Cunoașterea JS nu este de obicei necesară.

Pe piața occidentală, designerii fac de obicei și layout. in primul rand aspect modern, tinand cont receptiv-Și adaptativ prefixele și animațiile sunt descrise în mod mediocru de o imagine statică. Ați văzut des un designer care prezintă animație și versiune mobila? Și eu. De obicei, capacitățile lor sunt limitate la alegerea dintre animațiile bibliotecii (selectate de programator!). În al doilea rând (dar din același motiv), este adesea mai ușor pentru un adevărat specialist să realizeze imediat un design sub formă de layout. De ce să lucrezi X + Y când te descurci cu Y?

Pe piața noastră, din cauza restanțelor tehnologice, designerii și designerii de layout sunt oameni diferiți.

Dezvoltator de interfață / Designer UI

Similar cu versiunea anterioara, dar cu accent pe designul interacțiunii. Specialiștii în această poziție comunică de obicei foarte mult cu programatorii, cu clienții, cu managerii, apoi din nou cu programatorii... Din acest motiv, cunoașterea bazelor dezvoltării software și a abilităților de comunicare este de dorit. Foarte des, postul vacant necesită și cunoștințe specifice dezvoltare mobilă, deoarece Două Experți UI/UX sunt rar angajati. Rețineți că în acest domeniu este dificil să găsiți material pentru auto-studiu, care poate fi atât un plus (mai puțină concurență), cât și un minus (mai greu de stăpânit). Dacă poți învăța din exemple, atunci nu ar trebui să existe probleme.

Dezvoltator front-end pentru mobil/tabletă

O poziție pentru un dezvoltator specializat în dispozitive mobile. Necesită cunoștințe specifice platforme IOSși Android. Reacționează nativ este o versiune modernă a acestei specializări care vă permite să utilizați tehnologii web pentru a crea aplicații native. Sugestie: aplicații web, aplicații hibride, aplicații native iar aplicațiile native pe tehnologiile web sunt toate lucruri diferite.

Dezvoltator/Inginer front-end

Sinonime: dezvoltator front-end, dezvoltator front-end

Titlul postului generalizat pentru un dezvoltator care deține HTML / JS / CSS. Se găsește de obicei în companiile mici, unde o gamă largă de sarcini este atribuită unei singure persoane. Cunoștințele de design probabil nu sunt necesare, dar ar fi un bonus. ÎN conditii moderne, este din ce în ce mai mult înlocuită de titlul unei tehnologii specifice: Dezvoltator jQuery, Dezvoltator Backbone, React Developer, Dezvoltator unghiular... Abilitățile de programare și de tipografie sunt incluse în pachetul de cerințe.

Dezvoltator JS / Programator Front End

Sinonime: Dezvoltator JS* / Programator JS

La fel ca și precedentul, cu mai mult accent pe programare și mai puțin pe aspect și design. În general, termenul dezvoltator (Inginerîntr-o măsură mai mică) în loc de programator, poate însemna că va fi mai puțină programare, iar „lucruri” - mai multe. Cu excepția cazului în care limbajul de programare este specificat în mod explicit (dezvoltator JS ~= programator JS).

Dezvoltator JS mai poate însemna stivă completă(Vezi mai jos). În acest caz, compania intenționează probabil să decidă asupra specializării tale mai târziu - când punctele tari și punctele slabe sunt clare. Sau când se distribuie alte locuri de muncă. De aceea, Dezvoltator JS aproape întotdeauna merge cu Junior sau Senior / Mijloc.

Expert SEO front-end

O poziție rară în care trebuie să optimizați codul HTML conform cerințelor și dorințelor motoare de căutare(Google / Yandex). Cunoștințe specifice: micro-formate, micro-markup. Având în vedere că SEO se stinge și este înlocuit de marketingul clasic, recomand să evitați tot ceea ce conține acest acronim. Dacă căutarea de locuri de muncă nu este hobby-ul tău, desigur.

Expert în accesibilitate front-end

Accent pe optimizarea site-ului pentru cititori speciali (de exemplu, pentru persoanele cu vedere limitată). O poziție extrem de rară. Listată în Cartea Roșie. Apare doar pe proiecte mari.

front end dev. Ops

Poziție de specialist în asamblare, automatizare, integrare de aplicații front-end. Apare în principal în companii mari, deoarece implică o gamă destul de restrânsă de sarcini. Cunoștințe actuale: Webpack / Gulp / Grunt. În timp, vei începe să fii întrebat ce faci de fapt...

Testare frontală / QA

Poziție de specialist QA / QA pentru aplicații front-end. Găsit în companii mari și mijlocii. Cunoștințe actuale: teste unitare, teste funcționale, teste A/B, testare manuală și automatizare. Abilitățile de comunicare sunt pe lista cerințelor.

Mulți oameni cred în mod eronat că un „tester” este mai mult lucru simplu decât „programator”. Da, uneori există posturi vacante în care puteți „da clic pe linkuri” și „compilați rapoarte”. Dar acestea sunt excepții.

Nu este atât de ușor să faci Selenium NightmareJS să meargă prin aplicație, luând capturi de ecran și rulând teste de regresie. La urma urmei, aceasta este, de fapt, o dezvoltare full-stack. Lucrarea se desfășoară în mai multe medii simultan (Electron + Chromium) și necesită cunoștințe fundamentale bune.

Dezvoltator / Inginer / Programator Full Stack

O poziție pentru un expert în teancul complet de tehnologii web. Implică înțelegerea interacțiunii client-server, experiență cu bazele de date, cunoștințe de programare asincronă etc. Alegerea oamenilor serioși.

stivă completă este împărțit în două categorii: FullStack-JSȘi toate celelalte. În primul caz, după cum ați putea ghici, JS este folosit pe server și pe client. În al doilea caz, pe server este folosit Ruby / Python / PHP.

Pentru incepatori, pentru a nu fi stropit intre ele limbi diferiteși platforme, recomand cu insistență să acordați preferință primei opțiuni (dacă este posibil). Învățarea mai multor limbi simultan este o muncă grea.

FullStack JS implică utilizarea cadrelor web bazate pe NodeJS. Poate fi un cadru monolitic full-stack (cum ar fi MeteorJS), un backend reactiv cu un client minimalist (cum ar fi HorizonIO) sau un ansamblu din biblioteci independente (cum ar fi KoaJS + ReactJS). Toate au avantajele și dezavantajele lor.

FullStack JS este adesea folosit în aplicații în timp real: camere de chat (la Slack / Gitter), aplicații financiare (scalabilitate, PayPal...), servere de jocuri. Abilitatea de a împinge informații către client (creând în timp real) aproape de la cutie este motorul principal pentru creșterea acestei tehnologii.

arhitect

Cel mai înalt grad de programare clasică. Orice post vacant cu cuvântul Arhitect presupune un specialist Senior și probabil că nu vă interesează pe termen scurt, dragă cititor.

conduce

Posturile vacante de lider sunt foarte diferite. Câte companii - atât de multe lead-uri diferite. Pe de altă parte, acesta este cazul când o persoană definește un loc, și nu un loc - o persoană. Pentru începători, nu prezintă interes, pentru că. Junior Lead este aceeași prostie ca Junior Architect.

Dezvoltator NodeJS / Dezvoltator BackendJS

Backend JS. „Marele și teribilul” NodeJS - ceea ce pur și simplu nu au spus despre el. Laude, acuzații de „hipsterism” - totul a fost...

Bună ziua, dragi cititori ai blogului. Vă aduc la cunoștință un alt articol care va fi dedicat revizuirii capabilităților pluginului pentru Firefox () sub numele web dezvoltator.

Acest plugin pentru browserul Firefox () este un fel de Cuțit elvețian pentru webmasteri, care are o mulțime de caracteristici și instrumente în componența sa.

Web Developer nu cere în niciun caz demnitatea a ceea ce s-a discutat mai devreme, ci o completează foarte mult. Dacă nu sunteți încă foarte familiarizat cu capabilitățile Firebug, puteți citi despre el la link-ul furnizat.

Instalarea și caracteristicile WebDeveloper

Puteți vedea cum este aranjat cel care vă interesează formular html, modificați unii dintre parametrii săi, de exemplu, activați afișarea caracterelor introduse în câmpurile de parolă sau convertiți cererile GET în POST și invers.

Alte instrumente ale acestui minunat plugin

În zona „Grafica” există elemente care vă vor permite să dezactivați afișarea imaginilor (fie toate imaginile, fie numai cele descărcate de pe resurse externe, sau numai animate). De asemenea, puteți bifa pur și simplu casetele de lângă punctele potriviteîn meniul „Grafic”, configurați afișarea informațiilor despre conținutul atributului ALT ( text alternativ), precum și informații despre greutatea fotografiei date, dimensiunea acesteia în pixeli și calea către fișierul imagine.

De asemenea, va fi posibil să configurați pluginul Web Developer pentru a afișa contururile imaginilor, pentru a găsi imagini deteriorate, pentru a afișa informații rezumative despre toate fotografiile pe o pagină web deschisă și, de exemplu, pentru a configura afișarea conținutului atributului ALT.

În zona „Informații”, acest plugin poate oferi o cantitate mare informații despre pagina web deschisă în browser ca întreg. Există o mulțime de articole în acest meniu. De exemplu, activarea elementului „Afișați dimensiunile blocurilor” va selecta toate blocurile (containere DIV) de pe pagina web și va afișa dimensiunile lor exacte în pixeli lângă ele.

De asemenea, cu ajutorul pluginului Web Developer va fi posibil să vedeți structura titlurilor acestei pagini, informații despre linkurile de pe ea și multe altele.

În zona „Diverse”, sunt concentrate acele caracteristici care nu și-au găsit loc în alte grupuri de instrumente. Unul interesant din acest grup este „Rigla”, la activarea căruia ai ocazia măsurați distanța dintre elementele paginii web sau pentru a defini dimensiunea în pixeli a acestui sau aceluia bloc.

După activarea riglei din plugin, cursorul mouse-ului se transformă într-o cruce și poți apăsa lung butonul din stanga mouse, evidențiați elementul dorit pagini. Sub bara de instrumente Web Developer din partea de sus a ferestrei browserului Firefox se află bara de instrumente Ruler, care va afișa informații despre dimensiunea selecției.

În zona „Diverse”, destul de multe interesante și caracteristici utile. De exemplu, articolul " Editor HTML» se deschide fereastra suplimentara cu codul HTML al acestei pagini. Toate modificările făcute în acesta vor fi afișate imediat în browser. Foarte util pentru experimente rapide cu designul site-ului web. În acest caz, desigur, nu vor fi aduse modificări fișierelor reale ale motorului de proiect web.

Dar poți cu folosind Web-ul Dezvoltator în timp real pentru a simula diverse opțiuni pentru construirea unei anumite pagini prin Firefox. Dacă ți se potrivește noua versiune a codului modelat cu acesta, atunci va trebui să faci modificări la fișierele reale ale motorului site-ului, pe care le poți găsi folosind metoda descrisă.

Zona „Contururi” vă va fi de mare ajutor atunci când studiați elementele de design ale unei pagini web. Prin activarea unuia sau altul articol din meniul „Contururi”, puteți selecta pe pagină tipuri individuale elementele sale, de exemplu, elemente la nivel de bloc (containere DIV), elemente Tabelele HTML(), cadre (articolul live) sau link-uri de pe pagină care nu au atributul Titlu. Îmbunătățește foarte mult vizibilitatea aspectului.

Meniul Dimensiuni conține mai multe opțiuni pentru controlul dimensiunii ferestrei browserului. De asemenea, puteți seta fereastra la o dimensiune arbitrară pentru a vedea comportamentul acestei pagini atunci când se fac modificări.

Grupul „Instrumente” conține caracteristici pentru verificarea validării (respectarea cerințelor moderne pentru dezvoltarea web). Puteți valida HTML, CSS, WAI și Secțiunea 508. Validarea se face printr-un validator online din .

Pluginul poate fi configurat selectând elementul cu același nume din grupul de instrumente „Setări”. În concluzie, vreau să spun că folosind capacitățile Web Developer, vă puteți da seama cu ușurință cum este aranjată această sau acea pagină web care vă place și va fi, de asemenea, foarte utilă atunci când creați și depanați site-uri.

Multă baftă! Ne vedem curând pe site-ul paginilor blogului

Puteți viziona mai multe videoclipuri accesând

");">

S-ar putea să fiți interesat

SEObar - plugin SEO convenabil și informativ pentru Opera
Firebug - cum se folosește cel mai bun plugin pentru webmasteri
Optimizarea și compresia CSS în Viteza paginii - cum se dezactivează fișiere externe stiluri și îmbinați-le într-unul singur pentru o încărcare mai rapidă
Bara Rds și bara de promovare a paginii pentru a ajuta webmasterul
Safari - unde să descărcați și cum să personalizați browser gratuit pentru Windows de la Apple
Extensii și teme pentru Google Chrome
Pluginuri și teme pentru Mozilla Firefox- ce suplimente și extensii trebuie descărcate și instalate

Vlad Merjevici

Deși există o prelungire pentru doi browsere diferite, versiunea pentru Firefox este actualizată și actualizată în mod regulat, ceea ce nu se poate spune despre versiunea pentru Chrome. În plus, acceptă limba rusă. Prin urmare, în viitor, descrierea va merge doar pentru Firefox.

Instalarea este destul de simplă, doar accesați site-ul web al autorului cu Firefox și faceți clic pe „Download”, după care veți fi redirecționat către site-ul unde trebuie să faceți clic pe „Add to Firefox” (Fig. 7.1).

Orez. 7.1. Adăugarea la Firefox

De asemenea, puteți merge direct la pagina cu extensia.

După adăugare, va apărea o fereastră de avertizare (Fig. 7.2), faceți clic pe butonul „Instalare acum” și procedura de instalare este finalizată.

Orez. 7.2. Instalare web dezvoltator

O altă modalitate de a instala diferite extensii este utilizarea meniului Instrumente > Suplimente. În caseta de căutare, tastați „ dezvoltator web”, Apăsați Enter, add-on-ul de care avem nevoie va apărea în lista de mai jos (Fig. 7.3).

Orez. 7.3. Fereastra de suplimente pentru Firefox

Extensia în sine arată ca o bară de meniu deasupra filelor (Fig. 7.4) și este disponibilă și prin meniu Instrumente > Dezvoltator web. Panoul poate fi pornit/dezactivat prin intermediul meniului. Vizualizare > Bare de instrumente sau făcând clic dreapta pe bara de extensie.

Orez. 7.4. dezvoltator web în browser

Să trecem prin elementele de meniu Web Developer.

Dezactivează memoria cache

Dezactivează memoria cache încorporată a browserului. De obicei, imaginile și copiile paginilor vizualizate sunt stocate de browser disc local pentru a economisi timpul de descărcare. Când pagina este redeschisă, browserul compară copia locală cu originalul, iar dacă se potrivesc, copia locală este încărcată. În unele cazuri, încărcarea versiune locală pagina, chiar dacă originalul este modificat. De exemplu, în setările browserului, se poate seta o verificare la fiecare două ore pentru a vedea dacă pagina stocată în cache a fost actualizată pe server. Cu toate acestea, Firefox nu vă permite să reglați cache-ul așa cum o face Opera.

De asemenea, puteți reîmprospăta pagina ocolind memoria cache folosind combinația de taste Ctrl + F5, aceasta este acceptată de toate browserele.

Java este un limbaj de programare dezvoltat de Sun Microsystems. Programe miciîn acest limbaj (așa-numitele applet-uri) sunt folosite pentru a extinde funcționalitatea paginilor web. Firefox are suport încorporat pentru această limbă, care poate fi dezactivată prin intermediul acestui element de meniu. ÎN versiuni de Firefox 3.6 nu funcționează.

Dezactivați JavaScript

Un limbaj de programare conceput pentru a rula scripturi - programe integrate cu o pagină web. JavaScript este utilizat pe scară largă atunci când se creează pagini web pentru a le îmbunătăți funcționalitatea, de exemplu, pentru a crea diverse meniuri, forme, efecte etc. Dacă selectați Dezactivați JavaScript > Complet, atunci toate funcționalitățile de pe site nu vor mai funcționa. Acest element de meniu poate fi folosit pentru a testa site-ul fără scripturi, precum și pentru a ocoli diversele restricții pe care autorii site-ului le stabilesc, cum ar fi dezactivarea butonului drept al mouse-ului. Web Developer spune că nu există restricții care să nu poată fi ocolite.

Dezactivați redirecționarea META

Cu o etichetă poate fi redirecționat automat către document specificat după o anumită perioadă de timp. Eticheta este folosită pentru aceasta. și valoarea Reîmprospătare a atributului http-equiv (Exemplul 7-1).

Exemplul 7.1. Redirecționare automată

Redirecționarea poate fi aplicată în chat-uri pentru a actualiza document curent sau redirecționează către adresa noua. Dar este folosit și cu intenții rău intenționate, de exemplu, pentru a afișa frecvent reclame sau bannere contextuale. Acest obiect meniul vă permite să blocați o etichetă similară .

Dezactivați dimensiunea minimă a fontului

ÎN setări Firefox puteți seta o dimensiune minimă a fontului, aceasta va fi folosită pentru textul care este mai mic decât dimensiunea specificată. Acest lucru vă permite să faceți navigarea mai ușor de citit, în special pe site-urile care afișează text într-un font care este prea mic pentru o citire confortabilă.

Pentru a seta o dimensiune minimă a fontului, selectați din meniu Instrumente > Opțiuni..., deschideți panoul Conținut și faceți clic pe butonul Avansat din grupul Fonturi și culori. Puteți selecta dimensiunea minimă a fontului din meniul derulant Cea mai mică dimensiune a fontului.

Web Developer vă permite să activați sau să dezactivați rapid această funcție. Cu toate acestea, dacă dimensiunea minimă a fontului nu este setată în setări, acest element nu afectează în niciun fel rezultatul.

Dezactivați culorile paginii

Dezactivează toate culorile setate cu proprietatea de fundal sau culoare de fundal. De asemenea, afectat imagini de fundal, care sunt setate cu fundal .

Dezactivați opțiunea de blocare a ferestrelor pop-up

Ferestrele pop-up sunt de obicei folosite pentru reclame, așa că de obicei sunt blocate și nu sunt permise în browsere. Acest element vă permite să activați și să dezactivați rapid această opțiune.

Dezactivați proxy

Un proxy este de obicei înțeles ca un server sau program care vă permite să vă conectați la Internet, precum și în scopul de a face cereri în numele altor clienți. Dacă în setările Firefox ( Instrumente > Opțiuni.., panoul Avansat, fila Rețea, butonul Configurare) este setat la „Utilizați setările proxy de sistem”, apoi acest element este inactiv.

Dezactivați referințele

Referrer este unul dintre anteturile protocolului HTTP și vă permite să obțineți adresa paginii de pe care utilizatorul a venit pe site. Dacă vă pasă de securitatea datelor dvs., activați acest articol.

Cookie-urile, sau cookie-urile, așa cum sunt numite în jargon, sunt fișiere text mici de pe computerul local care stochează informații utile site-ului. Cu ajutorul cookie-urilor, vă puteți aminti numele utilizatorului, starea acestuia și alte informații care sunt folosite pe site. Firefox setează preferințele cookie prin meniu Instrumente > Opțiuni..., panoul de confidențialitate. Din motive de securitate, puteți dezactiva în general acceptarea cookie-urilor de pe site-uri.

Cookie-urile în sine sunt un set de câțiva parametri:

• nume unic;
• sens;
• cale - trimite cookie-uri numai dacă calea și adresa paginii se potrivesc, calea „/” înseamnă orice pagină;
• domeniu - pentru care adresa de site este relevantă înregistrarea;
• data expirării - spune browserului când cookie-ul poate fi șters.

Dezactivați cookie-urile

Dezactivează acceptarea cookie-urilor de pe site-uri.

Șterge cookie-urile de sesiune

Cookie-urile sunt adesea folosite pentru a verifica autentificarea utilizatorului. După introducerea numelui și a parolei, un cod unic este generat și stocat în cookie-uri. Când vizitați din nou site-ul, acest cod este verificat, iar dacă se potrivește cu codul serverului, atunci site-ul „recunoaște” utilizatorul. Selectarea acestui element șterge toate sesiunile salvate.

Ștergeți cookie-urile pentru un domeniu

Șterge toate cookie-urile pentru site-ul care este deschis în prezent în browser.

Ștergeți cookie-urile pentru cale

Șterge toate cookie-urile pentru site, a căror cale se potrivește cu calea site-ului deschisă în browser.

Informații despre cookie-uri

Se deschide o pagină suplimentară, unde toate cookie-urile de pe acest site sunt prezentate sub formă de tabel. Parametrii acestora pot fi editați sau cookie-urile pot fi șterse cu totul (Fig. 7.5).

Orez. 7.5. Informații despre cookie-uri de pe youtube.com

Adăugați cookie-uri

Vă permite să setați în mod artificial cookie-uri pentru site-ul curent sau oricare altul, precum și să setați parametrii necesari (Fig. 7.6).

Orez. 7.6. Fereastra de adăugat

Adăugarea este de obicei necesară pentru a depana funcționarea cookie-urilor și comportamentul site-ului atunci când acestea sunt prezente.

css

Acest meniu este responsabil pentru stilurile paginii curente.

Dezactivați stilurile

Conceput pentru a dezactiva stilurile pe anumite baze.

Toate stilurile

Dezactivează toate stilurile utilizate pe pagină.

Stil implicit de browser

Dezactivează stilul pentru toate elementele la care este adăugat implicit de browser. De exemplu, textul din interior

Și

Are o dimensiune diferită.

antet

După dezactivarea stilului, dimensiunea textului acestor elemente va fi aceeași.

Stiluri inline

Dezactivează stilul într-o etichetă