HTML si CSS

Diverse limbaje, programare, scripting, coduri, unelte specifice etc.
Avatar utilizator
Manu
General de divizie
Mesaje: 4120
Membru din: 02 Feb 2007, 01:15
Localitate: Cluj-Napoca
Contact:

HTML si CSS

Mesaj de Manu »

Lucrez de ceva vreme la un site si, printre altele, ma tot chinui cu un tabel cu multe rânduri si coloane. Acesta va fi finisat din punctul de vedere al design-ului cu CSS in viitor de altcineva, dar as vrea sa vad cum fac functia de generare in asa fel incat sa aiba la parametru marimea (big, medium, small) etc.
Întrebarea este: se poate sub o forma sau alta sa vad exact cati pixeli are un tabel HTML intr-un browser web? Nu as vrea sa ii dau latimea 100%, ci aceasta sa rezulte in urma dimensiunii scrisului continut, vor aparea maxim 3 caractere intr-o celula.
Din pacate nu prea mai vrea sa imi citeasca JAWS Cursor in browser-ul web... Se intampla acest lucru de când am Windows 7 si Internet Explorere mai noi...
Errare humanum est, sed perseverare diabolicum...
In forum linguae Latinae venite! (via est: www.limbalatina.ro)
IonPop
Colonel
Mesaje: 2166
Membru din: 02 Oct 2010, 17:55

Re: HTML si CSS

Mesaj de IonPop »

Daca sub Windows 7 nu se mai poate determina pozitia unui caracter in browser atunci este foarte nasol fiindca reduce si mai mult posibilitatile si asa reduse de a crea un design de baza.

Pentru ce vrei tu cred ca s-ar putea sa te intereseze in primul rand opinia unui vazator sau slab vazator, nu a unui nevazator pentru care aceste probleme nu au nici o importanta.
Dar cred ca oricum aceste probleme de aranjare vor fi rezolvate de designer, asa ca ar trebui sa afisezi doar tabelul, fiindca cu CSS ii va putea seta apoi toate atributele atat tabelului cat si textului din el.


Te gandesti ca exista ceva care nu poate fi setat din codul CSS si trebuie sa il setezi in html?
Avatar utilizator
Manu
General de divizie
Mesaje: 4120
Membru din: 02 Feb 2007, 01:15
Localitate: Cluj-Napoca
Contact:

Mesaj de Manu »

Eu eram curios totusi cat ocupa tabelul cu cele 19 coloane la dimensiunea caracterelor setata pentru div-ul in care este inclus. Imi place sa mi-l imaginez acolo aproximativ asa cum este. Apoi, daca vorbesc cu cel care aranjeaza vizual lucrurile, mi-ar placea sa ii pot spune: vezi ca la dimensiunea de 12 nu incape sau ca la 8 ocupa vreo 3 sferturi.
Desigur ca se poate si fara, dar nu ar strica ceva unealta care sa dea in pixeli tot felul de pozitii ale controalelor, ceva in genul JAWS Cursor, dar relativ la pagina web afisata. Probabil s-ar si putea face ceva program pentru asa ceva. Totusi: oare ce se intampla cu un tabel care are o coloana cu maxim 3 caractere? Cam cum ajung coloanele de late? Oare se limiteaza la latimea ocupata de cele 3 caractere sau mai se lasa putin in ambele parti sau cel putin in dreapta daca implicit textul este aliniat la stanga..?
Oricum, funtia de generare a tabelului va avea un parametru care sa dea clasa din CSS, astfel incat sa fie usor ajustabil in functie de locul in care trebuie sa apara tabelul, intr-un div mai ingust sau intr-o pagina mare fara alte lucruri in stanga sau dreapta.
Errare humanum est, sed perseverare diabolicum...
In forum linguae Latinae venite! (via est: www.limbalatina.ro)
IonPop
Colonel
Mesaje: 2166
Membru din: 02 Oct 2010, 17:55

Mesaj de IonPop »

Intr-adevar, si mie mi-ar placea ca Jaws sa ne ofere mai multe unelte care sa ne faca sa depindem ceva mai putin de alte persoane vazatoare, dar din pacate se pare ca Jaws ne ofera din ce in ce mai putin, si Microsoft Windows la fel.
Asa ca trebuie sa ne bazam 100% pe designer si sa il lasam pe el sa aranjeze cum crede el ca arata mai bine din punct de vedere vizual.
Partea proasta este ca la fel ca in multe alte domenii, in Romania nu exista prea multi experti in design, adica care sa stie printre altele si despre problemele de accesibilitate, despre standardul ARIA, despre widget-urile din bibliotecile Javascript care sunt si care nu sunt accesibile si pentru orbi etc.
Ce conteaza la noi este doar ce conteaza pentru majoritate, adica pentru vazatori, dar si acolo tot superficial, fara sa isi bata prea multi capul pentru utilizarea corecta a limbii romane, pentru scrierea cu diacritice, si fara sa tina cont de ultimele tendinte in domeniul designului din punct de vedere teoretic, (flat design vs embossed design de exemplu), ci doar copiind aceste tendinte din ceea ce vad pe site-urile straine.
Din cate vad eu cum arata site-urile romanesti, ma cam indoiesc ca designerii care au lucrat la ele au citit prea multe carti despre tehnoredactare, design, reclama vizuala, chiar comportamentul consumatorului. Dar cred ca toti designerii, fara exceptie includ printre chestiile la care cica se pricep si "SEO", fiindca este la moda sa spui ca te pricepi si la asa ceva, nu chiar fiindca ar avea toti astfel de cunostinte.
Asa ca cu alte cuvinte inteleg de ce ai vrea sa poti avea tu un control cat mai bun asupra aspectului paginii web, dar din pacate...

