rifleman

Рейтинг
86
Регистрация
26.12.2005
Интересы
Video, CSS, HTML, Linux, OS X
I'm a webmaster, web developer and Information Technology consultant. I work in front and back end projects using the following technologies: HTML, CSS/CSS3, PHP, Javascript, jQuery, MySQL, and few more.

Переделать сайт из нереспансив в респансив несложно. Все что надо это хорошо знать regular expression и набрать стили которые надо заменить.

Например для начала находим код типа

<meta charset="utf-8">

и заменяем его на его же но с добавлением viewport:

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

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

Разумеется добавив эту строчку сайт респансив не становится, но пени от Гугла уже не будет.

Точно так же можно найти и заменить аргументы и стили и сделать сайт полностью мобильным. Я regular expression можно сказать вообще не знаю, все что умею - это найти похожее выражение и отредактировать для своих нужд, однако успешно сделал респансивным статический сайт в 35к страниц используя бесплатную утилиту MassReplaceI которая умеет найти и заменить контент в большом количестве файлов.

Сначала я прописал новые стили в css файле, после чего внутри html страниц запускал команду а-ля "найди и замени" где вырезал не нужные теги и добавлял нужные классы. Утилита понимает regex поэтому позволяет найти все что имеет логику.

Утилита для мак, но на линуксе это можно делать обычными юниксовскими командами, например найти и заменить style text/css можно при помощи команды типа этой:


find . -regex ".*\.\(html\|py\)$" -type f -exec sed -i "s/\(<style[^>]*\)\(\stype=[\"']text\/css[\"']\)\(\s\?[^>]*>\)/\1\3/gi" {} \;

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

Если все же необходима именно CMS, то я бы назвал несколько возможных вариантов:

Вариант 1:

Плагин http://codecanyon.net/item/html-2-posts-wordpress-plugin/3717408?ref=avoinich опубликует все что находится внутри определенных тегов и создаст посты с этим содержимым. Я где то видел бесплатные аналоги но их не проверял.

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

Плугин перенесет содержание в базу данных, откуда можно будет вырезать Width и Height аттрибуты тем же реджитом

Вариант 3. Захватываеть содержимое страниц этого сайта и публиковать их в Вордпресс. Например вот эту библиотеку в виде плагина к вордпрессу (есть php аналог у этого же автора) может захватить содержание любого тега внутри любой страницы в интернете и опубликовать это в вордпресс пост. Я его использую вместо API что бы получить то что через API не всегда возможно.

Надо будет только создать шорткод содержащий нужные урлы.

1. Зачем закрыл от индекса? Поисковики увидят на странице iframe на который им нельзя даже взглянуть и обидятся. Ютуб например поступает так: на странице плейера ставит

<link rel="canonical" href="урл той страницы на ютубе" />

2. Flash = зло.

3. Что значит видео перестает разворачиваться? В iframe стоит аргумент allowfullscreen?

В html5 видеотэгом должно быть что-то вроде такого:


<video preload controls poster="file.jpg">
<source src="fiel.mp4" type="video/mp4">
<source src="file.webm" type="video/webm; codecs=vp8,vorbis" />
<source src="fileogv" type="video/ogg; codecs=theora,vorbis" />

А на страницу с где видео показывается как iframe должно быть что-то типа такого:

 <iframe src="http://стaница-с-видео.html" allowfullscreen=""></iframe>

Обрати внимание на allowfullscreen=""

Да, это так, наверное. Только я вот уже какой год пытаюсь, но вот лучше чем Bootstrap не получается. Иногда кажется - вот так лучше будет, ибо короче и понятнее и вообще меньше, нахрена лишние аргументы... А потом - бум, в каких-то условиях то что я сделал ведет себя не адекватно. А вот оригинальный вариант с Bootstrap ведет себя адекватно всегда...

Есть еще такая вещь - поскольку много сайтов сделано при помощи Bootstrap то если ты пользуешься //maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css то есть вероятность что твои 200кб css и js уже скешированы и броузер клиента их возьмет локально.

Попробоуй поставить вручную:

Жми Tools > Build System > New Build System.

Откроется новый таб который называется untitled.sublime-build вот с таким текстом:

{

"cmd": ["make"]
}

Если у тебя мак замени его следующим:

{

"cmd": ["open", "-a", "/Applications/MultiBrowser.app", "$file"]
}

Если у тебя винда то следующим:

