Автоверстальщик, сверстать текст из word в html онлайн
Верстка текстов для сайта — какое скучное и рутинное занятие. Проставлять теги, следить, чтобы все они были закрыты. И так раз за разом, текст за текстом, статья за статьей. Голова может опухнуть от подобной деятельности. А ведь текстов может быть с несколько десятков.
Некоторые системы управления сайтом имеют в своем наборе визуальные редакторы, которые позволяют упростить задачу. Но работают они не идеально. Но мы же не дилетанты, мы же хотим сделать наш сайт лучше. Поэтому приходится все делать ручками.
Находясь в точно таком же положении, мы с коллегой подумали, а зачем мы усложняем себе жизнь? Так и радился на свет этот инструмент.
Принцип его работы очень прост:
- Все тексты должны быть написаны в MS Word;
- Они должны быть размечены особым образом (см. ниже);
- Достаточно просто скопировать текст из файла, вставить в текстовое поле ниже и нажать «Сверстать»
Что касаемо разметки файла. Самое главное — это учитывать два момента:
- Чтобы обозначить заголовок h2,h3 или h4, нужно поставить перед ним «Hx:«, где «x» — уровень заголовка. Например, h2:Супер статья. Или h3:Стоимость работ;
- Все списки в файле должны быть сделаны именно списками и никак иначе. Также допускается ручное указание элементов списка: проставьте перед каждым элементом вот такой код «->«. Например,
->Первый элемент списка
->Второй элемент списка
->Третий элемент списка
Если текст размечен правильно, то парсер корректно выстроит вам:
- Заголовки: h2, h3, h4;
- Списки: нумерованные «<ol>…</ol>»(1,2,3..) и ненумерованные «<ul>…</ul>»(•,•,•…)
- Все остальное будет обернуто в тег параграфа»<p>…</p>»
Парсер не умеет распознавать таблицы, поэтому старайтесь их избегать. Я считаю, что это уже чисто индивидуальная вещь, которая не должна быть в рядовых статьях.
Также в файле примера вы увидите сверху три ключевых слова: «TITLE:«,»DESC:«,»KEYWD:«. Для чего они нужны. Оптимизаторы часто предпочитают для удобства все метатеги к статьям прописывать непосредственно рядом со статьей, обычно в самом начале. Я предусмотрел такую возможность. При парсинге эти строчки игнорируются, так что смело можете их заполнять так, как вам угодно.
ВНИМАНИЕ!!!
Автоверстальщик вынесен в отдельный инструмент и теперь доступен по короткому адресу:
https://text-html.ru
15 бесплатных онлайн-сервисов для работы с текстами
Когда я на прошлой неделе обещала вам статью про полезные онлайн-сервисы, я просто не представляла себе масштаба бедствия. Ссылки на сервисы хранятся у меня в закладках, в специальном файле, некоторые я помню, потому что регулярно использую. Еще несколько ссылок прислали мне читатели сайта, за что им огромное спасибо!
Поэтому рассказ о ценных ресурсах в Интернете я решила разбить на несколько частей. И начнем мы с работы с текстами.
В конце статьи или прямо сейчас скачайте запись видеоурока по контент-плану
Итак, 15 бесплатных онлайн-сервисов для работы с текстами.
Веб-сервис по проверке правописания.
Да, он существует:) Вводите ваш текст, нажимаете «проверить», получаете полный перечень ошибок. Сервис видит разные ошибки, стилистические в том числе.
Но на всякий случай сильно не радуйтесь, потому что разные – это ещё не все. Всё равно обязательно вычитывайте ваши тексты, Орфограммка много пропускает. Если сомневаетесь в собственной грамотности – вычитывайте сами, пользуйтесь проверкой Word, ну и дополнительно можете воспользоваться Орфограммкой.
Похожим образом работает http://www.artlebedev.ru/tools/orfograf/, но функционал в Орфографе меньше.
Оценка читабельности текстов.
Можно добавить URL уже опубликованного текста или вставить фрагмент из Word и попросить систему оценить легкость восприятия текста в баллах, а также в возрастной категории.
Если у вас получился показатель “Аудитория” старше студента-первокурсника – ваш текст скорее всего сложноват для восприятия. Если вы пишете контент для обычных людей, вам стоит соответствовать уровню восприятия старшеклассников (по определению сервиса). Можете проверить: посчитать уровень восприятия текстов топовых райтеров Рунета, получите показатели, к которым вам стоит стремиться.
Сервис для подготовки текстов к web-изданию.
Всё просто. Вы пишете ваш текст в Word, копируете его в окошко сервиса – получаете правильный текст с html-тегами для публикации онлайн. Кроме того, сервис проверяет орфографию, удаляет некоторые опечатки, расставляет специальные символы (например, неразрывные побелы) и так далее. Ручного труда и внимательной вычитки Типограф не заменяет, но при больших объемах работ может помочь.
У Лебедева тоже есть Типограф: http://www.artlebedev.ru/tools/typograf/
Определение количества страниц в тексте или в звукозаписи.
В окошко вводите текст, нажимаете кнопку «определить страницы» — получаете количество страниц. В принципе, если у вас есть текст, то вам скорее всего и так понятно, сколько в нём страниц:) Поэтому интереснее вторая функция – п=определение количества страниц в звукозаписи. В поле хронометража вводите продолжительность записи, нажимаете всё ту же кнопку «определить страницы» — получаете объем, например, электронного пособия, которое хотите сделать с помощью транскрибации аудиолекции.
А это наоборот – определение времени звучания печатного текста. В окошко вводите текст – получаете время звучания. Можно установить нужное время звучания, и сервис скажет вам, сколько слов удалить из вашего текста (или добавить в него), чтобы поместиться в эфирное время.
Декодер от Лебедева. Распознает текст в различных кодировках.
Если вам на почту пришло письмо в непонятных символах, и ваша почтовая программа никак не справляется с расшифровкой – можно попробовать поместить текст в Декодер. Скорее всего, нужная кодировка найдется.
Сервис для распознавания текстов из графических форматов.
В отличие от некоторых других сервисов для распознавания текстов, здесь нужна регистрация. Зато сервис поддержкивает множество форматов: TIF, JPEG, PNG, BMP, GIF, PBM, PGM, PPM – из всего этого делает DOC, который вы можете сохранить на компьютер.
А если вы предпочитаете сервисы без регистрации, то подойдет, например, http://www.newocr.com
Тоже англоязычный сервис, но достаточно понятный даже тем, кто в английском не силен.
Сервис удаляет лишние разрывы строк, при этом сохраняет разбивку текста на абзацы; может конвертировать регистр (заменять заглавные буквы на строчные), удалять двойные пробелы и лишние пробелы в начале строк. Может работать подобно Типографу, подготавливая текст для публикации в html.
Виртуальная клавиатура.
Если вы, скажем, в Америке, и у вас нет русской клавиатуры, а вам срочно требуется набрать русскоязычный комментарий или письмо русскому другу, можно не мучиться с транслитом, а использовать виртуальную клавиатуру. Просто пишете рекст с помощью мышки, копируете, вставляете куда вам надо.
Онлайн-сервис для преобразования печатного текста в голос.
Можно применять для озвучки книг или статей, когда вам некогда читать. Но на мой вкус – механический голос всё-таки сильно мешает восприятию. И в ударениях иногда ошибается. Но если вам действительно надо делать несколько дел одновременно, то заменить чтение прослушиванием – вполне достойный вариант. И звучит немного получше, чем в том же Google Translate https://translate.google.ru (да, там тоже есть функция озвучки).
Ну и забавное – на закуску:)
Матрица идей – тоже от Лебедева. Создатели называют свой продукт «вантузом для творческого засора». Подходит, скажем, для копирайтеров или дизайнеров.
Принцип действия: у вас есть слово, надо придумать идею. Например, вы пишете контент на сайт про диваны, и вам никак не придумать – что ж такого про эти диваны еще написать. Идете в матрицу, вводите слово «диван». Система подбирает для вас второе слово (случайное) и выдает вам все сочетания двух ваших слов. Например, система выбрала слово «Нота». Диван + нота? Как сочетается?
Диван у ноты, диван над нотой, диван для ноты… О! Диван в виде ноты! Пишем про диваны необычной формы. Или – диванная нота – пишем про то, как избавиться от скрипа диванных пружин. Неплохо, если идей ну совсем нет.
***
У многих сервисов есть аналоги в Интернете. Я рассказала о тех, которые использовала или использую я.
Расскажите, какие интересные онлайн-сервисы встречались вам? Не обязательно для работы с текстами.
А в следующих выпусках я расскажу вам о работе с изображениями, тайм-менеджменте и просто полезных фишках, которые можно делать с помощью онлайн-ресурсов.
онлайн конструктора верстки страниц сайта
C тех пор как в Интернет массовую популярность получила тема создания собственных блогов, кто только не открыл для себя этот новый род занятий: от школьника до пенсионера. Причем большинство из них напрочь забыли о том, что чтобы достичь в чем-то хороших успехов, надо либо хорошо разбираться в этой сфере (по крайней мере иметь начальное представление) либо иметь много денег, чтобы платить тому, кто разбирается и сможет помочь.
Создавать хорошие сайты не такое уж простое дело как может показаться. Системы управления сайтами (CMS) конечно же способны значительно облегчить работу, однако всякий шаблон надо редактировать, удалять лишние исходящие ссылки, править под себя. Еще больше знание основ верстки требуется при создании HTML страниц с нуля. Даже для вебмастера верстка страниц с нуля представляет собой монотонный шаблонный процесс, который не лишним было бы как-то упростить. Сегодня рассмотрим еще молодой, но весьма перспективный проект, который призван облегчить процесс верстки кода html-страницы. Благодарю наличию визуального конструктора и автоматического выполнения ряда стандартных операций, он поможет быстро сверстать страницу с кроссбраузерным неперегруженным (что немаловажно!) кодом!
Конструктор верстки BuildMak предназначен как для опытных вебмастеров, которые ценят свое время и хотят упростить задачу создания блочной структуры сайта, так и для новичков в деле сайтостроения – всё-таки делать структуру в визуальном конструкторе гораздо проще и быстрей, чем писать теги в текстовом файле ).
После регистрации в системе Вам будет предложено создать новый проект. На бесплатном тарифе (он будет предоставлен по умолчанию) можно создать только один проект, который можно скачать только один раз. Остальные тарифы отличаются между собой размером доступного дискового пространства, числом проектов и их скачиваний.
Сам конструктор верстки выглядит таким образом:
Слева (1) находится панель инструментов для работы с блоками (DIV) и их настройки. По центру (2) расположена рабочая область, выше неё (3) – кнопки создания элементов структуры сайта (div, заголовки, списки, таблицы и пр.), кнопка просмотра проекта в браузере. Справа от рабочей области (4) – дерево элементов, где представлена иерархия всех структурных элементов страницы сайта, а также кнопка их удаления.
По сути, тому кто работал в редакторе DreamWeaver, не составит никакого труда быстро освоиться в BuildMak. Однако последний предоставляет гораздо больше возможности по созданию блочной верстки. Если в DreamWeaver для этого нужно писать код ручками, то здесь всё делается в визуальном конструкторе при помощи кнопок и задания значений: выравнивание блоков на странице, относительно и абсолютное позиционирование, отступы (margin, padding), границы, заливка и пр.
В принципе всё очень легко, но хотя бы базовые знания html и css должны быть, потому что надо обязательно представлять за что отвечают такие параметры как relative, absolute, visibility, Z-index, overflow и пр.
А что же на выходе? После создания страницы Вы скачиваете zip-архив, в котором расположен файл index.html, файл стилей (style.css), папка с картинками (если Вы их использовали). Создатели конструктора BuildMak гордо заявляют о чистоте и кроссбраузерности созданного html кода. Это действительно так – код чистый, без лишнего мусора, но вот вручную придется править некоторые вещи, например, метатеги. Делать это непосредственно в конструкторе пока невозможно, но разработчики обещают очень скоро добавить эту и многие другие возможности, которые позволят верстать код онлайн еще быстрей и удобней!
Обучающее видео по созданию сайта в BuildMak:
Друзья, своими впечатлениями о конструкторе BuildMak делитесь в комментариях. Также можно задавать вопросы по работе сервиса.
Обновлено 08.2019: BuildMak больше не работает.
Автор статьи: Сергей Сандаков, 39 лет.
Программист, веб-мастер, опытный пользователь ПК и Интернет.
Автоматическая HTML/CSS верстка сайта из Photoshop
Пошаговая инструкция для создания HTML5/CSS3 верстки сайта из PSD файла
Для автоматической верстки сайта из дизайна Photoshop вам не потребуется практически никаких усилий. Сервис сделает за вас почти все. Мы стремимся к полной автоматизации процесса CSS верстки, но полностью автоматизировать такой творческий процесс, как HTML верстка сайта, невозможно. Вы можете значительно улучшить автоматически создаваемую верстку сайта, если будете следовать нескольким простым правилам.
- Не препятствуйте генерации CSS3 стилей для слоев. При создании макета используйте ‘Shape’, ‘Layer mask’ и ‘Clipping Mask’, эффекты слоев. При этом используйте для слоев только те эффекты, которые возможно преобразовать в CSS3 (все, кроме: ‘Satin’, ‘Bevel & Emboss’). Ни в коем случае не растеризовывайте слои!
- Помечайте слои тегами в соответствии с документацией сервиса автоверстки. Если из слоя или группы слоев в Photoshop требуется получить в HTML верстке сайта такие элементы, как ссылка, форма ввода, таблица, список, и т.п., то следует пометить слой или группу соответствующим тегом. Все поддерживаемые теги смотрите на странице документации.
- Группируйте слои логически. Некоторые начинающие дизайнеры не следят за структурой слоев в Photoshop. Профессиональные дизайнеры всегда объединяют слои в логические группы и соблюдают строгую структуру в PSD макете. Настоятельно рекомендуем объединять все слои в логические группы (такие как заголовок, футер, основной контент, колонки и т.п.). Для этого используйте группы слоев (Layer Group) в Photoshop. Это поможет сервису автоматически создать ожидаемую структуру документа.
- Одно логическое изображение — один слой / Smart Object / группа с тегом #merge. Из каждого видимого слоя в Photoshop в создаваемой HTML вёрстке сайта получается отдельный HTML/CSS элемент. Если в макете для создания одного изображения (такого как логотип/бэкграунд/т.п.) используется несколько слоев — объедините слои в группу и пометьте группу тегом #merge. Либо создайте из этих слоев один Smart Object. В противном случае, в верстке сайта для представления одного логического изображения будет использовано несколько изображений, что ухудшит качество верстки.