С тегами:

верстка

Любые посты за всё время, сначала свежие, с любым рейтингом
Найти посты
сбросить
загрузка...
44
Мольба о помощи или будни начинающего фрилансера.
93 Комментария в Лига фрилансеров  

Приветствую вас, жители сего дивного ресурса! Я хотел бы обратиться с просьбой к вам, а именно к Лиге Фрилансеров.


Суть в чём:

Я начинал заниматься деградированием Фрилансом около месяца назад. Естественно перед этим закончив кучу курсов и просмотрев кучу ютуб-роликов по Html и Css верстке. Зарегался на всяких фриланс биржах и стал ждать богатства клиентов. Но так и не дождался(


Это я:

Мольба о помощи или будни начинающего фрилансера. фриланс, обучение, начало, Помощь, Верстка
Показать полностью
134
Правочки. Небольшие правочки
30 Комментариев  

Готовая статья от клиента. А после и правки от него же. В его же статью.


Баянометр показывает 32% сходство с фоткой, где девушка с сиськами. Ну да, похоже, потому что это жопа.

Правочки. Небольшие правочки ад, верстка, работа, шок
195
Style="Бревно;"
66 Комментариев в IT-юмор  
Style="Бревно;"
2443
Да ладно...
43 Комментария  
Да ладно...
656
Парик, маник, ламин, наращ...
62 Комментария  
Парик, маник, ламин, наращ... маразм, витрина, верстка

и конечно же махеюрироввание ;)

28
Вступление на путь верстальщика
15 Комментариев  

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


ВВЕДЕНИЕ.



Что же такое верстка?


Если вкратце, то это процесс создания страницы сайта. Заметьте, статичной страницы, без каких либо скриптов. Верстальщик использует языки разметки, в данном случае подразумевается HTML5/CSS3, с помощью которых размечает страницу. Создает ее с самого зеро, то есть с пустого документа.



HTML – используется исключительно для разметки. CSS или каскадные таблицы стилей – для управления потоком документа, придания элементам, заранее созданным в разметке определенной формы, размещения их в том или ином порядке, манипуляций с текстом, размерами etc. Они идут в связке.



В итоге получается готовая страница сайта. Сайты верстают, чаще всего с psd макетов, которые предоставляет дизайнер. Макет разбирают в фотошопе. После верстки готовый документ не является завершенным сайтом. Это просто оболочка, причем статичная. Дальше идет обработка с помощью JS, подключение скриптов, работа серверных программистов и еще куча всего.


По сути, если собрался становиться именно верстальщиком, то необходимо не слишком большое количество скиллов.


Однако верстальщики сейчас на рынке не так востребованы. Намного чаще требуются именно фронтендеры. Фронт-енд – клиентская сторона создания сайта. То есть работа на стороне браузера. Если сильно обобщить, то она включает в себя как верстку, так и работу со скриптами.



Есть еще бэкенд. Бэкенд – серверная сторона, отвечает за взаимодействие с сервером, непосредственно работу сайта, оперирование данными от пользователей и т.д. В этой пасте бэкенду почти ничего не посвящено. Материалов у нас очень мало, ткак не то направление. Если кто поделится, будем рады пополнить свои закрома.



Так вот, фронтендер, даже самый начинающий должен знать сильно больше верстальщика. Тут лучше продублирую ОП-пост:


На данный момент фронтендеру новичку нужно учить больше, чем просто HTML/CSS. В частности необходимы продвинутые инструменты разработки, автоматизаторы, работа со скриптами, сам Js и Jquery, в перспективе что-то из Js фреймворков, MVC и прочего дерьма.


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



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



И это отмечу, далеко не предел, даже на начальном этапе расти есть куда. Вариантов масса. От псевдотрехмерных техник создания сайтов на параллаксе, до запила крутых приложений на JS, с перспективой перехода на мобильные платформы. Да что там говорить, даже игры умудряются пилить, и довольно удачно.



РАБОТА.



По поводу работы. Она есть. И места есть, и заказы есть, и конкуренция есть. Последняя причем есть везде. Если ты ноешь, что работы нет, значит плохо искал, либо живешь в глухом селе хуй знает где. Тогда сочувствую бро, тебе только в переезд или во фриланс.