Este mai dificila determinarea pozitiei pe ecran a anumitor controale fiindca este greu de determinat latimea pe care o ocupa un text.
Mai mult ca sigur ca nu folosesti un font cu latime fixa cum este fontul Courier, asa ca anumite litere ca i, l, vor ocupa mai putin spatiu, alte litere ca n, o vor ocupa mai mult spatiu iar altele ca W, M si mai mult, iar latimea lor depinde nu doar de litera folosita ci si de tipul de font, de atributele sale, adica daca are atributul bold ar putea ocupa ceva mai mult spatiu sau nu... si evident latimea depinde si de marimea caracterelor. Teoretic daca s-ar putea afla latimea tuturor caracterelor din cateva fonturi mai folosite precum si informatii despre marimea spatiului lasat intre caractere si intre cuvinte, s-ar putea face un program care sa faca un astfel de calcul, insa cum aceasta problema este rezolvata intr-o secunda de o persoana vazatoare care vede dintr-o aruncare de privire cum arata pagina, nu cred ca a considerat cineva util sa munceasca pentru asa ceva.

Daca pe o coloana toate celulele din toate randurile au 3 caractere, atunci in mod implicit se mai lasa putin spatiu la stanga si la dreapta intre text si linia care desparte coloanele.
Daca pe anumite randuri exista mai mult de 3 caractere, atunci coloana se va lati si mai mult iar in randurile in care exista doar 3 caractere acele 3 caractere vor fi amplasate in mijlocul celulei, cu un spatiu egal in stanga si in dreapta.

Cu ajutorul codului CSS se poate insa seta ca textul sa fie aliniat de exemplu la stanga, si atunci in partea stanga va ramane doar putin text intre text si linia tabelului, iar in dreapta restul spatiului pana la latimea coloanei.
Acel "putin text" afisat implicit intre text si linia tabelului se poate modifica cu ajutorul codului CSS cu atributul cellpadding.

Apropos de functia de generare a tabelului....
Nu este o idee buna sa creezi o functie in limbajul server-side pe care il folosesti care sa genereze tabelul, fiindca in primul rand va fi mai dificil pentru designer sa faca modificarile necesare, caci ar trebui sa cunoasca cat de cat acel limbaj pe care il folosesti, si in plus limiteaza si flexibilitatea dezvoltarii ulterioare, si este si mai greu de intretinut un cod care contine atat cod din limbajul de programare, cat si HTML si eventual si Javascript.
Ulterior s-ar putea sa vrei ca tabelul sa fie si mai dinamic, si atunci nu ar trebui sa modifici doar codul HTML, ci si acea functie care sa accepte noi parametri, si ar fi mai dificil de intretinut.

In Perl exista un modul numit CGI care in trecut era foarte folosit, cu care se pot prelua usor variabilele trimise cu ajutorul formularelor, dar printre facilitatile folosite ofera si posibilitatea generarii tuturor elementelor HTML, cu parametrii cu care se pot seta toate atributele lor etc. Aceasta facilitate de generare automata a elementelor HTML cum ar fi tabele, heading-uri, formulare, headerul paginii web, imagini, linkuri etc nu a fost niciodata folosita prea mult, fiindca are dezavantajele amintite mai sus.

Cea mai recomandata metoda este sa folosesti un sistem de templating. Fiecare limbaj de programare are asa ceva. Nu stiu ce limbaj folosesti pentru acea pagina, dar daca folosesti PHP, atunci sistemul de templating Smarty este foarte bun.
Cand creezi template-uri, un singur template poate fi apelat in alte template-uri cu oricate niveluri de imbricare, asa incat nu va trebui sa creezi cod HTML duplicat. In plus fisierele vor fi fisiere distincte care contin doar cod HTML, fiind mult mai usor de modificat de catre designer.
In cazul acelui tabel poti crea de exemplu un fisier care sa contina doar codul tabelului, care va avea in mijloc o bucla care va prelua date despre fiecare rand dintr-un array si va genera toate randurile cu date.
Daca vrei ca anumite atribute ale tabelului sa fie variabile, poti include variabile in acel template, si vor aparea acolo acele valori cu care initializezi template-ul din program.
Probabil ar fi insa bine sa nu faci asa, ci sa creezi un tabel simplu, care va fi aranjat cu un cod CSS.

