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

Так уж сложилось, что в blogger нет поддержки нескольких языков. В других cms есть, а здесь разработчики почему-то посчитали, что пользователям не нужно делать блог одновременно на разных языках. Это, безусловно, очень плохо, и пользователям приходится искать обходные пути.

В интернет-магазинах, продающих какой-то товар, временами можно встретить демонстрацию товара в 3D, т.е. с возможностью покрутить мышкой изображение и рассмотреть предмет с разных сторон.

Вот такая флешка мне попалась в интернете, такая черная пантера-трансформер. Правда информация старая, как и размер флешки (всего-то 2 Гб), но пожалуй размер тут не так важен, когда можно просто сидеть играться с этим трансформером.

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

Допустим перед вами стоит задача создать прототип сайта для рекламы каких-то услуг или товара. К таким страницам последнее время все чаще применяют понятия лендинга, или лендинг страницы (от англ. landing page).

При заполнении брифа на создание сайта есть отдельный пункт - предполагаемый тип сайта. В сети Интернет уже существует множество сайтов, все они имеют различный вид, выполняют различные задачи. А какой же сайт нужен именно вам? Давайте попробуем разобраться какие типы сайтов бывают.

Flat дизайн (плоский дизайн) – один из основных трендов сегодня, как в сфере веб-дизайна, так и технологиях создания пользовательских интерфейсов. Из недавних примеров наиболее заметными будут: решительный шаг компании Microsoft в этом направлении, с ее Windows 8 и новый дизайн Google, с явной демонстрацией желания углубиться в минимализм.

Бриф представляет из себя анкету с вопросами, ответы на которые определяют задачу разработки веб-сайта. Эта анкета содержит вопросы касаемо продукции/услуг компании, целей веб-проекта, типа сайта, а также дизайна и функциональности ресурса.

Создание сайта - это достаточно формализуемый и управляемый процесс с предсказуемым результатом, состоящий из нескольких последовательных этапов, каждый из которых является в определенной степени независимым.

Bootstrap — мощный и элегантный, интуитивно понятный фронт-енд фреймворк, разработанный командой Twitter. Это open-source CSS и JavaScript среда разработки современных интернет проектов. Относительно молодая платформа веб-разработки, безусловно заслуживающая изучения, предлагает множество полезных вещей: стили компонентов интерфейса (заголовки, вкладки, навигационные панели…) и HTML-элементов (кнопоки, формы, шрифты…), адаптивные queries, JS-плагины и т.д. Основанный на принципе «Сначала мобильные» (Mobile first), фреймворк изначально был задуман для упрощения и ускорения процесса разработки сайтов. Сегодня BootStrap с размахом используется на веб пространстве рунета. Во многих случаях, темы на бутстрап это идеальный вариант для тех, кого интересуют шаблоны адаптивного дизайна и тех, кому необходимо создать приличный современный сайт с минимальными затратами. Правильно подобранный BootStrap HTML шаблон не разочарует того, кто решил использовать его под коммерческий проект или того, кому нужен простой бутстрап шаблон (…ищущим bootstrap шаблоны бесплатно), так как благодаря легко настраиваемому инструментарию всегда есть возможность для внесения изменений или доработки под свои нужды. Замечательная особенность бутстрап шаблонов в том, что самостоятельно разобраться и осуществить это под силу даже тому, у кого нет большого опыта в программировании и оформлении сайта. К тому же всегда можно натянуть BootStrap на любую CMS, например интегрировав его компоненты в WordPress шаблон. Профессионалов бутсраперов в этом фреймворке привлекает возможность повторно использовать наработки, создавая при этом приличного вида проекты.

В этом посте собраны отобранные бесплатные адаптивные BootStrap HTML шаблоны из различных интернет-источников.

Stylish Portfolio

A stylish Bootstrap portfolio theme.

Creative

A one page creative theme.

Free Business Responsive Bootstrap Template

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

Sprint

Этот шаблон с профессиональной HTML5/CSS3 разметкой можно использоваться для различных сайтов. Наиболее интересна цветовая схема шаблона. Сочетание зеленого, черного и белого цветов, вместе с черно-белыми фотографиями позволят выделиться представленным проектам. Используя зеленый цвет для иконок в разделе сервисов, вы действительно сделаете их и ваши указанные «ОТЛИЧИЯ» заметными. Еще один оригинальный элемент дизайна: светящийся индикатор текущего положения в виде зеленой линии с маленьким шариком. Этот простой шаблон удачно разделен на 5 секций — начиная с галереи, размещенной в пределах «первого экрана» и заканчивая формой контактов.