{

"cmd": ["C:\Program Files\", "$file"]
}

Сохрани его с именем "Choose Browser.sublime-build" в следующем месте:

Mac OS X: ~/Library/Application Support/Sublime Text 2/Packages/User

Windows: вот тут я не подскажу, очень давно не видел эту ОS. Очень важно что бы это было место которое Sublime Text знает и БУДЕТ там искать.

Рестарт Sublime Text.

Теперь что бы увидеть проект в броузере, иди в Tools > Build и нажми Command-B (Mac) or Ctrl-B (Windows).

Ссылка: http://www.sublimetext.com/docs/build.

По клавившам: Command-B это хреновая комбинация потому что в маке это по умолчанию "сделать выделенный текст болдовым". Каждый юзер OS X это может легко поменять в System Preferance, а вот как это организовано в Windows я без понятия.

На и немножко не в тему но маленькое ИМХО, для вебстраниц Espresso значительно лучше чем Sublime Text... Я и курс на Линде посмотрел и OS вроде хорошо знаю, но изучить этот редактор - 🤪

---------- Добавлено 14.05.2015 в 09:25 ----------

Soxay:
View In Browser я пробовал, но он почему-то не открывает страницу в браузере не через горячую кнопку ни через верхнее меню.

Ты ставил его через так как я написал или скопировал файлы с гитхаба?

Поставь плагин Sublime Text - View In Browser

https://github.com/adampresley/sublime-view-in-browser

Его пожно поставить при помощи Package Control. Если он еще не установлено то в sublime3 его можно поставить так:

1.Открываем консоль путем нажатия ctrl+` или тыкаем в View > Show Console menu.

2.Копируем туда эту команду:


import urllib.request,os,hashlib; h = 'eb2297e1a458f27d836c04bb0cbaf282' + 'd0e7a3098092775ccb37ca9d6b2e4b7d'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)

3.Ждем пока пакеты установятся и перезапускаем Sublime Text3.

Теперь используем Package Control что бы поставить View In Browser:

1.Жмем Command-Shift-P (Mac OS X) или Ctrl-Shift-P (Windows) что бы открыть Command Palette.

2.Начинаем набирать фразу Package Control пока не появится подходящая команда.

3. Вводим Install Package, пока не увидите "пакет управления: Установите пакет". Выбрать его и нажать Return/Enter.

3. В текстовом поле начинайте набирать фразу View In Browser пока не появится, когда появится нажмите Enter, чтобы установить его.

4.Перезапуск Sublime Text.

5.Все:)

Теперь что бы посмотреть открытую Sublime Text вебстраницу можно при помощи комбинации клавишь Ctrl-Alt-V

http://www.granneman.com/webdev/editors/sublime-text/set-up-sublime-text-to-preview-your-code-in-a-web-browser/

На мой взгляд самый простой способ избавиться от ненужных аргументов стилях будет оптимизация кода при помощи плагина к Firefox Dust-Me Selectors.



---------- Добавлено 14.05.2015 в 07:22 ----------

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

Если надо что бы страница загружалась в броузере быстро, то надо смотреть на гугловском тесте PageSpeed Insights или YSlow/GTmetrix что именно нуждается в оптимизации, и на моем опыте начинать чаще всего приходится с оптимизации сервера.

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

Вот пример оптимизированной страницы Bootstrap которая в гугловском тесте PageSpeed Insights получает скорость загрузки 100/100

https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2F7ru.org%2Fdev%2Fpagespeed

В коде можно увидеть как оптимизирован код. Все остальное - это настройки сервера. Если у тебя Ubuntu/Apache или OS X/Apache сервер и нужна будет помощь - обращайся.

Я сделал эту страницу в качестве демонстрации, думал предлагать услуги оптимизации cайтов для тестов YSlow и PageSpeed Insights но руки не дошли.

Проверьте этим DNS tool на предмет обшибок.

Возможно он выдаст ошибку "NSs have same SOA serial" или, что еще хуже, "no glue".

Если у вас мак, то проверить авторизацию неймсервера следующими командами

host -t NS www.site.com

nslookup -type=NS www.site.com

"Non-authoritative " ответ показывает что IP address был получен из локально (из кэша нэйм сервера) а не из авторизированнго источника. В этом случае для вас сайт будет работатать, а для других ( гугла например) - нет.

Для правильной работы, надо настроить DNS так что бы он получал "authoritative" name server для вашего домена.

Другие возможные причины:

1. В robots.txt стоит запрет. В этом случае его надо снять.


User-agent: *
Allow: /

2. Весь сайт целеком редиректится. Например c http на https.

В этом случае надо исключить robots.txt из этого редиректа

Это можно сделать добавив в .htaccess следующие строчки:


RewriteEngine On
RewriteCond %{HTTPS} off
RewriteCond %{REQUEST_FILENAME} !robots\.txt
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]


---------- Добавлено 11.03.2015 в 10:26 ----------

LEOnidUKG:
Фигасе Ванга! Вы откуда знаете, какие у него проблемы не видя сайт?

Просто предположил, такая ошибка неоднократно встречалась.

У вас проблемы с nameserver. Проверьте настройки DNS.

У меня сложилось впечатление что некоторые смешивают DMCA Takedown Process c законами охраняющими авторские права.

Законы об авторском праве охраняют права людей создавших контент.

DMCA же это американская автоматическая система сканирования интернета и рассылки писем от имени авторов.

Действует эта система только в США. Коммиссия тоже выплачивается только в зоне юрисдикции США.

Более того, американская компания Google при получении DMCA Takedown против нерезидентов США, удаляет контент только из Американского СЕРПа.

Вот характерный пример абсурда DMCA: https://www.eff.org/deeplinks/2015/02/absurd-automated-notices-illustrate-abuse-dmca-takedown-process автоперевод

А мне непонятно почему DMCA - закон, подписанный преидентом Клинтоном, выполняется в России.

Всего: 80