La fel cum este recomandat sa nu incluzi cod de programare si cod HTML in acelasi fisier, este recomandat pe cat posibil sa pastrezi in fisiere separate codurile HTML, CSS si Javascript.
Poti eventual sa ii dai un anumit ID tabelului, ca de exemplu:

<table id="blabla">

incat acesta sa poata fi modificat usor cu un cod CSS. Daca are acel cod, designerul va putea din CSS sa ii modifice tipul de font, de aranjare, de aliniere, marimea caracterelor, culorile si multe altele.
Ulterior va fi mult mai usor de modificat acel aspect doar modificand fisierul cu codul css, fara sa fie nevoie sa modifici si codul html sau chiar programul.

Da, stiu, probabil tendinta este sa poti controla tu cat mai mult iar designerul sa faca cat mai putin, insa adevarul este ca pentru o pagina simpla de web designerul are mult mai mult de lucru decat programatorul, asta daca este facuta cum trebuie, pentru a fi cat mai usor de intretinut.
Dar daca vei urma aceste recomandari, ulterior va fi mai usor pentru tine, fiindca vei putea refolosi foarte usor acele coduri CSS pentru a aranja si alte pagini fara sa ai nevoie de suportul designerului.

Exista insa o mare problema cu toti designerii din lume. Si ei la randul lor ar vrea ca ei sa controleze cat mai mult, sa aiba parte de o munca cat mai usora si atunci procedeaza intr-un mod tampit dea dreptul.
Si anume, in mod implicit standardul HTML ofera anumite valori implicite, de exemplu pentru culorile linkurilor, marimea fonturilor, marimea spatiilor intre text si liniile tabelelor si multe altele.
Or aceste valori nu mai sunt considerate de mult potrivite, fiindca sunt prea mari, iar in ziua de azi cei care creaza pagini web vor sa inghesuiasca cat mai multe informatii intr-o singura pagina, stiind ca majoritatea utilizatorilor stiu sa foloseasca atat de slab computerul incat multi nici nu stiu ca o pagina poate sa se intinda mai mult decat inaltimea ecranului si ca trebuie sa faca scroll.
Din acest motiv, pentru a le fi mai usor sa aranjeze diversele elemente HTML, in codul CSS ei prefera sa seteze mai intai valoarea zero pentru toate atributele, adica sa nu fie deloc spatii intre text si liniile tabelului, sa nu se mai afiseze un sfarsit de linie dupa un element <p> si multe altele.
Iar apoi ei iau rand pe rand *doar elementele de care au nevoie* si le seteaza atributele dupa cum este necesar.
Adica cu alte cuvinte dezactiveaza toate atributele pentru aproape toate elementele HTML, iar apoi le potrivesc manual doar pe acelea de care au ei nevoie.
Doar ca mai raman multe alte elemente HTML de care ei nu au nevoie, adica la care nu au ei de lucrat, si care raman fara acele atribute implicite.

Asa incat daca tu la un moment dat vrei sa imparti textul in paragrafe si folosesti <p>, Jaws iti va spune ca exista un rand gol, cum ar fi normal, doar ca vizual nu este lasat nici un rand gol, iar textul arata nashpa.
Sau poate ai vrea sa pui un <b> sau <strong> si Jaws iti va spune ca textul este scris cu caractere aldine, doar ca vizual ar putea fi un text simplu fiindca designerii au sters toate atributele elementelor HTML, facand ca aproape toate sa fie ca un singur element, fara nici un comportament special.
Si problema este ca in Romania am intalnit designeri care fac asa ceva doar fiindca ei stiu ca asa este recomandat, fiindca pur si simplu preiau codul CSS pe care il gasesc pe alte site-uri straine, dar uita sa mai seteze alte valori implicite pentru toate elementele HTML pe care le-au tuns la zero de toate atributele.

Sa dezactiveze toate atributele doar pentru elementele HTML de care au ei nevoie este mai dificil, necesita o atentie pentru fiecare site la care lucreaza in parte, deci munca mai multa, asa ca nu se complica cu asa ceva.
Pentru a aranja si mai usor paginile ca sa arate la fel in toate browserele, ca sa nu creeze o pagina care arata super in Firefox, dar clientul sa o vada urata in Chrome, obisnuiesc si sa foloseasca web fonts care se descarca in momentul vizualizarii paginii web, stiind ca cu acel font va arata pagina la fel indiferent de sistemul de operare pe care il foloseste vizitatorul. Problema este ca unele dintre acele fonturi nu au suport pentru diacriticele romanesti, sau ofera suport insa literele cu diacritice arata cam ciudat in comparatie cu celelalte, asa ca unii designeri vor pretinde ca diacriticele trebuie evitate, si vor spune ca este mai bine sa se scrie incorect in limba romana fiindca browserele nu suporta diacritice. Asta este o prostie care demonstreaza incompetenta lor, insa o competenta mai buna a designerilor romani nu ar putea fi recompensata financiar de majoritatea firmelor romanesti, asa ca toata lumea este multumita. Adica multumita cum sunt multumiti doi soti care arata amandoi nashpa si care stiu ca nu ar fi putut gasi ceva mai bun, nu ca doi soti intr-adevar multumiti de partenerul lor.
IonPop
Colonel
Mesaje: 2166
Membru din: 02 Oct 2010, 17:55

