Ръководството на уеб дизайнера за Tumblr

Тази статия се появи за първи път в брой 213 на .net списание - най-продаваното списание в света за уеб дизайнери и разработчици.

Колко пъти сте казали: „Това е годината, в която най-накрая ще започна блог“? Подобно на много други, вие започвате дългия и труден процес на проектиране на сайт за най-трудния клиент - себе си - само за да гледате как той се премества на заден план всеки път, когато реални, плащащи клиенти пречат.



След като най-накрая забиете дизайна, започва процесът на изграждане и разработване на вашия блог. След седмици (или месеци) най-накрая е време да натиснете бутона за стартиране. Някъде между четвъртата и петата ви проницателна и брилянтна публикация ви удря ... актуализирането на този блог ще отнеме огромно количество работа.



Лично аз се оказах в капан в този точно цикъл повече от веднъж през годините. В началото на 2009 г. осъзнах, че трябва да преосмисля точно какво се опитвам да постигна с личен блог. Идеята да пиша дълги публикации в блога няколко пъти седмично звучи невероятно, но за мен това просто не беше реалистично. Вече чуруликах, но това, от което наистина се нуждаех, беше възможността да споделя само малко повече с кратки, директни и точни публикации. Търсенето ми за простота ме доведе директно до Tumblr .

surface pro 6 срещу surface go

Приготвяме се да започнем

На 6 април 2009 г. се регистрирах за акаунт и започнах да публикувам. Използвайки тематичната градина на Tumblr, избрах основна тема, с която знаех, че мога да живея, докато дадох на Tumblr тест тест. Простотата на платформата също означаваше, че не трябваше да се притеснявам от инсталирането на софтуер за блогове на моя сървър. Вложих всичките си усилия в курирането на съдържание за дизайн, култура, технологии и бизнес, заедно с личните си мисли и мнения.



Почти две години по-късно успях да се придържам към блоговете в Tumblr с близо 600 публикации на моя сайт в www.jonathanmoore.com : средно 0,85 публикации на ден. Днес осъзнах, че простотата е това, което ми помогна да бъда в съответствие с публикуването, но мрежата от хора в Tumblr е това, което ме вълнува от платформата. Tumblr опростява типичния блог, правейки блоговете красиво лесни. Милиони хора по целия свят споделят неща, които правят, обичат, намират и създават.

Блогът на Tumblr дава невероятна гъвкавост, ако попаднете под капака

Блогът на Tumblr дава невероятна гъвкавост, ако попаднете под капака

В основата на Tumblr са осем типа публикации - текст, снимка, цитат, връзка, чат, аудио, видео и отговори на въпроси - които можете да публикувате на таблото за управление. Това прави споделянето на всичко, което намерите или създадете нелепо лесно. Ако публикувате видеоклип, самият видеоклип е основната тема и след това можете да добавите незадължителен надпис, за да предоставите контекст, прозрение или подробности за него. Същото се отнася и за други видове публикации, с изключение на текстовите публикации, които ви позволяват да създавате по-типични публикации в блога с комбинация от текст, изображения и видео в единичната публикация.



Tumblr не само опростява типовете публикации, но и ви дава широк набор от начини за публикуване във вашия блог. Лично аз обикновено използвам таблото за управление през повечето време, но има редица други начини за публикуване на съдържание във вашия блог.

рисунки на писалка и мастило на хора
  • Bookmarklet, който ви позволява да публикувате директно от браузъра си, докато сърфирате в мрежата
  • Мобилни приложения за iPhone, BlackBerry и Android
  • Изискано публикуване по имейл, за да публикувате текст, снимки, MP3 или видеоклипове директно от мобилния си телефон или чрез имейл
  • Извиквайте аудио публикации с безплатен номер
  • Много други приложения на трети страни ( www.tumblr.com/docs/en/apps )

За повече подробности относно различните начини за публикуване в Tumblr вижте www.tumblr.com/goodies .

Общността

Разбира се, бихте могли да използвате Tumblr просто като начин за актуализиране на вашия блог, но бихте пропуснали богатата и завладяваща общност на Tumblr. Истинското забавление започва, след като проследите шепа интересни, вдъхновяващи и еднодушни хора. И след като вашият блог е изградил прилични последователи, невероятно е да видите колко бързо публикация може да се разпространи в платформата, с харесвания и реблоги.

Извън следенето на добре познати хора в Tumblr, вградената директория е чудесен начин да откриете нови хора на платформата. Директорията е разделена на почти 50 категории, обхващащи широк спектър от теми, включително дизайнери, разработчици, предприемачи, стартиращи фирми, архитектура, организации с нестопанска цел и пътувания. Прекарайте час-два в разглеждане на препоръчани от общността блогове и скоро ще имате отлична група сайтове, които да следвате като отправна точка.

