2008 22. мај 2008

Најбоље праксе: Рад са сликама

Оптимизујете слике

Оптимизација једноставно значи вођење величину слике малог одржавајући квалитет слике на потребном нивоу. Постоје гомиле процедура које некада могу да обављају да оптимизујете слике пре него што се учита на сервер за испоруку. Алатке које се користе за креирање ових слика (Пхотосхоп, Фиреворкс итд) обично имају алатке које омогућавају корисницима да оптимизују слике за веб употребу.
• Проверите ГИФ-а да види да ли користите одговарајућу величину палета на број боја на слици. Када се слика користи 4 боје и 256 палету боја, затим слике која може бити додатно оптимизован

• Конвертовање ЈПГ ГИФ је да где је то могуће и видети да ли је штедња. Чешће него не, не постоји. Не устручавајте се да користите од ЈПГ-а, јер су у потпуности подржане од већине најчешће коришћених претраживача. Очекујте од могућности анимације ПНГ, могу да ураде оно што ради ГИФ, укључујући и транспарентности.

• За слике се користе у ЦСС спритес, распоредите слике у вилењак хоризонтално насупрот вертикално обично резултује у мањој величини фајла. Такође, комбинујете слике са сличним бојама у вилењак. Ово вам помаже да задржите боју Број низак, идеално испод 256 боја тако да се уклапају у ПНГ8.

• Ако користите фавицон.ицо, остане мали, по могућству под 1К.

Користите исправно подешава / промењена величина слике.

Увек покушајте да користите и за промену величине слике, тј не користите већу слику него што је потребно само зато што можете да подесите ширину и висину у ХТМЛ-у. Ако желите да прикажете 100пк Кс 100пк слика на страници, онда немојте користити крљуштима доле 200к200пк слике.

Користите Прогрессиве Слике

Веб прегледач већ чини Слике прогресивно. Да бисте то урадили, још боље, једноставно снимите ГИФ или ПНГ слике са "интерлацед" опција, или ваше ЈПЕГ слике са "прогресивном" опцију.

Ту је у току дебата међу корисницима веб томе да ли употреба прогресивног имиџа је благослов или препрека. Такође прогресивно слика тежак око 20% више него његов колега не прогресивног. Дакле, ако мислите да сте распоред користи слике које неће отежавају корисник-искуство је бити прогресиван, слободно то урадите.


2008 15. мај 2008

Најбоље праксе: Рад са ЈаваСцрипт-а

Укључи ЈаваСцрипт-а на дну ХТМЛ документа

Ако немате доцумент.врите (или било Динамичко генерисање садржаја странице користе Јавасцриптс) да убаците део садржаја странице у вашим скрипти, преместите скрипту укључују изјаву на дну стране, пре краја БОДИ тага.
ХТТП/1.1 спецификација указује да преузмете прегледачи не више од две компоненте паралелно по домаћина. Ако служе своје слике из више име домаћина, можете добити више од два довнлоадс да се деси паралелно. Док скрипта је преузимање, међутим, прегледач неће почети никакве друге довнлоадс, чак и на различитим именима хостова.
Постоје начини да се динамички креирају чворови скрипту и учитавање скрипте удаљених након страница уцитана користи АЈАКС.

Ектерналисе вам је Јава-а

Коришћење спољних ЈаваСцрипт датотека ће довести до бржег учитавања странице јер су ЈаваСцрипт датотеке Сачувано од стране претраживача. Инлине ЈаваСцрипт-а "у ХТМЛ документима се преузети сваки пут ХТМЛ документ се не траже. То може заправо смањити број ХТТП захтева али је накнадно направљених повећава величину ХТМЛ документа. Спољни ЈаваСцрипт-а су Сачувано од стране претраживача, величина се смањује ХТМЛ документа без повећања број ХТТП захтева.
Имајте на уму да, ако корисници на вашем сајту имати више страница ставове по седници, а многи од ваших страница поново користе исте скрипте и стилове, постоји већа потенцијална корист од кешираних спољних датотека.

Спакујте Јавасцрипт фајлова

У случају Јавасцриптс, за разлику од ЦСС-а, датотеке би претрпан коришћењем неке стандардне алгоритме који ће дати смањену величину датотеке него једноставно уклањање размака или табулатора. Пример јавасцрипт пакер можете наћи овде хттп://деан.едвардс.наме/пацкер/

