Выражая IT

Еще один старый дополнительный памяти школе ...

Почему мы должны включить windos.status?
Javascripts может быть кошмаром, когда у вас есть что-то для отладки. Firefox имеет несколько удобных аддонов, как Firebug Thats делает нашу жизнь легко и Кроме того, голосование за самый популярный метод отладки в JavaScript должен пойти в "Alert ()". Anywaz! Есть несколько случаев, когда добавление ALERT же отладки неправильное поведение Javascript просто не очень хорошая идея. Например! у вас есть dragble пункт, положение которого должно быть предупреждены .... НЕТ НЕТ! Не принимайте это! ... Вы просто получите бесконечные предупреждения или вы не сможете на самом деле ваш DRAP dragable. Ну! Есть еще хороший ситуациях, где вы можете выписать отладки текста в строку состояния, гораздо более usful ... Поверьте мне! Его опыт!

IE по умолчанию оставили вы пишете на панель браузера STATUS, используя синтаксис "" что-то для отладки "window.status =", но не FireFox. Таким образом, чтобы изменение состояния окна, вы можете сделать одно из следующих.

Открыто о: конфигурации в браузере (типа "о: конфигурации" этого в адресной строке), а также поиск
дом. disable_window_status_change. Измените его на ложный ... просто нажмите на въезд для переключения его состояние.

Или, альтернативно,

"Инструменты → Настройки → Содержимое → Enable JavaScript / Advanced → Изменить статус бар текст"

А также отметить, что ... для записи в строке состояния в JavaScript, IE просто нормально, если вы используете короткий синтаксис, т.е. статус = 'некоторые отладочный текст ", но в FireFox, Вы должны использовать в полном объеме, т.е. синтаксис window.status =' то для отладки "

Ни я очень новой для пользовательского интерфейса (UI) развития, ни я ветеран и, как я всегда ставлю, я вписывается в профиль UI разработчик больше, чем у дизайнера, с чем не жалею. Oh Well! То, что я писал о? ... На какое-то время (должно быть в любом лет не меньше), в настоящее время, то и тогда, когда я получаю в немного Разработка интерфейса (когда профессиональный дизайнер ушел в отпуск), я всегда могу перестать думать, что мой проект должен быть надлежащим образом complient или нет (искренне, не то, что я могу 100% достижения максимального соответствия стандартам, Если бы я хотел тоже). Тогда я говорю себе, что дерьмо! ... Дизайн должен быть простым, красивым и в первую очередь, кажется полезной, она не должна посетителей бежать ... или отказов (для технических). Что хорошего будет хорошо бестабличные макет CSS бы посетитель, который не обращает внимания на все умные гипертекста и каскадные таблицы стилей под кожей веб-страницы ... Шиш!
Это должно выглядеть красиво и быть простым в использовании ... потом приходит все стандарты вещи.

Я stumbbled accross эту запись в блоге от Jason Fried из 37 Signals (Для тех, кто не знает 37 сигналов onces, которые создали ряд великолепных веб-приложений, как Basecamp, костра и т.д.), который написал нечто подобное в 2004 году и, поверьте, почти 5 лет и не сильно изменился с тех пор ... Я был рад прочитать свой пост, как я полностью согласен с тем, что он должен сказать, и также тот факт, ее не уверен, что говорит о ее просто чутье его и так мое

Джейсон Фрид: "Там слишком много говорить о CSS и XHTML и стандарты и доступность, и недостаточно говорить о людях. CSS и Соответствие стандартам код всего лишь инструменты - вы должны знать, что строить с этими инструментами. Великий, я рад, что пользовательский интерфейс не использует таблицы. Ну и что? Какая разница, если она по-прежнему не позволяет людям достичь своих целей. Веб-стандарты являются большими, но собственные стандарты включают в себя людей добиться цели (и это еще слишком сложно сделать онлайн).

UI дизайнеры делают все те же фундаментальные ", забывая о человеке, с другой стороны" ошибки - но на этот раз их код выглядит лучше. Люди - не валидаторы кода - использование интерфейсов ".

Оформить заказ полный Джейсона Фрида статье

DISCALIMER: Это не значит, что мы не должны беспокоиться по поводу стандартов на всех. Стандарты хорошо иметь и придерживаться их как можно больше. Мы только должны понимать, что хороший дизайн интерфейса не всегда означает 100% стандартов Complience или наоборот ....

В моем списке моих уроков, я следую за несколько дизайн пользовательского интерфейса и развития Золотые правила ... Херес ТОП-10 ... не то, что вы должны следовать за ними слишком ...