Tumblr е изградил по редица начини да възнаграждава хората, които публикуват оригинално, вдъхновяващо, креативно и интересно съдържание в своите блогове. Най-очевидните биха били харесвания и реблоги. В горната част на всяка страница за постоянна връзка в блога и на таблото за управление ще намерите икона на сърце, която да ‘хареса’ публикацията. Ако попаднете на публикация, която смятате, че си струва да споделите, или искате да добавите свои собствени мисли към нея, можете да реблогирате публикацията в собствения си блог. Реблогирането е начинът, по който идея или мем за публикация бързо се разпространяват в мрежа от хиляди блогове.

Става мобилен

Мобилното оформление по подразбиране в Tumblr

Мобилното оформление по подразбиране в Tumblr

По-бързо, отколкото го осъзнаваме, хората започват да се отказват от лаптопите си в полза на мобилни устройства, така че Tumblr е създал мобилни приложения и оптимизирани за мобилни устройства блогове. Приложенията за платформите iPhone, BlackBerry и Android ви позволяват да разглеждате таблото си за управление и да публикувате всеки тип публикация директно от телефона си. Приложенията за iPhone и Android ви позволяват да получите достъп до разширените опции за публикуване на Tumblr - запазете като чернова, добавете към опашката, публикувайте в и персонализирайте URL адресите.

Изпращайте публикациите си по имейл директно до вашия блог с усъвършенстваното публикуване на имейли на Tumblr. Отидете на страницата Goodies ( tumblr.com/goodies ), за да разберете уникалния имейл адрес на вашия сайт.

След като натиснете send, Tumblr автоматично ще открие типа публикация, която се опитвате да създадете, и ще я публикува на вашия сайт. Ако искате малко повече контрол върху форматирането, Tumblr има поддръжка за синтаксиса Markdown ( daringfireball.net/projects/markdown/syntax ).

Всички ваши блогове идват с оптимизирано и красиво мобилно оформление за iPhone, BlackBerry, Android и други. Ако темата, която използвате, работи добре в мобилните браузъри, винаги можете да деактивирате оптимизираното оформление в менюто Персонализиране. Tumblr също ви дава възможност да презапишете оформлението по подразбиране за мобилни устройства със собствено персонализирано: вижте tumblr.com/docs/en/custom_themes#iphone-themes .

Теми

С отдадеността на Tumblr да поддържа възможно най-опростени всички видове публикации, невероятно лесно е да промените дизайна на вашия сайт. Можете да избирате от стотиците безплатни и първокласни теми, вградени в Tumblr; алтернативно, Tumblr ви дава пълен контрол, за да създадете нещо оригинално.

Понастоящем има почти 900 висококачествени теми във вградената Тематична градина на Tumblr ( tumblr.com/themes ). Докато разглеждате представените, първокласни, скорошни и популярни теми, можете да прегледате всяка от тях, за да усетите как може да изглежда на вашия сайт. След като намерите такъв, който работи за вас, само с едно щракване можете да инсталирате темата на всеки от вашите сайтове в Tumblr.

Понастоящем има почти 700 висококачествени теми в Тематичната градина на Tumblr

Понастоящем има почти 700 висококачествени теми в Тематичната градина на Tumblr

По-голямата част от тези теми са напълно безплатни за използване и персонализиране, но шепа се предлага с надценка, струваща $ 9, $ 19 или $ 49 ( tumblr.com/themes/premium ). Ще откриете, че повечето премиум теми имат дизайн с най-високо качество, покрита е всяка функция на Tumblr, десетки опции за персонализиране и поддръжка на езиков превод за английски, френски, немски, италиански и японски. Освен това повечето от първокласните дизайнери на теми предлагат невероятна поддръжка за всяка своя тема.

как да бъда на корицата на списание

Извън официалната Theme Garden на Tumblr, компании, които традиционно се фокусират върху теми на WordPress, сега предлагат версии на Tumblr, включително The Theme Foundry ( thethemefoundry.com ) и Obox ( obox-design.com ). В много случаи те ще предлагат допълнителни екстри с покупката ви, като PSD файлове за изтегляне и достъп до други теми. Въпреки че темите извън сайта не могат да предложат инсталиране с едно щракване, добавянето на темата към вашия сайт е толкова просто, колкото поставянето на HTML темата в менюто за персонализиране на Tumblr.

Персонализиране на вашия сайт