Ослободите све дуплиране Скрипте

Веома је необично да би цео скрипте се дуплирају, али преглед десет најбољих америчких сајтовима показује да су двојица од њих садрже дуплирати скрипту. Дуплицате скрипте али очигледно смањује перформансе стварањем непотребне ХТТП захтева и извршавање ЈаваСцрипт изгубљено.
Такође, у многим случајевима, иако су писма имена разликују, постоји вероватноћа дуплих скрипти у оквиру исте странице због тима величине и броја скрипти.

Умањивање приступ ДОМ елементе где је то могуће

Приступ ДОМ елементе са ЈаваСцриптом је споро, тако да би имали више одговарајућу страницу, требало би да:
Цацхе: • референце на приступити елемената
• Ажурирајте чворови "ту", а затим додајте их у дрво
• Избегавајте фиксирање распоред са ЈаваСцрипт

Одвоји понашање од садржаја и презентације

Баш као што смо одвојени Презентација (ЦСС / КССЛТ) из садржаја (КСХТМЛ / КСМЛ), такође би требало да одвоји понашање (ЈаваСцрипт). То се зове ненаметљив ЈаваСцрипт. Баш као што се повежете са екстерним ЦСС фајловима, треба повезати са спољним јавасцрипт фајлова.

Уместо чврстог кодирања понашања у садржају (нпр. онмоусеовер, онцлицк, итд), понашање треба да буде динамички додаје елемената, класа и јединствених елемената (ИДС) помоћу ДОМ. Оснивачки документ, садржај, треба да садржи само важећу КСХТМЛ / КСМЛ а не ЈаваСцрипт.
Јавасцрипт би требало да повећа садржај додавањем понашање. Садржај треба да остане користан и употребљив без ЈаваСцрипт (или без пуне подршке јавасцрипт).


2008 7. мај 2008

Најбоље праксе: Будите свесни тежине странице

Сте сачували сам се ове чланак узраста, тако ми је жао! ЈА донт сећам извор ... али изгледало је корисно за нас који морају да буду свесни о публике за које смо развије сајт за ... па ево и је

Страна тежина може да се користи да се одреди време преузимања за датој страници на различитим брзинама Интернет везе. На пример, следећа табела приказује време потребно за преузимање за три различите странице на великом броју популарних повезивања брзинама.

Страница Тежина Довнлоад Тајмс

Веза ветра

Страна 20 Мб

Страна 40 Мб

Страна 100 Мб

14.4 Кбпс

12 сек

25 сек

62 сек

28.8 Кбпс

6 сец

12 сек

31 сек

33.3 Кбпс

5 сек

10 сек

26 сек

56 Кбпс (В.90)

2 сек

5 сек

13 сек

64 Кбпс (ИСДН)

2 сек

4 сек

12 сек

128 Кбпс (АДСЛ / кабл)

1 сек

2 сек

6 сец

256 Кбпс (АДСЛ / кабл)

<1 сек

1 сек

3 сек

Предности смањења страницу тежину?

Позитиван утицај на смањење тежине странице предности оба власницима веб сајтова и потрошаче. Потенцијалне предности укључују:

  1. Странице брже учитати. Најочигледнији утицај смањења тежине странице је да ће свог веб сајта страница учита брже за посетиоце, без обзира на њихове брзине везе.
  2. Ниже Паге Лоад пута ствара угоднија посетилаца. Посетиоци су мање вероватно да ће постати фрустрирано и оду негде другде, ако ваша страница учитава брзо. С друге стране, споро учитавају странице су један од најсигурнијих начина да изгубите посетиоце и потенцијалне купце.
  3. Брже лоад-пута ће допринети повећању конверзија. Више посетиоци ће остати на вашем сајту дуже. Више од њих ће завршити израду куповину, пријављивања за билтен, или књига обележавање ваш сајт.
  4. Ваш бренд перцепција ће бити побољшана. Враћају и купци први пут посетиоцима подједнако ће бити склонији да опише свој сајт (и посао) као "професионалних" ако вам се страница учитава брзо.
  5. Странице са чистог, чврстог кода често ће бити индексиране ефикасније од природних претраживачима.
  6. Странице оптимизоване за тежине заправо може уштедети трошкове протока на високо-саобраћају сајтовима. 100.000 страница сваки тежине 150 Кб ће захтевати дупло више пропусни опсег од Вашег ИСП од 100.000 страница свака тежи 75 Мб. За ИСП ту оптужбу за пропусни опсег користи или за оверагес, ово смањење може да створи значајне уштеде на пропусног опсега оптужби.