Основные направления: фриланс или конторки.



О фрилансе ты наверняка слышал хоть немного. Есть местные или зарубежные биржи, где люди выкладывают свои заказы разных уровней. От «поправь шрифт на сайте для мобильных версий» до «запили мне рабочий аналог фейсбука за 30 долларов» (утрировано). Из зарубежных самый популярный – Upwork. Кстати в воркаче есть постоянно живущий тред по апворку, где можно узнать больше информации, советую читнуть тамошний фак.



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



Конторки – местные кружки веб-макак локального или глобального уровня. Пилят от мелких сайтов торгашам с рынка, до довольно крупных продаваемых приложений (если тебе повезло в такую попасть со старта). Основная задача местных анонов – пробиться в одну из них. Собственно, материалы в треде как раз и предназначены для того, чтобы выбить ентри левел. Через несколько месяцев пребывания там, ты, если не конченый дебил, уже и сам будешь знать, что тебя ждет, что дальше делать и куда двигаться.


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



МАТЕРИАЛЫ, ПОЛЕЗНЫЕ ССЫЛКИ И СОВЕТЫ ПО ОБУЧЕНИЮ.



Сначала вкратце по процессу обучения: если совсем нихуя не знаешь, то лучше начинай учить именно HTML/CSS. Сверстаешь свой первый макет – учись верстать адаптивно. Почитывай материалы в инете, разные статейки, смотри интересные примеры, практикуйся, спрашивай непонятное в треде, читай литературу представленную здесь и ищи что-то сам. Постепенно придет понимание всех этих процессов, и че это вообще за хуйня. Как почувствуешь уверенность в верстке – перекатывайся на JS (мастхев, если хочешь развиваться). Можешь параллельно прикручивать готовые скрипты к своим сайтикам, смотреть что как работает. Ну а дальше работы не паханое поле. Двигайся, куда тебе захочется.



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



1. Первичные материалы в хаотичном порядке. Они часто дублируют друг друга. Можно проходить что-то одно по одному из направлений. Личные предпочтения выскажу ниже.



http://dash.generalassemb.ly/


http://learnlayout.com/


http://htmlacademy.ru/ - ультрагоднота, советую начинать изучение HTML/CSS отсюда. У них же есть интенсивы (обучающие видеоуроки, для лучшего понимания предмета, тоже мастхев) ссылки чуть ниже.


http://learn.javascript.ru/ - по JS на русском лютая годнота. Годнее только Флэнаган. Лучше начинать учить язык отсюда, потом уже книги.


http://www.codecademy.com/


http://codeschool.com/ - тут платно, но есть бесплатные курсы, годные вещи про jquery и git


http://htmlbook.ru/ Справочник. Каждый верстальщик пользуется им. Все непонятное смотрим там.


http://teamtreehouse.com - тут все платно, но первые две недели бесплатно, можно успеть пройти пару курсов, объясняют хорошо.



Интенсивы от академии:


Базовый интенсив HTMLacademy за 2015 год:


http://nnm-club.me/forum/viewtopic.php?t=899131



Продвинутый интенсив HTMLacademy за 2015 год:


http://nnm-club.me/forum/viewtopic.php?t=900609



Лично я бы советовал сначала браться за http://htmlacademy.ru/. В идеале пройди базовые курсы у них на сайте, затем купи/скачай с торрента интенсивы, пройди их.



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



Затем переходи на продвинутый интенсив. Твоя основная задача там - освоить продвинутые инструменты верстки и адаптивность. Сверстай парочку тамошних тестовых макетов применяя все вышеописанные технологии и приемы.



Дальше можешь выкачивать макеты с простор интернета и верстать уже их. Наращивание сложности приветствуется. Где не прописана адаптивность, тоже запили сам. Старайся в каждом новом проекте улучшать код. Черпай инфу из инета и литературы. Узнавай полезные приемы.



