Errore di validazione: Mancanteetichetta

Spiegazione: gli articoli devono essere chiusi nell'ordine inverso rispetto all'apertura

Destra:
< li >...

DOCTYPE distinzione tra maiuscole e minuscole

Esempio:

Errore di convalida: DOCTYPE mancante

Spiegazione: DOCTYPE fa distinzione tra maiuscole e minuscole

Destra:

La chiusura di "/" non è registrata

Esempio:
… Style.css "tipo =" testo / css "media =" schermo " >

Spiegazione: "Elementi vuoti" like img o fratello, deve terminare con "/" con uno spazio prima di esso

Destra:
… Style.css "type =" text / css "media =" screen "/>

I tag sono scritti in maiuscolo

Esempio:

Errore di convalida: Non esiste un elemento del genere...

Spiegazione: nei documenti XHTML, tutti gli elementi e gli attributi devono essere in minuscolo, poiché questa lingua fa distinzione tra maiuscole e minuscole e per questo

Destra:

I valori degli attributi sono scritti senza virgolette

Esempio:

Errore di convalida: Mancante ""

Spiegazione: i valori degli attributi sono scritti insieme alle virgolette

Destra:

Img manca dell'attributo alt

Esempio:

Errore di convalida: attributo richiesto "alt" non specificato

Spiegazione: tag img attributo alt dovrebbe essere sempre, il valore può essere lasciato vuoto se l'immagine viene utilizzata per la decorazione

Destra:

Di conseguenza, sarai in grado di correggere gli errori del sito e rendere il sito valido.

Penso che chiunque sia interessato allo sviluppo e alla promozione di siti, in un modo o nell'altro, abbia incontrato un concetto come la validità del codice. Questa frase implica la scrittura del codice HTML del sito secondo alcuni standard sviluppati dal World Wide Web Consortium (W3C). Il rispetto delle regole prescritte da questo standard è una garanzia di compatibilità cross-browser, ovvero la corretta visualizzazione della pagina creata in tutti i browser, nonché l'assenza di errori che influiscono sulla velocità di caricamento e su altri parametri.

Nella moderna Internet, i criteri per la qualità del layout del sito hanno iniziato a svolgere un ruolo importante, poiché ora il webmaster deve ottenere la corretta visualizzazione della risorsa non solo su PC e laptop fissi, ma anche su molti dispositivi mobili con un'ampia varietà di risoluzioni.

Quanto sia pulito e strutturato il codice da parte degli sviluppatori può essere rilevato controllando la validità del sito, che viene effettuata tramite un apposito checker sulla risorsa ufficiale del W3C. C'è un validatore HTML online disponibile gratuitamente su validator.w3.org

Può essere utilizzato per verificare la validità del codice HTML in tre modi:

• Convalida per URI - convalida per indirizzo
• Convalida tramite caricamento file - analisi del file caricato
• Convalida tramite input diretto: convalida di un pezzo di codice specifico.

La scelta del metodo richiesto viene effettuata passando all'apposita scheda:

Vediamo cosa succede se controlliamo la validità di qualche noto sito web su Runet, ad esempio Habrahabr. Incollalo nel campo per l'analisi e premi il pulsante "Verifica". Dopo pochi secondi, il validatore W3C ci darà il seguente risultato:

Abbastanza un buon risultato, perché il controllo della maggior parte delle risorse darà dozzine e persino centinaia di errori.

Se scorri un po' la pagina, puoi vedere esattamente dove il correttore ha trovato gli errori e le loro descrizioni, indicando le righe. Inoltre, descrive in dettaglio qual è il problema, il che rende facile risolverlo.

In ogni caso, se sono stati trovati errori sul tuo sito, non ti preoccupare, poiché, in primo luogo, sono pochissimi i siti Web che rispettano pienamente lo standard W3C e, in secondo luogo, tutti gli errori che il validatore HTML ha trovato -code possono essere corretti .

Controllare il sito per la validità del codice HTML ti consente di capire se ha bisogno di correzioni e ottimizzazione del layout, perché la pulizia e la struttura competente del codice è una componente importante dell'ottimizzazione interna. Un layout semantico ben realizzato consente a un altro esecutore di comprendere rapidamente il codice di qualcun altro, nonché di aumentare la pertinenza del testo e accelerare il caricamento della pagina.

Sono stati scritti molti articoli sulla fattibilità e necessità della ricerca degli errori di validazione, e sopra abbiamo già scritto i principali vantaggi che si possono ottenere adattando il codice del proprio sito agli standard W3C. Inoltre, tali misure saranno ugualmente utili sia nel caso di un grande portale o servizio, sia in relazione a un piccolo blog o sito di biglietti da visita.

