Esprimere IT

Con la mia limitata abilità-set con strumenti come Photoshop e Illustrator, posso onestamente confessare che sono un sviluppatore meglio di me sono un designer. Ma il mio background con anima (lato server) sviluppo con Java / PHP / COBOL, è stata un'influenza molto positiva sulle mie capacità di sviluppo dell'interfaccia utente. Quello che voglio dire è che, mentre la creazione di miei progetti, vale a dire ogni volta che faccio design, penso a come il design può essere meglio convertito in HTML, CSS e mentre si fa l'HTML, CSS, io do un pensiero sulla tecnologia backend e rendere ragionevolmente sicuri il codice HTML che può essere facilmente implementato in XSL loop o frammenti di PHP, ecc

Nel corso degli anni, sono stati gettati testa su progetto di designer dell'interfaccia utente che probabilmente donot hanno una minima idea di cosa è HTML o CSS. Tutti questi anni ho pensato che mi sarebbe chiedere troppo, se solo mi aspetto il progettista, che sta cercando di shov il suo "impossibile codice" design giù per la gola, per capire un po 'quello che il suo disegno sarebbe stato convertito in. Questo aiuterebbe a destra?

Poi, mi sono imbattuto in questo post di oggi ... i Web designer che non possono codice ... Grazie Signore! Sono solo uno dei tanti che sentono lo stesso ... Il artitle sopra è un po 'un fiato lungo .. ma vale la pena leggere, ogni parola di esso.

Grazie Elliot Jay Stocks ... mi sento sollevato!

Ecco alcuni stralci dell'articolo Elliots .

Wow, che giornata! E 'iniziato con un tweet poco e si è conclusa con una discussione che sembrava spazzare tutta la comunità del web design. Sembra ci sono alcune opinioni molto forti sul tema se i web designer deve essere in grado di codice.
...
Quindi, prima di entrare in questo, mi permetta di riassumere rapidamente ciò che ho detto questa mattina su Twitter:

Onestamente, io sono scioccato dal fatto che nel 2010 sto ancora imbattersi dei web designer 'che non è possibile codificare i propri disegni. No scusa.

... Io avrei dovuto essere un po 'più specifico nel mio tweet. Stavo parlando di progettisti che non hanno nemmeno i più elementari HTML e CSS competenze per trasformare un design piatto in un luogo reale. Non le persone che intenzionalmente non scelgono di codice, quelli che non possono. E sono anche quelle per front-end qui il codice, naturalmente è ridicolo pensare che i progettisti dovrebbero anche essere sorprendenti back-end i programmatori ...

Otteniamo 'Web' disegni inviati in Illustrator, 300dpi, impossibili da codice, senza coerenza / usabilità.
~ Amy Mahon

Si sta facendo tardi, e ho avuto modo di avvolgere questa in qualche modo. So che ci saranno molti che non sono d'accordo con me, e la mia intenzione non è quella di offendere o turbare qualcuno che non può codice, ma mi auguro che alcune delle cose che ho detto rispecchia alcuni dei punti che vengono sempre quando approfondire questo dibattito.

Alla fine della giornata, non perdo il sonno per chi può codificare e chi no. Sono solo veramente sorpresi di trovare così tanti progettisti che non hanno capacità di front-end, come ho pensato che questo era un ricordo del passato.

Anche leggere i commenti, ci sono stati circa 320 commenti, mentre scrivo ... sono vale la pena di leggere.
Si prega di leggere articolo completo Elliots qui .. web designer che non possono codificare

• La dichiarazione di tipo di documento deve essere presente all'inizio di un documento che utilizza la sintassi HTML. Si può facoltativamente essere utilizzata entro la sintassi XHTML, ma non è richiesto. Il documento XHTML non è necessario includere il DOCTYPE XHTML perché i documenti che vengono consegnati correttamente utilizzando un tipo MIME XML e vengono trattati come XML dai browser, sono sempre resi in nessun quirks mode.

• In XHTML, i nomi dei tag sono case sensitive e di solito sono definiti per essere scritti in minuscolo. In HTML, però, i nomi dei tag sono case insensitive e possono essere scritti in lettere maiuscole o misto, anche se la convenzione più comune è quello di attaccare con lettere minuscole. Il caso dei tag iniziali e finali non devono essere lo stesso, ma essere coerente rende il codice più pulito sguardo.

VANTAGGI DI UTILIZZO HTML