Mesaj de IonPop »

Aa, am spus o prostie. cellpadding este un atribut al elementului <table> nu un atribut CSS. S-ar putea sa existe si un corespondent CSS, insa de obicei se foloseste atributul cellpadding pentru spatiere intre text si liniile tabelului. De obicei se prefera CSS si nu atributele HTML, dar atributele HTML pentru <table> border, cellspacing si cellpadding sunt foarte des folosite totusi.
Vortex
Sublocotenent
Mesaje: 298
Membru din: 19 Noi 2009, 17:12
Contact:

Mesaj de Vortex »

Mie, pe windows 8.1 si firefox, jaws imi citeste coordonatele cu alt+delete. Intr-adevar, nu imi citeste literele pe care sunt daca dau sageti, dar daca ma duc exact in pozitia dorita si dau route jaws to pc si apoi alt+delete imi zice pozitia. Din testele mele, o zice corect.
Vortex Website
Maximum de confort, cu minimum de efort.
IonPop
Colonel
Mesaje: 2166
Membru din: 02 Oct 2010, 17:55

Mesaj de IonPop »

Eu acum testez sub Windows 7, cu rezultate destul de neclare. Adica cateodata functioneaza cat de cat, iar cateodata nu functioneaza deloc.
Testez cu Internet Explorer 11 si am incercat sa citesc textul cu Jaws cursor in pagina Pontes, dar nu mi-a citit nimic, adica citea titlul paginii si inca cateva elemente din partea de sus a browserului si nimic din pagina web.

Am deschis o pagina Google si am vazut ca in ea imi citea textul cu cursorul Jaws. Am trecut inapoi la pagina Pontes si acum vad ca pot citi in ea cu cursorul Jaws, si evident, pot sa citesc si pozitia cursorului cu alt+delete.

Cateodata functioneaza OK rutarea Jaws to PC (sau ma rog, Jaws to virtual cursor), dar cateodata muta cursorul Jaws in cu totul o alta locatie decat pozitia cursorului virtual. Dar pot de obicei sa caut textul dorit si sa vad unde este pozitionat.

Exista insa acea problema neplacuta ca in MS DOS prompt, si anume nu pot citi textul de la stanga ferestrei pana la cursor si de la cursor pana la dreapta ferestrei ca sa pot vedea mai bine unde este pozitionat pe linie cursorul, caci Jaws citeste de fiecare data intreaga linie.


Deci cu ceva efort ne putem orienta cat de cat.

Observ insa ca Jaws nu citeste OK in campul de editare in care scriu acum mesajul, fiindca chiar daca sunt pe ultima linie din acest camp, si daca nu am scris inca nici un text in aceasta linie, Jaws imi citeste linia anterioara chiar daca apas sageata in jos. Sper ca in Firefox va functiona mai bine...
Avatar utilizator
Manu
General de divizie
Mesaje: 4120
Membru din: 02 Feb 2007, 01:15
Localitate: Cluj-Napoca
Contact:

Mesaj de Manu »

Am folosit si eu mult timp cellpadding si cellspacing etc, dar acum toate aceste atribute sunt considerate invechite, ba mai mult, când e vorba de HTML5 nici nu mai exista multe dintre ele precum bgcolor. Se recomanda tot mai mult formatarea din CSS, in codul sursa ramanand practic HTML-ul in cea mai pura forma.

Ca sa fiu mai explicit, eu desenam sistemul periodic, Tabelul lui Mendeleev si vroiam sa fie cat mai ok inainte de a intra cineva care vede sa il corecteze.
Am facut practic o functie drawTable() care cheama in functie de imprejurari o functie drawRange, functie care la rândul ei cheama o functie drawCell().
Avand cele 118 elemente chimice intr-un array, functia drawRange() stie sa faca cate o bucla pentru a chema sa zicem functia drawCell pentru elementele de la 19 la 36, asta pentru a afisa perioada a treia, deci chem drawRange(19, 36).
Functia drawCell() face apoi tot ce trebuie in functie de elementul care i se da la afisat ca parametru. Aici se creaza simbolul ca link si ce stiu mai ce in functie de necesitati.
Voi avea nevoie de tabelul acesta in forma mare, medie si mica, de aceea ziceam ca la drawTable() pun ca parametru doar clasa din CSS care sa fie utilizata.
Este un tabel care imi trebuie pentru un site personal, deci pot face ce vreau fara sa imi fac probleme ca ar fi fost mai buna utilizarea unor template-uri si ce stiu mai ce.
Oricum, am tot citit ca din punctul de vedere al matematicii, Tabelul lui Mendeleev "It's a mess"... Adevarul e ca greu gasesti algoritmi foarte buni pentru a-l crea cu un cod cat mai sintetic.

