Leaderboard

Увы, но раз есть спрос, то есть и предложения) Это как с IE, кто то не поддерживает даже 9 версию, а кто то поддерживает даже 6. Если бы все разработчики в раз отказались бы от <9 версии, то было бы счастье, тут также) Всегда найдется человек, готовый сделать задешево. Или бесплатно, для своего портфолио. Самое главное тут, не увязнуть в этих лендингах и не только, я про проекты низкой себестоимости. Мало в них развития. Опыт приобретается на сложных проектах, где более 2-3 страниц, где порой обдумывание и поиск оптимальных решений занимает больше времени, чем сама верстка.

Микроформаты потеряли свою актуальность, после того как Гугл и Яндекс стали поддерживать schema.org. Так что микроданные в HTML5 на данный момент единственно правильное средство. На паре сайтов использовал и то и другое и могу сказать, что плюсов от использования больше, чем минусов. Поскольку всё завязано на чёрный ящик поисковиков, можно только эмпирически выводы делать. Во-первых, никаких сложностей с вёрсткой нет. Разобраться и внедрить микроданные можно за час максимум, это никак не ломает существующий макет. Возможно, разве что, придётся добавить несколько лишних <div>. Во-вторых, поисковики стали лучше индексировать сайт и вообще его "полюбили" и начали двигать выше. Не могу заявить с уверенностью, что именно из-за микроданных, но если есть такая вероятность, стоит потратить час времени на добавление. В-третьих, Яндекс в результатах поиска стал иначе выводить информацию с сайта, не просто первые нашедшие строки, а по теме всё. Это, опять же, лучше для пользователей и сайта.