Не лишним будет ознакомиться с сетками на flexbox и прочими новыми фишками. Вот здесь уже можно проплатить, если есть желание, продвинутые курсы в академии. Месяц там стоит 300 рублей, и за это время ты вполне успеешь пройти все даже дважды. Это не то чтобы мастхев, но понимание работы ксс-анимаций, хороших практик верстки, различных продвинутых элементов в новой спецификации и т.д. там дается. Хотя я буду лукавить, если скажу что всю эту инфу нельзя найти в инете и в разрозненном виде.


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



Текстовые редакторы:


http://brackets.io/


http://www.sublimetext.com/2


https://atom.io/



КНИГИ:



Тут надо выбирать индивидуально. Если по HTML/CSS, то желательно, чтобы книга была не старше 2012 года, ну или хотя бы переиздана. Читай все что интересно. В любом случае это будет полезно.



http://www.ozon.ru/context/detail/id/20279391/ - "Создаем динамические веб-сайты с помощью PHP, MySQL, JavaScript и CSS" Весьма неплохая книга, бегло позволит ориентироваться в основах веб-технологий и понять, как же все это говно вместе работает.


http://rutracker.org/forum/viewtopic.php?t=4214664 - "CSS ручной работы" Дэн Седерхольм


http://www.ozon.ru/context/detail/id/5647176/ - "Большая книга CSS" Дэвид Сойер Макфарланд


http://habrahabr.ru/post/240219/ - «Выразительный Джаваскрипт» Хавербек Марейн. Вводна книга по JS и программингу в целом. Для новичков может быть сложноватой.


http://frontendbookshelf.ru/ - список полезных книг. Большинство актуальны, можно выбрать по языку, технологии и конкретному уровню знаний. Первооочередную литературу желательно брать оттуда.


http://scanlibs.com/ что-то типа хранилища айти книг. Скачать книги можно бесплатно. Там есть дохуя всего. Если в свободном доступе не найдете, попробуйте поискать там.



Учебное задания УЛЬТРА ХАРДКОР ЛЕВЕЛ. Если считаешь, что тебе мало учебной хуйни. Сделай это и положи к себе в портфолио. Будет что показать на собеседовании. На данный момент устарели, но попрактиковаться все-таки можно:


http://htmlforum.ru/index.php?showtopic=47141


Появились новые тренировочные задания с ТЗ:


http://htmlforum.ru/index.php?showtopic=47974


http://htmlforum.ru/index.php?showtopic=47965



ПРИМЕРЫ ВЕРСТКИ ДЛЯ САМЫХ МАЛЕНЬКИХ:



Внизу видеокурс о том, как верстать PSD шаблон. Просто пример, чтобы посмотрели как выглядит работа и как верстают С НУЛЯ.


http://denweb.ru/put-veb-mastera_sod



Верстка по БЭМ


http://habrahabr.ru/post/203440/



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



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



http://frontender.info - годный ресурс по фронт-енд тематике


http://habrahabr.ru/post/114256/ - чеклист верстки. Если ваше говно проходит хотя бы половину пунктов, вы без проблем найдете работу в своем задрищенске.


http://habrahabr.ru/hub/webdev/


tympanus.net/codrops - тут есть годная еженедельная подборочка новостей из мира фронт-енда, рикаминдую


http://www.smashingmagazine.com/ - многое отсюда так или иначе переведено на русский, ресурс полезный для развития


http://css-tricks.com/ - тут можно найти много готовых шаблонов для решения часто встречающихся задач


http://ru.bem.info/ - БЭМ, методология фронт-енд разработки от Яндекса, рикаминдую прочесть доки, наверняка вы нихуя не поймете, но фраза "я прочитал конечно документацию БЭМ, но в силу своего уровня пока понял оттуда совсем немного" звучит на собеседовании гораздо лучше чем хлопание глазами. По БЭМу также немного поясняют в интенсиве академии.


http://goratchet.com/ - mobile first фреймворк от создателей бутстрапа.


http://getbootstrap.com/ - бутстрап. без комментариев, маст хэв. Популярный фронт-енд фреймворк, можно положить его в сонову вашего проекта или быстро накидать сайтец, если дизайн не важен.


http://www.ibm.com/developerworks/ru/ - очень неплохой ресурс от всем известной компании, есть там и статьи про веб-разработку.