Da, utilizez PHP.
Asa ca gluma, te pomenesti ca in Perl o fi un modul care creaza dintr-o data tot sistemul periodic... :LOL:
Errare humanum est, sed perseverare diabolicum...
In forum linguae Latinae venite! (via est: www.limbalatina.ro)
IonPop
Colonel
Mesaje: 2166
Membru din: 02 Oct 2010, 17:55

Mesaj de IonPop »

Ma gandeam eu ca pentru sistemul periodic ai nevoie. :-)

Adevarul este ca uneori este bine sa testezi pe propria piele diverse optiuni ca sa poti fi cu adevarat convins de ce recomandarile sunt asa cum sunt.
La inceput nici mie nu mi-a placut idea sa folosesc sisteme de template-uri. Apoi mi-am facut eu un sistem propriu de template-uri, si doar ulterior am vazut ca de fapt daca as fi urmat recomandarile mi-ar fi fost mult mai simplu.
Stiu cum este. Teoretic chiar daca faci ceva doar pentru tine este bine sa inveti metoda cea mai buna, pentru ca atunci cand trebuie sa o aplici intr-un proiect mai mare sa ai deja experienta, dar practic cand vezi ca cu cunostintele pe care le ai poti deja sa pui in practica un proiect, asta te atrage mai mult decat sa tot inveti noi si noi metode pe care ai putea sa le aplici candva, doar fiindca altii spun ca ele ar fi mai bune din cine stie ce motive care in acel moment nu au cine stie ce valoare pentru tine.

Eu cred ca metoda cu atatea functii este cam complicata. Cred ca ar fi fost mai simplu sa creezi o simpla structura de date cu simbolurile si eventual alte informatii despre ele, si sa initializezi template-ul cu tabelul trimitandu-i acea structura de date. Codul template-ului ar fi aranjat el in tabel datele din acea structura de date.
In acest mod programul ar fi fost foarte mic, probabil ca nu ai fi avut nimic de modificat la el ulterior, decat daca ai fi vrut sa adaugi noi date in tabel pe langa simboluri, iar daca ai fi dorit sa se faca doar modificari care tin de aspect, adica tabele mai mici sau mai mari, totul s-ar fi putut face din codul CSS, eventual si din codul HTML.
De asemenea, daca in viitor ai fi dorit sa trimiti structura de date in format JSON ca sa fie prelucrata si afisata de un cod Javascript, modificarile pe care ar fi trebuit sa le faci in program ar fi fost foarte mici.

Am vazut ca exista multe module Perl legate de chimie, inclusiv unul numit Chemistry::Elements cu care poti afla diverse informatii despre un element chimic pornind de la simbolul sau denumirea sau numarul atomic, dar nu cred ca exista un modul care sa si deseneze sistemul periodic. :-)
Dupa descrierile lor par sa faca lucruri mai complicate legate de molecule, formule chimice, moli etc.
Am vazut un modul care se numeste HackaMol::PeriodicTable care a fost actualizat in urma cu cateva zile dar nu are documentatie, asa ca ar trebui sa ma uit in codul sursa ca sa vad ce face.
Sau ar mai fi unul care se numeste Acme::MetaSyntactic::elements si care a fost actualizat cu vreo luna si ceva in urma, tot fara documentatie, dar care spune:

This theme provides the names of the chemical elements, as given in the standard periodic table, up to the 118th element.
The default list is the list of chemical symbols. The language code for this list is x-elements (an extension to RFC 3066).
Campus
Comandantul unitatii
Mesaje: 446
Membru din: 09 Mai 2007, 12:15
Localitate: Cluj Napoca

Mesaj de Campus »