Мне давно было интересно как устроен всеми любимый jQuery и вот я решил засесть за него (благо что исходники у него открытые). И вот, по просьбе камрада mishka2 я рассказываю, что я выяснил, как работает этот фреймворк и как написать свой такой же. Прежде всего пара фишек яваскрипта, про которые не все начинающие знают: 1) Имена функций: В яваскрипте валидными считаются любые имена функций, которые начинаются с буквы, со знака доллара ($) и со знака подчеркивания (_). Так что когда вы используете ваш любимый jQuery, вызывая к примеру $(document), знайте, что вы вызываете функцию у которой имя $ и передаете ей в качестве аргумента document. 2) Вызов функций: Обычно все пишут какую-нибудь функцию, к примеру: function myFunc() { alert(1); } // или так var myFunc = function() { alert(1); } а потом вызывают ее, но многие не знают, что в яваскрипте можно вызвать функцию сразу при создании вот таким методом: (function() { // создаем функцию alert(1); })(); // и тут же вызываем ее 3) Переменные и функции: Яваскрипт - это объектно ориентированный язык программирования. В нем все является либо объектами, либо свойствами объектов. Даже если вы используете процедурный подход к программированию (создаете отдельные функции и оперируете ими), вы все равно создаете объекты, т.к. в яваскипте любая функция - это объект. Т.е. вы можете вызвать ее через оператор new и рабоать с ней как с объектом. Когда вы создаете переменную в глобальной области видимости, то она записывается как свойство глобального объекта window. Т.е.var a = 1; и window.a = 1 эквивалентны. Ну вот теперь многие вещи в jQuery станут понятны. Самое интересное в jQuery то, что как только вы поздключили его на страницу он у вас сразу инициализирован. Давайте посмотрим как это сделано. 1) Для начала давайте создадим наш объект, назовем его Helper, у него будет пока единственный метод init(), который должен будет инициализировать его. А делать наш объект будет всего одну вещь - находить по ID элемент на странице или получать уже найденный элемент как ноду и возвращать его: var Helper = { init: function(elem) { elem = typeof elem == 'string' ? document.getElementById(elem) : elem; return elem; } } Фишка в том, что нам надо будет обязательно инициализировать наш объект, для того чтобы он заработал, т.е. нам нужно будет где-либо на странице вызвать метод init(): alert(Helper.init('id_элемента')); Но нам то нужно получить что-то вроде такого: alert(Helper('id_элемента')); Тут то нам и приходит на помощь вызов функции сразу при создании, единственное, что нам потребуется это анонимная функция (т.е. функция без имени), которая будет вызываться сразу же после создания и вспомогательная функция, которая будет инициализировать наш объект и возвращать его: (function() { // анонимная функция var Helper = function(elem) { // вспомогательная функция return new Helper.foo.init(elem); // которая возвращает нам уже проинициализированный объект } Helper.foo = { // наш основной объект init: function(elem) { // метод, где происходит инициализация elem = typeof elem == 'string' ? document.getElementById(elem) : elem; return elem; // метод возвращает нам ссылку на ноду } } })(); // сразу же вызываем анонимную функцию У внимательного читателя должен возникнуть вопрос: "Откуда взялся Helper.foo? И почему именно так?". Все дело в наследовании прототипов. Вообще, прототипы в яваскрипте это довольно сложная для понимания штука. В конце я дам ссылки на ресурсы где про это можно почитать. Признаюсь, сам перечитывал раз 10, но все равно не понял до конца как они работают. Скажу лишь, что когда мы пишем new Helper.foo.init(elem);, то не создаем новый объект с именем Helper.foo как вы могли подумать, а создаем новый объект с именем Helper.foo.init (т.к. init() - тоже функция), у которого нет ни одного метода. И чтобы использовать все методы которые мы будем добавлять в Helper.foo в дальнейшем на понадобится переопределить прототип Helper.foo.init. Пока все это звучит очень запутанно, но я надеюсь, что когда вы увидите дальнейший код, то все поймете. Итак, теперь у нас есть проинициализированный объект и казалось бы мы можем его начать вызывать, но (как вы должны знать) переменная Helper у нас получилась не глобальной, т.к. она находится внутри анонимной функции. Чтобы начать использовать наш Helper нам надо передать его в глобальную область видимости, вот так это сделано в jQuery: (function() { // анонимная функция var Helper = function(elem) { // вспомогательная функция return new Helper.foo.init(elem); // которая возвращает нам уже проинициализированный объект } Helper.foo = { // наш основной объект init: function(elem) { // метод, где происходит инициализация elem = typeof elem == 'string' ? document.getElementById(elem) : elem; return elem; // метод возвращает нам ссылку на ноду } } // передаем переменную Helper в глобальную область видимости window.Helper = Helper; })(); // сразу же вызываем анонимную функцию Все, теперь вы можете использовать проинициализированный объект: <body> <div id="test"></div> <script type="text/javascript"> alert(Helper('test')); </script> </body> Но позвольте, откуда же в jQuery берется доллар? Все очень просто - пусть у нас будет два доллара: (function() { var Helper = function(elem) { return new Helper.foo.init(elem); } Helper.foo = { init: function(elem) { elem = typeof elem == 'string' ? document.getElementById(elem) : elem; return elem; } } // создаем два доллара window.Helper = window.$$ = Helper; })(); И вызываем: <body> <div id="test"></div> <script type="text/javascript"> alert($$('test')); </script> </body> Однако, если в jQuery вызвать $('#test'), то он вернет не ссылку на ноду а сам себя, т.е. объект jQuery и чтобы получить ссылку на ноду в jQuery нам придется сделать что-то вроде этого: <body> <!-- Используем jQuery --> <div id="test"></div> <script type="text/javascript"> alert($('#test')); // выведет [object Object] (сам себя) alert($('#test')[0]); // выведет [object HTMLDivElement] </script> </body> Все это потому, что все найденные элементы jQuery цепляет к себе. Ничто не мешает нам сделать так же: (function() { var Helper = function(elem) { return new Helper.foo.init(elem); } Helper.foo = { init: function(elem) { elem = typeof elem == 'string' ? document.getElementById(elem) : elem; this[0] = elem // цепляем элемент к объекту return this; // возвращаем не элемент, а наш объект } } window.Helper = window.$$ = Helper; })(); Вот у нас и получится тоже самое: <body> <!-- Используем наш фреймворк --> <div id="test"></div> <script type="text/javascript"> alert($$('test')); // выведет [object Object] (сам себя) alert($$('test')[0]); // выведет [object HTMLDivElement] </script> </body> Теперь давайте добавим в наш фреймворк какой-нибудь метод, например пусть у него будет имя getNodeName(), а возвращать он будет имя ноды: (function() { var Helper = function(elem) { return new Helper.foo.init(elem); } Helper.foo = { init: function(elem) { elem = typeof elem == 'string' ? document.getElementById(elem) : elem; this[0] = elem return this; }, getNodeName: function() { // наш новый метод // возвращает имя ноды найденного объекта в верхнем регистре return this[0].nodeName.toUpperCase(); } } window.Helper = window.$$ = Helper; })(); Давайте попробуем при помощи нашего нового метода узнать имя ноды: <body> <div id="test"></div> <script type="text/javascript"> alert($$('test').getNodeName()); // Ошибка !!! </script> </body> Почему же это не работает? Как я уже говорил выше, вспомогательная функция Helper создает новый объект с именем Helper.foo.init, а внутри нашего метода init() нет никаких других методов. Поэтому нам надо переопределить прототип для Helper.foo.init, т.е. указать скрипту явно, что шаблоном нашего объекта является не Helper.foo.init, а Helper.foo. Причем наш объект foo должен храниться обязательно как свойство объекта Helper иначе (если я правильно понял, прочитав кучу статей про прототипы) переопределить прототип не получится. (function() { var Helper = function(elem) { return new Helper.foo.init(elem); } Helper.foo = { init: function(elem) { elem = typeof elem == 'string' ? document.getElementById(elem) : elem; this[0] = elem return this; }, getNodeName: function() { return this[0].nodeName.toUpperCase(); } } Helper.foo.init.prototype = Helper.foo; window.Helper = window.$$ = Helper; })(); Вот теперь все заработает: <body> <div id="test"></div> <script type="text/javascript"> alert($$('test').getNodeName()); // выведет DIV </script> </body> Ну вот и все, теперь вы можете расширять свой фреймворк, добавляя туда новые методы и использовать его так же как и jQuery. Теперь вы представляете как устроен этот фреймворк. Конечно то что я тут описал - это очень сильно упрощенная версия jQuery. Она умеет находить ноду только по ID и в ней нет кучи полезных фишек jQuery. Но я не волшебник, я только учусь. Многое еще остается в jQuery для меня не ясным, но надеюсь со временем я его таки доковыряю P.S. Что я читал: http://javascript.ru/ecma/part8#_Prototype_ http://javascript.ru/tutorial/object/inher...type-i-prototip http://code.jquery.com/jquery-1.4.2.js http://dklab.ru/chicken/nablas/40.html

