Èçó÷àåì PHP âìåñòå ñ IBM |
Äíåâíèê |
|
Äåñÿòü îøèáîê, êîòîðûå ãóáÿò web-ñàéòû |
Äíåâíèê |
Âû ïîòðàòèëè ìíîãî âðåìåíè è äåíåã íà ñîçäàíèå ñîáñòâåííîãî ñàéòà. Âû æå íå õîòèòå ñîâåðøàòü òàêèå îøèáêè, êîòîðûå, â ëó÷øåì ñëó÷àå, áóäóò ðàçäðàæàòü ïîëüçîâàòåëåé, à â õóäøåì - ïðèâåäóò ê òîìó, ÷òî âû ïðîñòî ïîòåðÿåòå êëèåíòîâ?  êîíöå êîíöîâ, åñëè âû íàñòðàèâàåòå ïðîòèâ ñåáÿ ïîëüçîâàòåëåé, òî âû òåðÿåòå ïðèáûëü. À êîìó ýòî ïî êàðìàíó?
ßêîá Íèëüñåí, äèðåêòîð Íèëüñåí Íîðìàíí Ãðóïï, óòâåðæäàåò, ÷òî ñóùåñòâóåò äåñÿòü ñàìûõ ðàñïðîñòðàíåííûõ îøèáîê:
1 Îòñóòñòâèå öåí. Öåíà - ýòî ÷àñòü ìèíèìàëüíîé èíôîðìàöèè, íåîáõîäèìîé ïîëüçîâàòåëÿì, ÷òîáû ïîíÿòü ñóòü ïðåäëîæåíèÿ. Åñëè öåíû îòñóòñòâóþò, òî ïîñåòèòåëè ìîãóò ïðîñòî íå ïîíÿòü î ÷åì èäåò ðå÷ü. Óêàçàíèå öåí ïîçâîëÿåò îòëè÷àòü îäèí òîâàð îò äðóãîãî.
2 Íåãèáêèå ïîèñêîâèêè. ×åðåñ÷óð «îáðàçîâàííûå» ïîèñêîâèêè ñíèæàþò þçèáèëèòè, ïîñêîëüêó ïîëüçîâàòåëè ìîãóò äîïóñòèòü îïå÷àòêó èëè íå çíàòü êàê ïðàâèëüíî ïèøåòñÿ ñëîâî. Ïîèñêîâèêè òàêæå äîëæíû îòäàâàòü ïðèîðèòåò íå êîëè÷åñòâó âàðèàíòîâ çàïðîñîâ, à âàæíîñòè êàæäîãî äîêóìåíòà.
3 Ãîðèçîíòàëüíîå ïðîêðó÷èâàíèå. Ïîëüçîâàòåëè íåíàâèäÿò, êîãäà èõ çàñòàâëÿþò îñóùåñòâëÿòü ïðîêðóòêó ñëåâà íà ïðàâî. Ñòðàíèöû, êîòîðûå òðåáóþò ãîðèçîíòàëüíîãî ïðîêðó÷èâàíèÿ â ñòàíäàðòíîì îêíå (800*600 ïèêñåëåé) ïðîñòî óæàñíû!
4 Ôèêñèðîâàííûé ðàçìåð øðèôòà.  95% ñëó÷àåâ ôèêñèðîâàííûé øðèôò èìååò ïðîñòî êðîøå÷íûå ðàçìåðû, ñíèæàÿ óäîáî÷èòàåìîñòü ñòðàíèöû. Ïîëüçîâàòåëè äîëæíû èìåòü âîçìîæíîñòü ñàìîñòîÿòåëüíî èçìåíÿòü ðàçìåð òåêñòà ïî íåîáõîäèìîñòè.
5 Áëîêè òåêñòà - èõ ñêó÷íî ÷èòàòü, ÷òî ïðèâîäèò ê ïîòåðå ïîëüçîâàòåëåé.
6 JavaScript â ññûëêàõ. Åñëè ññûëêà âåäåò ñåáÿ íåïðåäñêàçóåìûì îáðàçîì, òî ïîëüçîâàòåëè ÷óâñòâóþò ñåáÿ ïîòåðÿâøèìèñÿ. Îíè òàêæå íåíàâèäÿò ïîï-àïû.
7 Íå÷àñòî çàäàâàåìûå âîïðîñû â FAQ. Íå óêàçûâàéòå âîïðîñû, êîòîðûå áû âû õîòåëè, ÷òîáû âàì çàäàëè.
8 Ñáîð e-mail àäðåñîâ ïðè îòñóòñòâèè ïîëèòèê íåðàçãëàøåíèÿ èíôîðìàöèè. Êîãäà web-ñàéòû ïðîñÿò e-mail, ïîëüçîâàòåëè îáû÷íî ðåàãèðóþò îòðèöàòåëüíî.  íàøå âðåìÿ ñïàìà íèêòî íå õî÷åò âîò òàê ïðîñòî ñîîáùàòü òàêóþ èíôîðìàöèþ.
9 URL äëèíîé áîëüøå 75 çíàêîâ, êîòîðûå ïî÷òè íåâîçìîæíî îòïðàâèòü äðóãó. Åñëè URL ñëèøêîì äëèííûé è âåñü íå âèäåí â ñòðîêå àäðåñà, òî ïîëüçîâàòåëè ïðîñòî íå áóäóò çíàòü, êàê åãî ñêîïèðîâàòü. À åñëè ññûëêà íå ðàáîòàåò, òî îíè ìîãóò íå çíàòü, êàê âåðíóòüñÿ íà èçíà÷àëüíóþ ñòðàíèöó.
10 Ññûëêè «mail to» â íåîæèäàííûõ ìåñòàõ. Íå ðàçìåùàéòå òàêèå ññûëêè ïîä èìåíàìè, âìåñòî ýòîãî ÷åòêî óêàæèòå, ÷òî ýòî e-mail àäðåñ.
Ñóùåñòâóåò ìíîæåñòâî êîìïàíèé, êîòîðûå ìîãóò ïîìî÷ü âàì èçáåæàòü ïîäîáíûõ îøèáîê.
Ñòàðàéòåñü èçáåãàòü ýòèõ 10 îøèáîê, óêàçàííûõ Íèëüñåíîì, ïðè ñîçäàíèè ñâîåãî web-ñàéòà, è ïîëüçîâàòåëÿì îí ïîíðàâèòñÿ, ÷òî ïîâëèÿåò íà óðîâåíü ïîñåùàåìîñòè.
|
Ðóêîâîäñòâî ïî ýôôåêòèâíîìó èñïîëüçîâàíèþ CSS |
Äíåâíèê |
Áðàóçåð ðàáîòàåò ñ CSS ñëåäóþùèì îáðàçîì:
1 ÏÀÐÑÈÍÃ HTML-ÄÎÊÓÌÅÍÒÀ È ÑÎÇÄÀÍÈÅ ÄÅÐÅÂÀ ÝËÅÌÅÍÒÎÂ;
2 ÈÄÅÍÒÈÔÈÊÀÖÈß ÖÅËÅÂÎÃÎ ÒÈÏÀ ÌÅÄÈÀ (ÓÑÒÐÎÉÑÒÂÀ ÎÒÎÁÐÀÆÅÍÈß);
3 ÏÎËÓ×ÅÍÈÅ ÂÑÅÕ ÑÒÈËÅÉ ÄÎÊÓÌÅÍÒÀ  ÑÎÎÒÂÅÒÑÒÂÈÈ Ñ ÓÊÀÇÀÍÍÛÌÈ ÒÈÏÀÌÈ ÌÅÄÈÀ;
4 ÀÍÍÎÒÀÖÈß ÊÀÆÄÎÃÎ ÝËÅÌÅÍÒÀ ÏÓÒÅÌ ÏÐÈÑÂÎÅÍÈß ÑÂÎÉÑÒÂÀÌ ÝËÅÌÅÍÒΠÇÍÀ×ÅÍÈÉ ÈÑÕÎÄß ÈÇ ÓÊÀÇÀÍÍÛÕ ÄËß ÍÈÕ ÑÒÈËÅÉ, À ÒÀÊÆÅ Ñ Ó×ÅÒÎÌ ÍÀÑËÅÄÎÂÀÍÈß ÐÎÄÈÒÅËÜÑÊÈÕ;
5 ÃÅÍÅÐÀÖÈß ÑÒÐÓÊÒÓÐÛ ÔÎÐÌÀÒÈÐÎÂÀÍÈß ÍÀ ÎÑÍÎÂÅ ÄÅÐÅÂÀ ÄÎÊÓÌÅÍÒÀ;
6 ÏÅÐÅÄÀ×À ÔÎÐÌÀÒÈÐÎÂÀÍÍÎÃÎ ÄÎÊÓÌÅÍÒÀ ÍÀ ÂÛÂÎÄ (ÄÈÑÏËÅÉ, ÍÀ ÏÅ×ÀÒÜ È Ò.Ä.).
Äëÿ web-ñòðàíèö ñóùåñòâóåò òðè òèïà ïîäêëþ÷åíèÿ ñòèëåé, êîòîðûå ðàçãðàíè÷èâàþò ïî èñòî÷íèêó:
1 ÀÂÒÎÐÑÊÈÅ ÑÒÈËÈ (ÑÎÇÄÀÍÍÛÅ ÐÀÇÐÀÁÎÒ×ÈÊÀÌÈ ÑÀÉÒÀ), ÊÎÒÎÐÛÅ,  ÑÂÎÞ Î×ÅÐÅÄÜ, ÌÎÃÓÒ ÏÐÈÌÅÍßÒÜÑß ÒÐÅÌß ÐÀÇËÈ×ÍÛÌÈ ÑÏÎÑÎÁÀÌÈ:
À) ÂÍÅØÍÈÅ ÒÀÁËÈÖÛ ÑÒÈËÅÉ.
ÐÀÑÏÎËÀÃÀÞÒÑß Â ÎÒÄÅËÜÍÎÌ ÔÀÉËÅ *.CSS, ÍÀ ÊÎÒÎÐÛÉ ÄÀÅÒÑß ÑÑÛËÊÀ Â HTML-ÄÎÊÓÌÅÍÒÅ. ÍÀÏÐÈÌÅÐ:
<style type="text/css" media="screen">@import url(/styles/screen.css);</style>
Â) ÂÑÒÐÎÅÍÍÛÅ ÑÒÈËÈ.
ÊÎÄ CSS ÏÎÌÅÙÀÅÒÑß Â ÒÅËÅ HTML-ÄÎÊÓÌÅÍÒÀ: <style type="text/css" media="screen">.style {font-family: Verdana,sans-serif}</style>
Ñ) ÑÒÐÎ×ÍÛÅ ÑÒÈËÈ, ÊÎÒÎÐÛÅ ÏÐÈÌÅÍßÞÒ ÈÍÄÈÂÈÄÓÀËÜÍÎ ÄËß ÊÎÍÊÐÅÒÍÎÃÎ ÝËÅÌÅÍÒÀ È ÓÊÀÇÛÂÀÞÒÑß Â ÀÒÐÈÁÓÒÅ STYLE ÍÓÆÍÎÃÎ ÍÀÌ ÒÅÃÀ:
<p style="font-weight:bold">
2 ÏÎËÜÇÎÂÀÒÅËÜÑÊÈÅ ÑÒÈËÈ.
ÍÅÊÎÒÎÐÛÅ ÁÐÀÓÇÅÐÛ (ÍÀÏÐÈÌÅÐ OPERA) ÏÎÇÂÎËßÞÒ ÏÎËÜÇÎÂÀÒÅËÞ ÑÎÇÄÀÂÀÒÜ ÑÎÁÑÒÂÅÍÍÛÅ ÑÒÈËÈ, ÊÎÒÎÐÛÅ ÕÐÀÍßÒÑß Â ËÎÊÀËÜÍÎÌ CSS-ÔÀÉËÅ È ÈÑÏÎËÜÇÓÞÒÑß ÄËß ÎÏÐÅÄÅËÅÍÈß ÑÒÈËÅÉ ÍÀ ÂÑÅÕ ÏÐÎÑÌÀÒÐÈÂÀÅÌÛÕ ÑÒÐÀÍÈÖÀÕ. ÝÒÓ ÂÎÇÌÎÆÍÎÑÒÜ ÎÁÛ×ÍÎ ÈÑÏÎËÜÇÓÞÒ ËÞÄÈ Ñ ÏËÎÕÈÌ ÇÐÅÍÈÅÌ ÈËÈ Ñ ÄÅÔÅÊÒÀÌÈ ÖÂÅÒÎÂÎÃÎ ÂÎÑÏÐÈßÒÈß.
3 ÑÒÈËÜ ÁÐÀÓÇÅÐÀ.
«ÇÀÂÎÄÑÊÈÅ ÍÀÑÒÐÎÉÊÈ», ÏÐÅÄÓÑÌÎÒÐÅÍÍÛÅ ÐÀÇÐÀÁÎÒ×ÈÊÀÌÈ ÄËß ÎÏÐÅÄÅËÅÍÈß ÏÐÅÄÑÒÀÂËÅÍÈß ÝËÅÌÅÍÒΠHTML ÏÎ ÓÌÎË×ÀÍÈÞ.
Ïîëüçîâàòåëüñêèå ñòèëè èìåþò ñàìûé âûñîêèé ïðèîðèòåò è ïîçâîëÿþò ïåðåîïðåäåëÿòü àâòîðñêèå. Èñêëþ÷åíèå ñîñòàâëÿþò ñòèëè ñ ïàðàìåòðîì !important, êîòîðûé áûë ââåäåí ñïåöèàëüíî äëÿ çàùèòû àâòîðñêèõ ñòèëåé îò ïåðåîïðåäåëåíèÿ íà ñòîðîíå ïîëüçîâàòåëÿ. Åñëè íè ïîëüçîâàòåëü, íè àâòîð ñàéòà íå îïðåäåëèëè ñòèëü äëÿ íåêîãî ýëåìåíòà, îí áóäåò îòîáðàæåí â ñîîòâåòñòâèè ñ ñîáñòâåííûìè ñòèëÿìè áðàóçåðà.  ðàçëè÷íûõ áðàóçåðàõ îíè ìîãóò îòëè÷àòüñÿ, ïîýòîìó íå ñòîèò ïîëàãàòüñÿ íà ñîâåñòü ïðîèçâîäèòåëÿ ïðîãðàììû-áðîäèëêè.
ïðàêòèêàÃðÿäóùàÿ ñïåöèôèêàöèÿ CSS3 ââîäèò ñâîéñòâî «box-sizing», ïîçâîëÿþùåå âûáèðàòü íóæíóþ ìîäåëü, óêàçûâàÿ çíà÷åíèå «content-box» äëÿ èñïîëüçîâàíèÿ ñòàíäàðòíîé ìîäåëè, è «border-box» — äëÿ èñïîëüçîâàíèÿ ìîäåëè IE. Áðàóçåð Mozilla, ïîääåðæèâàþùèé ÷åðíîâûå ðåêîìåíäàöèè CSS3, óæå ïîääåðæèâàåò ýòî ñâîéñòâî ïîä ñîáñòâåííûì èìåíåì «-moz-box-sizing». Ðàçðàáîò÷èêè òàêæå ââåëè åùå îäíî, íà äàííûé ìîìåíò íåñòàíäàðòíîå çíà÷åíèå (è åùå îäíó áëî÷íóþ ìîäåëü) — «padding-box», êîòîðûì ïîäðàçóìåâàåòñÿ, ÷òî øèðèíà áëîêà ðàâíà øèðèíå îáëàñòè êîíòåíòà è îòñòóïîâ, èñêëþ÷àÿ ãðàíèöû.
Õîðîøèé è ïðàâèëüíûé (X)HTML-êîä íà÷èíàåòñÿ ñ ïðàâèëüíîãî óêàçàíèÿ òèïà äîêóìåíòà (DOCTYPE). Ýòè ñâåäåíèÿ íåîáõîäèìû áðàóçåðó äëÿ âûáîðà ðåæèìà ðåíäåðèíãà äîêóìåíòà. Åñëè òèï íå äåêëàðèðóåòñÿ ëèáî ïðè åãî îáúÿâëåíèè äîïóùåíû îøèáêè, äîêóìåíò ðåíäåðèòñÿ â îñîáîì «ðåæèìå íåñîîòâåòñòâèÿ ñòàíäàðòàì» (quirks-mode) è ðóêîâîäñòâóåòñÿ ïðè ýòîì íå ëîãèêîé ðåêîìåíäàöèé W3C, à ñîáñòâåííûì ðàçóìåíèåì. Õîòåëîñü áû îáðàòèòü âíèìàíèå web-äåâåëîïåðîâ íà íåîáúÿñíèìûé ãëþê â IE6: âåðñòàÿ â XHTML 1.0 Transitional, íåëüçÿ óêàçûâàòü ïðîëîã (<?xml version="1.0"?> ), òàê êàê îí ïðèâîäèò ê ðåíäåðèíãó äîêóìåíòà â quirks-mode, íåñìîòðÿ íà òî, ÷òî âñå ñäåëàíî ïðàâèëüíî. Ê ñ÷àñòüþ, ïðîëîã ÿâëÿåòñÿ íåîáÿçàòåëüíûì ýëåìåíòîì è åãî ìîæíî ñìåëî óäàëèòü.
Äëÿ CSS ñïðàâåäëèâû «ïðàâèëà õîðîøåãî òîíà», êîòîðûìè ïðîãðàììåðû ïîëüçóþòñÿ ïðè íàïèñàíèè êîäà. Àêêóðàòíîñòü, âûâåðåííàÿ ëîãèêà, ïðèâû÷êà êîììåíòèðîâàòü êîä è ñòðåìëåíèå ê îïòèìèçàöèè ñîñëóæàò òåáå õîðîøóþ ñëóæáó. Êîä, ïîäîáíûé ïðèâåäåííîìó íèæå, çàïðîñòî ìîæåò áûòü îïòèìèçèðîâàí íà 20%-30%, ïðèîáðåòÿ ïðè ýòîì ïðèÿòíóþ ÷èñòîòó è ïðîçðà÷íîñòü. Íóæíî ëè ãîâîðèòü î òîì, íàñêîëüêî áëàãîòâîðíî ýòî îòðàçèòñÿ íà áûñòðîòå çàãðóçêè ôàéëà ñî ñòèëÿìè?
| Áûëî | Ñòàëî |
| P { color: #336699; border-style : solid; border-width : 1px; border-color : #ff0000; font-weight : bold; line-height : 1.3em; margin-bottom : .7em; margin-left : .4em; margin-right : 1.3em; margin-top : .7em; border-color: #c06565; } |
P { |
Ñïåöèôèêà ðåàëèçàöèè êàñêàäíûõ ñòèëåé â ðàçëè÷íûõ ñìîòðåëêàõ çàñòàâëÿåò web-ðàçðàáîò÷èêîâ èñêàòü ñïîñîáû «âïðàâèòü ìîçãè» ïðîãðàììàì, èìåþùèì ñîáñòâåííûé, îðèãèíàëüíûé âçãëÿä íà âåùè.  ðåçóëüòàòå ïîëó÷àåì: îäèíàêîâîå îòîáðàæåíèå ñòðàíèöû â áîëüøèíñòâå áðàóçåðîâ... è íåâîçìîæíîñòü ïðîéòè âàëèäàöèþ CSS. Òàêèå õèòðîñòè íàçûâàþò õàêàìè ëèáî CSS-ôèëüòðàìè. Èçáèðàòåëüíîñòü âîçìîæíà áëàãîäàðÿ ãëþêàì îòäåëüíûõ âåðñèé áðàóçåðîâ, ÷òî ïîçâîëÿåò «ñêàðìëèâàòü» íóæíûé êîä êîíêðåòíîé ïðîãðàììå, â òî âðåìÿ êàê äðóãèå åãî ïðîèãíîðèðóþò. Ñîîòâåòñòâåííî, î ñîáëþäåíèè ñòàíäàðòîâ íå ìîæåò áûòü è ðå÷è.
Íàïðèìåð:
/* Ñòàíäàðòíàÿ áëî÷íàÿ ìîäåëü */
ñåëåêòîð { width: 100px; padding: 10px; border:10px; }
/* Ïîäãîíÿåì âíåøíèé âèä áëîêà â IE ïîä ñòàíäàðòíóþ ìîäåëü*/
* html ñåëåêòîð { width: 140px; padding: 10px; border:10px; }
Êîä, ïðèâåäåííûé âûøå, ïîìîæåò â áîðüáå ñ ìîíñòðîì îò Microsoft, íî äëÿ Opera 5 è Netscape 4 ïðèäåòñÿ ïîäûñêàòü äðóãèå ñïîñîáû íàñòàâèòü èõ íà ïóòü èñòèííûé. Ê ïðèìåðó, äëÿ Netscape ìîæíî èñïîëüçîâàòü åãî íåïðèÿòèå êîíñòðóêöèè @import, à äëÿ Opera — . Åñëè òû ãîòîâ ïîæåðòâîâàòü âàëèäíîñòüþ ñâîåãî êîäà, õàêè çäîðîâî îáëåã÷àò òåáå æèçíü. Íóæíî ëèøü ïîìíèòü î òîì, ÷òî óíèâåðñàëüíûõ õàêîâ íå ñóùåñòâóåò, — âñòàâàÿ íà ñêîëüçêèé ïóòü îäóðà÷èâàíèÿ áðàóçåðîâ, íóæíî ïðèïàñòè ëåêàðñòâà äëÿ îáøèðíîãî çîîïàðêà ñìîòðåëîê. Áîãàòàÿ áèáëèîòåêà CSS-ôèëüòðîâ ðàñïîëîæèëàñü ïî àäðåñó www.dithered.com/css_filters/css_only.
Íåëüçÿ îáîéòè âíèìàíèåì åùå îäèí êóðüåç îò Microsoft: êîðïîðàöèÿ ñàìà ñîçäàëà ëåêàðñòâî äëÿ ëå÷åíèÿ áîëåçíåé ñîáñòâåííûõ áðàóçåðîâ. Ðå÷ü èäåò î ïðîïðèåíòàðíûõ òåãàõ (â òåðìèíîëîãèè àâòîðîâ — Conditional Comments), ïîçâîëÿþùèõ «ïîäñóíóòü» íóæíûå ñòèëè äëÿ Internet Explorer 5.x
<!--[if IE 5]>
<link rel="stylesheet" type="text/css" href="css/IE5.css" />
<![endif]-->
Áîëåå ðàçóìíîé, ñ òî÷êè çðåíèÿ ñòàíäàðòîâ, àëüòåðíàòèâîé õàêàì è ïðîïðèåíòàðíûì òåãàì ìîæåò ïîñëóæèòü èñïîëüçîâàíèå Javascript äëÿ îïðåäåëåíèÿ òèïà áðàóçåðà. Îäíàêî ïàðàíîèäàëüíûå ïîëüçîâàòåëè, îòêëþ÷àÿ èñïîëíåíèå ñêðèïòîâ â áðàóçåðàõ, íå ïîçâîëÿþò èñïîëüçîâàòü äàííîå ðåøåíèå êàê ïàíàöåþ.
ïå÷àòü
CSS ïðåäîñòàâëÿåò íàì áëåñòÿùóþ âîçìîæíîñòü áîëüøå íå çàáîòèòüñÿ î ñîçäàíèè ñòðàíèö ñ printer-friendly âåðñèÿìè äîêóìåíòîâ.  ïåðâóþ î÷åðåäü ñêðîåì ôóíêöèîíàëüíûå áëîêè, áåñïîëåçíûå â òâåðäîé êîïèè ñòðàíèöû, ïðè ïîìîùè çíà÷åíèÿ «none» ñâîéñòâà display;. Ýòî áîëüøàÿ ÷àñòü äèçàéíåðñêèõ íàâîðîòîâ â øàïêå è ïîäâàëå ñòðàíèöû, à òàêæå íàâèãàöèÿ, áàííåðû è âñå ïðî÷åå, ÷òî íå èìååò ïðÿìîãî îòíîøåíèÿ ñîáñòâåííî ê êîíòåíòó. Ïîñêîëüêó ïðèíòåðû èìåþò áîëåå âûñîêîå ðàçðåøåíèå, èìååò ñìûñë ñêðûòü òàêæå è ëîãîòèï ñàéòà è îòäàòü ïðèíòåðó äðóãîé (ìîæíî äàæå ÷åðíî-áåëûé) — ñ áîëåå âûñîêèì ðàçðåøåíèåì. Äëÿ ýòîãî ñîçäàé áëîê ñî âòîðûì ëîãîòèïîì è ñêðûâàé åãî â âåðñèè äëÿ äèñïëåÿ. Ïîäîáíûì îáðàçîì, íàïðèìåð, ïîñòóïèëà êîìàíäà Àðòåìèÿ Ëåáåäåâà — îíè ñîçäàëè òàáëèöó ñòèëåé äëÿ ïå÷àòè ñòðàíèö ñàéòà Ñòóäèè.
Äëÿ ïå÷àòè ïðèíÿòî çàäàâàòü ðàçìåð êåãëÿ øðèôòà â ïóíêòàõ (òèïîãðàôñêàÿ åäèíèöà èçìåðåíèÿ), è áóäåò âïîëíå ëîãè÷íûì ïîñòóïèòü òàêèì æå îáðàçîì è ïðè ñîçäàíèè ñòèëåé äëÿ ïðèíòåðà.  ðåçóëüòàòå ïîëüçîâàòåëè ïîëó÷àò áóêâû îïòèìàëüíîãî ðàçìåðà, ïðèâû÷íûå èì ïî ðàñïå÷àòêàì äîêóìåíòîâ Microsoft Office.
Îòäåëüíîãî óïîìèíàíèÿ çàñëóæèâàþò ôîíîâûå èçîáðàæåíèÿ. Ïîñêîëüêó øàíñû íà òî, ÷òî òåêñò áóäåò ÷èòàòüñÿ òàê æå õîðîøî, êàê è íà ýêðàíå, ìèíèìàëüíû (áîëüøèíñòâî ïîëüçîâàòåëåé ïå÷àòàþò íà ÷/á), ñìåëî îòìåíÿåì èñïîëüçîâàíèå êàðòèíîê íà áýêãðàóíäå. Òàêæå íå ïîìåøàåò îïòèìèçàöèÿ ïàëèòðû äëÿ ïðèäàíèÿ åé ìàêñèìàëüíîé êîíòðàñòíîñòè. Èäåàë — áåëûé ôîí è ÷åðíûé òåêñò. Åñëè òû âñå æå ðåøèë èñïîëüçîâàòü â ñòèëÿõ äëÿ ïå÷àòè íå òîëüêî îòòåíêè ñåðîãî, íå ïîëåíèñü ïðîâåðèòü, êàê áóäåò âûãëÿäåòü òâîå áóéñòâî êðàñîê, åñëè åãî ðàñïå÷àòàþò íà ñòàðåíüêîì ìîíîõðîìíîì ëàçåðíèêå.
Íà áëàãîäàðíîì ïîïðèùå ñîçäàíèÿ ñòèëåé äëÿ ïå÷àòè ðàçðàáîò÷èêà ïîäæèäàþò íåñêîëüêî ïîäâîäíûõ êàìíåé. Îäèí èç íèõ — îøèáêà â Mozilla (êàñàåòñÿ âñåõ áðàóçåðîâ, îñíîâàííûõ íà äâèæêå Gecko — Firefox, Netscape, Camino è äð.), ñâÿçàííàÿ ñ ïå÷àòüþ áëî÷íûõ ýëåìåíòîâ, äëÿ êîòîðûõ çàäàíî ñâîéñòâî float. Áàã âûðàæàåòñÿ â òîì, ÷òî íåçàâèñèìî îò ðàçìåðîâ áëîê ðàñïå÷àòûâàåòñÿ òîëüêî íà îäíîé ñòðàíèöå. Âñå, ÷òî íå ïîìåñòèëîñü íà íåå, èãíîðèðóåòñÿ. Ðåøåíèå ïðîáëåìû ïðîñòî, êàê ñîâåòñêèå òðóñû çà ðóïü äâàäöàòü: íàçíà÷àåì ñâîéñòâó float çíà÷åíèå «none» è ðàäóåìñÿ æèçíè.
Õîòåëîñü áû óïîìÿíóòü ðàöïðåäëîæåíèå Ýðèêà Ìàéåðà, âûäâèíóòîå â åãî ñòàòüå «CSS. Going to Print» íà ñàéòå A List Apart. Ñóòü íîâàöèè òàêîâà: ïðè ðàñïå÷àòûâàíèè äîêóìåíòà, ñîäåðæàùåãî ññûëêè, åñòåñòâåííûì îáðàçîì òåðÿþòñÿ àäðåñà URL (êòî òàì êëèêàåò íà ëèñòå áóìàãè?). Ïûòëèâûé óì íàøåãî áóðæóéñêîãî êîëëåãè íàøåë âûõîä èç äàííîé ñèòóàöèè — ïðèìåíèë â ñòèëÿõ äëÿ ïå÷àòè äîñòèæåíèÿ CSS2. Ðåçóëüòàòîì èõ ðàáîòû ñòàíåò ïîÿâëåíèå ïîñëå òåêñòà ñàìîé ññûëêè àäðåñà URL â ñêîáêàõ. Ýòà êðàñîòà ðàáîòàåò â áðàóçåðàõ Mozilla è Netscape 6.x.
a:link:after, a:visited:after {
content: " (" attr(href) ") ";
font-size: 90%;
}
Êðîìå ïðèíòåðîâ, åñòü ñìûñë ñîçäàâàòü îòäåëüíûå ñòèëè è äëÿ íàëàäîííèêîâ, êîòîðûå îòëè÷àþòñÿ ìàëåíüêèì ýêðàíîì ñ îãðàíè÷åííûì ðàçðåøåíèåì è ìåäëåííûì (è ÷àñòî äîðîãèì) ñîåäèíåíèåì ñ èíòåðíåòîì. Êàê ñäåëàòü ýòî, ÷èòàé íà ñàéòå Àëåêñàíäðà Êà÷àíîâà (ñíèìàþ øëÿïó!) www.webmacson.com. Ïðî÷èå òèïû óñòðîéñòâ âûâîäà, ðàâíî êàê è ãîëîñîâûå áðàóçåðû, ïîêà íåäîñòàòî÷íî ðàñïðîñòðàíåíû... õîòÿ áû äëÿ òîãî, ÷òîáû ïðîòåñòèðîâàòü íà íèõ ñâîé ñàéò. Òàê ÷òî ìîæíî íå ðàñïûëÿòüñÿ è ñîñðåäîòî÷èòüñÿ íà ïîïóëÿðíûõ ìåäèà :). Èñêëþ÷åíèå ñîñòàâëÿåò, ïîæàëóé, òåëåïðèñòàâêà WebTV, â ïðîøëîì ïîïóëÿðíàÿ â Øòàòàõ. Îíà õàðàêòåðèçóåòñÿ íèçêèì ðàçðåøåíèåì, ìåíüøåé ÷åòêîñòüþ è áîëåå óçêèì, ÷åì RGB, öâåòîâûì ïðîñòðàíñòâîì — âñå ýòî èçäåðæêè êîíñòðóêòèâíûõ îñîáåííîñòåé òåëåâèçîðîâ, êîòîðûå èñïîëüçóþòñÿ êàê ïðèñòàâêè â êà÷åñòâå ìîíèòîðà.
|
îïòèìèçàöèÿ php ñêðèïòîâ |
Äíåâíèê |
 ýòîé ñòàòüå ÿ õî÷ó äàòü íåñêîëüêî ñîâåòîâ, ñëåäóÿ êîòîðûì ìîæíî çíà÷èòåëüíî óñêîðèòü îáðàáîòêó PHP-ñêðèïòîâ, òåì ñàìûì, ðàçãðóçèâ ñåðâåð õîñòåðà îò áåñïîëåçíîé ðàáîòû â ïîëüçó áîëåå ïîëåçíîé. Ïåðåä òåì êàê íà÷àòü ðåôàêòîðèíã - ïîñìîòðèòå ñêîëüêî âðåìåíè è ïàìÿòè êóøàåò âàø ïðîåêò, à òåïåðü âïåðåä - îïòèìèçèðóåì. Ïîñëå òîãî êàê íåëåãêèé òðóä áóäåò çàêîí÷åí çàìåðèì ðåçóëüòàòû - ïîðàçèòåëüíûé ïðèðîñò ïðîèçâîäèòåëüíîñòè - ïðîöåíòîâ 5-6% - óäèâëåíû? Äàâàéòå íåìíîãî ïðîàíàëèçèðóåì ñîâåòû ïðèâåäåííûå â äàííîé ñòàòüå:
Âûíîñèòå $ïåðåìåííûå èç “òåêñòîâûõ ñòðîê” - óñêîðåíèå 25-40%
$x="test $test";
$x="test"; $x.=$test;
$x="test".$test;
Ïîñ÷èòàéòå êîë-âî òàêèõ ñòðîê â âàøåì ïðîåêòå, ÿ äóìàþ èõ êîë-âî áóäåò ñòðåìèòüñÿ ê íóëþ, åñëè âû èñïîëüçóåòå êàêîé-íèòü øàáëîíèçàòîð (Smarty).
Êîðîòêèå ïåðåìåííûå íå áîëåå 7 ñèìâîëîâ - óñêîðåíèå 15%
×èòàáåëüíîñòü êîäà îò ýòîãî íå óëó÷øèòñÿ, ÿ îáû÷íî íàçûâàþ ïåðåìåííóþ ïî èìåíè îáúåêòà õðàíÿùåãîñÿ â íåé, à èìåíà îáúåêòîâ ÷àñòåíüêî ïåðåâàëèâàþò çà äåñÿòîê ñèìâîëîâ. Íî ïåðåìåííûå îò 32 ñèìâîëîâ ìîãóò òîðìîçíóòü ïðîãðàììó ïî÷òè íà ïîëîâèíó.
Òîðìîçÿò ëè ìàññèâû â PHP? Âåðíåå, êàê èìåííî. Óñêîðåíèå 40%
Äîñòóï ê ýëåìåíòó îäíîìåðíîãî àññîöèàòèâíîãî ìàññèâà ïî èìåíè, íå çàêëþ÷åííîìó â êàâû÷êè, òîðìîçèò ïðîöåññ íà òðåòü (îòíîñèòåëüíî òîãî æå ïðèìåðà, íî â êàâû÷êàõ). À âîò â äâóõìåðíîì ìàññèâå ïðîãðàììà ðàáîòàåò ìåäëåííå àæ â 2.5 ðàçà! Ïîñëå òàêîãî òåñòà õî÷åøü íå õî÷åøü, à â ëþáîé ïðîãðàììå ïîæåðòâóåøü óäîáñòâîì - îáðàùåíèå ê ýëåìåíòàì ìàññèâà ïî èìåíè áåç êàâû÷åê.
$test["aa"]=1;$test["bb"]=1;$test["cc"]=1;$test["dd"]=1;$test["ee"]=1;
$test[aa]=1; $test[bb]=1; $test[cc]=1; $test[dd]=1; $test[ee]=1;
$test[a][b]=1;$test[x][y]=1;$test[d][c]=1;$test[a][s]=1;$test[b][n]=1;
Âûíîñèòå ìíîãîìåðíûå ìàññèâû èç “òåêñòîâûõ ñòðîê” - óñêîðåíèå 25-30%
Ïðè èñïîëüçîâàíèè ìíîãîìåðíûõ ìàññèâîâ â ñòðîêàõ íàáëþäàåòñÿ çàìåòíîå ñíèæåíèå ñêîðîñòè Èç-çà ìíîãîìåðíîñòè íóæíî çàêëþ÷àòü ïåðåìåííûå â ïàðíûå ôèãóðíûå ñêîáêè. Äà è ÷èòàáåëüíîñòü ïîâûøå áóäåò.
$x="test {$myarray[name][second][1]} test";
Öèêëû: for, foreach, while, count/sizeof() - óñêîðåíèå 15%-30%
Áåññïîðíûé âûâîä - èñïîëüçîâàíèå foreach ñèëüíî òîðìîçèò äåëî, à ìåæäó for è while áîëüøîé ðàçíèöû íåò. (Íà ãîëîì òåñòå
Äëÿ ÷òåíèÿ ôàéëà file() áûñòðåå, ÷åì fopen+öèêë - óñêîðåíèå 40%
×òîáû ïðî÷èòàòü â ìàññèâ $x ôàéë ðàçìåðîì 1Ìá (100 000 ñòðîê ïî 10 áàéò) ìîæíî âîñïîëüçîâàòüñÿ äâóìÿ âàðèàíòàìè: ÷òåíèå ôàéëà ñ ïîìîùüþ file(), ëèáî òðàäèöèîííûì ìåòîäîì fopen/fgets. Ðàçóìååòñÿ, äëÿ ôàéëîâ ðàçíîãî îáúåìà è ñîäåðæèìîãî ñêîðîñòü ìîæåò ìåíÿòüñÿ. Íî â äàííîì ïðèìåðå ñòàòèñòèêà òàêîâà:
$f=fopen("1Mb_file.txt","r") or die(1);
while($x[]=fgets($f,1000));
fclose($f);
Àíàëîãè÷íûé âàðèàíò
$f=fopen("1Mb_file.txt","r") or die(1);
while($s=fgets($f,1000)) $x[]=$s;
fclose($f);
ðàáîòàþò åùå ìåäëåííåå (âî âòîðîì ñëó÷àå ëèøíÿÿ ôóíêöèÿ feof() çàìåòíî ñíèæàåò ñêîðîñòü). Òîò æå òåñò, íî íà 15Ìá ôàéëå (100 000 ñòðîê ïî 150 áàéò) ïîêàçûâàåò ðàçíèöó â 50%, â ïîëüçó file().
Àðõèòåêòóðà
Òóò åñòü ãäå ðàçîéòèñü, è íà÷àòü ïèñàòü âåñü ïðîåêò çàíîâî ;) íî ëó÷øå ÷óòü-÷óòü íàïèëüíèêîì ïîøàìàíèòü - çà÷àñòóþ ýôôåêò áóäåò ïîðàçèòåëüíûì. Äëÿ íà÷àëà - íå ïîäêëþ÷àéòå ñðàçó âñå áèáëèîòåêè èñïîëüçóåìûå â ïðîåêòå - âñ¸ òîëüêî ïî òðåáîâàíèþ. Ñòàðàéòåñü ðàçäåëèòü ïðîåêò íà ñîñòàâëÿþùèå - øàáëîíû ïðîåêòèðîâàíèÿ åùå íèêòî íå îòìåíÿë.
Ðàáîòà ñ ÁÄ
Î÷åíü ìíîãî âðåìåíè óõîäèò íà ðàáîòó ñ ÁÄ, êàê ñàì ôàêò îáðàùåíèÿ ê íåé, òàê è ñàìà âûáîðêà èç ÁÄ ïðîèñõîäèò íå ìîìåíòàëüíî. È ÷òî æå äåëàòü? Íåîáõîäèìî óáèðàòü ëèøíåå, ãäå ýòî âîçìîæíî, à ãäå íåò - ñòàðàåìñÿ êýøèðîâàòü. È óáåðèòå æå îáðàùåíèå ê ÁÄ â öèêëå!
Âûâîä:
1. Ïîòðàòüòå íà ðàçðàáîòêó àðõèòåêòóðû ïðîåêòà ÷óòü áîëüøå, ÷åì ïàðó ÷àñèêîâ
2. Óáåðèòå ëèøíèå îáðàùåíèÿ ê ÁÄ (åñëè ïåðâûé ïóíêò çàéìåò ó âàñ íåñêîëüêî äíåé - òî è ýòîò íå ïîÿâèòñÿ)
3. Èñïîëüçóéòå êýøèðîâàíèå äàííûõ ïîëó÷àåìûõ èç ÁÄ èëè XML
4. Èñïîëüçóéòå êýøèðîâàíèå ãîòîâûõ HTML ñòðàíè÷åê
5. Óñòàíîâèòå êàêîé-íèòü îïòèìèçàòîð PHP (XCache èëè Zend Optimizer)
È åùå - ãäå-òî óïîìèíàëîñü, ÷òî ñòðàíè÷êà íå äîëæíà ãðóçèòüñÿ áîëåå äâóõ ñåêóíä - çíà÷èò PHP íå äîëæåí òðàòèòü áîëåå îäíîé ñåêóíäû íà å¸ ãåíåðàöèþ.
Ìåòêè: php |
×òî òàêîå RSS-ïîäïèñêà è êàê îíà ìîæåò ïîìî÷ü? |
Äíåâíèê |
Êàê ÷èòàòü RSS-ïîäïèñêè?
Ñóùåñòâóåò ðÿä ïðîãðàìì, ïðè ïîìîùè êîòîðûõ ìîæíî ïðîñìàòðèâàòü îáíîâëåíèÿ âàøèõ RSS-ïîäïèñîê. Íàïðèìåð áðàóçåð Opera èìååò âñòðîåííûé ôóíêöèîíàë äëÿ ðàáîòû ñ RSS-ïîäïèñêàìè
Ìåòêè: rss |
Îñíîâíûå ïðèåìû îïòèìèçàöèè html êîäà |
Äíåâíèê |
|
| Ñòðàíèöû: | [1] |