Progressus – elegant agency/business template

Progressus – привлекательный адаптивный бизнес шаблон, основанный на Bootstrap  – HTML/CSS фреймворке. 7 макетов страниц для основных задач, стильный адаптивный дизайн, выполненный исключительно качественно от начала до конца.

Коллекции

50+ бесплатных адаптивных BootStrap HTML-шаблонов
http://seo-design.net/templates/free-responsive-bootstrap-html-templates

Bootstrap portfolio themes and templates
http://startbootstrap.com/template-categories/portfolios/

Условные теги позволяют отображать элементы только на определённых веб-страницах, не задействовав весь блог в целом. И в отличии от свойства display: none;, не просто их скрывают, а удаляют из исходного кода.
Для того, чтобы понять что такое условные теги, я приведу простой пример

<b:if cond='погода == дождливая'>
  я остаюсь дома
<b:else/>
  иду гулять
</b:if>

Что можно интерпретировать как: "Если (b:if cond) погода дождливая, то я остаюсь дома, иначе (b:else) иду гулять".

Когда мы вместо равенства указываем !=, то получается наоборот:

<b:if cond='погода != дождливая'>
  я остаюсь дома
<b:else/>
  иду гулять
</b:if>

"Если погода недождливая, то я остаюсь дома, иначе иду гулять".

Может быть как больше ситуаций (несколько раз употребляться b:else), так и только одна:

<b:if cond='погода == дождливая'>
  я остаюсь дома
</b:if>

Обязательно должно присутствовать окончание условия </b:if>.

Наиболее полезные условия Blogger

Для Blogger есть много разных условий, но наиболее интересными является тип групп страниц (data:blog.pageType). Он может принимать пять значений:

• Cтраницы

  <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

• Сообщения

  <b:if cond='data:blog.pageType == &quot;item&quot;'>

• архив

  <b:if cond='data:blog.pageType == "archive"'>

• 404 ошибка

  <b:if cond='data:blog.pageType == &quot;error_page&quot;'>

• остальные страницы, в том числе Главная, ярлыки и навигация

  <b:if cond='data:blog.pageType == "index"'>

  • отдельно для ярлыков

    <b:if cond="data:blog.searchLabel" >

  • отдельно для Главной

    <b:if cond='data:blog.url == data:blog.homepageUrl'>

Чтобы задать условие одной конкретной странице используем data:blog.url:

<b:if cond='data:blog.url == "http://адрес_вашей_строницы/"'>

При этом http://адрес_вашей_строницы/ должен быть с доменом .com (см. про региональные домены в Blogger):

http://zarabotokiinternet.blogspot.ru/2011/02/uslovnye-tegi-v-blogger.html
http://zarabotokiinternet.blogspot.com/2011/02/uslovnye-tegi-v-blogger.html

Другие более сложные выражения (+, -, <, >, <=, >= и b:elseif, b:switch, b:case, b:eval и b:with) не так часто имеют место быть, но более функциональны. Если вы справитесь и с ними, то можно смело изучать JavaScript :)

Разный фон на разных страницах

Рассмотрим как сделать фон статистических страниц отличный от основного.
В шаблоне перед </head> добавляем:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style>
body {
background: url(адрес_изображения); 
}

.body-fauxcolumns .cap-top {
background: transparent;
}

.widget ul li, .widget #ArchiveList ul.flat li {
border-top: none;
}
</style>
</b:if>

Строку .widget ul li, .widget #ArchiveList ul.flat li {border-top: none;} нужно указывать не для всех шаблонов, а только для тех, у кого есть пунктирные линии - разделители в гаджетах.

Как убрать с Главной конкретную страницу в Blogspot

Каждое сообщение имеет свой id. Его можно узнать на странице публикации поста в строке браузера
В шаблоне есть такой участок кода:

<b:includable id='post' var='post'>
........содержание........
</b:includable>

его мы заменяем на

<b:includable id='post' var='post'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.id != &quot;1873004851645451173&quot;'>
........содержание........
</b:if>
<b:else/>
........содержание........
</b:if>
</b:includable>