• Compatibile con i browser esistenti
• Gli autori hanno già familiarità con la sintassi
• La sintassi indulgente e clemente significa che non ci sarà nessun utente ostile " Schermo giallo della morte ", se un errore scivola accidentalmente attraverso
• Sintassi abbreviata conveniente, ad esempio, gli autori possono omettere alcuni tag ei ​​valori degli attributi

VANTAGGI DI UTILIZZO XHTML

• Strict sintassi XML incoraggia gli autori a scrivere markup ben formato, che alcuni autori possono trovare più facile da mantenere
• Si integra direttamente con altri vocabolari XML, come ad esempio SVG e MathML
• Consente l'uso di XML Processing, che alcuni autori usano come parte della loro modifica e / o processi di pubblicazione

Ieri, dopo il problema che ho incontrato con la Ripristina CSS in Google Chrome ... ho pensato di scavare un po 'più a fondo nella zona di User Agent fogli di stile ...
Trovato questa tabella sui valori di default CSS2.1 User Agent fogli di stile ... (per coloro che inconsapevoli di ciò che "Fogli di stile" User Agent è seguire Qual è l'utente dei fogli di stile Agent (Specification) .

Per un elenco completo dei CSS 2.1 User agent defaults Style Sheets clicca qui

Ieri, come ogni altro "Day terra Hog", stavo lavorando su alcuni layout CSS / tableless. Tutto stava andando bene in IE 7, FF 3 e Chrome, fino a un tratto, ho visto alcuni non-trascurabili margini di visto solo in Google Chrome. Anche se molto strano e worring, E 'stato qualche problema nuovo bug / che ero venuto attraversato, c'era finalmente qualche spezia nel mio lavoro banale. Sad (ma bello) che è stato riparato in pochi minuti della sonda ...

In sostanza, sembrava che Google Chrome ignorato il mio Ripristina CSS (margin: 0px). In realtà è stato causato dal foglio di stile user agent (-webkit-padding-start: 40px). Quindi la soluzione era quella di resettare questo stile impostando padding: 0 gli elementi malfunzionanti.
Un buon modo per evitare questo problema si verifichi a qualsiasi elemento è utilizzare un riposo globale CSS come segue

* {Margin: 0; padding: 0;}

Qual è l'utente dei fogli di stile Agent (Specification)?
Il brano che segue è tratto da http://meiert.com/en/blog/20070922/user-agent-style-sheets/ , seguente link per saperne di più su fogli di User Agent di stile

CSS 1 introduce l'idea affermando che ogni User Agent (UA, spesso un 'browser web' o 'client web') avrà un foglio di stile predefinito che presenta i documenti in modo ragionevole - ma forse banale - modo. CSS 2 dice che i programmi utente conformi devono applicare un foglio di stile predefinito (o comportarsi come se lo facessero) e che un agente dell'utente foglio di stile di default dovrebbe presentare gli elementi del linguaggio del documento in modo da soddisfare le aspettative di presentazione generali per la lingua del documento; CSS 3 è probabile che sia la stessa mente.

Dato che le specifiche CSS lasciare fino a implementazioni se utilizzare un foglio di "vero" stile per la visualizzazione di default o no, non è sorprendente che non si trova un foglio di stile di default nella cartella di installazione ogni browser. A differenza di Internet Explorer di Microsoft così come Opera, per esempio (e per quanto ne so), browser Gecko come Firefox e Netscape Navigator (cerca "html.css"), ma anche Konqueror rende piuttosto semplice da comprendere il loro stile di default.

Un'altra vecchia scuola di memoria supplementare ...

Perché per consentire windos.status?
Javascripts potrebbe essere un incubo quando si ha qualcosa di eseguire il debug. Firefox ha alcuni addons qualche portata di mano, come i thats Firebug ci rende la vita facile e anche, il voto per la tecnica di debug più popolare in Javascript deve andare a "alert ()". Anywaz! Ci sono pochi casi in cui l'aggiunta di ALERT non eseguire il debug del mis-comportamento Javascript è solo non è una buona idea. Per esempio! avete voce dragble la cui posizione deve essere avvisato .... NO NO! Non farlo! ... Sarà solo ottenere avvisi infiniti o non sarà in grado in realtà il drap dragable. Bene! Ci sono situazioni più buoni, in cui è possibile scrivendo i testi di debug alla barra di stato, molto più usful ... Credetemi! La sua esperienza!

IE di default a sinistra si scrive alla barra di stato del browser utilizzando la sintassi "'qualcosa di eseguire il debug' window.status =", ma Firefox non. Quindi, per permettere il cambiamento di stato di Windows, è possibile effettuare una delle seguenti operazioni.

Aprire about: config nel browser (digitare "about: config" questo nella barra degli indirizzi) e cercare
dom. disable_window_status_change. Cambiare a false ... basta cliccare sulla voce per cambiare il suo stato.

Oppure, in alternativa

"Strumenti → Opzioni → Contenuti → Attiva JavaScript / Advanced → testo di stato Change bar"

E anche notare che ... a scrivere sulla barra di stato in Javascript, IE è ok se si utilizza un breve stato di sintassi ie = 'un testo di debug', ma in FireFox, è necessario utilizzare per intero la sintassi cioè window.status = ' qualcosa di eseguire il debug '

Google inizia un popolo di movimento rapide per eseguire il dump IE6 ... By utenti microspie IE6 con un popup al caricamento della pagina ... non può essere una buona idea ... ma essendo uno sviluppatore dell'interfaccia utente, devo partecipare a questo carro band ... un browser meno per me preoccuparsi Ci dispiace ... è egoista! ma ho includere questo javascript ... (TRY QUESTA PAGINA IN IE6) ...
Hey! e sulla nota più luminoso ... Vedi è una visualizzazione del potere di JavaScript .... può anche abbattere un gigante (o una volta era)

SO ... Aiuto liberare il mondo di IE6 con una linea di javascript!

http://code.google.com/p/sevenup/

Sono così eccitato per il crescente numero di pagine viste sul mio blog, che posso controllare le mie Google Analytics quasi tutti i giorni. Ho notato che il mio blog si fa riferimento da siti in molte altre lingue e con persone in tutto il mondo. Così bello!!
Per rendere la vita un po 'più facile per il mio NON-INGLESE nave spettatore, ho aggiunto un Widget Google / plugin chiamato "Global Translator".

Il Global Translator dice che "traduce automaticamente un blog in 41 lingue diverse, avvolgendo quattro diversi motori di traduzione on-line (Google Translation Engine, motore di traduzione Babelfish, FreeTranslations.com, Promt)" ... Se vuoi aggiungerlo alla propria installazione di WordPress verificarlo ... qui http://www.nothing2hide.net/wp-plugins/wordpress-global-translator-plugin/

Non è sicuro, come la traduzione è buona, ma spero sinceramente che aiuta alcuni colleghi sviluppatori là fuori, che finiscono per raggiungere il mio blog, solo per essere delusi, che è in inglese ....

I collegamenti traduttore sono nella parte inferiore della barra laterale ....

Heres un altro po 'di trucchi peice Javascript che ho dovuto scavare in giro perché la situazione lo commaned. In uno dei miei siti web, ho avuto questa situazione in cui ho dovuto attuare "windows.onload" due volte. La prima cosa che si è venuto a una mente inesperta come la mia (devo dire onestamente che, dal momento che ho utilizzato framework JavaScript e biblioteche, ho forgotton a fare le cose semplici per conto mio ... triste ma vero), è il seguente metodo ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 ecc ..

Mi spiace dirlo, ma, questo non funzionerà ... Non voglio discutere la scienza esecuzione di Javascript tanto ... ma secondo la mia esperienza recente, solo l'ultima funzione (onloadfn3) cattiva volontà effettivamente eseguito.

In situazioni normali, a differenza mia (che mi parlare di un po 'più tardi) ... si può fare una delle seguenti operazioni per eseguire funzioni onload mutliple ....

O qualcosa del genere

 doOnLoad funzione () {
         onloadfn1 ();
         onloadfn2 ();
         onloadfn3 ();
 }
 window.onload = doOnLoad;

Per la mia situazione attuale, non posso utilizzare di quanto sopra ...
Perché ho bisogno di chiamare windows.onload due volte, piuttosto che chiamare due funzioni all'interno di una funzione onload single? Ecco rapido sguardo a mia dichiarazione problema ...

"Le mie pagine del sito sono strutturati come il tema WORDPRESS .... vale a dire che è un header.php footer.php comuni e che viene incluso in tutte le pagine del sito. C'è un implementaion funzione onload nel footer.php per fare alcune funzioni onload comuni. E ci sono poche pagine che hanno bisogno di qualcosa del loro OnLoad propria, ad eccezione di quelli con la funzione onload comune. Se mi assegna la funzione di callback direttamente al gestore window.onload, che si impone rispetto alla callback precedentemente assegnati nelle footer.php "

.... Il mio problema è capire ?

Bene! ci sono poche soluzioni che ho trovato. Sono tutte molto simili e implementions principalmente di una soluzione data da Simon Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Soluzione:

Basta aggiungere il codice javascript al sito ...

 addLoadEvent funzione (func) {
     var = oldonload window.onload;
     if (typeof window.onload! = 'funzione') {
        window.onload = funzione
     Else {}
        window.onload = function () {
            se (oldonload) {
                   oldonload ()
           }
           func ()
        }
    }
 }

E lo chiamano invece del consueto "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (function () {
 / * Più codice per essere eseguito su * caricamento della pagina
 }); 