1. Заботьтесь о ваших пользователей. Пользователи могут создать или разрушить ваш сайт. DONOT сделать пользователь похож общего idoit, совершенно не в состоянии с помощью веб-сайта. Это плохо!

2. Держите простота и удобство использования вашего основного добраться до нас. Слишком много на экране, тем выше вероятность того, что пользователь запутается или отвлекаться от своих первоначальных задач.

3. Быть в пределах ... DONOT предаваться слишком много в юзабилити, ДОСТУПНОСТЬ и стандартов. Использование стандартов и эффективно их понимать команды. Это обеспечит правильную последовательность в продукте

4. Прототип требования. Так, в эти дни использования интерфейсов богат, прототипов всегда лучше, чем просто делать простые каркасы, а второй является недействительным достойного взаимодействия, было бы не в состоянии предоставить клиенту четкое представление о конечном продукте, что в настоящее время разрабатывается. Всегда легче преобразовать прототипа в конечный результаты. Кроме того! с прототипа любое взаимодействие вопросы могут быть устранены в начале цикла разработки.

5. Последовательность в ваш дизайн и взаимодействие очень важно. Не допускайте попадания запутать пользователя с непредсказуемыми взаимодействия и вещиц.

6. Поймите, ваш "Дизайн Миссия". Выводы из сосредоточиться на основном действие страницу beign разработаны. Кроме того, составьте список ваших seconday действий на странице, и их приоритетность.

7. Обеспечить надлежащую обратную связь с пользователями сайта. В большинстве веб-сайтов строится вокруг AJAX, обеспечивает визуальные подсказки для пользователя об изменениях на странице. Пользователь должен данного подтверждения завершения любой задачи он выполняет. Не допускайте попадания сделать пользователю ждать и гадать, например, для. обеспечить индикаторы для файла uplaods.

8. Используйте контроль надлежащим образом. Для использования, например, выберите раскрывающийся список для небольших списков только выигрыш позволяет пользователю выбрать один из 200 городов использованием полей выбора. Понять разницу между кнопки и ссылки. Ссылки и кнопки имеют разные цели, выигрыш использовать один для другого. Предоставить право управления, чтобы взаимодействия со страницей легче. Избегайте использования меню, которые более двух уровней. Не изобретать велосипед. Используйте стандартные элементы управления, настроить их, только если очень нужно. Определить любые пользовательские элементы управления, необходимые для вашего сайта из первых рук, так что они могут быть созданы и испытаны независимо, готовый к использованию сайт accross.

9. Не допускайте попадания ITERATE слишком много внимания дизайну. Помните! Весь продукт состоит более, что дизайн в покое. Построить в надлежащие сроки в проект графика дизайн итераций и придерживайтесь его. Итерация помогает нам узнать, что работает, а что нет, выделить проблемные места. Как хороший интерфейс занимает много времени, достаточно времени для итераций в начале цикла разработки, так что дизайн итераций оленья кожа прямо приравнивают к переделок. Слишком многое переделывать может jeopradize сроки.

10. Сидеть сложа руки и думать, как пользователь иногда.

Херес еще один маленький peice обмана Javascript, что мне пришлось копаться, потому что ситуация commaned он. В одном из моих веб-сайтов, у меня была ситуация, когда я должен был осуществлять "windows.onload" в два раза. Первое, что бы пришли к неопытный ум, как у меня (у меня честно сказать, что, поскольку я использую JavaScript рамки и библиотеки, я forgotton делать простые вещи, на мой собственный ... Печально, но факт), является следующий метод ...

 window.onload = onloadfn1;
 window.onload = onloadfn2;
 window.onload = onloadfn3;
 и т.д. ..

Извините, что говорю, но это не будет работать ... не хочу, чтобы обсудить выполнение науки Javascript много ... но по моим недавним опытом, только последняя функция (onloadfn3) будет плохо на самом деле будут выполняться.

В нормальной ситуации, в отличие от моей (о которых я расскажу немного позже) ... вы можете сделать одно из следующих действий, чтобы выполнить mutliple функции OnLoad ....

Или что-то вроде этого

 Функция doOnLoad () {
         onloadfn1 ();
         onloadfn2 ();
         onloadfn3 ();
 }
 window.onload = doOnLoad;

Для моей нынешней ситуации, я не могу использовать любой из указанных выше ...
Почему мне нужно позвонить windows.onload дважды, а что вызов двух функций в рамках одной функции OnLoad? Вот быстрый взгляд на мои постановки задачи ...

