markup-javascript.com » JavaScript

Видео курс – “JavaScript. Больше, чем просто сайт”

Алексей — Thu, 03 Jun 2010 19:13:27 +0000

На днях мне удалось впервые посмотреть видео курс о JavaScript на русском языке. Мне его предоставили бесплатно для обзора на блоге, без каких-либо требований, так что обзор постораюсь написать наиболее непритязательно. О а как звучит – “JavaScript. Больше, чем просто сайт”! При просмотре рекламного ролика с их промо-сайта – действительно начинаешь в это верить :)

Но увы мы живем во времена, когда различного рода информация переполняет просторы интернета, и зачастую она некачественная, поэтому доверять информации мы можем только после проверки. Я посмотрел этот видео курс, и захотел рассказать вам непосредственно о моем впечатлении.

Рекламный ролик:

Сразу скажу – видео курс ориентирован на людей, которые о javascript ничего не знают или только начинают постигать этот язык. Если бы мне попался этот курс в те времена когда я начинал учится искусству javascript программирования – я бы был очень доволен находкой.

Но и не скажу, что данный курс был бесполезен мне на данный момент, хотя имею 2х летний опыт постоянной работы с технологией javascript. Как говорится “повторение – мать учения”, благодаря ему вспомнил несколько интересных тонкостей, респект автору курса ;)

Видео по времени занимает чуть более 7.5ч, качество видео и звук приятно удивили. Автор четко излагает материал. Приятный, ненавязчивый интерфейс прохождения уроков. Почти по каждой теме прилагаются готовые примеры кода представленные автором в уроках, с которыми вы можете экспериментировать после прохождения лекции. Прилагается коллекция всех основных ссылок на справочные материалы, ссылки на документацию по средствам разработки… т.е. по восприятию материала притензий никаких нет.

Еще добавлю немного плюсов, ну и немного минусов…

Плюсы:

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

Минусы:

Минусы есть, но наверное большая часть их основана на том, что мне уже хочется получить что-то большее от такого курса…

был удивлен что нет текстовой копии курса, мне ее не хватило, пригодилась бы для повтора пройденного материала.
курс немного бегловат, много чего не рассказывается, но с другой стороны это ж и не справочная книга…
нет ознакомительных лекций по популярным фреймверкам (jQuery, Mootools, Prototype)
никак не затронута технология AJAX.
мало примеров готовых решений и описаний по ним.

Вывод:

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

Если после моего обзора у вас возникло желание приобрести данный курс, в знак благодарности можете заказать диск по моей партнерской ссылке…

Запрет выделения текста с помощью jQuery

Алексей — Fri, 14 May 2010 14:59:47 +0000

На практике мне часто приходится применять данный функционал. Но чаще не из-за того что бы запретить выделение для копипастеров, тем более что данная фича легко обходится просто выключив на время javascript. А чаще в проектах где приходится крутить слайдеры, кастомные скролы, drag&drop. Т.к. здесь активно участвуют события нажатия и перетаскивание которые также выделяют текст на сайте… хотя это не требовалось. Поэтому я часто пользуюсь данными функциями…

jQuery.fn.extend({
disableSelection : function() {
this.each(function() {
this.onselectstart = function() { return false; };
this.unselectable = "on";
jQuery(this).css('-moz-user-select', 'none');
});
},
enableSelection : function() {
this.each(function() {
this.onselectstart = function() {};
this.unselectable = "off";
jQuery(this).css('-moz-user-select', 'auto');
});
}
});

// кроссбраузерный вызов
$(document).ready(function(){
$('body *').disableSelection();
});

$(‘body *’) – именно такой селектор будет для этих метов кроссбраузерным, просто $(‘body’) или $(document) – не работает в Opera.

disableSelection – запрет выделения
enableSelection – возврат выделения

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

Masonry – динамический layout

Алексей — Sun, 21 Mar 2010 13:10:51 +0000

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

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

Я упоминал выше о моей модификации, теперь подробнее :), я изменил всего-лишь одну строчку, и на мой взгляд плагин от этого только выиграл. Для наглядности эффекта поресайзете окно браузера.

Моя модификация, а вот еще страничка с живым примером.

Параметры плагина для инициализации:

$('#wrapper').masonry({
singleMode: false,
// Этот параметр ставится в true, если все ваши блоки имеют одинаковую ширину
columnWidth: 240,
// Ширина колонки в вашей сетке, параметр по умолчанию - ширина первого блока
itemSelector: '.box:visible',
// Селектор блоков
resizeable: true,
// Перестройка сетки блоков при ресайзе окна
appendedContent: $('.new_content'),
// Объект элемента который вставляется в сетку динамически
saveOptions: true,
// Этот параметр сохраняет параметры инициализации первого вызова
}, function() {}
// callback.
);

Моя версия скрипта

Текстовые редакторы на javaScript

Алексей — Mon, 01 Mar 2010 13:30:20 +0000

Если вы хотите повысить функциональность Вашего сайта – этот материал для вас. Одна фича которая есть практически в каждой CMS – текстовый редактор, поэтому хочу вас познакомить с 5 лучшими, на мой взгляд, скриптами.

1) TinyMCE

Пожалуй самый мощный плагин для этих целей, это можно сказать уже только потому, что его используют в своих проектах такие известные бренды как Wordpress, Microsoft, Oracle, Apple и Joomla. Также можно отметить:

Подключение в несколько строк кода
Возможность кастомить под различные темы
Кроссбраузерный – Mozilla, MSIE, FireFox, Opera, Safari и Chrome
AJAX совместимый – сохранение и загрузка результатов
Поддержка различных языковых пакетов
Открытый код – LGPL лицензия