А как они у тебя прописаны в хтмл? Может слеш лишний?

http://jsfiddle.net/ryter/ds4g4/9/

Была похожая тема.

Абсолютом делать и Inline на блок поменять http://jsfiddle.net/ds4g4/5/

Но он как бы так и называется, таковым и является!

Как вариант: http://jsfiddle.net/jzU7h/

Нене, это классической длины лендинг - средненький, не большой и не маленький. Вам надо установить всплывающие окна на заказаказать звонок, проверку валидации форм, сделать отправку данных на почту через ajax c всплывающим окошком спасибо за заявку ну или как в данном случае - замено блоков на сайте с сообщениями "спасибо". Ну и в принципе даже простой лендинг в плане скриптов - ни слайдеров, ни лайтбоксов. Так как лендинг цельный сайт - вас попросят еще поставить некие картинки для слайдеров и отзывов, прописать новые фамилии и ссылки, поправить некоторые предложения текста в макете. Возможно установить яндекс метрику, настроить цели форм, залить на хостинг.

Хз мб http://jsfiddle.net/5KFJK/

http://jsfiddle.net/ev55c/1/ вполне себе раномерно

Кодекс как раз таким ресурсом и является. Нельзя в одной статье описать ВСЕ, потому что API довольно обширное, возможностей много и далеко не все из них нужны в каком-то конкретном случае. Так что лучше всего почитать несколько общих профильных статей, а-ля тех что приведены в твоем посте, и начинать имплементацию. Очень полезно посмотреть в примеры стандартных тем, ОСОБЕННО в header.php По ходу разработки будут возникать вопросы - в гугель, кодекс и на форум

это не новый год. это дипрессия Может там снежинка в 3D )))

Почитайте эту тему. Вам станет многое понятно, а потом прикрутите себе jQuery и плагин валидации.

Кидалово 100% после окончания работы

Вот тут вот всё рассказано http://www.youtube.com/watch?v=Y70JypQCy08

зачем дублируете темы? http://htmlforum.ru/index.php?showtopic=46780&hl= ответил тут

BSandro, в профиле вроде 19 лет, а такое ощущение как будто 13.

