Help! HTML

AdrianB1

Membru Senior
Sugar daddy
Nu am avut nevoie sa imi bag nasul prea adanc in HTML de foarte mult timp (vreo 9 ani) asa ca sunt practic extrem de incepator in acest moment, dar tocmai am dat de o chestie mai ciudata si incerc sa ii dau de cap. Se da urmatoarea pagina:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HEAD><TITLE>Test</TITLE><SCRIPT type="text/javascript">
function setdef()
{
	document.languageForm1.languageLinks1.selectedIndex = 1;
}
function disp_text()
   {
{
   var w = document.languageForm1.languageLinks1.selectedIndex;
   var selected_text = document.languageForm1.languageLinks1.options[w].text;

 window.location=document.languageForm1.languageLinks1.options[document.languageForm1.languageLinks1.selectedIndex].value
   }
return false;
}
</SCRIPT><HEAD>

<BODY onLoad=setdef()>
<TABLE width="100%" align=right>
  <TBODY><TR><TD align=right>Choose your Preferred Language 
  <FORM name=languageForm1><SELECT onchange=disp_text() name=languageLinks1> 
<OPTION value="/languages/CN.htm">Chinese
<OPTION value="/languages/EN.htm">English
<OPTION value="/languages/FR.htm">French
</OPTION></SELECT></FORM>
...continut HTML chior ...
Scopul: deschid aceasta pagina, e in engleza. Am in pagina o lista de selectie cu 3 limbi, aleg una, ma trimite pe pagina limbii respective in care continutul e in acea limba.
Problema: W3C validator da 3 erori.
1.
Code:
Line xx, Column 20: an attribute value must be a literal unless it contains only name characters<BODY onLoad=setdef[COLOR="#FF0000"]([/COLOR])>

You have used a character that is not considered a "name character" in an attribute value. Which characters are considered "name characters" varies between the different document types, but a good rule of thumb is that unless the value contains only lower or upper case letters in the range a-z you must put quotation marks around the value. In fact, unless you have extreme file size requirements it is a very very good idea to always put quote marks around your attribute values. It is never wrong to do so, and very often it is absolutely necessary.
2.
Code:
Line xx, Column 27: required attribute "ACTION" not specified  <FORM name=languageForm1[COLOR="#FF0000"]>[/COLOR]<SELECT onchange=disp_text() name=languageLinks1> 
 The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element. Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.
3.
Code:
Line xx, Column 54: an attribute value must be a literal unless it contains only name characters  <FORM name=languageForm1><SELECT onchange=disp_text[COLOR="#FF0000"]([/COLOR]) name=languageLinks1> 

You have used a character that is not considered a "name character" in an attribute value. Which characters are considered "name characters" varies between the different document types, but a good rule of thumb is that unless the value contains only lower or upper case letters in the range a-z you must put quotation marks around the value. In fact, unless you have extreme file size requirements it is a very very good idea to always put quote marks around your attribute values. It is never wrong to do so, and very often it is absolutely necessary.


Apoi, pagina pare sa functioneze bine in Firefox si Opera si IE 9 fara compatibility mode, dar pusa pe server in IE8 sau IE9 nu mai apare lista de selectie, apare formul dar nu reactioneaza la click (nu deschide lista).

Sugestii?
 
Funcția JavaScript apelată de evenimentul onLoad trebuie pusă între ghilimele:
Code:
<BODY onLoad="setdef();">

Formularul trebuie să aibă un câmp action care indică scriptul ce procesează trimiterea formularului.
Code:
<FORM name=languageForm1 ACTION="#">
Însă cum ăsta nu e un formular care să fie trimis undeva, nu prea are sens să mai incluzi lista derulantă într-un formular cu buton de Submit. E suficient codul JavaScript care se rulează de câte ori selecția câmpului se schimbă.

Funcția JavaScript apelată de evenimentul onChange trebuie pusă între ghilimele:
Code:
<SELECT onChange="disp_text();" name=languageLinks1>
 
Deci pentru partea cu FORM cum pot sa rezolv? Unde pun lista? Daca scot complet partea de form lista apare, dar nici macar in Opera cand selectez o valoare nu se mai intampla nimic.
 