http://sass-lang.com/, http://lesscss.ru/, http://lesscss.org/, http://learnboost.github.io/stylus/ - тоже полезные шутки, значительно прокачивают ваш CSS. Так называемые препроцессоры. Я пользуюсь less.


http://codepen.io/ - ресурс с кучей интересных примеров кода.


http://www.html5rocks.com/en/ - туториалы от гугла


http://www.sitepoint.com/html-css/, https://medium.com/tag/css, http://css-live.ru/ выборка статей по теме.



Список полезных каналов на ютубе


https://www.youtube.com/channel/UCyU5wkjgQYGRB0hIHMwm2Sg


https://www.youtube.com/channel/UCyIe-61Y8C4_o-zZCtO4ETQ


https://www.youtube.com/channel/UCwRXb5dUK4cvsHbx-rGzSgw


https://www.youtube.com/channel/UCVTlvUkGslCV_h-nSAId8Sw


https://www.youtube.com/channel/UCJbPGzawDH1njbqV-D5HqKw



3.Что делать дальше?



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


Запили себе портфолио, желательно на гитхабе. Там же можно через gh-pages отображать готовые странички из репов. По сути, имитировать хостинг, только он неполноценный. Впрочем, для заказчика и этого хватит.



Гайд от анона по гитхабу:


http://randomfederation.github.io/



Постоянно пополняй портфолио, улучшай знания, развивайся. Пролистай вакансии в своем мухосранске. За его пределами тоже посмотри. Поймешь необходимые требования и направления развития. Можешь запилить резюме. Где это делать – решать тебе. Не бойся ходить на собеседования, разве что по знаниям будешь сильно отставать. Как минимум тебя направят в нужное русло, что-то подскажут.


Хорошие конторки всегда заинтересованы в притоке разрабов. Такие могут и под свое крыло взять, снабдить материалами, подкинуть кучу полезной инфы. И с нами поделиться не забудь.



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



ОБЩИЕ МАТЕРИАЛЫ БЕЗ ОСНОВАТЕЛЬНОЙ СОРТИРОВКИ



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



Макеты для верстки:


Moose - http://yadi.sk/d/g74XxFDUPyrob - корпоративный сайт


Hotel - http://yadi.sk/d/5VEeZriDPyroK - туристический сайт


Seabird - http://yadi.sk/d/XVt_w-TrPyrp4 - корпоративный сайт


Appmo - https://yadi.sk/d/Ofaah1ZsTNrLf - лендинг приложения


Cleanwhite - https://yadi.sk/d/b05MLaKITNrLy - корпоративный сайт


Shoes - https://yadi.sk/d/Cp7qki0yTNrM4 - интернет-магазин обуви.


http://dbfreebies.co/templates http://freebiesbug.com/psd-freebies/website-template/ - cайты с макетами.


http://www.html5rocks.com/ru/tutorials/internals/howbrowsers... как работают браузеры.



Гайды по форматированию кода:


http://mdo.github.io/code-guide/ — стайлгайд по форматированию HTML и CSS


http://google-styleguide.googlecode.com/svn/trunk/htmlcssgui... и от гугла тоже гайд.


https://github.com/necolas/idiomatic-css/tree/master/transla... — перевод на русский


https://github.com/matmuchrapna/CSS-Guidelines/blob/master/R... — перевод на русский


CSS Style Guides http://css-tricks.com/css-style-guides/ — Статья со списком стайлгайдов


Ставить или не ставить закрывающий слэш? (англ.) http://www.colorglare.com/2014/02/03/to-close-or-not-to-clos... — статья-рассуждение по поводу закрывающего слэша в одиночных тэгах


https://htmlacademy.github.io/codeguide/?utm_source=%D0%9F%D... гайд от HTMLacademy самый свежий.



Пояснение по блочной модели/сетках:


Флоаты:


Старая, но подробная статья про флоаты: Раскладка в CSS: float -http://softwaremaniacs.org/blog/2005/12/01/css-layout-float/


Хорошая статья про флоаты на английском All About Floats | CSS-Tricks - http://css-tricks.com/all-about-floats/