"Мои страницы сайта структурированы как тема WORDPRESS .... то есть общая header.php и footer.php, который получает включены во все страницы сайта. Существует implementaion OnLoad функции в footer.php, чтобы сделать некоторые общие функции OnLoad. И есть несколько страниц, которые должны что-то свое OnLoad, кроме тех, сделать общие функции OnLoad. Если я назначить функцию обратного вызова непосредственно на window.onload обработчик, он будет по-ехать ранее назначенного обратного вызова в footer.php "

.... Моя проблема понимается ?

Ну! Есть несколько решений, которые я нашел. Все они очень похожи, и главным образом implementions решения данной Саймон Willison ( http://simonwillison.net/2004/May/26/addLoadEvent/ ) ...

Решение:

Просто добавьте этот код JavaScript на сайте ...

 Функция addLoadEvent (функции) {
     уаг oldonload = window.onload;
     если (TypeOf window.onload! = 'функция') {
        window.onload = функция
     {} Другое
        window.onload = функция () {
            если (oldonload) {
                   oldonload ()
           }
           функции ()
        }
    }
 }

И называть его вместо обычного "windows.onload"

 addLoadEvent (FunctionToRunOnPageLoad);
 addLoadEvent (функция () {
 / * Больше кода, чтобы запустить на странице загрузки *
 }); 

Преимущества этот фрагмент кода ...
1. В первую очередь, это позволяет иметь несколько событий windows.onload, вызывается из отдельных частей кода, без overridding предыдущее определение
2. Это очень ненавязчиво. Это может быть помещен в файл с другими сценариями, либо в отдельном файле.
3. Это работает, даже если window.onload уже установлен.

Я думал, что это можно будет каракули, чтобы найти в Google, как много вы нам пользовательского интерфейса и сценаристы должны были бы сделать это на повседневной основе, то есть включить немного peice из PHP фрагмент кода (. PHP) в Smarty шаблона (. TPL). Я понял, что легче / популярных запросов вашей, еще более трудно найти точный ответ ... миллионов результатов поиска, но большинство из них отсылаются к "файл" включает в Smarty ..., который имеет следующий синтаксис:

{Include = файл "include / header.php"}

Это фактически включил файл нормально, но как текст, что я хотел было результатом включен файл. (Обратите внимание, выше, используется шаблон включает в файле шаблона). Наконец, с немного persiverance .... Я наткнулся на slighty изменение синтаксиса, который был ответом на мои требования ... так вот она ... если вы havn't нашел один уже

{Include_php файл = "include / header.php"}

Другой быстрый урок. Вот то, просто и красиво, используя силу CSS ... но было трудно concieve (и это, конечно, не мне), чтобы начать с. Добавление DropShadow, может быть peice пирога для многих из нас, используя некоторые инструменты для редактирования изображений, как Photoshop, Fireworks НФА и др.
Причина, почему я выбрала тени с помощью CSS является то, что, как правило, при создании дизайна страницы / HTML заявления, требования сохранить итерации. Я имею в виду, в существующий веб-сайт с большим количеством изображений, как те, отображающий Freinds списка или галереи изображений, трудно будет переработать весь груз изображений, которые уже были выгружены, чтобы добавить или удалить тени, для этого вопрос.
Так что если вы сделали немного вперед мышления при создании HTMLS добавить эти дополнительные подразделения или правило, ситуация такова, что у вас есть цикл логика создания этих икон / миниатюр в XSL, PHP. JAVA или любой другой программы / скриптовый язык, вы можете добавить его в любое время, то это просто вопрос о шоу и скрыть эти тени с помощью свойства CSS Display, в соответствии с клиентами постоянно меняющихся требований ... Я havn't сделать этот вид дальновидных до этого ... но ahev прямо сейчас!

В приведенном ниже примере, исходное изображение без теней и dropshadows применяются по мере необходимости! Кроме того, я пошел немного больше, используя приемы из моих предыдущих Тута (Well! это, вероятно, кратчайшие различные учебные материалы, так что оправдано только называя их "Тута" 'ы) об использовании CSS клип собственности на показать только

Исходное изображение

Результаты CSS DropShadow

Посмотреть демо | Скачать файлы исходного кода

Почему я хочу, чтобы это понимать?? Хамм ...!!

Большинство писателей CSS согласятся, что CSS клип собственности, вероятно, одним из самых неиспользованных свойств CSS. Это было так верно и для меня и был самый счастливый пренебрегать этим, пока я не начал изменения MooTools ДВА ручку (Pin) Slider Компонент (с Range Indicator) .

Существовал хорошее предложение от одного из компонентов пользователям изменять Slider Компонент использованием обрезанный Справочный изображения (по сравнению с переменной шириной деление), чтобы указать ползунка диапазона. Таким образом, пришло мое время, чтобы войти в удовольствие, но не-уставных (для меня конечно же) воды имущества клип CSS.

Ну! как трудно это может быть? Не так много на всех ... ДА и НЕТ. Синтаксис CSS собственности Клип довольно прямой, но смысл / usuage немного croocked. С памятью, как у меня, каждый раз, когда я сижу в переделку на мой Slider сценарий ... У меня есть tokeep возвращаясь к использованию этого клипа собственности, чтобы напомнить себе логику, которую я создал в мой сценарий .... Отсюда! думал пера его, в надежде вспомнить его будущем (а также в интересах тех, кто, кажется Поражает собственности клипа CSS)

Что такое CSS клип делать?

Клип является частью визуального модуля эффектов CSS 2.1. Проще говоря, его работа заключается в размещении видимое окно в верхней части объекта, который обрезается, поэтому обрезание изображений и создание миниатюр без создания дополнительных файлов (я уже поставил эту возможность для более эффективного использования в компоненте Slider )

Используя свойство клипа CSS, вы можете создать вырезку помощью формы прямоугольника. Как и многие другие свойства CSS (например, маржа, отступы и т.д.), используя прямоугольник, необходимо четыре координаты Top, Right, Bottom, Left (TRBL). Croocked природа этого свойства отражает, когда вы внимательно посмотрите, как клип вычисляет область отсечения, используя эти четыре координаты (посылает мозг в жеребьевке на некоторое время). Теперь, чтобы сбить вас с толку нижней начинается сверху, а правая начинается с левой стороны. . Вы видите, что я сказал? .... Таким образом, этот пост ...

Эта небольшая путаница может легко исчезнуть, с этим визуальным объяснение CSS Clip / прямоугольник собственности, как показано ниже!!

Требования CSS клип

Задача, которую мы начали это клип на следующем изображении Миниатюра на квадратный искать изображения (а также широкоугольные изображения)

Оригинальный Thumbnal / Image	Клип Требования к Sqaure Thumbmail

Результаты CSS клип

Посмотреть демо | Скачать файлы исходного кода

Этот вопрос мне в голову несколько раз, когда я работал на сайтах и ​​раньше, в котором используется, чтобы показать WordPress блогов или новый вид контента в некоторые части сайта / portal.Being новичок в PHP и вокруг WordPress, я продолжал procastinating он, думая, что "это не мое peice пирога". Наконец-то! Это требование вступило до моего носа, когда началась Diggin вокруг немного для ее решения.
Я был удивлен, обнаружив, что это действительно было легче, чем я на самом деле думал, что это было, чтобы отобразить список заголовков или к последнему сообщению любую другую страницу вне WordPress питанием раздел, используя только немного PHP и WordPress API .

Вот что нужно сделать: -
По причинам, объяснение, предположим, что ваш сайт http://www.inchembur.com/ и у вас есть раздел новостей на этом сайте на http://news.inchembur.com/ (который работает WordPress). Теперь требование показать последнее сообщение от http://news.inchembur.com/ на главной странице основного сайта, т.е. http://www.inchembur.com/index.php

Шаг 1: В вашем index.php добавить следующую часть кода, включить файл WordPress API. Вы можете добавить это в верхней части страницы вы хотите, чтобы после появиться на.

<? PHP
'WP_USE_THEMES' , false ) ; // Disbable use of WordPress Theme define ('WP_USE_THEMES, ложный) / / Disbable использование темы WordPress
require ('/ var / news.inchembur.com / WP-блоге-header.php'); / / Включить WordPress API
; // Get Latest Post query_posts ('showposts = 1'); / / Получить Последнее сообщение
>

В приведенном выше peice из включают в себя, мы получаем только одно последнее сообщение. если вы хотите попробовать несколько вариантов, не стесняйтесь, чтобы вырыть в, query_posts() документации .

Шаг 2: Теперь, в части Главная / Главная страница, на которой вы хотите показать последние WordPress сообщение от http://news.inchembur.com , используйте следующий код. Разумеется, не стесняйтесь объявление стиля подразделений, пролетов и классы в соответствии с вашими потребностями проекта.

Шаг 3: Существует нет Шаг 3 ... Thats, это ... все готово!

Как показывают конкретные записи / страницы, а не последнее сообщение: -
Это легко реализуется за счет изменения аргументов query_posts() включить идентификатор страницы или страницы пули

) ; query_posts ('page_id = 7');
) ; query_posts ("название страницы = о ');

или вы можете контролировать количество сообщений:
) ; query_posts (showposts = 3);