Мне не нужно разжевывать. 20 минут тратить, чтобы узнать что такое alert(); и как он работает это слишком много. в чем проблема? начинай со 2 или с 3 сразу... Если ты знаешь конечно, нахера тебе знать что такое alert(); если ты и так его знаешь ты бред несешь иди на улицу сходи лучше, свежим воздухом по дыши, иногда знаешь полезно Откуда такая агрессия? Я лишь высказал свое мнение.

Мне не нужно разжевывать. 20 минут тратить, чтобы узнать что такое alert(); и как он работает это слишком много.

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

Думал уже не кто не отпишется... Проверку этих полей, что это обязательно и тд... я через if else знаю как сделать, но тут другой случай. Да и я могу сделать только на проверку чего то, а во именно задать сколько символов макс и мин вводить не могу. Есть замечательный плагин jquery.validate именно к этому я и виду, что я еще учу Javascript (а про jquery даже пока говорить не хочу :-) И я что то до сих пор догнать не могу, а зачем знак $ перед $(function() и тд...

вчера хукнул)))меня даже сфоткали

я не тут учил видео специалист http://www.youtube.com/user/TechnologiesWeb/videos вот с этого http://www.youtube.com/watch?v=7I5gSJQmi-M и пошло поехало ) Да и у меня вообще желание выучить HTML,CSS,Javascript,php,mysql И полностью работать с ними на любой сложности... Я даже потом в Москву поеду на эти платные курсы что бы корочки получить... Ибо без бумажки ты букашка :-) Забавно) Первый раз смотрю видео от специалиста, не могу обращать внимание на повторение слов/словосочетаний интересно что тут смешного? Могу сказать если вы придрались к этому то вам лет 15 не больше.... Человек объясняет внятно и понятно брехню не неси, нравится читай, а объясняет он там вполне прилично... потому что вначале не интересно еще, такое же было... Я не говорил что он плохо объясняет. Просто много лишней информации, я считаю что не стоит тратить на это время. Например? На оборот он объясняет все по порядку что пригодится, еще разжевывает и в рот ложит ....

погуглил,судя из того что начитал сделал предположение что .htaccess это полное имя файла,а не расширение. но вот тогда вопрос,что внутри него должно быть кроме AddType application/x-httpd-php .html .htm и как вообще создать этот файл если виндовс не позволяет?пишет что нужно ввести имя файла,а что делать если имени у него нету?я запутался...