Tumblr има невероятно полезно вградено меню за персонализиране, което ви позволява да персонализирате, разширявате и контролирате редица функции за всеки от вашите сайтове. Нека разгледаме редица опции, налични в седемте менюта „Персонализиране“:

  • Информация Задайте заглавието на сайта си, добавете HTML описание, качете портрет или икона и задайте своя URL адрес на Tumblr, включително опцията за добавяне на ваше собствено име на домейн по избор.
  • Тема Визуализирайте, инсталирайте и в някои случаи закупете една от първокласните или представени теми на Tumblr. Освен това можете да щракнете върху бутона Използване на персонализиран HTML, за да модифицирате HTML на съществуващата си тема или да поставите в собствения си HTML за тема.
  • Външен вид Ако вашата тема поддържа опции за външен вид, ще намерите редица цветни селектори, бутони за качване на изображения, опции за активиране и текстови полета за персонализиране на външния вид и усещането на вашата тема. Много от първокласните теми на Tumblr предлагат няколко десетки опции, които ви позволяват да променяте цветовете на темата, да качвате заглавни изображения, да променяте оформлението на сайта и да интегрирате опции на трети страни като Google Analytics, коментари Disqus и емисии на изображения от Flickr, като ги поставяте във вашия ИД.
  • Страници Добавете допълнителни статични страници към вашия сайт, които са идеални за биографии, информация за контакт и подробности за сайта. Освен това можете да пренасочвате страници, които ви отвеждат към външни връзки или често към псевдокатегории, като свързвате към URL адрес на маркер на вашия сайт.
  • Услуги Свържете вашия сайт на Tumblr с Facebook и добавете безпроблемно публикациите си към емисията си за новини във Facebook. Упълномощете Tumblr да изпраща автоматично вашите публикации до Twitter и да използва Feedburner за RSS емисията на вашия сайт. Tumblr също ви дава възможност за автоматично импортиране на RSS емисии, актуализации в Twitter, публикации в блогове извън Tumblr, качвания в YouTube и Vimeo и други като публикации на вашия сайт на Tumblr.
  • Общност Разрешете на хората да отговарят на вашите публикации, да ви задават въпроси и да изпращат за одобрение всеки тип публикация, добавен към опашката ви за изпращане.
  • Разширено Задайте темата и езика на таблото за управление на английски, френски, немски, италиански или японски, добавете персонализиран CSS, за да презапишете някое от свойствата на CSS на темата, определете броя публикации, които се показват на страница, и много други опции.

Персонализирани теми

Същият фокус върху простотата и структурата, който Tumblr предоставя за публикуване и споделяне, продължава с инструмента за създаване на ваша собствена тема. Докато се чувствате добре с HTML и CSS, трябва да можете да оживите своя дизайн за рекордно кратко време. Тематичната система на Tumblr разчита на къдрави променливи на скоби и блокове, които ви позволяват да добавите практически всеки тип данни от публикации и сайтове, с нулево развитие в края.

Когато създавате нова тема за Tumblr, винаги е най-лесно да изградите своя дизайн с изчистен и ясен HTML и CSS, който обхваща осемте основни типа публикации - текст, снимка, цитат, връзка, чат, аудио, видео и отговор - и всички останали различни елементи на Tumblr като маркери за публикации, дати, бележки и страниране. След като имате пълна статична HTML конструкция на вашия сайт, можете да започнете забавната част от пускането в променливите на темата. Променливите (получер шрифт) се използват за вмъкване на динамични данни във вашата тема.

{Title} {block:Posts} block:Posts}

Блокове

В допълнение към променливите на темата, Tumblr използва система от блокове за изобразяване на блокове от HTML, свързани с определен набор от данни, като публикации, типове публикации, тагове и страниране.

как да рисувам везни в

Блоковете се използват или като условни елементи, които се изобразяват само ако съществува типът данни - {block: HasTags} - или те служат като цикъл, който изобразява HTML за всеки от елементите в блока: {block: Tags}.

{block:HasTags}
    {block:Tags}
  • {Tag} {/block:Tags}
{/block:HasTags}

Ето примери за основни структури за текст и снимки, които можете да използвате, за да създадете своя шаблон. (Имайте предвид, че използвам новите HTML5 елементи, които улесняват четенето на HTML и атрибутите на данни, които могат да се използват като куки за манипулиране на jQuery / JavaScript на избраната от вас тема.)

Текст:

{block:Text} {block:Title}

{Title}

{/block:Title} {Body} {/block:Text}

Снимка:

{block:Photo} {LinkOpenTag}{LinkCloseTag}{block:Caption} {Caption}{/block:Caption} {/block:Photo}

Ускорете всички останали видове блокове, променливи и данни, за да създадете нещо страхотно за вашия блог, като се насочите тук: tumblr.com/docs/en/custom_themes .

Вижте 40-те най-добрите блогове на Tumblr за дизайнери в нашия сестра сайт Creative Bloq.