Иногда, чтобы сохранить pageweight вниз ... мы разбили наши сценарии на фрагменты ... Эти фрагменты JavaScript может быть загружен как и в случае необходимости (по событию или по нажатию на ссылку или кнопку и т.д.).

Загрузка Javascripts динамично прост и довольно прямо вперед, как показано ниже ...

= “text/javascript” > <Сценарий тип = "текст / JavaScript">
Функция loadNewScript (источник) {
Var S = document.createElement ('сценария');
s.setAttribute («типа», «текст / JavaScript");
s.setAttribute («SRC», источник);
document.body.appendChild (ы);
}
</ SCRIPT>

и вы можете по следующей ссылке вызова в любую точку тела, или вы можете иметь этот сценарий "OnLoad" самого документа ...

= “javascript:loadNewScript('myDynamicScript.js');” >Load Dynamic Script</ a > <A HREF = "javascript: loadNewScript ('myDynamicScript.js');"> Load Динамический сценарий </ a>

или

<body onload="loadNewScript('myDynamicScript.js');">

Если вы CSS человека, вы бы знали, боль в получении макеты рабочих крест-браузера. IE8 является еще одним ключом в работе для нас разработчики. Anywaz! если вы попали на этот вопрос, как я сделал вчера, когда ваш прекрасно работает CSS в IE7 (и ранее) и Firefox вдруг начали бросать истерики в IE8, попробуйте это ... Это хорошо, казалось, исправить мои проблемы на данный момент ....

Использование мета декларации, мы можем указать рендеринга мы хотели бы использовать IE8. Таким образом, чтобы заставить IE8 оказывать как IE7 ... вставьте следующий мета-тег в голову документа: -

<meta http-equiv="X-UA-Compatible" content="IE=7" />

По умолчанию IE Мета бы: -

<meta http-equiv="X-UA-Compatible" content="IE=8" />
которые сделают IE8 сделать страницу с помощью нового режима стандартов.

При необходимости, этот синтаксис может быть использован для размещения на других браузерах, как показано ниже:

<meta http-equiv="X-UA-Compatible" content="IE=8;FF=3;OtherUA=4" />

БОЛЬШЕ О ТИПЫ ДОКУМЕНТОВ:

Если вы еще не знакомы с подобного животного под названием "Doctype" ... вот некоторые быстро читать
Каковы ТИПЫ ДОКУМЕНТОВ? Что такое БРАУЗЕР причуды и строгий режим?
Установка DOCTYPE в XSL

Для более глубокого понимания ТИПЫ ДОКУМЕНТОВ, попробуйте посетить эти ссылки ...
A List Apart: Исправьте ваш сайт с правой DOCTYPE!
A List Apart: Beyond DOCTYPE: веб-стандартов, вперед совместимости и IE8

Примечание: Хотя многие из нас, HTML / CSS люди были без учета важности DOCTYPE decleration в наших документах, Установка правой DOCTYPE, как правило, ответ на самый крест вопросы обозревателя.

Reset CSS, / CSS являются установить количество элементов стиля для конкретного базового, который создает последовательность в различных браузерах.

Мы все были через кошмары написания кросс-браузерный CSS в. Поэтому, когда мы начинаем писать наш CSS, это практика, чтобы сбросить его первым удалить / сброс любого поперечного несоответствия браузера. Сброс CSS, просты несколько строк CSS, что вы начинаете с CSS, что дает вам четкую базу, чтобы начать строить свой на.

CSS сбрасывает, что я обычно предпочитаю использовать выглядит следующим образом

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
margin:0;
padding:0;
}
html {font-size: 76%;}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset, img {
border:0;
}

ол, ул {
Список стиле: нет;
}

h1, h2, h3, h4, h5, h6 {
Размер шрифта: 100%;
начертание шрифта: нормальный;
}

Сбросить размер шрифта в броузере
Также обратите внимание на сброс, который был применен в браузере размер шрифта в следующую строку ...

html {font-size: 76%;}

Выше CSS сбрасывает размер шрифта в броузере на 10 пикселей, и это дает возможность работать с относительными размерами шрифта (который каждый из важных соответствии WAI prespective)
Для, например, в следующем определении размера шрифта в диапазон установлен на 10 пикселей, что в paragarph установлен на 14 пикселей ...

span {font-size: 1em;}
p {font-size: 1.4em;}