Convalida- Questo è un controllo di qualcosa per la conformità agli standard (requisiti). Nel contesto dei webmaster, la convalida del sito Web significa verificarne il codice per correttezza e errori... In altre parole: non dovrebbero esserci tag, costruzioni incomprensibili e naturalmente non dovrebbero esserci errori html.

Cosa influenza la convalida

1. La convalida del sito influisce principalmente sulla visualizzazione del sito nei browser. Ogni browser ha i propri meccanismi per l'elaborazione del codice html. Se ci sono errori nel layout (e lo sono quasi sempre), il browser stesso li elimina e vediamo la visualizzazione del sito nella forma corretta. Ma i browser non erano sempre così capaci e i webmaster precedenti avevano più problemi con la correttezza del layout. La corretta convalida influisce direttamente sulla compatibilità tra browser.

2. La convalida può anche influenzare la fiducia del sito per i motori di ricerca, e quindi anche la posizione del sito. Tuttavia, è impossibile dire che un codice html valido sia un serio fattore di ranking. Il layout corretto è solo uno dei tanti fattori che viene considerato solo nei momenti controversi.

Ma per i motori di ricerca, il codice html è tutto ciò che vede un robot di ricerca. Se ci sono errori, interpreta semplicemente male alcuni elementi che a volte possono essere critici. Ad esempio, se il sito ha tag errati

..

