2008 22 май 2008 г.

Най-добри практики: работа с изображения

Оптимизирате изображения

Оптимизация просто означава запазване на размера на изображението малък, запазване на качеството на изображението до изискваното ниво. Има много процедури, които някога могат да извършват, за да се оптимизира изображението, преди те да са заредени на сървъра за доставка. Инструментите, които използваме за създаване на тези изображения (Photoshop, Fireworks и т.н.), обикновено имат инструменти, които позволяват на потребителите да оптимизират изображението за уеб употреба.
• Проверете GIF, за да видите дали те са с помощта на палитра размер, съответстващ на броя на цветовете в изображението. Когато изображението се използва 4 цвята и 256-цветова палитра, а след това изображението може да бъде допълнително оптимизирана

• Конвертиране на GIF е където PNG е възможно и да видим, ако е налице спестяване. По-често, отколкото не, има. Не се колебайте да използвате на PNG, тъй като те са напълно подкрепени от повечето често използвани браузъри. Очаквайте на възможностите за анимация, PNG може да направи това, което GIF, включително прозрачност.

• За изображения, използвани в спрайтове на СГО, организира изображения в Sprite, хоризонтално, за разлика от вертикалното обикновено води до по-малък размер на файла. Също така, комбинация от изображения с подобни цветове в Sprite. Това помага да се запази броя на цвета ниско, в идеалния случай при 256 цвята, така че да се побере в една PNG8.

• Ако сте с помощта на favicon.ico, да го малък, за предпочитане под 1K.

Използвайте правилно мащабирани / преоразмеряват изображение.

Винаги се старайте да използвате преоразмеряват изображения, т.е. не се използва по-голям образ, от което имате нужда, просто защото можете да зададете ширината и височината в HTML. Ако имате нужда за да се покаже 100px X 100px изображение на страницата, а след това не се използва мащабирани надолу 200x200px изображение.

Използвайте Прогресивни изображения

Уеб браузър вече прави снимки постепенно. За да направите още по-добре, просто ги запазете GIF или PNG с изображения с "преплетени" опция, или на JPEG изображения с опцията "прогресивен".

Има продължаващ дебат сред потребителите в Интернет, дали използването на прогресивно изображение е благословия или представляват пречка. Също така прогресивно изображение тежи приблизително 20% повече в сравнение с не прогресивното колега. Така че, ако мислите, че ви оформление използва изображения, които няма да попречат на потребителя опит, като го е прогресивно, чувствайте се свободни да го направят.


2008 15 май 2008 г.

Най-добри практики: Работа с JavaScript

Включване на JavaScript в долната част на документа на HTML

Ако не разполагате с document.write (или всяко динамично генериране на съдържанието на страницата, използващи javascripts), за да вмъкнете част от съдържанието на страницата във вашия скрипт, преместете сценария, включва изявление на долната част на страницата, преди края на Тялото маркер.
HTTP/1.1 спецификация предполага, че браузъри да свалите не повече от две компоненти успоредно на име на хост. Ако ви служи вашите изображения от множество имена на хостове, можете да получите повече от две сваляния да се появят при паралелно. Докато скриптът се изтегли, обаче, браузърът не ще стартира други сваляния, дори и на различни имена на хостове.
Има също така начини за динамично създаване на скриптове възли и заредете отдалечени скриптове след страницата се зарежда с помощта на AJAX.

Изнесе навън ви JavaScript.

Използване на външни файлове с JavaScript ще доведе до по-бързо зареждане на страници, защото на JavaScript файловете се кешират от браузъра. Inline JavaScript в документи на HTML се изтеглили HTML документа се иска всеки път. Това всъщност може да се намали броят на исканията на HTTP, направени, но впоследствие увеличава размера на HTML документ. Външен JavaScript са кеширани от браузъра, се намалява размера на HTML документа, без да се увеличава броя на молбите за HTTP.
Моля, обърнете внимание, че ако потребителите на сайта си имат множество изгледи страница на сесия и много от вашите страници повторно използване на същите скриптове и стилове, има по-голяма потенциалната полза от на кеширани външни файлове.

Опаковайте на JavaScript файлове

В случай на JavaScripts, за разлика от CSS, файлове могат да схруска използване на някои стандартни алгоритми, които ще предоставят на намален размер на файла не просто премахване на интервали или табулации. Един пример на JavaScript опаковчик може да намерите тук http://dean.edwards.name/packer/

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

Това е много необичайно, че цели скриптове могат да бъдат дублирани, но мнението на десетте най-важни места в САЩ уеб показва, че двама от тях съдържат дублирани скрипт. Дублиране на скриптове, но очевидно намалява производителността чрез създаване на ненужни искания на HTTP и губи JavaScript за изпълнение.
Също така, в много случаи, въпреки че скриптове имена са различни, има вероятност на дублиращи скриптове рамките на същата страница, се дължи на екипа на размера и броя на скриптове.

Намаляване на достъп до Дом елементи, когато това е възможно

Достъп до дом елементи с JavaScript е бавен, така че за да има по-отзивчиви страница, трябва:
• Кеш препратки към достъпни елементи
• Обновяване възли "офлайн" и след това да ги добавите към дървото
• Избягвайте определяне оформление с JavaScript

Отделно поведение от съдържанието и представянето

Точно както ние отделно представяне (CSS / XSLT) от съдържанието (XHTML / XML), ние също трябва да се разделят поведение (JavaScript). Това се нарича ненатрапчив Javascript. Точно както ние линк към външни файлове на CSS, ние трябва да се свържете на javascript външни файлове.