Eu am putina experienta in css dar, din experienta asta am observat ca depinde foarte mult si de browser. Spre exemplu unele elemente ale interfetei fonotecii pontes sunt interpretate diferit de internet explorer si google chrome. Ma refer aici la distanta dintre bullet-ul de la lista si marginea din stanga, spre exemplu.
Referitor la ce spunea Manu eu am folosit destul de mult in css padding-left, padding-top, padding-bottom, padding-right pentru a seta distanta unei celule fata de elementul vecin.
CSS pare ciudat la inceput insa am ajuns la concluzia ca este un limbaj foarte puternic de formatare, mult mai puternic decat atributele clasice din html.
Referitor la felul in care este afisat un text intr-o celula de tabel cred ca suint mai multe variabile implicate: codul css, tipul de browser, nivelul de zoom din browser, felul in care este definita latimea (relativ sau absolut), rezolutia ecranului, nr de toolbar-uri instalate in internet explorer, etc. In autoit de exemplu exista o functie care iti calcula cati pixeli ocupa un text cu formatare predefinita. Din cate tin minte era o functie creata de ceva utilizator si cred ca altii au creat si in alte limbaje de programare functii asemanatoare. Pe internet insa exista variabila asta legata de browser, zoom, sistemul de operare si asa mai departe.
Din pacate, pana la urma, tot un vazator este solutia. Oricat de buni ar fi nevazatorii in programare, pentru anumite domenii precum design-ul web este nevoie de vedere la meomentul actual. Si oricat de mult m-as chinui eu care mai am resturi de vedere sa fac un design pemntru un site tot un vazator care se pricepe sa zicem la fel de mult ca mine la programare sau poate mai putin o sa creeze unul mai bun intr-un timp mult mai scurt.
Eu personal, pana la urma m-am resemnat si am renunta la a crea design-uri web. E plin internetul de template-uri care pot fi modificate si ajustate pentru orice nevoi. Decat sa creez un produs prost din punct de vedere vizual prefer sa il includ intr-un template creat de altii dar care sa arate bine.
Toate cele bune!
Campus
Avatar utilizator
Manu
General de divizie
Mesaje: 4120
Membru din: 02 Feb 2007, 01:15
Localitate: Cluj-Napoca
Contact:

Mesaj de Manu »

Absolut, nici nu se pune problema ca un nevazator sa faca design-ul final, dar sa iasa cat de cat ok din start, astfel incat sa fie doar ajustat, tot se mai poate pe alocuri sau mai trebuie incercat, de aceea ma intreb si eu, ca apoi prin diverse asociatii, conexiuni logice sa incerc sa raman cat de cat aproape de realitatea vizuala.

Fara CSS nici nu se prea poate, decat cu munca titanica.
De exemplu inc azul unui sistem periodic foarte usor poti sa asociezi o clasa de CSS pentru o celula daca e vorba de un alcalin pamantos sau un gaz nobil, dar in acelasi timp se poate asocia inca o clasa aceleiasi celule care sa reflecte starea de agregare, eventual si o clasa pentru blocul S P D sau F, daca si aceasta problema se doreste reprezentata cumva. O clasa spune culoarea fundalului, una spune culoarea conturului sau tipul acestuia, alta culoarea scrisului etc.
Când se decide apoi ca toate metalele de tranzitie sa fie o nuanta mai deschise la culoare, nu trebuie schimbat decat intr-un loc.
Se poate spune ca CSS e una dintre inventiile cele mai tari in materie de WEB... :)
Errare humanum est, sed perseverare diabolicum...
In forum linguae Latinae venite! (via est: www.limbalatina.ro)
IonPop
Colonel
Mesaje: 2166
Membru din: 02 Oct 2010, 17:55

Mesaj de IonPop »

@Campus: Sigur. CSS este un limbaj foarte puternic de formatare si daca nu ar fi multe incompatibilitati intre browsere ar fi excelent fiindca s-ar putea face si mai multe decat se fac de obicei. Unele chestii sunt evitate tocmai fiindca in unele browsere rezultatul este diferit, sau nu sunt suportate deloc.
Uneori se pun marcaje care testeaza tipul de browser si se adauga un cod CSS diferit pentru anumite browsere, in special pentru cele mai vechi cum ar fi Internet Explorer 6, 7 sau 8, insa asta inseamna munca in plus, asa ca multe site-uri spun dea dreptul ca nu suporta browsere vechi si gata.

M-am contrazis cu multi orbi pe diverse liste de discutii in ceea ce priveste posibilitatea unui orb de a lucra ca web designer, insa si eu sunt de acord cu tine. Un orb nu putea face un design ca lumea nici in urma cu 15 ani, cand paginile web erau de obicei mult mai simple si accesibile.
Astazi cand exista o multime de biblioteci javascript care ofera mii si mii de widget-uri dintre care foarte multe nu sunt accesibile deloc, cand se pot aplica multe efecte care nu sunt deloc accesibile, cand cu CSS se pot face multe lucruri care nu sunt deloc accesibile, este absolut imposibil ca un orb sa creeze un design cat de cat acceptabil.
Asa ca munca de programator poate fi una foarte accesibila, dar partea de design ar fi bine sa o faca cineva care vede.
Cand vedeam am fost printre altele si web designer si stiu ca diferenta intre un design bun si unul rau poate fi de doar cativa pixeli, iar un cititor de ecran nu ne va putea niciodata oferi asemenea informatii incat sa putem noi crea un design ca lumea.

