Какая новость! Думаю ,многие уже слышали ее. Яндекс почта добавила несколько новых языков. Ура товарищи, я не мог не поделиться с вами такой новостью. +5 новых языков – казахский, белорусский, армянский, грузинский и румынский.
Отлично. Вроде бы все отлично и яндекс делает все правильно – расширяет свои границы пользователей, но …
Давайте обратим на перевод. Во-первых, в казахском языке много спорных моментов – факт. Картинки – сурет или фото. Стоило ли переводить слово «деньги» и т.д.
Это ладно, сейчас мы откроем для себя новые правила.
Давайте, откроем виртуальную клавиатуру казахского языка.
Отлично? А вот вам задача: найдите эти буквы: ВЭФЬЦһ.
Вот так вот идет завоевание новой аудитории )). Конечно, мы должны понимать, что это тестирование и будет много ошибок, но извините меня, крупнейшая поисковая система выдает порой такое.
В общем, удачи яше и пускай исправляются. Надеюсь в других языках нет таких случаев.
Приветствую всех, любителей создавать сайты самостоятельно. Начинается новая серия полезных уроков. По названию вы поняли, что мы будем создавать шаблон для CMS Joomla версии 2.5, т.е. последней актуальной версии.
В-первую, очередь мы будем использовать готовый html шаблон, из которого сделаем шаблон для джумла. (скачать искодники можно в конце статьи) Если вы хотитесвой скачайте в интернете по запросам: «скачать шаблон на html5», «бесплатный html5 шаблон» и т.д. Советую использовать html5.
Также вы можете заказать дизайн и сверстать по мои урокам верстки сайта с нуля. А затем уже перейти к созданию непосредственно шаблона. Кстати, таким способом можно зарабатывать. :neutral:
Хватит слов. Перейдем к структуре уроков. Серия уроков следующая:
Название шаблона регистр зависимое. Мы с вами рассмотрим структуру шаблона для сайта joomla.
Общая минимальная (базовая) структура выглядит следующим образом:
css и images – это папки для отображения стилей и картинок соответственно. Их количество зависит от Вашей фантазии и дизайна сайта;
index.php основной файл шаблона – Главная страница сайта;
templateDetails.xml – информационный файл – содержит данные о шаблоне, его авторе, всех файлов в шаблоне.
Но обычно структура простого шаблона такова.
Папка html для настройки красоты и структуры модулей, компонентов.
Файл favicon.ico для иконки сайта.
template_preview.png и template_thumbnail.png – превью и картинка шаблона, для отображения в «Менеджере шаблонов» в админке Joomla. В версии 1.5 была только одна картинка.
Это основные/базовые файлы шаблона joomla 2.5. Конечно, есть и другие, но сейчас в этом нет необходимости. После базового курса рассмотрим все более углубленно.
Если у вас какие-нибудь предложения по данным урокам, можете отписаться в комментариях, либо в специально созданной ветке в теме форума joomlaforum.kz.
Надеюсь, информация была полезной для вас. Не забываем делиться с друзьями и подписываться на блог. :-?
И вот, наконец, для самых ленивых верстальщиков был придуман специальный плагин для Фотошопа, который конвертирует стили в css файл.
Уже вижу довольные лица. Если вам интересно, что же это за плагин и что он из себя представляет, можете взглянуть на видео в конце статьи. А также посетить сайт плагина.
Отметим, что в коде используется css 3. Пример кода можно посмотреть здесь. (то что рисуют на видео).
Теперь перейдем к теме: как установить и пользоваться данным плагином.
Как установить плагин в Photoshop.
На видео видно как установить плагин. Немного прокомментирую с картинками.
1. Скачайте плагин, кликнув на главной страницы на кнопку Download for CS5, CS6 или Download for CS3, CS4 в зависимости от версии Фотошопа.
2. Запустите скаченный файл.
3. Принимайте условия.
4. Проверте, что слева от названия стоит галочка, закройте приложение.
5. Откройте фотошоп, и активируйте плагин.
на Mac
на Windows
Как пользоваться плагином css3ps?
Очень просто. После активации появится окошко с логотипом css3ps. После создания элемента (например, квадрата с закругленными концами), выделите нужный слой (слой с квадратом с закругленными концами) и нажмите на иконку Css3ps. После этого откроется сайт с картинкой и стилем css к нему. Скопируйте и радуйтесь.
Внимание! Рисовать придется по четче и качественно. Не выдумывайте слишком сложное.
Надеюсь данный плагин поможет вам в освоении верстки сайта, и упростить вам работу.
с/у УтБ
Итак, вы сделали сайт для заказчика, который хочет посмотреть статистику сайта на google analytics, либо какие-нибудь данные в google webmasters. Что вы можете сделать:
добавить пользователя (только просмотр)
добавить администратора (имеет полный доступ)
Итак, давайте научимся делать гостевой доступ к вашим данным определённым пользователям. Для этого необходим mail пользователя зарегистрированного в аккаунтах google. И, конечно, сайты, добавленные в сервисы googleanalytics и googlewebmasters.
Как дать гостевой доступ в Google analytics
Войдите в google analytics. В правом верхнем углу нажмите на кнопку Администратор.
Попав в раздел «Управление аккаунтами», войдите в свой аккаунт. Выберите вкладку «Пользователи». Здесь же вы можете затем удалить необходимого пользователя (кнопка «Удалить» находится справа от имени пользователя).
Нажмите на кнопку «Новый пользователь». Появится такое окно:
Введите адрес mail’a, кому хотите предоставить доступ. Выберите пользователь или администратор.
Внимание! Администратор имеет полный доступ к вашим профилям аккаунта.
Выберите сайты, к которым вы хотите дать доступ и жмите «Создать нового пользователя».
Нажмите на кнопку «Добавить нового пользователя» (справа сверху). Появится всплывающее окошко:
Введите mail пользователя и выберите разрешение: ограниченный и расширенный доступ, аналогично как в google analytics.
Вот в принципе и все. Ничего сложного и всем удобно. :idea: Да, кстати, чтобы начать пользоваться новыми возможностями пользователь должен войти под своими данными с тем mail’om с которым вы его зарегистрировали.
Сегодня, я делаю обзор полезного бесплатного софта, который, надеюсь, будет вам полезен. Название данному инструменту для блоггеров – Scrabber – бесплатный онлайн сервис создания скриншотов любой области экрана.
Пользоваться данной программой могут как с операционной системой windows, так и те, кто сидит на Mac’e. Для остальных, к сожалению, пока (надеюсь) версий нету.
Очень интересно обыграна программа. Главный герой – Мистер Краб, который и «вырезает» нам с вами необходимые картинки.
Что можно делать программой scrabber:
Выделять область в экране и копировать на сервер, получая несколько вариантов ссылок на картинку
Поделиться с друзьями, коллегами в соцсетях
Готовые ссылки в версиях: прямая ссылка, html версия и bb код для форумов
Кому полезна программа:
Всем, особенно работникам интернета. :smile: Удобно показывать баги, ошибки на сайте: выделил область, отправил ссылку.
Как начать пользоваться:
Зайдите на сайт и скачайте софт, нажав «поймать скраббер» для windows или mac.
Установите программу и начинайте пользоваться. Запустите программу, выделите область, немного подождите и в браузере по умолчанию откроется вкладка со скриншотом.
Как пользоваться скраббером. Инструкция в картинках:
Минусы программы или чего не хватает
Лично мне не хватает в программе:
Привязки к аккаунту (при смене компьютера или переустановки теряются все ваши картинки) :lol:
Улучшить скорость отклика программы (иногда, скорее всего провайдер шалит)
Возможность «вырезки» элементов при наведении, активных и т.д. (не знаю правда как это будет выглядеть)
Возможность регулировать водный знак Scrabber.net (иногда на полкартинки или закрывает нужное), либо отключение данной функции :-)
Надеюсь обзор был для вас полезным и интересным, не забываем поделиться с друзьями и отписываться в комментариях. :???:
З.ы. На сайте scrabber.net, не забудьте кликнуть на дворника
З.ы.ы. А вы какой программой пользуетесь? Как вам такой софт?
Сегодня мы поговорим о программе фотошоп, о том, как использовать его при верстке плюс маленькие хитрости, будем уменьшать время работы с данной программой. Ранее я писал в Урок 3. Верстка сайта: быстро вырезаем картинки в фотошопе, как делаю это я.
Конечно же, при частой верстке сайтов у вас будет оттачиваться мастерство, и с опытом приходят свои наработки. У каждого свои фишки и плюшки, но возможно мои советы помогут вам, хотя некоторые из них очевидны, но все же, возможно кто-то не знал. В первую, очередь данная статья будет полезна начинающим верстальщикам.
Не будет тянуть кота за хвост, и начнем, пожалуй :neutral:
Горячие клавиши Фотошопа.
Горячие клавиши в любой программе уменьшают ваше драгоценное время. Поэтому запоминайте их. Чтобы Вам было легче, посмотрите основные полезные горячие клавиши.
Если Вам этого мало, то наберите в google горячие клавиши фотошопе и запоминайте их.
Необходимый набор.
У многих блогов, например как у моего, есть превьюшки для статей. И они все как один на лицо по размерам. И Вам нет необходимости постоянно в фотошопе создавать набор из нужных размеров.
Откройте фотошоп, создайте новый документ (ctrl + N), выберите размеры вашей превью картинки (у меня 200 на 200 пикселей), нажмите «Сохранить набор параметров…».
Теперь придумываем название: «200 пикс х 200 пикс», либо «Превью блога» и т.д. и жмите ok.
Теперь чтобы создать документ (ctrl + N) размеров 200 на 200 пикселей, мне достаточно выбрать соответствующий набор.
Расстояние и размеры элементов в фотошопе.
Есть несколько способов определения расстояния между блоками и блоков. Рассмотрим наиболее оптимальные.
Первый способ. Выбираем инструмент «Прямоугольная область» (М) и выделяем необходимый блок. Смотрим во вкладку «Инфо» в Photoshop.
Таким же способом определяем расстояние между блоками.
Второй способ. Также расстояние можно измерить с помощью инструмента «Линейка». Не забывайте зажимать Shift для прямой линии линейки. Минус данного способа: необходимо определять ширину и высоту по отдельности.
Другие способы: Также можно выделить элемент, скопировать и при создании нового документа записать размеры. Узнать размер текущего документа можно в левом нижнем углу.
Цвет в фотошопе.
Узнать цвет очень просто.
Первый способ. Выбираете инструмент «Пипетка» и кликайте на необходимый элемент. В блоке «Инструменты» появится выбранный цвет. Кликайте по квадрату с цветом.
И копируйте цвет в нужном формате.
Второй способ. С помощью специальных программ. Например, Pixie. Для этого необходимо навести на объект и записать нужный формат цвета.
Для текста. Можно использовать вышеописанные способы, но лучше активировать текст: выберите инструмент «Горизонтальный текст» (Т) и нажмите на текст, в блоке «Параметры» вы увидите цвет текста, а также другие параметры шрифт, размеры, жирность и т.д.
Рабочая среда в фотошопе.
При написании разметки сайта, когда уже фотошоп нужен лишь чтобы смотреть размеры и как должен выглядить сайт, многие блоки в фотошопе нам, в принципе, не нужны. Можно и нужно их убрать. Для этого давайте создадим новую рабочую среду в photoshop’e.
Закройте все ненужные окна: нажмите на крестике соответствуюшего блока, либо Окно ->Уберите галочку.
Нажмите на стрелочки в правом верхнем углу (показано на картинке) и выберите строку «Новая рабочая среда…». Придумайте название и сохраняйте. Теперь при щелчке на нужную среду будет изменяться настройки отображения блоков в фотошопе. Очень удобно.
Прозрачность слоев.
Иногда при сохранении слоя конечная картинка отличается от оригинала своей прозрачностью, поэтому всегда обращаем внимание на непрозрачность и заливку слоя.
При сохранении непрозрачности слоя, я обычно создаю новый пустой слой и объединяю (ctrl +E) с необходимым. При этом сохраняются необходимые настройки слоя и растет КПД )).
Выбор необходимого слоя.
Для автоматического выбора слоя/элемента по которому вы кликаете необходимо сделать следующие действия в программе:
Установить галочку на «Автовыбор», и из выпадающего селекта «Группа слоев». Теперь по клику элемента в блоке «Слои» будет выделяться нужный вам слой.
Оптимизированное сохранение изображения
Именно так я решил назвать этот пункт, так как необходимо не просто сохранить файл, но и оптимизировать его.
Запомните волшебную комбинацию: ctrl + shift +alt +s. Как бы длинно это не смотрелось, нажимается очень просто и легко. Конечно, вы можете переназначить данную функцию «Сохранить для Web и устройств».
Предварительный просмотр картинки у меня стоит на 4 вариантах. Одна область для исходного изображения, остальные можно поменять для gif, jpeg и png форматов. Посмотреть какой весить легче и при этом качество не теряется (для этого сравниваем с исходным изображением). Если в общем то png и gif для мелких и прозрачных элементов, для простых картинок можно jpeg в высоком или среднем качестве. Понажимайте и выберите, что получше.Если вас не устраивают размер, то вы тут же можете их поменять (справа внизу). При изменении непропорционально нажмите на значок справа от размеров.
Нажимайте «Сохранить» и пользуйтесь оптимизированными картинками для вашего сайта.
А какие фишками вы поделитесь? Отписывайтесь в комментариях и делитесь с друзьями через социальные кнопки. :???:
Думаете над созданием собственного бизнеса? Магазин готовых бизнес планов предлагает свои услуги по разработке и знакомству с бизнес планами разных сфер.
Сегодня я покажу, как добавить кнопки в html редактор wordpress’a. Дабы увеличить скорость добавления необходимых тегов, и также, чтобы ваши статьи были красивыми и привлекали людей на сайт. Да, да мы превратим рутинную работу в несколько кликов.
Как всегда существует 2 способа:
Добавить свои кнопки с помощью плагинов (Post Editor Buttons, HTML Editor Reloaded)
Добавить свои кнопки в редактор вордпресса правкой файла
Интересно, что и у первого есть минус (я уже писал о том, что много плагинов – это зло) – нагрузка на wordpress из-за такой мелочи, и у второго – при обновлении вашего сайта настройки слетят.
Второй метод, как по мне, намного лучше и я советую использовать именно его.
Но прежде! Сохраняйте (делайте бекап) все редактируемые файлы.
Найдите файл quicktags.js в папке wp-includes/js. Сделайте копию файла.
Начинаем редактирование. В файле quicktags.js находим нечто подобное (в самом конце):
edButtons[10] = new qt.TagButton('strong','b','<strong>','</strong>','b');
Это код жирности текста. По такому принципу добавляем свой кусок кода.
edButtons[20] = new qt.TagButton('div','div','<div>','</div>','div');
Цифра изменяется в зависимости, куда вы вставите код. Если в конец, то 150, затем 160, 170 и т.д. Если в середину, то меняйте последующие цифры.
Если Вы не можете разобраться. Редактируйте файл quicktags.dev.js – неоптимизированный файл. В конце (строка 609) найдете соответствующие строки. Затем переименуйте файл quicktags.dev.js в quicktags.js, предваритеьно удалив последний.
Теперь фантазируйте и экспериментируйте, а также подписываемся на обновления. Возможно, вашим друзьям эта статья будет полезна, поэтому жмите на социальные кнопки.
Китайский рынок современных технологий – один из бурно развивающихся. Поэтому, как мне кажется, необходимо присматриваться и следить за ходом развития систем управления сайтами. В частности, в электронной коммерции.
В связи с тем, что много вирусов «приходит» к нам с востока, то разработчики предусматривают безопасность как одну из приоритетных.
Внимание! Данная статья участвует в конкурсе «Золотой пост».
Конечно, все не может быть безоблачно. Одной из самых основных проблем это локализация. Мало кто понимает и способен перевести cms на родной язык. Отсюда и слабая поддержка сообщества. Но китайские cms активно поддерживает сообщество chinascript.ru. За что им особое спасибо.
Давайте теперь рассмотрим небольшой обзор золотых cms для интернет коммерции.
Необходимые понятия: B2B – Бизнес для Бизнеса (каталоги, электронные биржи, аукционы, электронные сообщества) B2C – Бизнес для Потребителя (интернет магазин типа амазон) C2C – Потребитель для Потребителя (типа молоток ру – сайт аукционов) C2B – Потребитель для Бизнеса (потребитель устанавливает цену на товар, которые они хотят купить)
Многопользовательский магазин Brand V2.1 (B2C, C2C)– мощный многофункциональный интернет-магазин, который дает возможность создания сайта для каждого зарегистрированного пользователя. Хорошая сортировка товаров, открытый код, минимальная нагрузка на сервер, неограниченное вложение категорий, простота системы далеко не все достоинства данной системы.
iWebShop (B2С) – доступная и простая система для создания интернет-магазина. Функционал способен создать простой частный магазинчик, который будет минимально нагружать ваш сервер. Минус отсутствует полная русская локализация.
ShopNC – многопользовательский интернет-магазин с большим функционалом. Уже шестая версия данной системы «говорит» о перспективе развития. Единственная проблема перевод на русский язык.
ttTuangou v1.3.6 – Groupon – интернет-магазин для групповых покупок пользователей. Или проще аналог такого сайта как групон. Система работает в связке php + mysql. Распространяется бесплатно на китайском языке.
iWebMall – система для интернет коммерции построена по принципу B2C (Бизнес для потребителей), т.е. каждый зарегистрированный пользователь выбирает быть ему продавцом или потребителем. Богатый функционал и русская локализация привлекают внимание к данной системе.
PHPOK3 – бесплатная система для создания корпоративных сайтов. Но функционал можно расширить до полноценного интернет – магазина. Использование сторонних модулей всегда можно настроить систему как вам необходимо. Язык – китайский.
B2BbuilderCMS– свободно распространяемая система для электронной коммерции. Можно использовать как B2B, B2C, C2C и быть успешным в своем бизнесе, то есть все зависит от вас. Плюс ко всему имеется 100% перевод на русский язык.
ECMall (С2С)- систем электронной коммерции (ECMall – многопользовательский магазин). Один из мощных, но для обычного интернет-магазина он вряд ли подойдет. Так как зарегистрированный пользователь может создавать свой магазинчик. Мощный фильтр и сортировки товара привлекут вас к данной системе.
PHPB2B – площадка для B2B магазина. Данный скрипт будет интересен в первую очередь для бизнеса. Для данного типа электронных коммерций считается одним из лучших. Есть английская версия, что облегчает перевод системы.
Сегодня давайте уже разберемся с азами блочной верстки окончательно. Надеюсь, Вы читали, что такое блочные элементы. В данной статье Вы узнаете, что такое встроенные элементы и встроенный блок. Конечно, вы могли слышать и другие названия: инлайновые, линейные и т.д. В английском варианте это inline и inline-block соответственно.
Порой у вас бывало такое, что меняешь стили, меняешь, а ничего не происходит с элементом. Выстраиваются друг за другом в линию, на отступы не откликается и в таком веселом духе. Знакомо? Отлично, давайте разбираться.
«Встроенными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. К встроенным элементам относятся теги <span>, <a>, <q>, <code> и др. В основном они используются для изменения вида текста или его логического выделения» htmlbook.ru
Давайте рассмотрим основные свойства встроенных элементов.
Встроенные элементы это все те элементы, которые не относятся к блочным, т.е это a, br, img, em, small, span, strong и т. д.
Встроенные элементы могут содержать:
Только другие встроенные элементы (!) Нельзя вложить во встроенный элемент блочный (!)
Разные данные (текст)
Быть пустыми
Встроенные элементы выстраиваются друг за другом в одну линию (т.е. не переносятся на новую строку)
Можно использовать вертикальное выравнивание элементов (vertical-align)
Занимают ширину по их содержанию. (как узнать ширину блока мы говорили в уроке 2.1)
По умолчанию встроенные элементы имеют свойство display:inline; (его не нужно писАть в css), но ведь вам никто не запрещает сделать следующее:
span {display:block;}
Встроенный элемент после таких манипуляций будет вести себя как блочный и примет все новые свойства. (при этом старые уже не действуют)
По сути, блочные и встроенные элементы, имеют противоположные свойства, и во время верстки отлично дополняют друг друга, но порой необходимы и те и другие свойства разных элементов. В таких ситуациях на помощь приходит встроенный блок.
Встроенный блок.
Сразу же рассмотрим его свойства.
В чистом виде не встречается, поэтому задается через стили свойством display:inline-block; (ie7 и ниже работает для встроенных элементов)
Внутрь встроенного блока можно помещать данные (например, текст), строчные и блочные элементы. (советую следовать логике использования вложений)
Можно выравнивать элементы по вертикали (vertical-align)
Имеют ширину по содержимому + границы и отступы. (как у блочных), высота рассчитывается исходя из содержимого.
Выстраиваются друг за другом в одну линию.
Можно задать ширину и высоту.
Что дают нам данные свойства? Во-первых, они фактически универсальны, во-вторых, нет необходимости использовать обтекание (float).
Рассмотрим пример, Интернет-магазин. Вывод товаров друг за дружкой блоками в один ряд. Если каждый товар с описанием выводить как блок (списком), то они не будут стоять в ряд. Посмотрим:
Теперь добавим стиль display:inline-block; для ul li – для выравнивания списка. Посмотрите, что получилось. Вуаля, немного волшебства с css и товары будут выглядеть отлично.
В internet explorer 7 и ниже для блочных элементов display:inline-block; отображается не корректно. Поэтому добавим zoom:1; и выставим display:inline; для данных браузеров через условные комментарии:
<!--[if lte IE 7]>
<style type="text/css">
ul li {
display: inline;
zoom: 1;
}
</style>
<![endif]-->
Надеюсь, теперь вы понимаете разницу между основными блоками. Теперь вы знаете, как себя они будут вести, и как заставить их вести себя.
с/у УтБ
***
В озвучке значимый голос диктора может повлиять на ваше восприятие записи. Выбирайте лучшие голоса!
***
Не знаю как вам, но такие флешмобы очень даже интересно смотреть
Инфографика – это визуальное представление информации. Сегодня инфографика довольно популярный метод представления информации, но сделать ее не так просто, хотя результат весьма интересен.
Инфографику можно найти везде: журналах, брошюрах, других печатных изданиях и теперь это часть интернета. Редко что-то интересное обходит интернет. Наглядная полезная информация только увеличит количество посетителей к вам на сайт.
Хотя представить полезную информацию в красивой обертке весьма сложная и кропотливая работа, но если вы умеете обращаться с фотошопом, и хотите создавать нечто подобное, но что делать у вас нету вдохновения?!
А для этого представляем вам 20 источников вдохновения.
