Наконец помощью ИТ здесь

Блог компьютерных решений.

Повышение эффективности сайта (социальные кнопки)

Опубликовано Чаус Ксавье Надаль 17th марта 2013

Сегодня мы покажем вам, как улучшить производительность сайта, делая социальные кнопки facebook, Twitter и Google Plus загружаются в Интернете, но только тогда, когда мы передаем курсор.

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

Мы получили очень хорошие результаты даже при загрузке на общий без VPS хостинг из-за отсутствия теста.

Одна из последних разработок, которые осуществили было бремя бутербродов раздражающих социальных сетей, чтобы выйти часть балл в тесте производительности страниц как http://www.webpagetest.orgили http://www.gtmetrix.com Они сделали полотно будет загружаться медленнее, что приводит к снижению Google позиционирования среди других поисковых систем.

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

  • заряжает сайт A 55% быстрее.
  • WordPress -> Вы можете увидеть результат в этом дневнике http://www.megacrack.es.
  • Prestashop -> Вы можете увидеть результат в http://www.venlotodo.com (Веб-сайт по продаже всех видов продукции, включая SexShop с внушительными ценами (отправить по электронной почте [Электронная почта защищена] и сказать, что вы приехали из MegaCracks и сделает страхование скидка.) Жаль, что продают только в Испании, а также, если вы находитесь в провинции Барселоны говорить с ними и цена даже лучше).

Для вас, чтобы увидеть изменения вы можете использовать следующую ссылку, сравнив скорость загрузки между сайтами 2 http://whichloadsfaster.com/.

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

Для реализации на любой веб с HTML

Затем исходный код веб-я преподаю (HTML), Что мы делаем, есть несколько изображений одного и того же кнопок у нас на facebook, Twitter и Google Plus и если вы наведите курсор мыши с помощью вызова функции яваскрипта, запускаемая сценарий каждого из социальных элементов.

<HTML>
<тело>

<DIV класс="G-PlusOne" Данные размер="Средний" данные HREF="Http :/ / www.megacrack.es" OnMouseOver="Activate_gp ()">
<IMG SRC=".. / Files / gplus.png" ширина=35 высота=23>
</DIV>
<DIV>
<a HREF="HTTPS :/ / twitter.com / megacracks" класс="Twitter-последующих кнопку"
 Данные шоу-кол="True" Данные шоу-экран названия="False" данные языках="Is" OnMouseOver="Activate_tw ()">
<IMG SRC="../files/seguir.png" ширина=62 высота=22></A></DIV>
<DIV класс="Fb-подобный" данные HREF="Http :/ / www.megacrack.es" данных отправить="False" данных макета="Button_count"
 Данные ширины="100" Данные-шоу-лица="False" OnMouseOver="Activate_fa ()" >
<DIV класс="Fb-подобный" данные HREF="Http :/ / www.megacrack.es" данных отправить="False" данных макета="Button_count"
 Данные ширины="100" Данные-шоу-лица="False" OnMouseOver="Activate_fa ()" ></DIV>
<IMG SRC="../files/megusta.png" ширина=74 высота=24></DIV>