@Manu: Spre nenorocul orbilor oarecum, orientarea in ultima vreme este ca browserul sa faca cat mai multe lucruri, nu programul care ruleaza server-side.
Spun pentru nenorocul orbilor fiindca asta inseamna ca se foloseste din ce in ce mai mult AJAX (sau ma rog, un fel de AJAX fara XML, ci cu JSON), dar fara suport ARIA de obicei, asa ca dupa ce facem click pe un link, pare sa nu se intample nimic, dar de fapt este posibil sa se actualizeze anumite parti din pagina, deci prezinta ceva probleme de accesibilitate.
Asa ca in din ce in ce mai multe cazuri programul server-side ofera doar un API care genereaza datele intr-un format standard, de cele mai multe ori JSON, iar codul Javascript il descarca, il formateaza ca sa arate cum vrea designerul, iar daca la un moment dat designerul va dori sa schimbe total aspectul paginii, il va putea schimba fara sa mai fie nevoie sa se modifice programul care ruleaza pe server.
Asta reduce timpul de munca necesar, face ca modificarile pe site sa fie mai flexibile, iar serverul sa fie ceva mai putin incarcat.
Pe de alta parte acest mod de lucru reprezinta si un avantaj pentru orbii care lucreaza ca programatori, fiindca munca este din ce in ce mai specializata, si programatorul trebuie sa faca doar partea de programare, in multe cazuri nu mai are nici macar de creat codul HTML, iar partea de front-side este facuta de altii, asa incat exista mai putine probleme de accesibilitate.
Din pacate pentru moment asta se intampla doar la altii, si mai putin si la noi. :-)

Intr-adevar, se pot asigna mai multe clase unor obiecte, dar la fel ca in cazul programarii, la intrebarea daca este bine ca un obiect sa aiba mai multi parinti, chiar daca limbajul de programare permite pentru cazuri extreme, este recomandabil sa aiba doar un singur parinte (familie monoparentala) :-)
Daca o celula are 3 clase, sa zicem una care defineste tipul de font, alta care defineste marimea fontului si alta care defineste culoarea fontului (sau alte atribute, ca nu conteaza), ce te faci daca vrei sa schimbi culoarea fundalului pentru acel tip de celula? Sau daca vrei sa adaugi un text in mod automat (ca CSS poate face si asta, desi nu stiu cat de bine este suportata aceasta facilitate).
Atunci va trebui ori sa modifici una dintre cele 3 clase, ceea ce nu este prea bine, fiindca acea modificare va fi aplicata peste tot unde este folosita acea clasa si unde poate ca nu vrei si aceasta modificare, iar cea de a doua solutie este sa mai adaugi o a patra clasa, iar asta nu este prea bine fiindca trebuie sa modifici si codul HTML.
O solutie mai buna ar fi sa definesti o singura clasa pentru un anumit tip de celule, cu toate subtipurile detaliate. Adica sa nu creezi doar o clasa "metale" sau "metale_alcaline", ci una care sa descrie cat mai bine tipul de data, de genul "metale_alcaline_pamantoase" sau cu si mai multe detalii, in functie de nevoi.

Iar apoi pentru fiecare dintre acele clase vei putea defini si fontul, si culoarea textului, si marimea fontului si culoarea fundalului si tot ce mai vrei.
Daca vei dori sa schimbi una dintre aceste atribute, o vei putea schimba, dar vei putea adauga si noi atribute pentru acea clasa fara sa mai fie nevoie sa schimbi nimic in codul HTML.
Si in plus mai exista si avantajul ca ai toate atributele pentru o clasa la un loc, fiind mai usor de modificat, fara sa ai dubii si sa incepi sa cauti prin codul html ca sa vezi daca nu cumva faci rau ca modifici o clasa existenta care mai este folosita si in alta parte unde ar trebui sa ramana cum este.
Dar ma rog, modul in care procedezi depinde de nevoi, fiindca uneori sti sigur ca nu vei avea nevoie de modificari prea detaliate, si atunci este mai simplu sa creezi doar cateva clase pe care sa le aplici peste tot, decat sa creezi mai multe clase cu atribute asemanatoare si care nu vor fi niciodata modificate.

O alta parte buna din CSS este faptul ca este "cascading" adica faptul ca se pot defini atribute pentru un element de nivel mai inalt care include alte elemente, si toate elementele copil vor mosteni atributele de la elementul parinte, asa incat nu trebuie sa definesti de mai multe ori un anumit atribut.

In cazul tau, chiar daca vor exista diferente de culori text si fundal si atribute ale textului, probabil ca vei dori ca toate celulele sa foloseasca acelasi tip de font cu aceeasi marime, ca sa nu arate tabelul ca o varza, iar acel tip de font il vei putea seta pentru intreg tabelul o singura data, nu pentru fiecare rand sau celula in parte, iar atributele care pot diferi de la o celula la alta le vei putea seta intr-o clasa care nu va fi aplicata in general, ci doar cand este aplicata in tabelul respectiv.
Aceasta este o alternativa pentru folosirea unei singure clase cu toate atributele pentru o celula, adica poti defini atributele pentru o clasa de nivel mai inalt si apoi defini separat atribute pentru feicare dintre clasele copil, dar practic este acelasi lucru, atat doar ca nu folosesti doar o singura clasa pentru o celula, ci mai multe clase, toate clasele fiind insa valabile doar sub elementul parinte specificat, nu si altundeva pe site.