И пара статей на Хабре: раз - http://habrahabr.ru/post/136588/ - и два - http://habrahabr.ru/post/136622/


Инлайн блоки:


Приёмы борьбы с пробелами после инлайн блоков (англ) - http://css-tricks.com/fighting-the-space-between-inline-bloc...


Флексбокс:


https://css-tricks.com/snippets/css/a-guide-to-flexbox/ - гайд по флексам.



Фотошоп для верстальщика :


Почитать Николай Громов Photoshop для html-верстальщика http://nicothin.ru/page/photoshop-dlja-html-verstalshhika


Два видео-урока:


http://www.youtube.com/watch?v=xXv93EpWeyA


http://www.youtube.com/watch?v=NEKMOXDMz9w


Обсуждение видеоуроков:


http://www.youtube.com/watch?v=OoBUXVaE6SA


http://www.youtube.com/watch?v=gbrptHPp9dk



Улучшение и полировка кода, полезные приемы:


Напочитать в этот раз целая книга: http://css-live.ru/articles/obzor-inlajnovyj-kontekst-format...


Progressive Enhancement или всё-таки Graceful Degradation - http://habrahabr.ru/post/157115/


Так ли дорого прогрессивное улучшение? - http://habrahabr.ru/post/163877/


Туториал: Progressive enhancement на примере формы входа - http://htmlacademy.ru/demos/1


Progressive Enhancement: практичный подход к современной кроссбраузерной разработке. Видео доклада и презентация. - http://tech.yandex.ru/events/yac/2012/talks/373/


Dive Into HTML5 - http://diveintohtml5.info/


http://html5book.ru/css3-transform/ гайд по ксс-трансформациям.


https://events.yandex.ru/lib/talks/1520/ - по семантичной верстке.



Сервисы:


Тесты поддержки новых возможностей в браузерах


http://html5test.com


http://css3test.com


http://caniuse.com


http://fmbip.com/litmus/#css3-properties



Набор полифилов и рекомендаций


http://html5please.com


http://css3please.com



Сборник CSS3 анимаций


http://daneden.github.io/animate.css/



Генераторы CSS3 свойств


http://css3generator.com


Градиенты: http://www.css3factory.com/linear-gradients/



Определение поддержки


http://modernizr.com


Вспомогательные букмарклеты


http://mir.aculo.us/dom-monster/


http://responsive.victorcoulon.fr



Стартовый шаблон страницы


http://html5boilerplate.com



Наборы веб шрифтов


http://www.google.com/fonts


http://typekit.com


http://webfont.ru/


http://fontello.com/



Работа с префиксами


https://github.com/ai/autoprefixer


http://leaverou.github.io/prefixfree/



Оптимизаторы CSS/JS/SVG/Images:


https://github.com/css/csso


https://code.google.com/p/cssmin/


https://github.com/mishoo/UglifyJS2


http://closure-compiler.appspot.com/home


https://github.com/svg/svgo/


http://imageoptim.com


http://pngmini.com



Продвинутый валидатор ХТМЛ


https://validator.w3.org/nu/


Замеры скорости работы сайта


http://gtmetrix.com



Таблица UTF-8 символов


http://copypastecharacter.com



Паттерны для фонов


http://subtlepatterns.com


http://noisepng.com


http://repper.studioludens.com/repper.html



Фреймворки


http://getbootstrap.com


http://getpreboot.com



Введение в JavaScript:



Справочник Mozilla Developer Network - http://developer.mozilla.org/en/docs/Web/JavaScript


Учебник JavaScript - http://learn.javascript.ru/


JavaScript на Codecademy - http://www.codecademy.com/ru/tracks/javascript


JavaScript Garden - http://bonsaiden.github.io/JavaScript-Garden/ru/



JavaScript API


Canvas - http://developer.mozilla.org/en-US/docs/Web/HTML/Canvas


Geolocation API - http://developer.mozilla.org/en/docs/WebAPI/Using_geolocatio...


History API - http://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Ma...


Web Notifications API - http://developer.mozilla.org/en-US/docs/WebAPI/Using_Web_Not...


Full Screen API - http://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Us...