2) HTMLBox

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

Простое подключение
Кроссбраузерный – FF, MSIE, Opera, Safari и Chrome
Маленький размер
AJAX поддержка
Удобное руководство пользователя
Кастомизация тем

3) markitup

Очень дружелюбный плагин. Очень понравилось оформление сайта плагина и примеры. Это конечно
не полноценный текстовый редактор, но если таков и не нужен, это лучший выбор.

Простое подключение
Поддержка keyboard shortcuts
Кастомизация тем
AJAX превью

4) CKeditor

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

Хорошая документаци
Кроссбраузерность
Поддержка keyboard shortcuts
AJAX
Кастомизация
Техническая поддержка, комьюнити

5) jWYSIWYG

И на последок – плагин попроще.

AJAX превью
Кроссбраузерность

Скролящийся блок

Алексей — Sun, 10 Jan 2010 10:03:51 +0000

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

Данный эффект стал встречаться в моих проектах довольно часто, поэтому я решил написать небольшой плагин – jquery.movingBlock.js.

Требования для работы плагина:

HTML/CSS

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

javaScript:

В роли главного объекта $(‘#sidebar’) выступает непосредственно скролящийся элемент, а теперь детальнее о параметрах:

holder – селектор обертки (родителя) скроляшегося элемента, главный параметр, т.к. указывает в каком элементе будет скролиться блок;
topDif – отступ элемента от верхней части экрана;
bottomDif – отступ элемента от нижней части экрана;
toEl – если вы хотите что бы блок скролился в обертке до определенного элемента, то в данном праметре вам нужно указать селектор этого элемента;
cssTop – изменяющееся свойство при скроле (marginTop или top);
duration – время анимации.

Для наглядности хочу продемонстрировать еще пару примеров: пример 2, пример 3.

Скачать плагин

Открыта библиотека плагинов Mootools

Алексей — Fri, 11 Dec 2009 16:55:18 +0000

Наконец-то на официальном сайте mootools.net открыта библиотека плагинов для этого фреймверка. Надеюсь она будет также активно развивается и пополнятся интересными плагинами как библиотека плагинов для jquery, где всегда можно найти кучу всего интересного.

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

P.S. Если бы они еще сделали примеры для методов фреймверка…

@font-face вместо Cufon

Алексей — Fri, 27 Nov 2009 13:39:46 +0000

Использование красивых шрифтов на сайте перестало быть редкостью, на помощь верстальщикам пришли такие JS библиотеки как sIFR , typeface и Cufon. В них есть как множество плюсов так и минусов… также можно задаться вопросом, что из этого списка лучше использовать для своего проекта, и я вам скажу, что лучше использовать @font-face и отображать шрифт как обычный текст.

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

Для этой цели я воспользуюсь jquery-fontavailable. Данный плагин позволяет определить поддержку нестандартного фонта браузером, даже если он подключен с помощью @font-face. Итак сразу покажу пример, в старых браузерах у вас отобразится шрифт сгенерированный cufon_ом, а в тех где поддерживается @font-face – будет текст.

Пример работы скрипта:

Стандартный плагин jquery-fontavailable работает иногда не корректно, поэтому я его немного усовершенствовал. Моя версия этого плагина выглядит так (копирайты я оставил, т.к. изменил всего две строчки):

/* fontAvailable jQuery Plugin, v1.1
*
* Copyright (c) 2009, Howard Rauscher
* Licensed under the MIT License
*/

(function($) {
var element;

$.fontAvailable = function(fontName) {
var width, height;

// prepare element, and append to DOM
if(!element) {
element = $( document.createElement( 'span' ))
.css( 'visibility', 'hidden' )
.css( 'position', 'absolute' )
.css( 'top', '-10000px' )
.css( 'left', '-10000px' )
.html( 'abcdefghijklmnopqrstuvwxyz' )
.appendTo( document.body );
}

// get the width/height of element after applying a fake font
var __FAKEFONT__ = element.parent().css('font-family');
width = element
.css('font-family', __FAKEFONT__)
.width();
height = element.height();
// set test font
element.css('font-family', fontName);
return (width !== element.width() || height !== element.height()) && navigator.appVersion.indexOf('Chrome') == -1;
}
})(jQuery);

Удивительно, но Google Chrome не поддерживает свойство @font-face из-за соображений безопасности. Но это можно обойти выключив в командной строке –enable-remote-fonts. Но все же, я сделал что бы в модифицированной версии шрифт в Chrome куфонился.

Что нужно для работы данного метода.

CSS код:

@font-face {
font-family: "KB Zero";
src:url("../fonts/zero.ttf");
}
html, body{
font-family:Arial, Helvetica, sans-serif;
}
p {
font:bold 16px "KB Zero";
}

В css коде мы с помощью @font-face объявляем font-family и указываем путь к файлу шрифта. Для body указывается стандарный web шрифт, это нужно для работы скрипта. Ну и применяем шрифт к тегу P. HTML код я показывать не буду т.к. там у меня находится только одно предложение завернутое в тег P.

JavaScript код:

$(document).ready(function(){
if(!$.fontAvailable('KB Zero')) {
Cufon.replace('p', {fontFamily: 'KB Zero'});
}
});

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

Логика подключения fontAvailable выглядит элементарно…
$.fontAvailable(‘KB Zero’)- возвращает булеву переменную после проверки на поддержку браузером данного шрифта, а значит нам нужно инициализировать плагин в условии, и если шрифт не поддерживается – будет отрабатывать Cufon

Вместе с этим плагином можно использовать и sIFR с typeface, достаточно лишь инициализировать их в данном условии.