Pacat ca Jaws raporteaza destul de rau atributele elementelor HTML in foarte multe cazuri si nici nu raporteaza decat cateva atribute setate cu CSS, fiindca altfel CSS ar fi un limbaj foarte interesant, chiar daca multe dintre facilitatile lui ne sunt inaccesibile.
Avatar utilizator
Manu
General de divizie
Mesaje: 4120
Membru din: 02 Feb 2007, 01:15
Localitate: Cluj-Napoca
Contact:

Mesaj de Manu »

In cazul de fata cred ca tot mai bine ar fi totusi setarea a trei clase cel putin pentru o celulaŞ una cu numele starii de agregare (gaz, lichid sau solid), una cu caracteristica (alcalin, metaloid etc) si una pentru bloc (s, p, d sau f). Astfel, daca decid ca lichidele sa aiba o infatisare anume peste tot, pot schima doar clasa lichid din CSS. Cred ca ar fi destul de greu sa fac o clasa pentru metale lichide, doar pentru ca mercurul exista sub aceasta forma.
Poate citeste si Andreea si daca are timp, imi face un mic rezumat cu o opinie personala in ceea ce priveste ce e cel mai important de surprins intr-un sistem periodic: pentru grupe culori diferite pentru alcaline, alcaline pamantoase, metale tranzitionale gaze nobile etc si apoi starea de agregare plus blocul s, p, d sau f, ori ar fi o alta sugestie...
O intrebam pe Andreea pentru ca ea este specialista in chimie din cate stiu.
Errare humanum est, sed perseverare diabolicum...
In forum linguae Latinae venite! (via est: www.limbalatina.ro)
IonPop
Colonel
Mesaje: 2166
Membru din: 02 Oct 2010, 17:55

Mesaj de IonPop »

Asa este. E bine sa pornesti de la rezultatul final care se doreste a fi obtinut, adica in acest caz este bine sa sti ce atribute ale elementelor chimice trebuie sa fie diferentiate, ca sa nu faci un sistem foarte flexibil cu o multime de clase dar a carui flexibilitate sa fie inutila, dar niciun sistem pe care sa iti fie greu sa il modifici ulterior.

Eu nu mai prea stiu chimie, desi in scoala generala era una dintre materiile preferate si a inceput sa imi displaca doar in liceu cand am inceput sa invatam chimia organica.
In scoala generala aveam o profesoara de chimie foarte slab pregatita, dar intr-un an a venit temporar, nu stiu de ce, o alta profesoara care a facut sa imi placa chimia.

Intr-o zi ne-a invatat o poezie ciudata, sau mai bine zis ne-a dat-o sa o invatam pe de rost acasa, fara sa ne spuna ce inseamna cuvintele ciudate din ea. Unii colegi presupuneau ca este in limba rusa (pe care noi nu o stiam fiindca invatam engleza si franceza).
Am cautat acum cu Google dupa cateva cuvinte din acea poezie, pe care o mai tin minte partial si acum dupa un sfert de secol, insa am fost surprins sa gasesc doar 2 pagini pe care se aminteste despre ea.

Iata inceputul acelei poezii, asa cum am gasit-o pe una dintre acele doua pagini de care spuneam:

hiheli bebocarno fluornena
mgalsiphoss clarpoca scativa
croman feconi cuzinga
gerarsse brokriprub stroyzir
niobmotec rurhopalag cadin
stastib teioxeces balacepra.

http://uvedenrode.blogspot.ro/2006/08/r ... coala.html

Este un mod foarte bun de a invata pe de rost elementele asa cum apar ele in sistemul periodic.
Sau ma rog, elementele din grupele principale.
Din cate am citit in acea pagina se pare ca aceasta poezie a aparut intr-o carte, dar totusi se pare ca nu prea are mare trecere daca pe web din miliarde de pagini apare doar in doua. Cred ca de fapt problema este ca nu mai are prea mare trecere chimia in general, datorita salariilor care se castiga in general in acest domeniu.
Avatar utilizator
Manu
General de divizie
Mesaje: 4120
Membru din: 02 Feb 2007, 01:15
Localitate: Cluj-Napoca
Contact:

Mesaj de Manu »

Intr-o vreme stiam si eu tot sistemul periodic, imi facusem propozitii cu un continut absurd pentru fiecare grupa. Interesant ca acea "poezie" merge pe orizontala, pe elemente in ordinea numarului atomic, cred ca e mai eficient ceva pe verticala, pe grupe, din aranjarea mentala a acestora putând fi usor dedus si numarul de electroni, dar si alte proprietati care reies din apartenenta la o anume coloana...
Errare humanum est, sed perseverare diabolicum...
In forum linguae Latinae venite! (via est: www.limbalatina.ro)
Scrie răspuns