Device Orientation API - http://www.html5rocks.com/en/tutorials/device/orientation/


Ambient Light API - http://developer.mozilla.org/en-US/docs/WebAPI/Using_Light_E...


Vibration API - http://davidwalsh.name/vibration-api


Gamepad API - http://developer.mozilla.org/en-US/docs/Web/Guide/API/Gamepa...


Battery Status API - http://developer.mozilla.org/en-US/docs/WebAPI/Battery_Statu...


Page Visibility API - http://www.html5rocks.com/en/tutorials/pagevisibility/intro/


Web Workers - http://www.html5rocks.com/en/tutorials/workers/basics/



Еще статьи:


Улучшаем опыт взаимодействия с формам - http://simonenko.su/38146501854/improving-ux-for-web-form


Циклическое слайд-шоу на чистом CSS3 - http://habrahabr.ru/post/143025/


Библия и 9 заповедей начинающего версталы от господа бога Гугла


https://developers.google.com/web/fundamentals/

Показать полностью 4
35
Web-технологии. Начало
22 Комментария в Web-технологии  

С чего начать обучение верстке? На мой взгляд, в верстке главное – практика. Поэтому обучение стоит начинать с выбора макета. В сети достаточно psd макетов, которые можно использовать в не коммерческих целях. Поэтому первый шаг – выбор макета. Для первого опыта подойдет любой одностраничный сайт.


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


По мере появления времени, я выберу шаблон и поэтапно покажу работу над ним. Все желающие могут присоединиться, выбрать себе psd макеты и в процессе работы над ними мы обсудим те или иные подходы к верстке. Подробные уроки по HTML и CSS составлять не буду, этого в сети много. Например, уроки на webref:


https://webref.ru/layout/learn-html-css


Кроме того, при освоении основ советую избегать любых css фреймворков, стоит поделать работу руками, чтобы понимать, как и что устроено.


Список полезных ссылок:


Справочник по html/css: https://webref.ru/ref


Информация о поддержке тегов и стилей браузерами: http://caniuse.com/


Онлайн песочница: http://codepen.io/


Хорошая статья по флексбоксам: http://css-live.ru/articles/vizualnoe-rukovodstvo-po-svojstv...


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


Оставляйте предложения и замечания в комментариях.

149
Исповедь вебмастера
14 Комментариев в IT-юмор  
Исповедь вебмастера
983
Чем плох Comic Sans?
128 Комментариев  

В предыдущем моем посте возникли комментарии типа: чем плох шрифт комик санс? Он же веселый и необычный! Хорошенько погуглив и добавив кое-что от себя, я решил объяснить, почему же этот шрифт так не любят. На пикабу уже был похожий пост, но в нем слово в слово статья с lookatme, в которой так ничего и не объяснили, поэтому стоит подробнее рассказать все нюансы.

Чем плох Comic Sans? длиннопост, шрифт, дизайн, comic sans, верстка, мат

Для начала немного истории:

Comic Sans - это гротеск, разработанный Винсентом Коннаре в 1994 году. Этот шрифт изначально был создан для собаки по кличке Ровер – помощника пользователя в программе Microsoft Bob. Винсент вдохновлялся комиксами «Хранители» и «Возвращение Темного рыцаря».

Чем плох Comic Sans? длиннопост, шрифт, дизайн, comic sans, верстка, мат

Работа заняла всего-навсего три дня. Собака в итоге так и не «заговорила» этим шрифтом, да и программа провалилась (позже собака вернулась в Windows XP, вы все её знаете). Comic Sans включили в ОС Windows, начиная с версии Windows 95. На этом Винсент (разработав греческую и кириллическую версии шрифта) забил на своё детище.

Не тут то было, на него посыпались тонны гневных писем от «радеющих за искусство» людей, а в 2002 году два дизайнера даже организовали кампанию по бойкоту шрифта.

Чем плох Comic Sans? длиннопост, шрифт, дизайн, comic sans, верстка, мат

