Il mio primo topic su html.it e il mio primo sito

[Cl0ud-W4lk3r]

Buonasera a tutti,

come da titolo questo è il mio primo topic in questo forum, devo dire che è da molti anni che seguo html.it e ho imparato parecchio da questo sito. Solo ora però mi sono finalmente deciso a iscrivermi al forum.

Effettivamente ho cominciato seriamente a produrre qualcosa e quindi sento il bisogno di cominciare a condividere le mie conoscenze e a confrontarmi con gente che mastica i miei stessi argomenti.

Andiamo al sodo, sto sviluppando un sito web (gratuitamente >.>) per un'associazione teatrale fondata da dei miei amici, non avendo alcuna fretta ho deciso di studiarmi l'html5 e i css2-3 per fare le cose più all'avanguardia possibile ^^

Le mie conoscenze nel campo dello sviluppo web sono ancora scarsine, essendo io in realtà un programmatore java.

Tali conoscenze si riducono attualmente ha:

1) media padronanza dell'html;
2) media padronanza dei css;
3) sto studiando javascript (che come sintassi è simile a java XD)
4) sto studiando php e mysql (ma ancora sono in alto mare e per il sito che vi farò vedere userò access come db ...).

Detto questo vi faccio vedere quello che ho prodotto fino ad ora AccademiadeglinQuieti

Ed eccoci al punto focale del mio topic: un bug di visualizzazione con i css! Infatti se zoomate la mia pagina di molto, noterete che il mio navigatore esce dalla corretta visualizzazione grafica. Lo stesso accade se si vuole stampare la pagina (ma questo è relativamente importante per ora...)
Tenete conto che per realizzare tale pagina senza table, e quindi solo con i css ho dovuto fare degli accrocchi strani rendendo il navigatore "fixed"

Vorrei sapere da voi cosa ho sbagliato, se posso risolverlo facilmente o se è un bug grafico trascurabile.
Grazie anticipatamente, Luca.


P.S. Non sono sicuro che sia questa la sezione giusta per questo topic, in caso mi punirete a dovere

[fcaldera]

Benvenuto nel forum

Originariamente inviato da Cl0ud-W4lk3r
Ed eccoci al punto focale del mio topic: un bug di visualizzazione con i css!

sposto nel forum css

[dottwatson]

Ciao,

ti parlo principalmente da programmatore php mySql Javascript, ma che giustamente deve sapersi interfacciare con CSS al fine di raggiungere il miglior risultato.


2 considerazioni:

HTML5

hai usato HTML5 nelle strutture del sito, e questo rappresenta un vantaggio e uno svantaggio.
vantaggio perchè è una struttura molto descrittiva, piace ai motori di ricerca che riescono ad assimilarne i contenuti differenziandone lo scopo. Codice più pulito e buona compatibilità con i browser mobili, controllo diretto dei contenuti multimediali e altri vantaggi come controllo dei campi ecc...
Svantaggio perchè i ti trovi a combattere con versioni di browser che non supportano a pieno questo linguaggio (mi riferisco a IE) e quello che concerne i selettori CSS3 . Ancora oggi (e purtroppo mi riferisco ancora a IE) il CSS2 non è al top del supporto... diciamo che se usi CSS2 su IE ti trovi ancora delle lacune non indifferenti (e mi riferisco ai pseudo selettori come first-child e last-child )

JAVASCRIPT
il risultato migliore si ottiene ancora una volta con delle librerie dedicate come JQuery e Mootools, ricche di transizioni ed effetti, plugins e altro. Semplicemente ciò che magari funziona su FFox non potrebbe girare su IE, mentr la libreria ti permette di ottenere lo stesso risultato sintattico per tutti i browser. Giusto lavorare nell' ottica della tecnologia più recente, ma la compatibnilità di un sito è sempre la pecora nera di tutto...

Quello che fa la differenza tra i vari browser è il motore di rendering, ovvero quello che renderizza HTML e CSS al fine di proporre la pagina strutturata al browser. Alcuni browser si condividono il motore di rendering e in particolare i più utilizzati sono:

Webkit: Safari e Chrome
Gecko: Mozilla e nescape(morto in favore di FFox)
Presto: Opera
Trident: IE

Ti dico questo non perchè possa debba essere la risposta diretta al tuo problema di positioning dell' elemento, ma perchè se ti stai affacciando adesso in maniera seria sulla tecnologia web, allora è giusto avere queste piccole nozioni tecniche, che in futuro ti aiuteranno ad impostare il lavoro e il codice
per il resto, in non ho trovato nessun problema di zooming (testato su FF4 e IE9)

p.s.: notato? i problemi derivano spesso e volentieri da IE non hanno rispettato uno sputo di standard.........

[0-c00l]

Come dottwatson anche io zoomando sia con chrome che con mozilla non ho rilevato nessun difetto, comunque come diceva aggiungi questi prefissi per gli angoli arrotondati:

-moz-
-webkit-

(esempio: border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px

Sfortunatamente IE non supporta questa proprietà (Primo browser e non le sopporta, mah che fiasco), quindi apparirà con gli angoli a 90° in esso

[Cl0ud-W4lk3r]

Grazie mille per le risposte.

Il bug grafico c'è, ma si vede solamente a risoluzioni basse, ad esempio sui netbook. Come mi avete accennato devo ancora approfondire il mondo dello sviluppo web, ho appena terminato lo studio di javascript di base, ora mi accingo ad approfondire il JQuery direi quindi che posso accantonare il problema per un momento, oppure modificare il nav facendone uno più semplice ...

per dottwatson: parte delle cose che mi hai detto già le conoscevo, ma fa comunque piacere avere una delucidazione chiara e specifica. Per quanto riguarda la compatibilità cross-browser, cerco di starci attento (curando più che altro IE8 e non le versioni precedenti ...), in ogni caso ho appena sviluppato, grazie alle nuove conoscenze acquisite in javascript, un "popup" che avvisa l'utenza inducendola ad aggiornare il proprio browser (o a cambiarlo possibilmente >.>)

Per quanto riguarda i prefissi per i vari motori di rendering: grazie dell'osservazione, mi rispulcerò tutto il codice css aggiungendoli.

Per ora grazie ancora delle risposte (probabilmente mi rifarò sentire >.<)


P.S.vi lascio con lo screen del bug grafico, forse non mi ero spiegato bene ...

[Cl0ud-W4lk3r]

Dimenticavo, per caricare solo una porzione della pagina, devo studiarmi l'Ajax?

[ResianTaxidrive]

In realtà il bug c'è anche senza ingrandire.Basta avere una finestra non molto alta, diciamo di 400px; il menu essendo fixed rimane nella stessa posizione nella finestra e scrollando va a finire fuori dalla zona grigia.

edit: scusa, non avevo visto lo screenshot

[Prill]

Sono i margin e i padding che allungano il contenitore, per esempio va a influire anche quel margin-top del div footer che ricade nel div precedente. Con Firefox il problema, sulla tua pagina, si pone al quarto o quinto ingrandimento, ora non è detto che gli utenti ingrandiscano tante volte, se usi l'ingrandimento al fine di simulare risoluzioni diverse tieni conto che la visualizzaione non necessariamente è affidabile in quanto il browser può ricalcolare non tutto perfettamente in proporzione, quindi conviene piuttosto testare con risoluzioni diverse. Per ovviare dovresti rivedere forse il div centrale che contiene il menu e gli articoli evitando su quello margini e padding. Stranamente però, non so se dipenda dalla non perfetta resa di html5, margini e padding mi sembrano collassare allo stesso modo. Se scarichi la web developer toolbar di Firefox e contorni gli elementi blocco, ti accorgi infatti che sia che vi sia un padding sia che vi sia un margin sul footer o su un elemento interno, viene sempre aggiunto al div precedente allungandolo (e il menu scorre quindi anche oltre l'ombra)