Размотримо следеће податке, објављене у извештају

Посетилац Напуштање

Паге Лоад Тиме

Проценат корисника
Настављајући да чекају

10 секунди

84%

15 секунди

51%

20 секунди

26%

30 секунди

5%


2008 4. мај 2008

Укључи КССЛ унутар КССЛ

Ако КСМЛ / КССЛ трансформација је ваш домиан, онда постоје тренуци када желимо пеице динамичког кода који ће се користити библиотеку ставку (да се поново употребљив). Шта хоћу да кажем, вероватно се може учинити са овом примеру јасно сценарио.

Замислите да креирате сајт (и коришћењем КСМЛ, КССЛ трансфромс наравно) и већина страна имати Коментари модул. Добро! онда или копирате или налепите овај код на свакој страници шаблона (што да не немам реци, али се одржавање и дорада ноћну мору) или, још боље, направите УКЉУЧИТИ фајл који би могао да се повуче у где год ви то желите на вашој страници ( е) ...
Дакле, како ћемо направити КССЛ УКЉУЧИТИ фајл и укључује га у другој КССЛ фајл? Ево како ...

Само да се ствари јасно ... овде је брз списак датотека које би сте креирали ... овде, ми ћемо бити укључујући информације о воћа и поврћа у матичној страни се зове храна.

1. фоод.кмл - КСМЛ датотека са подацима на којима ће трансформација бити примењена
2. фоод.ксл - главни КССЛ фајл, који ће трансформисати наше фоод.кмл
3. инц_фруитс.ксл - КССЛ фајл који укључују пружаће воћа податке
4. инц_вегтаблес.ксл - КССЛ фајл који укључују пружаће вететаблес податке

И донт мислим да имам много објасним, кодови за наведене елементе, биће само објашњења ...

ФООД.КСМЛ


<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<fruits type="tropical">
<item name="mango" moreinfo="http://www.mango.com">Mango is the king of fruits</item>
<item name="banana" moreinfo="http://www.banana.com">Banana once a day , keeps the doctor away</item>
<item name="orange" moreinfo="http://www.orange.com">Orange is the color and rich in vitamin C</item>
<item name="Papaya" moreinfo="http://www.papaya.com">Papaya - Hot when raw, cold when ripe</item>
</fruits>

<vegetables>
<item name="spinach" moreinfo="http://www.spinach.com">Spinach is full of iron</item>
<item name="asparagus" moreinfo="http://www.asparagus.com">Asparagus contains loads of vitamin D </item>
<item name="fenugreek" moreinfo="http://www.fenugreek.com">Fenugreek is rich in vitamin C</item>
</vegetables>
</food>


ФООД.КССЛ


<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:include href="inc_fruits.xsl" />
<xsl:include href="inc_vegetables.xsl" />
<xsl:template match="/">
<html>
<head>
<title>Title</title>
</head>
<body>
<h3><xsl:value-of select="/food/description" /></h3>
Modification Date : <xsl:value-of select="/food/date" />
<hr/>
<h5> About Fruits</h5>
<xsl:call-template name="about_fruits"/>

<hr/>
<h5> About Vegetables</h5>
<xsl:call-template name="about_vegetables"/>

<хр/>
</ БОДИ>
</ Хтмл>
</ Кссл: темплате>
</ КССЛ: стиловима>


ИНЦ_ФРУИТС.КССЛ

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_fruits">
<xsl:for-each select="/food/fruits/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br />
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>


ИНЦ_ВЕГЕТАБЛЕС.КССЛ

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="iso-8859-1" />
<xsl:template name="about_vegetables">
<xsl:for-each select="/food/vegetables/item/@*">
attribute name : <xsl:value-of select="name()"/>
attribute value : <xsl:value-of select="."/> <br/>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>

Преузмите све горе наведене фајлове овде (252 Довнлоадс)


НДК Почетна | Изражавајући ИТ | Изражавајући Палате | Изражавајући Пенменсхип | Изражавајући страхопоштовање | Изражавајући Ја