Hm, o fi bubă la script? Ia vezi așa, fără <form> și fără a mai folosi funcția disp_text(). A, și tag-urile <option> trebuie închise.

Code:
<SELECT onChange="window.location.href=this.options[this.selectedIndex].value;">
<OPTION value="/languages/CN.htm">Chinese</OPTION>
<OPTION value="/languages/EN.htm">English</OPTION>
<OPTION value="/languages/FR.htm">French</OPTION>
</SELECT>

Încă ceva: la lista asta, prima opțiune va fi mereu selectată implicit, deci Chinese nu va putea fi selectată (nu se activează onChange). Mai pune o primă opțiune:


Code:
<OPTION value="#" SELECTED>Change the language</OPTION>

Poate avea și text blank sau un spațiu.

Alternativ, pe fiecare pagină HTML poți defini care opțiune din listă e selectată, iar vizitatorul să poată să aleagă doar dintre celelalte. De exemplu, pentru engleză:

Code:
<SELECT onChange="window.location.href=this.options[this.selectedIndex].value;">
<OPTION value="/languages/CN.htm">Chinese</OPTION>
<OPTION value="/languages/EN.htm" SELECTED>English</OPTION>
<OPTION value="/languages/FR.htm">French</OPTION>
</SELECT>

De fapt, acum m-am uitat mai bine: a doua funcție JavaScript din pagină rulează la onLoad și selectează opțiunea din listă pentru engleză, ceea ce eu am făcut mai sus cu parametrul SELECTED.
 
De ce interesează validarea W3C? Oricum 4.01 Transitional este the whore of all HTML standards, nu că standardele HTML ar avea vreo importanţă că tot veni vorba, şi dacă lucrează un amator la ea nu prea văd logica. De exemplu, degeaba o faci conformă standardului HTML cînd dpdv JavaScript rămîne o atrocitate...

Doi la mînă, mi se pare o metodă foarte alambicată de-a oferi nişte link-uri. De ce nu pur şi simplu trei link-uri HTML spre cele trei pagini? Cu avantajul că ar fi indexabile de Google, spre deosebire de metoda asta cu JavaScript.

Trei la mînă, m-au amuzat întotdeauna metodele de schimbare a limbii pe site-uri care presupun că vizitatorul cunoaşte şi celelalte limbi. Logic ar fi ca link-urile respective să fie numite English, Français respectiv 中文. Pune-te în pielea unui vizitator englez care dă de pagina în chineză, de unde va şti cum se spune "limba engleză" în chineză? Sau denumirile alea sînt în engleză pe toate trei paginile?

În fine, presupunînd că vrei neapărat cu formular de selecţie, încearcă aşa:

Code:
<select onsubmit="return false;"
onchange="window.location = this.options[this.selectedIndex].value;">
<option value="/languages/EN.htm" selected="selected">English</option>
<option value="/languages/FR.htm">French</option>
<option value="/languages/CN.htm">Chinese</option>
</select>

