Архив метки: создание сайтов

Xenu’s Link Sleuth — проверка на нерабочие ссылки на сайте

Xenu’s Link Sleuth — проверка на нерабочие ссылки на сайте. Вышла новая бета от  05/10/2010 — 1.3.9 beta

Бета версия, поддерживающая в исключениях регулярные выражения по типу *feedback* в результате будут пропущены все страницы содержащие в урл feedback

  • http://home.snafu.de/tilman/tmp/xenuwild.zip
  • http://home.snafu.de/tilman/xenulink.html

Функции для ЧПУ — PHP, JS

Функции для ЧПУ — PHP, JS — функция транслитерации строки по ГОСТ 7.79

JS translit

function translit(s)
{
var t=»аaбbвvгgдdеeёjoжzhзzиiйjjкkлlмmнnоoпpрrсsтtуuфfхkhцcчchшshщshhъ’’ыyь’эehюjuяjaАAБBВVГGДDЕEЁJoЖZhЗZИIЙJjКKЛLМMНNОOПPРRСSТTУUФFХKhЦCЧChШShЩShhЪ’’ЫYЬ’ЭEhЮJuЯJa»;
t=t.replace(/([а-яёЁ])([a-z’]+)/gi,’.replace(/$1/g,»$2″)’);
return eval(«s»+t);
}

PHP translit

function translit($s)
{
$s = mb_strtolower($s);
$b = array(’ ’,’ий’, ’а’,’б’,’в’,’г’, ’д’, ’е’, ’ё’, ’ж’, ’з’, ’и’, ’й’, ’к’, ’л’, ’м’, ’н’, ’о’, ’п’, ’р’, ’с’, ’т’, ’у’, ’ф’, ’х’, ’ц’, ’ч’, ’ш’, ’щ’, ’ъ’, ’ы’, ’ь’, ’э’, ’ю’, ’я’);
$a = array(’_’,’iy’, ’a’, ’b’, ’v’, ’g’, ’d’, ’e’, ’e’, ’zh’, ’z’, ’i’, ’i’, ’k’, ’l’, ’m’, ’n’, ’o’, ’p’, ’r’, ’s’, ’t’, ’u’, ’f’, ’h’, ’ts’, ’ch’, ’sh’, ’shh’, ’’, ’y’, ’’, ’e’, ’u’, ’ya’);
return str_replace($b, $a, $s);
}

Closure Library — JS Framework от Google

JS Framework Closure Library от Google — JavaScript библиотека промышленного уровня. Она обеспечивает возможность создания пользовательского интерфейса на основе готовых решений: WYSIWYG, виджеты, выбор даты, выбор цвета, инструмент для манипуляции с DOM, инструмент для создания анимационных эффектов (включая перетаскивание), коммуникационные утилиты рамках модульного тестирования, а также многое другое.

http://closure-library.googlecode.com/svn/trunk/closure/goog/docs/index.html

Примеры использования CSS Спрайтов (CSS Sprites)

Примеры использования CSS Спрайтов (CSS Sprites) — меню, оптимизация сайта, меню с использованием спрайтов и JS

Примеры меню CSS Спрайты + JS

  • Туториал по созданию меню 5+ — http://www.cssblast.ru/articles/sprites2
  • Туториал по созданию меню 3+ — http://www.shopdev.co.uk/blog/animated-menus-using-jquery/
  • Одна из первых статей о Спрайтах 2004 год — http://www.alistapart.com/articles/sprites

Тестирование верстки сайта в разных браузерах

Тестирование верстки сайта в разных браузерах можно или через локально установленные браузеры или с помощью веб-сервисов

Локально:

  • Xenocode browser sandbox
  • IETester

Сервисы:

  • browsershots.org — 5+
  • browsera.com 4 (в основном платные функции)
  • crossbrowsertesting.com — платный
  • browsrcamp.com — тестирования сайтов под Mac OS, платный

 

Использование Yahoo YUI Grids

Визуальный редактор сетки сайта на основе Yahoo YUI Grids — http://developer.yahoo.com/yui/grids/builder/

Подсказка по использованию YUI CSS Grids — http://yuiblog.com/assets/pdf/cheatsheets/css.pdf

Обсуждение о создании верстки в три колонки используя YUI:

  • http://www.jroller.com/dscataglini/entry/yui_grids_3_column_layout
  • http://stackoverflow.com/questions/907691/making-three-columns-layout-with-fixed-with-sidebars-using-yui-grids

Еще информация по русски: http://htmlcss.com.ua/forum/html-css-faq/yui-grids-css/

CSS Фреймворки (Frameworks)

CSS Фреймворки (Frameworks)

  1. YUI — Yahoo User Interface Library — http://developer.yahoo.com/yui/grids/builder/
  2. YAML — Yet Another Multicolumn Layout — http://builder.yaml.de/ — бесплатный, если есть ссылка на сайт проекта, в противном случаи нужно покупать лицензию 🙁
  3. 960 CSS Framework
  4. Blueprint CSS Framework
  5. The jQuery UI CSS Framework
  6. http://wiki.github.com/stubbornella/oocss/template
  7. Bluetrip CSS Framework — http://bluetrip.org/
  8. css-framework.ru/

Загрузка множества файлов (Multiple File Upload)

Загрузка множества файлов (Multiple File Upload)

  • http://www.uploadify.com/demo/ — пример на SWF + JS
  • http://digitarald.de/project/fancyupload/ — Swiff + Ajax
  • http://www.phpeasystep.com/phptu/2.html — Пример на PHP Multiple files upload
  • http://webdeveloperplus.com/jquery/ajax-multiple-file-upload-form-using-jquery/ — пример PHP+JQuery(AJAX)
  • http://habrahabr.ru/blogs/jquery/50223/ — краткий обзор загрузчиков нескольких файлов

Обзор основных AJAXаплоадеров http://blog.insicdesigns.com/2010/02/10-best-ajax-file-uploader-for-your-web-application/

CSS техники и т.д.

CSS техники — примеры использования и реализации:

  • 50 CSS и JS техник —  http://www.smashingmagazine.com/2010/02/18/50-css-and-javascript-techniques-for-layouts-forms-and-visual-effects/
  • 15 Time Saving CSS Tools — http://webdeveloperplus.com/css/15-time-saving-css-tools/ — перевод статьи на русском — http://m.habrahabr.ru/post/79128/
  • 21 Amazing CSS Techniques — http://webdeveloperplus.com/css/21-amazing-css-techniques-you-should-know/
  • 25 Incredibly Useful CSS Tricks — http://webdeveloperplus.com/css/25-incredibly-useful-css-tricks-you-should-know/
  • Онлайн Генератор CSS спрайтов (CSS Sprites) — http://ru.spritegen.website-performance.org/

HTML 5 — начало

HTML 5 — начало использование HTML 5.

Для корректной работы с HTML 5 в IE 6 добавляем следующий код.

В HTML файл:

В CSS файл:

header, nav, section, article, aside, footer {display: block:}

В остальных современных он и так работает.

Скриншот как должен выглядеть красивый HTML код от автора http://css-tricks.com/what-beautiful-html-code-looks-like/

Пример структуры страницы на HTML 5

Пример структуры страницы на HTML 5