1873004851645451173 - это id из скриншота выше.
Поскольку мы поставили условие data:blog.url == data:blog.homepageUrl, то страница, уйдя с Главной, будет видна по ссылке "Предыдущие". Если определить условие как data:blog.pageType == "index", то мы не увидим сообщение ни на Главной, ни по ссылке "Предыдущие", ни на страницах ярлыка, таких как http://shpargalkablog.ru/search/label/feed. А если — data:blog.pageType != "item", то пост найдём лишь по его адресу, например, http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html.


Источник: http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html

Полезные ссылки:

• Теги виджетов для дизайна
  https://support.google.com/blogger/answer/46995?hl=ru
• Выражения в тегах шаблонов
  https://support.google.com/blogger/answer/6214580?hl=ru&ref_topic=12449
• Layouts Data Tags
  https://support.google.com/blogger/answer/47270

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

В интернете можно найти множество дизайнов (шаблонов) для сайтов. Есть шаблоны платные, есть бесплатные, и много попадается шаблонов, достойных внимания. О том, как такие шаблоны использовать в блоге, созданном с использованием технологии blogger, читем в этом посте.

Библиотека поддерживает разные языки программирования и стили разметки страниц. Для этого используется класс brush  с разными алиасами, вот полный список алиасов:

actionscript3
bash, shell
c-sharp, csharp
cpp, c
css  
delphi, pas, pascal
diff, patch
groovy
js, jscript, javascript
java
jfx, javafx
perl, pl
php
plain, text
ps, powershell
py, python
rails, ror, ruby
scala
sql
vb, vbnet
xml, xhtml, xslt, html, xhtml

При отображении html-тегов придется заменять символ "<" на его код "&lt;", а символ ">" на код "&gt;". Чтобы не делать эти замены вручную, была создана отдельная утилита: http://code-highlight.appspot.com/

Итого все очень просто, удобно и красиво.

Все из вас, наверно, мечтают сделать свои или клиентские сайты более лаконичными и привлекательными.

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

Одна из возможностей, визуально улучшить читаемость текстов – это подключение сторонних шрифтов. Ведь все наверно знают, какая “бедная” стандартная коллекция кириллических шрифтов в Windows, которая отвечает за отображение текста в браузере.

Стандартные шрифты:

Cufon и @font-face

Ранее я уже писал про Cufon, с помощью которого можно подключать не стандартные шрифты к сайту. А сейчас рассмотрим более простой способ – это правило @font-face в css и подгрузкой самого шрифта с хранилища шрифтов Google Fonts.
Вся разница между Cufon и @font-face в том, что первый использует js для эмулирование шрифта и прорисовывает символы своими средствами, а @font-face подгружает сам шрифт на компьютер посетителя и браузер уже использует его для отображения текста.

Использование Google Fonts на сайте

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

Выбор шрифта в репозитории

Чтобы не пугались, объясню – репозиторий это хранилище, но по-буржуйски. Итак, заходим на http://www.google.com/fonts/ и смотрим для себя подходящий шрифт:

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

• Word – отображение нескольких букв. В таком режим удобно сравнивать сразу много шрифтов и смотреть как выглядят конкретные символы;
• Sentence – отображение в виде одного предложения;
• Paragraph – выводиться большой кусок текста, который позволит наглядно сравнивать шрифт уже в самом тексте;
• Poster – отображаются заголовки, такой способ сравнения удобен для подбора шрифта, который будет использоваться в заголовках.

Я выбрал шрифт Cuprum и добавил его в свою коллекцию шрифтов:

Подключение шрифта к сайту

После этого, на панели Collection, которая находиться внизу, заходим во вкладку Use, которая отвечает за использование шрифтов из вашей коллекции. Тут вы сразу увидите, что гугл показывает на сколько ухудшится скорость загрузки страницы:
Ниже находится панель с выбором “типа отображения”, выбираем Latin (latin) и Cyrillic (cyrillic), что даст нам возможность отображать как латинские, так и кириллические буквы:
После этого переходим к третьему пункту на этой странице, а именно к самому подключению. Google предлагает нам три варианта встраивания своих шрифтов – через js, стандартный способ через подключение в <head> и @import в css файле. Я использую последний способ.
Открываем свой файл css и прописываем строчку, которую нам предоставил google:

Всё, шрифт от Google Fonts мы подключили к сайту, теперь как его использовать?

Использование в CSS

Всё достаточно просто, после того, как мы подключили шрифт через @import, нам надо прописать стандартные инструкцию для тех классов и индификаторов, у которых будет использоваться наш новый шрифт. К примеру:
После всех этих манипуляций, у вас будет выводиться заголовки с новым, не стандартным шрифтом.