<скрипт тип="Текст / JavaScript">

	<! - <Наличие SD для хранения Facebook Как Button /> ->
	функция activate_fa () {(функция(D, S, ID) {
		  вар JS, FJS = d.getElementsByTagName (ы) [0];
		  if (D.getElementById (ID)) возвращение, Js = d.createElement (ы); js.id = ID; js.src = »/ / Connect.facebook.net / es_LA / all.js # XFBML = 1", Fjs.parentNode.insertBefore (JS, FJS);} (документ, 'Script',  «Facebook-jssdk"));} <- <Наличие SD для хранения Как Google Plus Кнопка /> ->
	функция activate_gp () {window.___gcfg = {Lang: 'EN'}; (функция() {
			вар Ро = document.createElement ('Script'); Po.type = "Текст / JavaScript", Po.async = правда, Po.src = "HTTPS :/ / apis.google.com / JS / plusone.js";
			
			вар S = document.getElementsByTagName ('Script') [0]; s.parentNode.insertBefore (ро, с);}) ();} <- <наличие SD для хранения Twitter Button /> ->	
	функция activate_tw () {!функция (D, S, ID) {
			вар JS, FJS = d.getElementsByTagName (ы) [0];if(D.getElementById (ID)) {s = d.createElement (ы); js.id = ID; js.src =»/ / Platform.twitter.com / widgets.js", Fjs.parentNode.insertBefore (JS, FJS);}} (документ,"Скрипт","Twitter-WJS");}
</скрипт>

</тело>
</HTML>

Чтобы развернуть Wordpress

Прежде всего, вам придется загрузить файлы изображений оптимизирована с такими RIOT (Впечатляющая программа для сжатия изображений), чтобы быть как можно более эффективным на ваш WordPress файлы в папке, например. В конце статьи я буду размещать ссылки на файлы PNG, чтобы держать их, загружая их и сжимать их, и т.д. ... (Они оптимизированы супер)

Что я сделал, чтобы отделить код функции в JavaScript и положить его в файл header.php расположен на шоссе WP-содержание \ Themes \ <vuestro tema> \ header.php перед закрытием головы.

<скрипт тип="Текст / JavaScript"> <! - <Наличие SD для хранения Facebook Как Button /> -> функция activate_fa () {(функция(D, S, ID) { вар JS, FJS = d.getElementsByTagName (ы) [0]; if (D.getElementById (ID)) возвращение, Js = d.createElement (ы); js.id = ID; js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1", Fjs.parentNode.insertBefore (JS, FJS);} (документ, 'Script', «Facebook-jssdk"));} <- <Наличие SD для хранения Как Google Plus Кнопка /> -> функция activate_gp () {window.___gcfg = {Lang: 'EN'}; (функция() { вар Ро = document.createElement ('Script'); Po.type = "Текст / JavaScript", Po.async = правда, Po.src = "HTTPS :/ / apis.google.com / JS / plusone.js"; вар S = document.getElementsByTagName ('Script') [0]; s.parentNode.insertBefore (ро, с);}) ();} <- <наличие SD для хранения Twitter Button /> -> функция activate_tw () {!функция (D, S, ID) { вар JS, FJS = d.getElementsByTagName (ы) [0];if(D.getElementById (ID)) {s = d.createElement (ы); js.id = ID; js.src =»/ / Platform.twitter.com / widgets.js", Fjs.parentNode.insertBefore (JS, FJS);}} (документ,"Скрипт","Twitter-WJS"); } </скрипт>

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

<DIV класс="G-PlusOne" Данные размер="Средний" данные HREF="Http :/ / www.megacrack.es" OnMouseOver="Activate_gp ()">
<IMG SRC=".. / Files / gplus.png" ширина=35 высота=23>
</DIV>
<DIV>
<a HREF="HTTPS :/ / twitter.com / megacracks" класс="Twitter-последующих кнопку"
 Данные шоу-кол="True" Данные шоу-экран названия="False" данные языках="Is" OnMouseOver="Activate_tw ()">
<IMG SRC="../files/seguir.png" ширина=62 высота=22></A></DIV>
<DIV класс="Fb-подобный" данные HREF="Http :/ / www.megacrack.es" данных отправить="False" данных макета="Button_count"
 Данные ширины="100" Данные-шоу-лица="False" OnMouseOver="Activate_fa ()" >
<DIV класс="Fb-подобный" данные HREF="Http :/ / www.megacrack.es" данных отправить="False" данных макета="Button_count"
 Данные ширины="100" Данные-шоу-лица="False" OnMouseOver="Activate_fa ()" ></DIV>
<IMG SRC="../files/megusta.png" ширина=74 высота=24></DIV>

Работает отлично, за исключением facebook не знаю, как это исправить. (Если кто-то помогает мне быть благодарны, а также сообщества).

Чтобы развернуть PrestaShop

В PrestaShop является немного более сложным, но вы также можете сделать.

Что мы делаем это отредактировать файл header.tpl Вы найдете по следующему пути на FTP или хостинг-провайдера для PrestaShop: public_html \ Themes \ Default \ header.tpl

Agregad следующие строки кода непосредственно перед закрытием головы.

<скрипт тип="Текст / JavaScript">

 функция activate_fa () {(функция(D, S, ID) {
	  вар JS, FJS = d.getElementsByTagName (ы) [0];
	  if (D.getElementById (ID)) возвращение, Js = d.createElement (ы); js.id = ID; js.src = »/ / Connect.facebook.net / es_LA / all.js # XFBML = 1", Fjs.parentNode.insertBefore (JS, FJS);} (документ, 'Script',  «Facebook-jssdk"));}

функция activate_gp () {
	вар Ро = document.createElement ('Script'); Po.type = "Текст / JavaScript", Po.async = правда, Po.src = "HTTPS :/ / apis.google.com / JS / plusone.js";
	
	вар S = document.getElementsByTagName ('Script') [0]; s.parentNode.insertBefore (Ро, з);}

функция activate_tw () {!функция (D, S, ID) {
	вар JS, FJS = d.getElementsByTagName (ы) [0];if(D.getElementById (ID)) {s = d.createElement (ы); js.id = ID; js.src =»/ / Platform.twitter.com / widgets.js", Fjs.parentNode.insertBefore (JS, FJS);}} (документ,"Скрипт","Twitter-WJS");}
</скрипт>

Когда вы сделали это понадобится PrestaShop аддон называется HTMLBOX, которые можно скачать с http://mypresta.eu/modules/front-office-features/html-box.html.

Теперь только вы будете иметь, чтобы активировать модуль в его конфигурацию и добавить следующий код:

Первые строки кода вы можете оставить без сдачи (чтобы получить вид идентичны, что из других модулей в 1.5.3 версии PrestaShop)

<Р класса = "title_block" стиль = "цвет фона: # 383838, обивка: 6px 11px;

цвет: # FFF; текст-тень: # 0 1 0 000 пикселей, размер шрифта: 12px; шрифта: жирный; "> нажмите бы помочь</p>

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

<p>

<DIV класс="Fb-подобный" данные HREF="Http :/ / www.venlotodo.com" данных отправить="False"
 данных макета="Button_count" Данные-шоу-лица="False" ></DIV>
<DIV класс="Fb-подобный" данные HREF="Http :/ / www.venlotodo.com" OnMouseOver="Activate_fa ()"
 данных отправить="False" данных макета="Button_count" Данные-шоу-лица="False" >
<IMG SRC="../files/megusta.png" ширина=74 высота=24>
</DIV>

<DIV класс="G-PlusOne" данные HREF="Http :/ / www.venlotodo.com" Данные размер="Средний"
 OnMouseOver="Activate_gp ()">
<IMG SRC=".. / Files / gplus.png" ширина=35 высота=23>
</DIV>

<DIV>
<a HREF="HTTPS :/ / twitter.com / акция» класс="Twitter-акция кнопку" данных URL="Http :/ / www.venlotodo.com"
 данные языках="Is" OnMouseOver="Activate_tw ()">
<IMG SRC=".. / Files / twittear.png" ширина=62 высота=22></A></DIV>
</p>

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

Файлы с изображениями социальные кнопки сжатый

Как я и обещал перед отъездом файлы изображений, социальных сетей и таблетки готов к загрузке:

Twitter -> http://www.megacrack.es/files/seguir.png

Google Plus -> http://www.megacrack.es/files/gplus.png

Facebook -> http://www.megacrack.es/files/megusta.png

Теги: , , , , , , , , ,
Опубликовано веб-производительность | Нет комментариев »

Вайбак машины или тянуть время назад в Интернете.

Опубликовано Чаус Ксавье Надаль 31st октября 2012

Название статьи Вайбак машины или тянуть время назад в Интернете Кажется, что-то нереальное, что-то футуристическое, но это на самом деле возможно сделать благодаря некоммерческой организации с 10 петабайт информации в его распоряжении, позволяет получить тянуть время назад в Интернете можно увидеть скриншот любой веб так как он начал представлять эволюцию любого сайта, любой интернет-бизнеса, как все это началось, как были старые статические HTML форматы, как они эволюционировали к HTML 5.

Только вы будете иметь доступ к Интернету следующий http://archive.org/web/web.php и написать свой веб-сайт Машина Вайбак и нажмите на кнопку Take Me Back.

Они имеют около 150 миллиардов веб-страниц не заархивированные от 1996, пока несколько недель назад.

Если вы хотите более подробную информацию о вы можете прочитать по следующей ссылке: http://archive.org/about/

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

Здесь вы можете увидеть эволюцию этого блога:

С момента своего создания в 2008 и 549 сохраняются в снимке рассматривает марта 25 2008.

Megacrack чтения »

Теги: , , , , ,
Опубликовано Большие данные | Нет комментариев »

Разрабатывает JavaScript, HTML и CSS Online.

Опубликовано Чаус Ксавье Надаль 28th октября 2012

JsFiddle или, как они называют это «парк культуры и отдыха для веб-разработчиков», представляет собой прекрасный инструмент сети, которые могут быть использованы во многих отношениях, таких как онлайн-редактор для создания наличие фрагментов, HTML и CSS, чтобы поделиться нашим исходным кодом и другими что testeen людей и видеть результаты непосредственно работающих на простой и удобный сайт.

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

3 интерфейс продукта имеют различные области, в которых на работу, на вершине мы можем видеть иконы, чтобы выполнить код, сохраните его, разделить его на левой стороне мы можем изменять различные варианты, чтобы получить право Панели содержат инструменты необходимых для достижения желаемого результата от изменения панелей для изменения программного кода, СКС, CofeeScript, JavaScript, и т.д. ..

А магия в правой панели 4, HTML, CSS, JavaScript и результат, когда нажатие кнопки RUN увидеть результаты нашего кода.

Я оставляю пример и дайте мне знать, если вам рекомендую этот сайт (http://jsfiddle.net/B6Jsy/50/)

В этом примере я создал часть кода CSS и HTML поставить Adsense рекламу 2 модулей в один блок с поля между ними и с центру.

Как вы можете видеть в вызове HTML класса "publidiv"Я создал в таблице стилей (CSS), и поэтому я могу использовать его в любом месте на сайте только вызовом класса publidiv o опубликованный AdSense для содержания рекламы, которая всегда в центре.

Megacrack чтения »

Теги: , , , , ,
Опубликовано программирование | Нет комментариев »

Реклама в Blogger

Опубликовано Чаус Ксавье Надаль 29th апреля 2012

Сегодня мы расскажем, как вставить рекламный код в ваш блог Blogger технологии, разработанные в рамках, давайте сделаем немного сложнее, чем обычно, я объясню:

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

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

Например, код, который мы выбрали сегодня это: знамя 468 60 ×

<Сценарий тип = "текст / JavaScript"> <! -
google_ad_client = "CA-паб-2342147052953367";
/ * Contessota * /
google_ad_slot = "6351243105";
google_ad_width = 468;
google_ad_height = 60;
// ->
</ Скрипт>
<Script тип = "текст / JavaScript"
SRC = "http://pagead2.googlesyndication.com/pagead/show_ads.js”>
</ Скрипт>

Если у вас есть код pulsáis на любой из этих ссылок 2 преобразующие HTML код в простой текст полностью понятным блоггер.

http://nosetup.org/php_on_line/convertir_html_texto

http://blogcrowds.com/resources/parse_html.php

Мы должны выглядеть следующим образом:

& Lt; тип сценария = & Quot; текст / JavaScript & Quot; & GT; & л ;! -
google_ad_client = & Quot; ча-PUB-2342147052953367 & Quot ;;
/ * Contessota * /
google_ad_slot = & Quot; & Quot ;; 6351243105
google_ad_width = 468;
google_ad_height = 60;
// - & Gt;
& Lt; / скрипт & GT;
& Lt; тип сценария = & Quot; текст / JavaScript & Quot;
SRC = & Quot; HTTP: //pagead2.googlesyndication.com/pagead/show_ads.js&quot; & GT;
& Lt; / скрипт & GT;

С этого момента мы только определить, где разместить рекламу на нашем блоге.

Blogger мы получаем доступ к учетной записи администратора нашего блога, и мы находимся в меню Шаблон.

Megacrack чтения »

Теги: , , , , , , , , , , , , , ,
Опубликовано Active Directory, Google, реклама | Нет комментариев »

Сообщество разработчиков (вики-)

Опубликовано Чаус Ксавье Надаль 18th августа 2011

хорошо,

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

вики-

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

До скорого

Теги: , , , , , , , , , , , , , ,
Опубликовано Android, iphone, программирование | Нет комментариев »