, (ad esempio, non c'è un tag di fine). Sistema di ricerca non risolverà nulla come fanno i browser. Di conseguenza, le posizioni del sito possono soffrire notevolmente a causa di tali errori.

Esempio di vita reale

Ecco un esempio pratico di come la convalida può influire negativamente sul tuo sito sia in termini di SEO che di utenti. C'era una volta, stavo facendo una revisione sul sito e per sbaglio ho dimenticato di chiudere un tag

... Dopo aver verificato la correttezza della revisione nei browser più diffusi, ho apportato modifiche al sito.

Dopo un po', quando stavo analizzando il traffico attraverso Yandex Metrica, ho notato che il tempo medio di visita nel browser Internet Explorer molto meno. Dopo aver aperto il sito tramite questo browser, ho capito qual era il problema. L'intero sito era distorto, era semplicemente impossibile leggere il contenuto. E questo crea due problemi contemporaneamente. Il primo problema - stavo perdendo tutto il traffico da IE, e il secondo - stavo rovinando i fattori comportamentali.

Come controllare un sito web per la validità del codice html

1. Validatore HTML online

In internet c'è servizio gratuito http://validator.w3.org/. Attraverso di esso viene verificata la validità del codice html. Consideriamo più in dettaglio il funzionamento di questo servizio.

Le tendenze moderne e le applicazioni web hanno cambiato radicalmente le capacità degli sviluppatori. Non c'è dubbio che hanno bisogno di un qualche tipo di IDE per codificare nuovi file e salvarli per il successivo posizionamento. Ma cosa succede se controlli solo i frammenti di codice? Fortunatamente, ci sono così tanti strumenti diversi per questo nel nostro tempo!

In questo articolo condivideremo 15 applicazioni Web per il test del codice online. Funzionano tutti a condizione di una connessione Internet; alcuni di loro offrono piani professionali per pacchetti aggiuntivi di proprietà. La maggior parte di essi sarà utile quando si cerca di trovare ed eseguire il debug di un pezzo di javascript o PHP.

1. Tastierino numerico

Creata da Stephen Hazel, è un'applicazione web unica con la quale puoi codificare la sintassi in tutto il web. Oltre al debug, Codepad consente ai suoi utenti di copiare / incollare pezzi di codice importanti e condividerli online.

La schermata di output visualizza messaggi su eventuali errori relativi al codice. Utilizzando i pulsanti nel menu di sinistra, è possibile modificare la lingua (C/C++, Perl, PHP, Python, Ruby, ecc.). Codepad è più per gli sviluppatori Software che hanno bisogno di collaborare ed eseguire il debug dei programmi più problematici.

2.Scrivi il codice online

Il sito web principale ti reindirizzerà al suo editor Java Script. Puoi scegliere tra JS, PHP e la codifica dell'URL di base. L'applicazione non è solo sicura e affidabile, ma anche abbastanza facile da usare.

È interessante notare che vedrai i risultati del tuo lavoro proprio sotto il campo di testo. Quindi, se fai clic su "Esegui codice", verrà visualizzato il risultato. Debug di grandi dimensioni Script PHP può essere più difficile perché richiede l'inclusione di altri file.

Tuttavia, l'applicazione ti fornirà un aiuto insostituibile per testare una nuova idea di forza.

3.Tinkerbin

Posso definirla la mia risorsa online preferita per la modifica dei codici. Supporta HTML5 / CSS3 / JS e visualizza il risultato direttamente sullo schermo. L'applicazione è ancora in fase di sviluppo alpha, ma la maggior parte degli strumenti funziona alla grande e trova rapidamente i bug nei programmi.

Il motore di rendering supporta linguaggi come Coffeescript e Sass all'interno dei CSS. Vantano un sistema di gestione avanzato e supporto per molti marchi di web design che preferiresti utilizzare per il tuo lavoro futuro.

Non si può ignorare il fatto che ci sono tasti di scelta rapida per le opzioni più popolari. E questa funzionalità non si trova in tutte le applicazioni web, per non parlare degli editor di codice integrati nel browser. Quando inserisci nuovi tag, l'IDE aggiunge automaticamente nuove righe. Tinkerbin è uno strumento frontend che dovrebbe sicuramente essere tra i tuoi strumenti di sviluppo web.

4.JS Bin

Per i principianti, lavorare con l'interfaccia può causare alcune difficoltà. Per evitare ciò, possono approfittarne. JS Bin offre un'ampia varietà di librerie tra cui scegliere: jQuery, jQuery UI, jQM Prototype, MooTools e altro.

Se si codificano elementi diversi, i progetti verranno salvati automaticamente. Inoltre, hai la possibilità di scaricare il risultato finale del tuo lavoro o salvare la fonte online. Questo sistema è più adatto per esportare e salvare il codice rispetto a un modello normale.

5.JsFiddle

Chiunque abbia visitato Stack Overflow dovrebbe saperlo. La loro interfaccia differisce da JSBin in quanto offrono più opzioni.

Supporta anche librerie come Prototype e jQuery. Inoltre, puoi includere fonti esterne aggiuntive per file JS / CSS in qualsiasi documento in prova. Incredibilmente, l'applicazione supporta anche XHP Ajax, dove è possibile passare informazioni dal server alla finestra del browser del client e viceversa.

6.CSSDdesk

Passare dagli script al linguaggio di stile e. Tutto sembra simile agli strumenti precedenti: il testo di partenza è a sinistra, la pagina web finale è a destra. Questa applicazione web è perfetta per creare modelli di pagine web e testare le proprietà CSS3.

7.Jsdo.It

Alcune app sono in giapponese, il che mi fa pensare che siano state create da qualche parte in Asia. Quello che mi piace di più della loro interfaccia è caricare i file appena creati e memorizzarli nel progetto. È possibile archiviare facilmente interi layout di pagine Web online e accedervi e modificarli da qualsiasi computer.

8. Parco giochi Google Code

Sono rimasto sorpreso dal fatto che molti sviluppatori non siano a conoscenza dell'esistenza. stai ricevendo accesso completo alla loro API e nella stessa finestra puoi eseguire il debug di tutti i tuoi codici.

Per API intendo che puoi ottenere dati dai più grandi prodotti Google: post da Blogger, punti di riferimento da Google Maps e persino video direttamente da YouTube. Quando fai clic su varie opzioni, i dati nella finestra anteprima sono anche in fase di aggiornamento.

Ti consiglierei di conservare questo strumento solo come risorsa, poiché è tutt'altro che adatto a tutto ciò che scrivi. Tuttavia, Google è una grande azienda con molte API di dati del codice sorgente. Se hai bisogno di materiale da YouTube o motore di ricerca google, questo strumento ti tornerà sicuramente utile.

9.IDEOne

- un altro strumento per la programmazione "profonda" e lo sviluppo del software. Il loro editor online supporta l'evidenziazione della sintassi per una serie di linguaggi importanti, tra cui Objective-C, Java, C #, VB.NET, SQL e altro. dott.

10.Tastiera codici Viper7

Questa applicazione web, nota anche come, si trova sul sito in cui viene reindirizzata allo stesso editor online. I loro strumenti sono impostati per eseguire il debug dell'output Variabile PHP che a seconda della tua scelta può variare tra PHP5 e PHP4.

Creando un account, Codepad può essere utilizzato come sistema di archiviazione personale. Qui, come in altri editor online, puoi chiamare ciascuno Progetto PHP e salvalo online gratuitamente. Questo editor di codice è diverso in quanto gli utenti non devono installare alcun software sul proprio computer. Durante l'interpretazione di ciascuno degli script, l'editor offrirà ulteriori meta-dettagli come il richiamo del browser o le intestazioni di risposta.

11.JSLint

Di per sé è un po' strano, mentre l'editor di codice funziona secondo uno schema completamente standard.

Le opzioni offerte potrebbero confonderti se non ti sei mai imbattuto in questo tipo di modello prima. Con una serie di competenze specifiche, puoi lavorare con l'open source. Tuttavia, molte fonti non supportano nemmeno l'evidenziazione della sintassi, che è una chiara svista data una gamma così ampia di opzioni. Consiglierei di lavorare con se hai del tempo libero, ma non c'è alcuna garanzia che diventerà il tuo strumento di debug javascript preferito.

12.SQL violino

In precedenza abbiamo esaminato un'applicazione web chiamata jsFiddle. Ora è il momento di parlare, che funziona allo stesso modo, tranne Database SQL dati di sintassi. Sono riuscito a trovare un'alternativa decente per testare il codice del database.

Tutto l'output del tuo codice SQL apparirà nella tabella sotto gli editor. Puoi scrivere nuovo codice per applicare i dati a destra e generare lo schema a sinistra. Questo schema del database è un codice SQL che puoi salvare per esportare il tuo database corrente e reinstallare tutto su un nuovo server.

Se non hai familiarità con i database o linguaggio SQL allora è improbabile che questa applicazione ti sia utile. Ma per gli sviluppatori interessati a conoscere SQL, questo strumento è perfetto!

13.Cloud9 IDE

A mio parere, è il miglior editor di sorgenti disponibile in rete. Non è solo un editor, ma un intero sistema di strumenti e risorse; sui loro server puoi archiviare tutti i tuoi repository di codice sorgente.

La registrazione è gratuita per tutti i progetti comunitari. Se hai bisogno di spazio personale prima dello sviluppo, ti costerà $ 15 al mese o $ 180 all'anno. Puoi condividere i repository di codice privato con qualsiasi utente di tua scelta. Questa opzione consente agli sviluppatori di implementare lavoro congiunto su vari progetti.

Ogni nuovo progetto viene archiviato in una sottocartella in cui è possibile creare file fisici reali. HTML, CSS, JS, PHP e tutto ciò di cui hai bisogno per la codifica sarà nel tuo account. Nel tempo, sarai in grado di inviare questi file come un intero progetto o scaricarli sul tuo computer.

La gamma di possibilità offerte da Cloud9 è molto ampia. Raccomando 10-15 minuti per guardarti intorno in un account gratuito e ti innamorerai immediatamente del lavoro dell'interfaccia utente. L'azienda continua a guadagnare terreno, quindi non vedo l'ora di aggiungere nuove utili opzioni nei prossimi anni.

14.CodeRun

È un editor online per qualsiasi applicazione web dinamica. Editor di testo molto simile a Microsoft Visual Studio; puoi anche codificare in C # per ASP.NET. Le loro librerie includono risorse di terze parti come Facebook Connect e Silverlight.

Oltre alle applicazioni web basate su Microsoft, puoi codificare direttamente in javascript o PHP. Il modo in cui funziona CodeRun non è molto diverso da Visual Studio: creare un nuovo progetto di sito Web e lavorare su singoli file. Nella parte inferiore dello schermo ci sono gli strumenti di debug ei risultati dalla finestra della console.

Indispensabile se hai esperienza con Visual Studio. L'interfaccia è praticamente la stessa e puoi persino scaricare / caricare file di progetto sul tuo computer. Questo è un altro strumento di cui gli sviluppatori web esperti possono prendere nota.

15.Compila

Il modello è molto simile al modello Applicazioni Windows... Puoi lavorare con documenti aperti e modificare i file in movimento. Tuttavia, prima di poter iniziare a creare nuovi progetti, dovrai registrarti.

Poiché il layout della pagina assomiglia a una normale applicazione desktop, è abbastanza facile lavorarci anche per i principianti. Gli strumenti supportano tecniche di programmazione come C++, C# e Visual Basic. Nel complesso, Compilr dovrebbe essere un'applicazione di fallback per il test e il debug del codice sorgente.

Finalmente

Il numero di computer collegati tra loro sta crescendo, quindi diventa più facile per gli sviluppatori lavorare insieme nel browser. Nuove tecnologie stanno emergendo come parte delle applicazioni locali, e chissà fino a che punto andrà.

Speriamo che questa raccolta di strumenti di test del codice ti abbia fatto pensare allo spazio di sviluppo moderno. Al giorno d'oggi, non costa nulla in pochi minuti mettere insieme un progetto web HTML / CSS e ottenere un breve video dimostrativo. Tieni presente che questi strumenti servono solo per assisterti nel processo di creazione del prodotto finale.