Pe celelalte pagini pune selected="selected" la opţiunea corespunzătoare... şi ia în considerare ce-am zis despre traducerea opţiunilor în varianta nativă. Şi mai recomand şi ca value să conţină şi domeniul (http://www.test.com/languages/EN.htm), asta dacă nu l-ai şters tu din exemplu, altfel e aiurea.
 
Pai, exemplul meu e varianta mica: sunt peste 10 limbi si nu vreau sa pun un numar in crestere de link-uri si sa repaginez de fiecare data cand fac asta. In selector pot sa adaug linistit, nu se modifica cu nimic pagina.

Validarea W3C e ca sa ma ajute sa gasesc mai usor erorile care pot afecta si compatibilitatea cu alte browsere. Nu vreau sa validez in IE8 si apoi sa am surprize pentru ca inghite unele magarii, nici nu am timp si chef sa validez manual in fiecare browser si versiune, asa ca fac un mix: dupa ce e validata in W3C doar o testez rapid in fiecare browser; nu cred ca e cea mai buna metoda, dar sper ca e suficient de buna.

Nu ma intereseaza Google, e un site intern. Nici nu ma prind de ce as da URL complet cu server cu tot cand fiecare link e foarte lung si la o eventuala mutare pe alt server ar fi nevoie sa modific iarasi toate paginile (link-ul real e sub forma numecluster.companie.com/cale portal/cale aplicatie/languages/EN.htm).
 
Validarea W3C e irelevantă pentru compatibilitatea cu browserele. Odată pentru că, după cum spuneam, nobody really cares, apoi pentru că validezi HTML şi problemele tale sînt la JavaScript.

Metoda quick&dirty pentru cross-compatibility este să funcţioneze în Firefox, apoi faci mici trucuri, dacă e nevoie, pentru alte browsere. De obicei e vorba doar de IE (8 sau anterior).

URL-ul complet ar fi necesar pentru că tehnic vorbind a pune o cale relativă în window.location nu e ok. Rişti ca vreun browser s-o interpreteze aiurea. La modul minim, umblă la onchange şi lipeşte restul căii în faţă:

Code:
onchange="window.location = 'http://www.test.com/' + ..."

Soluţia ideală pentru problema de faţă ar fi să faci selectorul server-side: PHP, ASP etc. ce ai pe acolo. Pînă şi SSI ar fi mai bun decît nimic. Măcar şi numai pentru că ai putea include aceeaşi bucată (fizică) de HTML+JS în toate fişierele în loc s-o modifici în N fişiere diferite, să nu mai vorbim de posibilitatea de-a o genera dinamic.

Deşi dacă s-a mers pe soluţie pur JavaScript intuiesc că n-ai niciuna dintre variantele astea la dispoziţie...
 
Validatorul m-a ajutat sa gasesc duzini intregi de taguri care erau neinchise sau inchise aiurea, ceea ce putea cauza probleme in unele browsere - sunt mai multe tabele nexted si alte balarii mai simple prin fisiere, dupa validare si sters doar tagurile inutile (dublu declarate sau redundante) din 17k am coborat la 15k de cod care acum pare generat manual (nu are nici macar o virgula in plus, cred). Nu stiu nici un alt validator de HTML, nu ma intereseaza neaparat compatibilitatea cu o anume versiune HTML cat validarea ca nu sunt prea multe prostii interpretabile in el.

LE: Paginile le editez in Notepad, daca asta spune ceva.
 
În fine, presupunînd că vrei neapărat cu formular de selecţie, încearcă aşa:
Nu merge; daca deschid pagina local (de pe desktop) totul e perfect, daca o dechid de pe server atunci selectorul de limbi e dezactivat. Serverul e "local intranet" ca security.
Şi mai recomand şi ca value să conţină şi domeniul (http://www.test.com/languages/EN.htm), asta dacă nu l-ai şters tu din exemplu, altfel e aiurea.
Nici asta nu merge - sunt doua domenii in functie de calea prin care au intrat - prin intranet (gen server1.domeniu.com) sau de pe internet (gen server2.domeniu.com). Sunt domenii diferite pentru ca !^#$@$# si nu pot schimba asta prea usor si nici suficient de repede. Oricum, nu asta pare a fi problema, in afara de pagina in engleza (cu codul de mai sus) celelalte (cu codul vechi din primul post) merg.

Nu, nu am la dispozitie nici o posibilitate de a rula cod server-side. In teorie exista, practic e mai simplu sa il gasesc pe Yeti si sa il rog sa o faca el. Sau sa isi scrie Marius95 un *nix de la zero.
 
Problema a fost rezolvata, e un bug in IE8, posibil si IE7, se poate aplica un workaround care in cazul meu nu are efecte negative.

Ce se intampla: form-ul e intr-un tabel aliniat la dreapta. Dupa el mai e un alt tabel, tot cu width=100%, aliniat la stanga, si apoi un al treilea fara nici o aliniere; celelalte tebele au doar text in ele, al doilea e de fapt titlul paginii (don't ask, nu le-am facut eu). Toate ar trebui sa fie unul sub altul, gen dreapta sus selector de limba, o idee mai jos in stanga titlu, apoi continut; din motive necunoscute IE8 incearca sa le puna pe primele doua unul langa altul, iar selectorul nu se mai deschide dar functioneaza sagetile sus-jos daca navighez cu Tab pana la el.

Daca am micsorat latimea tabelului 2 a inceput sa functioneze. Tot unul langa altul sunt si acum, textul din tabelul 2 apare chiar mai sus in pagina decat form-ul.
 
Ca sa nu deschid inca o discutie o pun tot aici: cum pot sa aflu ce protocoale de criptare stie un server la care ma pot conecta doar ca si client? E o conexiune HTTPS, Opera mi-o raporteaza ca TLS; unii colegi au avut probleme in conectare si cineva de la helpdesk a trimis instructiuni de activare a SSL2, TLS 1.1 si TLS 1.2 pe langa SSL3 si TLS 1.0 care sunt implicit active in IE 9. Normal ca nu a mers nici asa, problemele de conectare erau de undeva din router sau firewall, dar am incercat sa aflu totusi daca are sens sau nu ce a trimis helpdesk. Mi-au spus ca au primit instructiunile de la un partener extern care avea probleme cu conectarea si IT-ul lor le-a dat acele instructiuni, e un soi de "am auzit de la cineva" si nu stiu cum sa le spun "nu are nici un efect ce ziceti voi acolo".
 
As vrea o metoda mai sigura si preferabil mai putin empirica.

Intre timp am intrebat oamenii cu serverul ce e setat pe-acolo si mi-au trimis un link la asta: http://www.f5.com/products/big-ip/. Criptarea e facuta de o masina din asta, nu din server, dar nu am gasit informatii care sa ma ajute in link.
 
Informatia este prea vaga, masinaria aia poate face orice de la layer 3 la layer 7.
Protocoalele pe care le are un server nu pot fi gasite doar pe baza unui port deschis, ci printr-un challenge client-server. Din pacate asta nu intotdeauna e standard, ba chiar in majoritatea cazurilor este closed-source.
 
Handshake-ul pe HTTPS se face prin negocierea protocoalelor/algoritmilor pe server. Clientul trimite lista suportată, iar serverul se uită la ce are şi el în listă şi zice "uite, îl folosim pe ăsta". Serverul nu trimite lista proprie către client, aşa că tot ce poţi să faci e să trimiţi cereri cu fiecare în parte să vezi dacă serverul zice da sau nu.

Nu ştiu nici o aplicaţie gata făcută care să verifice liste de acest gen. curl îţi permite să forţezi un protocol (TLSv1, SSLv2, SSLv3) dar nu şi algoritmii de criptare (atenţie, unele biblioteci compilate de OpenSSL nu vor SSLv2).
 
Inca una: care e tendinta in materie de HTML si frames? Stiu ca doctype frameset e suportat de browsere, exista insa ceva care inlocuieste sau sunt in continuare singura solutie la anumite paginari?
 
Ca element de design, frames au murit chiar înainte să apară AJAX - care a permis refresh-ul ușor a porțiuni din pagină. Se mai folosesc ca workaround pentru integrări nasoale cu alte aplicații web vechi, pentru care n-ai un API și trebuie să afișezi direct bucăți din pagina unei aplicații în altă aplicație. De obicei cu iframes, nu frameset. Însă trebuie avut grijă cu astfel de integrări, pentru că e destul de complicat să păstrezi sincronizate contextele (starea) celor două aplicații.

HTML 5 a scos complet tag-urile legate de frames din limbaj.
 
OK, eu am urmatoarea problema: un mic site cu 30 de pagini statice care are un top header (o sigla si un titlu), un meniu pe stanga care selecteaza pagina si un iframe care are continutul. Paginile de continut sunt html independente pentru ca cei care le actualizeaza au cunostinte minime de HTML (majoritatea sunt facute in Word si salvate HTML, ceea ce nu e o problema uriasa, doar dimensiunea de 3 ori mai mare decat e cazul) si sunt diverse persoane care actualizeaza diverse pagini.

Acest site era facut in rezolutie fixa de 1024x768 si mult scroll vertical in main frame; am incercat sa il fac sa se scaleze, dar nu o face corect, in unele combinatii de browsere si pagini de continut main frame ajungea sub meniu, nu langa el, iar meniul nu scaleaza nici el, zona de sub meniu e gri.

Sugestii despre o rezolvare cat mai simpla a problemei? Chiar nu vreau sa fac o opera de arta din asta si ar trebui sa ramana simplu de actualizat continutul.
 
Back
Top