Вместо твърд кодиране поведение в съдържанието (например поставяне на показалеца, OnClick и др.), Поведението трябва да бъде динамично добавят елементи, класове и уникални елементи (IDS) с помощта на DOM. Основополагащ документ, съдържанието, трябва да съдържа само валиден XHTML / XML и не JavaScript.
Javascript трябва да увеличи съдържание чрез добавяне на поведение. Съдържанието трябва да остане полезна и използваема без JavaScript (или без пълната подкрепа на JavaScript).


2008 7 май 2008 г.

Най-добри практики: Бъдете наясно на страницата тегло

Запазил съм тази статия възрасти, толкова съжалявам! Аз не помня източника ... но това изглежда полезно за нас, които трябва да бъдат наясно за публиката, за които ние разработваме сайт за ... така че тук е

Page тегло може да се използва, за да се определи времето за изтегляне за дадена страница на различни скорости на интернет връзката. Като пример, следната таблица показва времето за изтегляне за три различни страници в редица популярни скорост на връзката.

Страница Тегло Изтегли Times

Скорост на връзката

20 KB

40 Kb

100 Kb

14.4 Kbps

12 сек

25 секунди

62 сек.

28.8 Kbps

6 сек

12 сек

31 сек.

33.3 Kbps

5 сек

10 сек

26 сек

56 Kbps (V.90)

2 сек

5 сек

13 сек

64 Kbps (ISDN)

2 сек

4 сек

12 сек

128 Kbps (DSL / кабелен модем)

1 сек

2 сек

6 сек

256 Kbps (DSL / кабелен модем)

<1 сек

1 сек

3 секунди

Ползите от намаляване на теглото на страница?

Положително въздействие за намаляване на ползите от страниците на теглото, както на собствениците на сайта и потребителите. Потенциални ползи включват:

  1. Ускорите страниците се зареждат. Най-очевидният ефект на намаляване на теглото на страницата е, че страниците на вашия сайт ще се зареждат по-бързо за посетителите, независимо от тяхната скорост на връзката.
  2. Ниски времето за зареждане на страницата създават по-удобни посетители. Посетителите са по-малко вероятно да стане разочароват и да отидат другаде, ако вашите страници се зареждат бързо. От друга страна, бавно зарежда страници са един от най-сигурните начини да губят посетители и потенциални клиенти.
  3. Бързо натоварване пъти ще допринесе за увеличаване на преобразуване. Повече посетители ще остане на вашия сайт вече. Повече от тях ще приключи до извършване на покупки, подписвайки за вашия бюлетин, или книга маркиране на вашия сайт.
  4. Възприемането на вашата марка ще се засили. Постоянни клиенти и за първи път посетителите ще бъдат по-склонни да се опише сайта си (и бизнес), като "професионален", ако страниците се зареждат бързо.
  5. Страници с чиста, твърди код често ще бъдат индексирани по-ефективно от физически търсачки.
  6. Страници, оптимизирани за тегло може действително да спестите трафик такси с висок трафик сайтове. 100000 страници, всяка с тегло 150 Kb ще изисква два пъти повече трафик от вашия Интернет доставчик от 100000 страници всеки тегло 75 Kb. За доставчици на интернет услуги, които начисляват такса за използваната честотна лента, или за излишъка, това намаление може да създаде значителни икономии на честотната лента такси.

Имайте предвид следните данни, публикувани в доклад

Посетител Изоставяне

Часова страница товар

Процента от потребителите
Продължавайки да се изчака

10 секунди

84%

15 секунди

51%

20 секунди

26%

30 секунди

5%


2008 4 май 2008 г.

Включва XSL вътре XSL

Ако XML / XSL трансформира, е вашият domian, след това има моменти, когато сме се искат peice на динамичен код, за да се използва библиотека елемент (да се направи за многократна употреба). Какво искам да кажа, вероятно може да се направи по-ясно с този пример сценарий.

Представете си, вие създавате уеб сайт (и използване на XML, XSL transfroms разбира се) и повечето от страниците имат Коментари модул. Е! след това или да копирате или поставите този код във всяка страница шаблон (аз не се каже, но се поддръжка и преработи кошмар) или дори по-добре, вие създавате Включване на файл, който може да бъде изтеглен в където и да го искат в страницата си ( и) ...
И така, как да създаваме файл XSL Включи и го включите в друг файл на XSL? Ето как ...

Само за да направим нещата по-ясно ... тук е бърз списък на файловете, които ще създадете тук, ние ще се включва информация за плодове и зеленчуци в основната страница, наречена храна.

1. food.xml - XML ​​данни, файл, на която ще се прилага трансформация
2. food.xsl - главния файл XSL, който ще преобрази нашата food.xml
3. inc_fruits.xsl - XSL файл, който ще направи плодове данни
4. inc_vegtables.xsl - XSL файл, който ще направи vetetables данни

Аз не мисля, че трябва да обясни много, кодовете по-горе елементи, ще бъде самостоятелно обяснителен ...

FOOD.XML


<?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>


FOOD.XSL


<?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"/>

<hr/>
</ BODY>
</ HTML>
</ XSL шаблон>
</ XSL стилове>


INC_FRUITS.XSL

<?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>


INC_VEGETABLES.XSL

<?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>

Изтегляне на всички тези файлове, тук (249 сваляния)


НДК начало | Изразявайки | Изразявайки Вкус | Изразявайки Penmenship | Изразявайки страхопочитание | Изразяване на себе си