Короче, Comic Sans стал неотъемлемой частью поп-культуры, и его стало модно ненавидеть. Просто так стало принято. Сам Винсент в своей презентации «I hate comic sans» объясняет причину всеобщей ненависти к шрифту тем, что его суют всюду, куда не лень, все, кому не лень. «Вот у меня в холодильнике лежит крем-фреш, привезенный из Франции, логотип набран Comic Sans. Вот на сайте Ватикана выложен фотоальбом, посвященный предыдущему папе — Бенедикту, текст набран Comic Sans. А вот меню ресторана где-то во Франции и объявление на столбе, да моя собственная жена, Сьюзан, на всех вечеринках представляет меня как отца Comic Sans».

Чем плох Comic Sans? длиннопост, шрифт, дизайн, comic sans, верстка, мат

Небольшая заметка о том, насколько людям не все равно: презентация Европейской организации ядерных исследований (ЦЕРН) в 2012 году об обнаружении частицы, которая впоследствии будет названа «бозоном Хиггса», была оформлена Comic Sans. И как вы думаете, о чем в большинстве своем писали в Твиттере? Правильно, про остоебенивший шрифт, а вовсе не про революционное научное открытие.

Теперь с точки зрения типографики. Если сравнивать Comic Sans с Helvetica («шрифт для снобов и хипстеров»), то они не так уж и сильно различаются. С одной стороны, Helvetica выглядит серьёзно и устойчиво, когда Comic Sans как будто хреново слеплен из пластилина. Но с другой стороны, есть и схожие черты: у обоих шрифтов штрихи одинаковой толщины (они не расширяются и не сужаются). 

Чем плох Comic Sans? длиннопост, шрифт, дизайн, comic sans, верстка, мат

При наборе блоков текста, у comic sans проявляются серьезные проблемы – он попросту нечитабелен, от него болят глаза. Дело в том, что он очень неоднороден в своих лигатурах: где-то в тексте появляются тёмные пятна, где-то – белые. Кернинг (расстояние между двумя символами) заставляет плакать. У Helvetica же все четко и ровно, этим шрифтом можно заполнять большие текстовые блоки, и от него не будет рябить в глазах (хотя шрифты-антиквы больше подходят для этого).

Чем плох Comic Sans? длиннопост, шрифт, дизайн, comic sans, верстка, мат

В том то и фишка – Comic Sans не разрабатывался для набора текста; его предназначение – небольшие короткие фразы, заголовки неофициальных текстов. Но его используют всюду, где уместно и неуместно. В этом и заключается причина ненависти к этому шрифту - он ВЕЗДЕ. Раньше его пихали в объявления, салоны красоты, банки, пожарные депо, рестораны и даже в больницы и похоронные бюро. Веселенький вполне себе шрифт.

Чем плох Comic Sans? длиннопост, шрифт, дизайн, comic sans, верстка, мат

Мне самому непонятно, почему хейтят только этот шрифт, когда есть множество других, так же пихаемых куда ни попадя: тот же Izhitsa, когда нужно показать «старую русь».

Чем плох Comic Sans? длиннопост, шрифт, дизайн, comic sans, верстка, мат

Или Papyrus, когда нужно показать старину, древний Египет, «шрифт начала времен».

Чем плох Comic Sans? длиннопост, шрифт, дизайн, comic sans, верстка, мат

Или Times New Roman – антиква «по умолчанию», по моему мнению, две трети людей, печатавших рефераты, курсовые и любые документы, использовали именно её.

В общем и целом, использовать comic sans подобно надеванию сандалий поверх носков – не смертельно, но считается признаком дурного тона. Но если вам всё же невтерпёж - попробуйте гарнитуру Comic Neue - переделанный комик санс, с узнаваемыми штрихами, но облагороженный, менее "прыгающий".

Чем плох Comic Sans? длиннопост, шрифт, дизайн, comic sans, верстка, мат
Чем плох Comic Sans? длиннопост, шрифт, дизайн, comic sans, верстка, мат

Всем спасибо. В посте использовались: 

Куски статей с designforhackers, esquire, rietveldacademie, lookatme, bancomicsans; информация с wikipedia, lurkmore; вырезки из статьи Винсента Коннаре. 