I vantaggi di questo frammento di codice ...
1. In primo luogo, ti permette di avere più eventi windows.onload, chiamato da parti separate del codice, senza overridding la definizione precedente
2. E 'davvero discreto. Può essere collocata in un file con i vostri altri script o in un file separato.
3. Funziona anche se window.onload è già stata impostata.

Ho pensato che questo sarà uno uno scarabocchio a trovare in google, come molti ci scrittori interfaccia utente e lo script avrebbe bisogno di fare questo su una base quotidiana, che è include un po 'di pezzo del frammento di codice PHP (. Php) in un Smarty Template (. TPL). Mi resi conto che più facile / popolare tua domanda, ancora più difficile trovare l'esatta risposta ... un milione di risultati di ricerca ma la maggior parte di essi si riferiscono al "file" include in Smarty ... che ha la seguente sintassi

{Include file = "include / header.php"}

Questo in realtà inlcuded bene, ma il file come testo, Quello che volevo era il risultato di file incluso. (Tener presente quanto sopra viene utilizzato includono template all'interno di un file template). Infine, con un po '.... persiverance Mi sono imbattuto in una sintassi leggermente modificata, che è stata la risposta alla mia richiesta ... ecco che è ... se si havn't trovato uno già

{Include_php file = "include / header.php"}

Questa domanda mi venne in mente un paio di volte prima, quando stavo lavorando su siti anche prima, che ha utilizzato WordPress per mostrare blog o nuovo tipo di contenuto in qualche parte del sito / portal.Being un novizio in PHP e intorno WordPress, ho continuato a procastinating, pensando "questo non è il mio pezzo del dolce". Finalmente! questo requisito è venuto fino a naso, quando ha iniziato diggin giro un po 'per la soluzione.
Sono stato sorpreso di scoprire che era davvero più facile di quanto pensavo che si fosse, per visualizzare un elenco di titoli o l'ultimo post su qualsiasi altra pagina al di fuori della sezione di WordPress-powered, usando solo un po 'di PHP e l'API di WordPress .

Ecco cosa fare: -
Per motivi di spiegazione, supponiamo che il sito è http://www.inchembur.com/ e vi è la sezione news di questo sito su http://news.inchembur.com/ (che è in esecuzione WordPress). Ora l'esigenza è quella di mostrare gli ultimi post di http://news.inchembur.com/ sulla home page del sito principale, vale a dire http://www.inchembur.com/index.php

Step1: Nel vostro index.php aggiungere il peice di codice seguente, includere il file di WordPress API. È possibile aggiungere questo alla parte superiore della pagina che si desidera che il post a comparire su.

<? Php
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES', false); uso / / Disbable di WordPress Theme
require ('/ var / news.inchembur.com / wp-blog-header.php'); / / Include WordPress API
; // Get Latest Post query_posts ('showposts = 1'); / / Get Latest Post
?>

Nel peice sopra di include, stiamo ottenendo solo il singolo post più recente. se volete provare altre varianti non esitate a scavare, query_posts() documentazione .

Fase 2: Ora, nella parte dell'Indice / Home page in cui si desidera visualizzare gli ultimi messaggi WordPress da http://news.inchembur.com , utilizzare il seguente codice. Inutile dire, sentitevi liberi di annuncio vostre divisioni stile, campate e le classi come per le vostre esigenze di progettazione.

Fase 3: Non c'è Step 3 ... Ecco fatto ... si è fatto!

Come mostrare una pagina specifica per il posto / in contrasto con l'ultimo post: -
Questo può essere facilmente achived alterando gli argomenti query_posts() per includere l'ID di pagina o slug

) ; query_posts ('page_id = 7');
) ; query_posts ('pagename = circa');

o È possibile controllare il numero di messaggi:
) ; query_posts showposts (= 3);