На просторах интернета, нашел пошаговую регистрацию на javascript Так как я еще учу javascript, не быстро, но пытаюсь... Не поможете ли вы разобраться с данным скриптом содержит jquery.inputfocus-0.9.min $(function(){ //original field values var field_values = { //id : value 'username' : 'Логин', 'password' : 'Пароль', 'cpassword' : 'Пароль', 'firstname' : 'Имя', 'lastname' : 'Фамилия', 'email' : 'email' }; //inputfocus $('input#username').inputfocus({ value: field_values['username'] }); $('input#password').inputfocus({ value: field_values['password'] }); $('input#cpassword').inputfocus({ value: field_values['cpassword'] }); $('input#lastname').inputfocus({ value: field_values['lastname'] }); $('input#firstname').inputfocus({ value: field_values['firstname'] }); $('input#email').inputfocus({ value: field_values['email'] }); //reset progress bar $('#progress').css('width','0'); $('#progress_text').html('0% Выполнено'); //first_step $('form').submit(function(){ return false; }); $('#submit_first').click(function(){ //remove classes $('#first_step input').removeClass('error').removeClass('valid'); //ckeck if inputs aren't empty var fields = $('#first_step input[type=text], #first_step input[type=password]'); var error = 0; fields.each(function(){ var value = $(this).val(); if( value.length<4 || value==field_values[$(this).attr('id')] ) { $(this).addClass('error'); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass('valid'); } }); if(!error) { if( $('#password').val() != $('#cpassword').val() ) { $('#first_step input[type=password]').each(function(){ $(this).removeClass('valid').addClass('error'); $(this).effect("shake", { times:3 }, 50); }); return false; } else { //update progress bar $('#progress_text').html('33% Выполнено'); $('#progress').css('width','113px'); //slide steps $('#first_step').slideUp(); $('#second_step').slideDown(); } } else return false; }); $('#submit_second').click(function(){ //remove classes $('#second_step input').removeClass('error').removeClass('valid'); var emailPattern = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; var fields = $('#second_step input[type=text]'); var error = 0; fields.each(function(){ var value = $(this).val(); if( value.length<1 || value==field_values[$(this).attr('id')] || ( $(this).attr('id')=='email' && !emailPattern.test(value) ) ) { $(this).addClass('error'); $(this).effect("shake", { times:3 }, 50); error++; } else { $(this).addClass('valid'); } }); if(!error) { //update progress bar $('#progress_text').html('66% Выполнено'); $('#progress').css('width','226px'); //slide steps $('#second_step').slideUp(); $('#third_step').slideDown(); } else return false; }); $('#submit_third').click(function(){ //update progress bar $('#progress_text').html('100% Выполнено'); $('#progress').css('width','339px'); //prepare the fourth step var fields = new Array( $('#username').val(), $('#password').val(), $('#email').val(), $('#firstname').val() + ' ' + $('#lastname').val(), $('#age').val(), $('#gender').val(), $('#country').val() ); var tr = $('#fourth_step tr'); tr.each(function(){ //alert( fields[$(this).index()] ) $(this).children('td:nth-child(2)').html(fields[$(this).index()]); }); //slide steps $('#third_step').slideUp(); $('#fourth_step').slideDown(); }); $('#submit_fourth').click(function(){ //send information to server alert('Данные отправлены'); });});Я хочу написать примерно такого рода но немного в другую степень... Я вот немного тут по разбирал код $('#third_step').slideUp(); //выводит слайд сверху $('#fourth_step').slideDown(); // выводит слайд снзу// то есть при нажатий кнопки "далее" слайд уходит в верх и вылазит новый снизу.$('#progress_text').html('33% Выполнено');$('#progress').css('width','113px');// Ну тут понятно с каждым шагом мы меняем название, например с 0% выполнено на 33% выполнено//Ну и конечно задаем новые параметры полоски, в нашем случай это widh:113px $('#submit_fourth').click(function(){//send information to serveralert('Данные отправлены');});//Тут в самом начале уроке говорилось про alert() про сплывающее окно!//Я к сожалению не дошел до функций, но чуть чуть их понимаю$(function(){//original field valuesvar field_values = {//id : value'username' : 'Логин','password' : 'Пароль','cpassword' : 'Пароль','firstname' : 'Имя','lastname' : 'Фамилия','email' : 'email'};//Как видно тут, мы функций с переменной filed_values присваиваем//ниже приведенную таблицу.Я хочу сделать почти что то в этом роде.. Только немного по другому.. Допустим первое у нас имя, второе фамилия.. А дальше уже прикрепить проверку, введены ли туда какие то данные.. Допустим если человек не ввел туда не чего, справа у input выводится облако, и в этом облаке уже текст ошибки... Например: Поле не может быть пустым, введите имя от 3 до 12 символов так же у второго... Но написать я хочу это уже с вашей поддержкой... Как говорится не что бы там вы за меня все написали, а если я где то что то не так сделал, вы мне бы подсказали. Ну пожалуй я начну: $(function(){ var form_values = { 'firstname' : 'Имя', 'lastname' : 'Фамилия' };$('input#firstname').inputfocus({ value: form_values['firstname'] });$('input#lastname').inputfocus({ value: form_values['lastname'] });//для кнопки submit$('form').submit(function(){ return false; });$('#submit_step1').click(function(){ //сама кнопка у нее свое значение name=""$('#step input').removeClass('error').removeClass('valid'); // это у нас для того что бы удалить предыдущий класс// и потом уже что бы появился новый класс, по другому новая форма.А вот дальше надо сделать проверку к сожалению до этого допереть не могу..

Я так и не понял как работать, вырезать картинки и выделять слои, определять шрифт, измерять расстояние. (У меня фотошоп CS2 который бесплатный в свободном скачивании....

Мне не нужно разжевывать. 20 минут тратить, чтобы узнать что такое alert(); и как он работает это слишком много. в чем проблема? начинай со 2 или с 3 сразу... Если ты знаешь конечно, нахера тебе знать что такое alert(); если ты и так его знаешь ты бред несешь иди на улицу сходи лучше, свежим воздухом по дыши, иногда знаешь полезно