Чем плох Comic Sans? длиннопост, шрифт, дизайн, comic sans, верстка, мат
Показать полностью 11
431
Против PHP ничего не имею, но улыбнуло.
30 Комментариев  
Против PHP ничего не имею, но улыбнуло.
3283
Я готов!
63 Комментария  
Я готов!
2606
Понакупали Smart TV...
229 Комментариев  
Клиент захотел на сайте 3D-панораму. Сделали. Клиент захотел чтобы она работала на телефоне, пришлось делать панораму без флеша... Месяц клиент был доволен, но сегодня ему захотелось посмотреть свою панораму на телевизоре... Как объяснить человеку, что мы не верстаем под телевизоры?
557
Будни дизайнера №4
27 Комментариев  

Кубанский заказчик (это важно) приходит в рекламное агентство и просит разработать ему банер, который будет закрывать голую и ободранную стену продуктового магазина, специализирующегося на торговле медом и всяким таким прополисом в сотах. Спрашивают о его пожеланиях. Описывает:
- Нарисуйте мне слева вверху горы, справа вверху небо и море, чуть пониже справа поле цветущих подсолнухов, чуть пониже гор слева - пасеку с ульями. Ну а внизу колбаски, крупным планом, пожалуйста, порежьте...
1423
Будни дизайнера №2
61 Комментарий  
Re:Fw:Re:Re:Fw:Re:Re:Fw:Re:Re:Fw:Re:Re:Fw:Re:Re:Fw:Re:Re:Fw:Re:Re:Fw:Re:Re:Fw:Re:Re:Fw:Re:Re:Fw:Re:Re:Fw:Re:Re:Fw:Re:Re:Fw:Re:Re:Fw:Re:Re:Fw:Re:BookletLastComments_approve1211

Доброе утро! Вчера ноью выяснилосьв типографии, что буклет не может быть напечатан с ваших файлов, потому что мы просчитывали у них формат а5, а вам сказали что а4. Мы ошиблись, не могли бы вы переделать САМЫЙ ПОСЛЕДНИЙ РАЗ?
С уважением, ххххххх, менеджер
25
Сначала подумал, что ценник мне угрожает
Или когда не хватает знаков препинания...
4 Комментария  
Показать полностью 1 Сначала подумал, что ценник мне угрожает Или когда не хватает знаков препинания...
31
Удачная верстка
3 Комментария  
Удачная верстка
686
Заблуждения заказчиков при заказе разработки сайта
53 Комментария  
Показать полностью 1 Заблуждения заказчиков при заказе разработки сайта
1119
Учителя информатики
170 Комментариев  
Мать оболтуса-школьника, живущего по соседству, попросила меня сверстать домашнюю страничку, заданную ему на уроках информатики - ну яжпрограммист. Потратил 15 минут из жизни, сверстал по стандарту: навбар, джамботрон на джейквери, пара текстовых блоков, галерея с его конопатой рожицей и футер. На следующий день у учителей информатики произошёл разрыв шаблона. Оболтус говорит, что они собрали целый консилиум (или как это у них там называется) и долго пытались понять всю суть происходящего: отсутствие привычных таблиц в разметке, чудодейственный знак доллара, вместо джаваскрипта и непонятный файл с расширением .css, который находился в общей папке. В итоге влепили моему соседу двойку с формулировкой, что его вёрстка не соответствует общепринятым стандартам :) Такие дела.
218
Как подписывать фотографии
Несколько советов, как улучшить длиннопосты.
24 Комментария  
Показать полностью 1 Как подписывать фотографии Несколько советов, как улучшить длиннопосты.
494
Подбросьте, пожалуйста, немного рейтинга для видеоурока! :)
58 Комментариев  
Привет, пикабу! Уже очень долгое время использую сайт без аккаунта, однако сегодня решился осуществить давнюю задумку и записал первый пробный видеоурок по HTML+CSS, если кому-то интересна эта тема, то могу выложить его сюда (пока не хватает рейтинга). Если видеоурок понравится, продолжу эту тему и в течении месяца запишу полный курс, в видео никогда не будет никакой рекламы, так сказать просто делюсь своими знаниями! Всем хорошего вечера! :)


Пожалуйста, войдите в аккаунт или зарегистрируйтесь