Последние записи.

Забытые CSS селекторы

Опубликовано 20 Май 2010 ¬ 19:44h.ZaktusНет комментариев »

Перевод статьи: Forgotten CSS selectors

Каждый, кто использовал CSS хоть какое-то время, вероятно, были разочарованы отсутствием поддержки селекторов CSS 2.1 в Internet Explorer 6. Есть немало случаев, когда такой селектор позволяет нам добраться до необходимых элементов во всех нормальных браузерах, но чтобы это работало в IE 6, приходится добавлять класс или атрибут идентификатора в код HTML.

Тем временем, рыночная доля IE 6 теперь, наконец-то, на уровне, где мы, как разработчики можем сказать, что если сайт «поддерживает» IE 6, не означает «Looking Pixel Perfect». К счастью, все больше и больше клиентов это также понимают. IE 7 существует уже более трех лет, да и 9-й уже не за горами, поэтому я думаю, пришло время возродить эти CSS селекторы, которые мы никогда не использовали, только потому, что IE 6, не понимает их.

Здесь приводится краткое описание некоторых из наиболее полезных «забытых» CSS 2.1 селекторов.

Селектор потомков

Указывает на непосредственных потомков состоит из двух или более селекторов разделенных знаком «больше» – «>»

Следующее правило правило будет применено для всех элементов strong, которые являются непосредственными потомками элемента p:

p > strong {color:#a00;}

Cелектор соседей одного уровня

Такой селектор состоит из двух простых селекторов, разделенных знаком плюс –  »+» и указывает на элемент являющийся соседом первого селектора.

Следующее правило выбирает элементы p, которым непосредственно предшествует элемент ul :

ul + p {color:#a00;}

Селектор атрибутов

Как видно из названия,  позволяет выбрать элементы основываясь на наличии или значении их атрибутов. Всего есть четыре способа их применения, но я считаю, два из них более полезны, чем другие:

[att]

Позволяет выбрать элементы, у которых есть атрибут att, не зависимо не его значения.  Следующее правило применяются ко всем элементам, которые имеют атрибут title:

a[title] {color:#a00;}

[att=val]

Элементы, значение атрибута att со значением именно val. Следующий пример, селектор для всех элементов input, которые имеют атрибут type со значением «text»:


input[type=text] {color:#a00;}

:first-child

Псевдо-класс :first-child соответствует элементу, который является первым дочерним элементом другого элемента. Следующее правило применяется для первого элемента li во всех упорядоченных списках (ol) в документе:

ol li:first-child {color:#a00;}

:hover и :focus

Большинство людей используют динамический псевдо-класс :hover для управления оформлением ссылок, когда над ними находится курсор мыши. Однако его также можно использовать и для каких-либо других элементов, позволяя в некоторых ситуациях подавать полезные визуальные сигналы. Например, изменять цвет фона строки таблицы при на ведении мыши:

tr:hover {background:#eee;}

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

Динамический псевдо-класс :focus применяется для таких элементов, как ссылки и контролы форм, которые могут принимать фокус ввода.

Следующие правило применяются к элементу textarea, который имеет фокус:

textarea:focus {
color:#000;
background:#ffc;
}

Примечание: :focus не работает в IE 7.

Селектор множественных классов

Вы можете присвоить несколько имен классов элементу, и Вы можете написать селекторы для элементов, которые имеют несколько классов. Следующее правило будет соответствовать элементам p, которые имеют в своем списке имен классов как «info», так и «error»:


p.info.error {
color:#900;
font-weight:bold;
}

Помните, что IE6 будет искать только последний класс в селекторе, так что он будет применять это правило для всех элементов p, которые имеют класс "error". Имейте это в виду при использовании селекторов множественных классов.

Чистота разметки c помощью концепции прогрессивного улучшения

С помощью этих селекторов, можно сделать разметку HTML чище, поскольку они позволяют обойтись гораздо меньшим количеством необходимых классов, а в не которых случаях даже отказаться от использования JavaScript, что ранее было необходимо только лишь для достижения визуальной эквивалентности в IE6. Я не говорю, что Вы должны "прекратить поддерживать" IE6, это может касаться только некоторых вещей, чтобы не выглядеть совершенным на уровне веб-браузера, которому скоро будет уже девять лет. Кроме того, разве веб-сайты должны выглядеть одинаково в любом браузере?

Новости

Камеры ДПС

Опубликовано 24 Ноябрь 2009 ¬ 10:48h.ZaktusКомментарии: 2 »

Автоматические камеры фиксации нарушений ПДД на карте Воронежа

камеры фиксации нарушений ПДД

камеры фиксации нарушений ПДД

Просмотреть Камеры ДПС на карте большего размера

Разное

Особенности использования тега title в Master Pages

Опубликовано 7 Апрель 2009 ¬ 15:28h.ZaktusНет комментариев »

Есть несколько особенностей, которые необходимо понимать, когда имеешь дело с тегом заголовка (<title></title>) в мастер-страницах (master pages) используя Web Forms и ASP.NET MVC. Они связаны с использованием контрола  HtmlHead, больше известного как  <head runat="server" /> .

Первая особенность связана с  месторасположением ContentPlaceHolder, который находится  внутри тега заголовка. Именно так сделано в стандартном шаблоне  в ASP.NET MVC:

<%@ Master ... %>
<html>
<head runat="server">
  <title>
    <asp:ContentPlaceHolder ID="titleContent" runat="server" />
  </title>
</head>
...

Это позволяет нам в задавать тег заголовока из любого места на странице:

<asp:Content ContentPlaceHolderID="titleContent" runat="server">
  Home
</asp:Content>

Но что произойдет, если  определить постоянную часть заголовка в мастер-странице? Например, необходимо добавить к заголовку всех стрниц  суффикс «, – MySite».  Если сделать  так:

<%@ Master ... %>
<html>
<head runat="server">
  <title>
    <asp:ContentPlaceHolder ID="titleContent" runat="server" /> - MySite
  </title>
</head>
...

В результате отображения этой страницы мы увидим, что – MySite отсустствует.  Это,  является «индивидуальной оссобенностью» (quirk) HtmlHead контрола и происходит потому, что тег заголовка  в этом контроле является самим контролом, что в свою очередь связано с работой  метода AddParsedSubObject. Фактически, содержимым HtmlHead могут быть только другие контролы.

Исправить это  довольно просто.  Добавить свой текст в LiteralControl :

<%@ Master ... %>
<html>
<head runat="server">
  <title>
    <asp:ContentPlaceHolder ID="titleContent" runat="server" />
    <asp:LiteralControl runat="server" Text=" - MySite" />
  </title>
</head>
...

Вторая особенность связана с каким  HeaderControl на выходе будет действительно валидная HTML разметка.

Если оставить <head runat=»server»> </ head> пустым,  получим уведомление о пустом теге <title> из-за того, что  во всех  дочерних контролах не обнаруживается HtmlTitle конторола. Это может происходить при попытке использовать ContentPlaceHolder для установки содержания тега заголовка. Например так:

<%@ Master ... %>
<html>
<head runat="server">
  <asp:ContentPlaceHolder ID="headContent" runat="server">
    <title>Testing</title>
  </asp:ContentPlaceHolder>
</head>
...

Такой подход является наиболее аккуратным, поскольку позволяет не только установить заголовок страницы из любого места, но и вывести любое  другое содержание в <head>.
Однако, посмотрев на код, получаемый на выходе, увидим, что там оказывается два тега <title>, один из которых пустой.

Принимая во внимание то, о чем упоминалось выше, причина становится очевидной. Она в HtmlHead контроле, который содержит тег title в дочернем контроле. Не обнаружив заголовка, добавляется пустой.

Теперь, понимая, как работает контрол HtmlHead, что он позволяет размещать только контролы внутри себя, в то же время вставить текст, можно используя ContentPlaceHolder. Хоть это и выглядит, как тег title внутри ContentPlaceHolder, это не HTMLTitle контрол. Это просто текст, а HtmlHead контрол не будет его разбирать.

Именно поэтому, как правило, можно использовать следующий код в мастер-странице:

<%@ Master ... %>
<html>
<head runat="server">
  <title><asp:ContentPlaceHolder ID="titleContent" runat="server" /></title>
  <asp:ContentPlaceHolder ID="headContent" runat="server">
  </asp:ContentPlaceHolder>
</head>
...
Источник: TipJar: Title Tags and Master Pages
.NET, , ,

Отображение дерева (tree view) с помощью ASP.NET MVC Framework

Опубликовано 18 Март 2009 ¬ 12:36h.ZaktusКомментарии: 2 »
Перевод статьи:Rendering a tree view using the MVC Framework

Дерево (tree view) – это прекрасный метод отображения вложенных и древовидных структур данных. Например:

Дерево

Создадим HTML helper, который будет предствлять древовидную структуру, как вложенный неупорядоченный HTML список. Начнем с интерфейса для представления узла дерева. Этот интерфейс назовем IComposite, в соответсвии с шаболоном проектирования компановщик.

public interface IComposite<T>
{
   T Parent { get; }
   ISet<T> Children { get; }
}

Теперь убедимся, что наша сущность реализует этот интерфейс на простом примере:

public class CompositeThing : IComposite<CompositeThing>
{
  public CompositeThing()
  {
      Children = newHashedSet<CompositeThing>();
  }
  public string Name { get; set; }
  public CompositeThing Parent { get; set; }
  public ISet<CompositeThing> Children { get; set; }
}

Теперь нам необходимо получить граф объекта из базы данных. Как это сделать, может являться темой для отдельной статьи, но наиболее приятный и простой путь это использование LINQ-to-SQL и NHibernate. И так, получив данные, можно передать их для последующего отображения:

<%= Html.RenderTree(ViewData.Model.CompositeThings, thing => thing.Name) %>

Код метода RenderTree, расширяющего HtmlHelper:

public static class TreeRenderHtmlHelper
{
  public static string RenderTree<T>(
     this HtmlHelper htmlHelper,
     IEnumerable<T> rootLocations,
     Func<T> locationRenderer)
       where T : IComposite<T>
    {
       return new TreeRenderer<T>(rootLocations, locationRenderer).Render();
    }
}
public class TreeRenderer<T> where T : IComposite<T>
{
   private readonly Func<T, string> locationRenderer;
    private readonly IEnumerable<T> rootLocations;
    private HtmlTextWriter writer;
    public TreeRenderer(
        IEnumerable<T> rootLocations,
        Func<T, string> locationRenderer)
    {
        this.rootLocations = rootLocations;
        this.locationRenderer = locationRenderer;
    }
    public string Render()
    {
        writer = new HtmlTextWriter(new StringWriter());
        RenderLocations(rootLocations);
        return writer.InnerWriter.ToString();
    }
    /// <summary>
    /// Рекурсивный обход дерева с выводом иерархии из элементов UL/LI
    /// </summary>
    /// <param name="locations"></param>
    private void RenderLocations(IEnumerable<T> locations)
    {
        if (locations == null) return;
        if (locations.Count() == 0) return;
        InUl(() => locations.ForEach(location => InLi(() =>
        {
            writer.Write(locationRenderer(location));
            RenderLocations(location.Children);
        })));
    }
    private void InUl(Action action)
    {
        writer.WriteLine();
        writer.RenderBeginTag(HtmlTextWriterTag.Ul);
        action();
        writer.RenderEndTag();
        writer.WriteLine();
    }
    private void InLi(Action action)
    {
        writer.RenderBeginTag(HtmlTextWriterTag.Li);
        action();
        writer.RenderEndTag();
        writer.WriteLine();
    }
}

Результат работы метода в HTML выглядит так:

<html>
<head>
    <title>Tree View</title>
    <link href="jquery.treeview.css" rel="stylesheet" type="text/css" />
    <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
    <script src="jquery.treeview.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
            $("#treeview ul").treeview();
        });
    </script>
</head>
<body style="font-family : Arial; ">
    <h1>
        Tree View
    </h1>
    <div id="treeview">
        <ul>
            <li>Root
                <ul>
                    <li>First Child
                        <ul>
                            <li>First Grandchild</li>
                            <li>Second Grandchild</li>
                        </ul>
                    </li>
                    <li>Second Child
                        <ul>
                            <li>Third Grandchild</li>
                            <li>Fourth Grandchild</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>

В приведенном примере используется замечательный плагин для JQuery: jQuery.treeview для отображения свернутого дерева с кнопками для разворачивания.

.NET, ,

О кризисе и рекламе

Опубликовано 17 Март 2009 ¬ 19:35h.ZaktusКомментарии отключены

Волна кризиса уже докатилась до СМИ, рекламных агентств и студий. Знакомые из нескольких деловых изданий уже вторую неделю говорят о снимающихся с размещения клиентах. И у нас пара потенциальных заказчиков со словами «кризис, кризис» решили «временно приостановить». В добрый путь, удачи вам и процветания вашему бизнесу.

Что происходит

Сперва «где-то там» грянул кризис. Банки сокращали объемы выдаваемых кредитов. Инвесторы выводили свои деньги. В результате крупные компании, чье развитие зависело от инвестиций и заемных средств, начали затягивать пояса.

Скажем, хотел банк такой-то заказать себе в офис новый интерьер, мебель и компьютеры, а теперь на это денег нет. В результате не получают заказ компании поменьше: архитекторы, поставщики оргтехники, поставщики мебели, курьеры, транспортныекомпании и т.п.

Компания поменьше не продала банку мебель, следовательно, не купила мебель у оптовика. Тот оптовик остался без какой-тосуммы денег, но с мебелью на складе. За аренду склада надо платить, а мебель стали покупать значительно меньше. И вот этот оптовый поставщик мебели решает, раз денег стало меньше, войти в режим экономии. И режет затраты. И не он один.

Компании начинают сокращать штаты и разные бюджеты, не только рекламные. Откладываются ремонты, переносятся мероприятия, задерживаются зарплаты, отменяются премии, замораживаются проекты, снимаются дотации на питание, перестают выдаваться полисы ДМС. В кулерах заканчивается вода, в принтерах и туалетах  — бумага.

Что делают рекламодатели

Что касается рекламных бюджетов, то здесь есть две заметные невооруженным глазом тенденции (наверное, для понту надо было бы использовать модное ныне слово «тренд», но я оставлю это балаболам из сетевых рекламных агентств).

Одни компании всячески урезают свои рекламные бюджеты. Почему же они так делают, ведь реклама приводит новых клиентов, приносит деньги в фирму? Все просто: эти руководители, на самом деле, не верят в свою рекламу. Они не считают, что их реклама приносит им деньги. И тратились на нее только потому, что Вася-конкурент тоже давал рекламу, а Миша-продажник откатывал 10%.

В 1998 году многие компании сократили свои рекламные бюджеты. С тех пор о них ничего не слышно.

Другие компании, напротив, используют свой шанс и становятся активнее. Да, им тоже приходится пересматривать какие-то свои расходы. Например, вместо покупки футбольного клуба или спонсирования в поддержку голодающей Антарктиды компания наймет хороших подрядчиков (а не очередное сетевое РА, которое сделает очередной бессмысленный «креативный календарь») и проведет грамотную рекламную кампанию (а не разместится там, где откатят больше).

Вот теперь смотрите, что получается: одни компании исчезают из поля зрения потенциальных клиентов, демонстрируя отрасли, как плохи у них дела. Другие компании, напротив, используют свой шанс и становятся гораздо заметнее.

Как вы думаете, кто из них переживет кризис? Те, о которых ничего не слышно, или те, которые стали более известными среди своих потенциальных клиентов?

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

Неправильная реклама, наоборот, сожрет последнее. Например, нет никакого смысла делать «полноценный сайт за 100 баксов» по объявлению на столбе — он ничего не продаст, но только покажет, как все плохо в конторе. Нет никакого смысла заказывать «рекламный модуль за 50 баксов» у «дизайнеров» из соседней типографии.

Сейчас вам, как никогда раньше, нужна хорошая реклама.

Что будут делать студии и рекламные агентства

Тут тоже есть две тенденции. Сперва, конечно, множество контор запаникует и займется демпингом. Долго работать на грани себестоимости они не смогут и начнут закрываться.

С одной стороны, спрос на услуги студий и агентств будет сокращаться. Но, с другой стороны, путем естественного отбора сократится и предложение.

Куда пойдут те, кто осознает потребность в хорошей рекламе, профессионально оформленном фирменном стиле, грамотно сделанном сайте? Ясное дело, не в подвалы, в которых студенты второго курса за 100 баксов в месяц мучаются над «недорогими, но креативными логотипами» и «доступными, но эксклюзивными сайтами».

Они пойдут в компании, которые успели зарекомендовать себя, наработали известность, портфолио и рекомендации клиентов, а цены назначали без оглядки на конкурентов и возгласы «а чего так дорого». Кстати, к нам больше всего приходят именно по рекомендациям.

Кстати, и для студий в кризисе тоже есть позитивные моменты. На рынке труда появится множество рабочих голов и рабочих рук, количество вакансий чуть уменьшится, а предложение возрастет.

И, совершенно точно, работать придется напряженнее. Нам наша работа нравится, поэтому мы этого не боимся.

Каждый раз, когда вам будут говорить «кризис, кризис», показывайте эту статью! Мы хотим, чтобы наши коллеги продавали больше и дороже, а не устраивали губительные ценовые войны. Тогда мы сможем продавать еще больше и дороже. Удачи, сил и решительности использовать новые шансы.

 

источник

Разное, ,

Алгоритм преобразует алгоритм!

Опубликовано 2 Январь 2009 ¬ 20:18h.ZaktusКомментарии отключены

При программировании на delphi или Паскале иногда попадаются задачи, которые трудно «втиснуть» в стандартные конструкции языка. А решение лежит совсем рядом – в теории конечных автоматов. Мы не будем залезать в дебри, а просто покажем как это делается.

Автор заранее просит у читателя прощения за то, что в тексте статьи используются блок-схемы. Это не модно сейчас, однако есть случаи, когда все-таки стоит их использовать. Рассуждения об алгоритмах – как раз такой особый случай.

(далее…)

Разное, ,

Доступ к MasterPage из страницы ASPX

Опубликовано 25 Август 2008 ¬ 11:10h.ZaktusКомментарии отключены

Часто приходится в своей работе пользоваться MasterPages и решил я поделиться тем, как можно обращаться из ContentPlaceHolder‘a к MasterPage.

Например, на MasterPage находится CheckBox, к которому мы хотим обратиться: снять пометку, или, наоборот – поставить. Вот его код в Site.master:

<asp:CheckBox ID=»chkVideo» runat=»server» CssClass=»chkText» Text=»только с видео» EnableViewState=»False» Checked=»True» />

В Site.master.cs нужно поместить следующий код:

public bool MyChkVideo
{
get
{
return chkVideo.Checked;
}
set
{
chkVideo.Checked = value;
}
}

А в aspx в страницу, сразу после

<%@ Page Language=»C#» MasterPageFile=»~/Site.master» AutoEventWireup=»true» CodeFile=»Search.aspx.cs» Inherits=»Search» %>

строчку

<%@ MasterType VirtualPath=»~/Site.master» %>

Теперь к элементу checkbox можно обратиться из MasterPage! В aspx.cs, через конструкции:

bool blnChkAuto = Master.MyChkAuto;
или Master.MyChkAuto = false;

Точно так же, можно обращаться к любым другим контролам на MasterPage.

.NET, , ,

Установка WordPress не в корневую директорию

Опубликовано 17 Июнь 2008 ¬ 17:17h.ZaktusКомментарии отключены

Итак, я установил себе на хостинг WordPress. Установка прошла на ура в директорию ./wordpress . Возник вопрос: как сделать перенаправление, что бы блог откликался на имя http://zaktus.net, а не http://zaktus.net/wordpress ?

Ответ был найден быстро в виде статьи, перевод которой, снабженный скриншотами , я здесь привожу:

Многие люди хотят, чтобы вызов WordPress , осуществлялся из корня сайта (например: http://example.com), но не хотят захламлять корневую директорию файлами WordPress-а. WordPress позволяет этого добиться с помощью несложных манипуляцией.

Для этого необходимо:

  1. Создать директорию (например ./wordpress). Если Вы только начинаете устанавливать WordPress, то туда можно сразу скопировать все файлы, в этом случае шаг 6 пропускаем.
  2. Открыть панель Настройки (кнопка переключения расположена справа-вверху).
    Панель
  3. В поле Адрес WordPress (URL) поменять на новое значение. Например, было http://example.com стало http://example.com/wordpressИзменение адреса WordPress
  4. В поле Адрес блога (URL) указываем корневой адрес адрес сайта (http://examle.com).
  5. Сохраняем изменения нажав на кнопку «Сохранить изменения» (если после этого вы получите сообщение об ошибке, ничего страшного, это нормально для данного этапа).
  6. Переносим все файлы WordPress-а в новое место (Адрес WordPress). Если WordPress был сразу установлен не в корень этот шаг можно пропустить.
  7. Скопировать фпйлы index.php и .htaccess из директории WordPress в корень сайта (Адрес блога).
  8. Открыть файл index.php в текстовом редакторе.
  9. Внести следующие изменения и сохранить файл. Поменять строчку:
    <em><strong>require('./wp-blog-header.php');</strong></em>
    на следующее:
    <strong>require('./wordpress/wp-blog-header.php');</strong>
  10. Залогиниться по новому адресу: http://example.com/wordpress/wp-admin/.
  11. Теперь, надо обновить настройки постоянных ссылок (ЧПУ), для чего открывает соответствующий пункт Постоянные ссылки (ЧПУ) в меню панели Настройки. WordPress автоматически обновит файл .htaccess если у него есть парва. Если WordPress не сможет получить доступ на запись файла .htaccess, он покажет правила для реврайта, которые будет необходимо внести самостоятельно в файл .htaccess (расположенный там же, где файл indep.php.)

Удачи.

wordpress,