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

ВВЕДЕНИЕ.

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

Если вкратце, то это процесс создания страницы сайта. Заметьте, статичной страницы, без каких либо скриптов. Верстальщик использует языки разметки, в данном случае подразумевается 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/

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

Все мы знаем сказки про оборотней и вампиров, кикимор и леших, про множество других существ. А что если сказки – не сказки? Что если Каин породил не людей? Точнее, Нелюдей.

Это хроника. Хроника Детей Каина. Первого рожденного, первого убийцы, первого предателя. Родителя зла.

Многие дети боятся темноты, а вы не обращаете на это внимания. Зря, очень зря. Дети Каина живут в темноте, ночь – их время. Люди выхолстили себя. А Вторые все это время готовились к войне. Войне на уничтожение. Где выжить может только один вид. И когда настал час люди оказались не готовы. Никто не был готов. Первым ударом мы уничтожили третью часть человечества. А затем неся потери, вырезали еще половину. Оставшиеся в живых люди - сдались. Рогнарек, Последний суд, Апокалипсис, Конец Света. Все это стало реальностью.

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

Продолжение темы поднятой здесь:

http://pikabu.ru/story/vvedenie_v_ponimanie_programmirovaniy...

Для человека начинающего программировать следует знать ровно две вещи:

- Основные парадигмы программирования рассмотренные в прошлой статье.

- Знать что такое алгоритмы и уметь абстрактную задачу раскладывать на эти алгоритмы.

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

В качестве учебных языков программирования я рекомендую использовать:

Декларативные: MySQL и SQLite

Императивные: Python, C++

Кто-то сейчас наверняка поперхнулся чаем или кофе...

Почему я выбрал именно эти языки:

MySQL и SQLite – наиболее распространенные и востребованные декларативные языки.

Python – легко и наглядно позволяет реализовывать алгоритмы.

C++ - наглядно показывает как работает программа.

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

Описание: Составление калькуляции. Программа получает ввод значений Наименование товара, количество товара, цена за количество товара, производственные циклы и рассчитывает количество товара на операцию, цену товара на операцию, сумму операции.

Из определения выделяем:

Дано: Наименование товара, количество товара, цена за количество товара, производственные циклы.

Найти: Количество товара на операцию, цена товара на операцию, сумма.

Итак, приступим к решению задачи.

Начинаем с определения исходных данных для выбора парадигм:

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

Задачу оптимально решать (из используемых мной для обучения языков программирования) на Python. Ввиду конфликта 2 и 3 ветки и их перспектив я учу 3-й версии языка.

С языком программирования определились.

Теперь как правильно составлять первичный алгоритм (этот алгоритм можно и зачастую нужно потом модифицировать).

Выводим что и как нужно найти:

Количество товара на операцию. Существенные и достаточные для решения задачи исходные данные: количество товара и число циклов.

Количество товара на операцию = количество товара / число циклов

Цена товара на операцию. Существенные и достаточные для решения задачи исходные данные: цена товара и число циклов.

Цена товара на операцию = цена товара / число циклов

Сумма. Существенные и достаточные для решения задачи исходные данные: цена товара на операцию.

Сумма = сумма(исх) + Цена товара на операцию

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

Программа получает наименование товара;

Программа получает количество товара;

Программа получает цену за количество товара;

Программа получает количество производственных циклов;

Вычисляется: Количество товара на операцию = количество товара / число циклов

Вычисляется: Цена товара на операцию = цена товара / число циклов

Оп-па... А как мы посчитаем сумму? Тем более что количество пунктов может быть разным. В языке программирования есть понятие «цикла», есть циклы с фиксированным числом выполнений (итераций) и циклы выполняемые по условию. Поскольку это учебный пример добавим бесконечный цикл по условию и сумирование.

Бесконечный цикл:

Программа получает наименование товара;

Программа получает количество товара;

Программа получает цену за количество товара;

Программа получает количество производственных циклов;

Вычисляется: Количество товара на операцию = количество товара / число циклов

Вычисляется: Цена товара на операцию = цена товара / число циклов

Сумма = Сумма + Цена товара на операцию

Вывод результатов.

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

Итак мы получили алгоритм решения задачи. Остается только написать его на языке понятному компилятору Python.

Сперва договоримся о наименовании используемых переменных. Их всего 7:

Наименование товара - nt

Количество товара - kt

Цена за количество товара - ckt

Производственные циклы - pc

Количество товара на операцию - kto

Цена товара на операцию - cto

Сумма - sum

Через тире короткое название переменных. Рекомендуется писать более длинные и понятные, но пока так...

Построчно:

Бесконечный цикл - while 1:

Программа получает наименование товара (функция input) – nt = input(«Введите название товара: »)

Программа получает количество товара – kt = input(«Введите количество товара: »)

Программа получает цену за количество товара – ckt = input(«Введите цену товара: »)

Программа получает количество производственных циклов – pc = input(«Введите количество циклов на которое хватает товара: »)

Вычисляется: Количество товара на операцию = количество товара / число циклов – kto = kt / pc

Вычисляется: Цена товара на операцию = цена товара / число циклов – cto = ckt / pc

Сумма = Сумма + Цена товара на операцию - sum = sum + cto

Вывод результатов (функция print) – print(,kto,cto,sum)

Если мы введем все именно так, то работать не будет. Потому что данные которые будут введены будут рассмотрены как текст. Принудительно попросить считать их дробными числами можно через обертку float(переменная). Очищаем комментарии и добавляем обертку. Кстати – начало и конец цикла и любой другой структуры в Python обозначается простыми отступами, что делает код более читаемым. Переменные используемые в цикле требуют предварительного объявления, поэтому итоговый рабочий код будет таким:

sm = 0

while 1:

    nt = input("Введите название товара: ")

    kt = input("Введите количество товара: ")

    ckt = input("Введите цену товара: ")

    pc = input("Введите количество циклов на которое хватает товара: ")

    kto = float(kt) / float(pc)

    cto = float(ckt) / float(pc)

    sm = sm + float(cto)

    print("Количество товаров на операцию: ",kto," Цена товара на операцию: ",cto," Текущая сумма операции: ",sm)

Кто не верит – попробуйте скопировать код в интерпретатор Python3 (первую строку отдельно).

Всем спасибо за внимание.

Привет пикабушникам!

В честь нового года решил сделать обзорную статью по программированию и языках программирования. Профессиональным программистам просьба не пинать т.к. пишется в стиле «не для специалистов».

Если будет непонятно – не расстраивайтесь. Очень многие профессиональные программисты так же ничего в этом не понимают (что не мешает им эффективно работать).

Итак, КО мог бы сказать, что язык программирования — формальная знаковая система, предназначенная для записи компьютерных программ. Для того чтобы понять что такое язык программирования нужно понять, что такое… Инструкция.

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

Рассмотрим простую инструкцию – она написана на каком-либо языке, содержит разделы, приложения и имеет определенную структуру и стиль.

Структура и стиль инструкции в программировании называется парадигмой.

Разделы инструкции в программировании называют функциями.

Язык инструкции – язык программирования.

Основные парадигмы программирования:

Класс декларативного программирования – это класс парадигм которые вместо алгоритма описывают результат который требуется получить. Представители класса:

Чисто декларативное программирование, кстати, не всеми программистами считается программированием. Это такие языки как SQL, HTML. Кто видел код тот поймет почему программисты так считают. «Код» не обладает всеми возможностями языка программирования и является простым описанием требуемого результата.

Логическое программирование – программирование на основе фактов и моделей связи между фактами. Единственный вменяемый представитель: Prolog

Функциональное программирование – для использования программирования используется стиль математических операций. Если не знакомы с дискретной математикой, то ничего не понятно от слова совсем. Представители этой парадигмы: LISP, Erlang, Scala, Miranda, Haskell.

Пример программы (Hello World) на LISP:

(format t "Hello, world!~%")

Пример чуть сложнее:

(defun fibonacci (n)

           (loop repeat n

                    for a = 0 then b

                    and for b = 1 then (+ a b)

                    finally (return b)))

Класс императивного программирования – программирование которое заключается в написании однозначной инструкции для компьютера на выполнение порядка действий. В этот класс входят:

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

Пример программы (С++):

#include <iostream>

int main()

{

std::cout << "Hello, world!\n";

return 0;

}

Стековое программирование – программирование на основе принципа стека. На русском звучит так: «Последний пришел-первый вышел», в результате родилась шутка:

Тайна речи магистра Йоды открыта:

Старым программистом на Форте он был…

Пример программы на Форте:

\ Напечатать знак числа

: .SIGN ( n -- )

            ?DUP 0= IF

                  ." НОЛЬ"

            ELSE

                 0> IF

                      ." ПОЛОЖИТЕЛЬНОЕ ЧИСЛО" ELSE

                      ." ОТРИЦАТЕЛЬНОЕ ЧИСЛО" THEN

            THEN

;

Объектно-ориентированное программирование (ООП) – как следует из названия программирование на основе объектов которые являются экземплярами классов. Является важной опцией языков программирвоания.

В ООП производятся операции со свойствами экземпляров классов путем выполнения методов. Методы – набор инструкций по изменению классов.

Основной концепцией ООП является система ООП на классах:

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

У всех животных есть общие черты, значит корневой класс будет «животные», кошка и собака относятся к млекопитающим, подкласс «млекопитающие», Васька – кот, а Жучка - собака, но они не являются «родственниками». Поэтому у нас будут 2 подкласса «Собаки» и «Коты». Итоговая структура классов:

Класс Животные

Свойство: живет

Метод: размножается

Метод: питается

Метод: умирает

Класс Млекопитающие, наследует класс Животные

Свойство: кормит молоком детенышей

Класс Собака, наследует класс Млекопитающие

Свойство: лает

Класс Кот, наследует класс Млекопитающие

Свойство: мурчит

И теперь пример

Васька – экземпляр класса Кот

Жучка – экземпляр класса Собака

Жучка и Васька могут иметь свойства: живет (от Животных), кормить молоком (от Млекопитающих), а так же могут: питаться, размножатся, умирать.

Но Жучка может лаять и не может мурчать, а Васька может мурчать, но не может лаять поскольку их «фирменные» классы не содержат соответствующих свойств.

Помимо классов есть программирование основанное на прототипах. В этом случае отсутствует описание класса, оно выводится в момент написания программы. Язык программирования для примера: JavaScript.

Является парадигмой программирования, но не является определяющим для языка программирования:

Структурное программирование – оформление программы так чтобы она легко читалась и понималась другими программистами. То есть это простой и понятный стиль написание программы. Язык, который частично заставляет это делать, Python.

«Чистых» языков программирования (которые бы использовали только одну парадигму) не существует, каждый язык отражает в себе одну или несколько парадигм.

Если тема будет интересна то напишу обзоры для Perl, Python, C++, JavaScript, Prolog, SQL, HTML+CSS.

Всех с наступающим праздником! Счастья, здоровья, удачи!