Зачем изучать HTML и CSS, или Когда роботы заменят верстальщиков на рынке труда
Поговорим об актуальности изучения языков HTML и CSS. Узнаем о перспективах «чистых» верстальщиков на рынке труда, поймём, могут ли программисты обойтись без знания вёрстки. Посмотрим на наличие вакансий и уровень зарплат, поинтересуемся мнением экспертов. Поехали!
Что такое HTML, CSS, вёрстка, кто такой верстальщик и как называют этого специалиста в англоязычной среде: краткая теория
HTML — язык гипертекстовой разметки. Аббревиатура образовалась от первых букв английских слов HyperText Markup Language. HTML применяется для разметки веб-страниц. Она нужна браузерам, которые преобразуют гипертекст и выводят на экран страницу в удобном для человека формате.
На иллюстрации в верхнем блоке можно увидеть гипертекстовую разметку, а в нижнем вывод на экран в удобном для чтения формате. В данном случае HTML показывает браузеру, где заголовок, а где параграф. Реальные страницы намного сложнее, они содержат больше элементов.
HTML и вывод страницы в удобном для людей формате
CSS — язык описания стилей. Аббревиатура образовалась из первых букв английских слов Cascading Style Sheets — каскадные таблицы стилей. CSS описывает внешний вид HTML-элементов. То есть разработчики с помощью каскадных таблиц стилей определяют, как должен выглядеть тот или иной элемент на странице.
На иллюстрации ниже видно, как с помощью CSS добавляется фон к заголовку, а также меняется цвет и устанавливается граница для параграфа.
Задаём фон и меняем цвет с помощью CSS
В реальности возможности CSS гораздо шире: каскадные таблицы стилей определяют расположение элементов друг относительно друга, создают полноценную анимацию, даже позволяют адаптировать страницу к условиям просмотра, например, к яркому свету.
Если создатель веб-страницы не использует CSS, браузеры отображают элементы HTML с помощью стилей по умолчанию. Эти дефолтные стили определяют разработчики браузеров.
В русскоязычной среде специалиста по HTML и CSS часто называют верстальщиком, а создание веб-страниц с помощью этих языков — вёрсткой. В англоязычной среде таких специалистов называют веб-дизайнерами. Подробнее об этом мы рассказываем в бесплатном курсе по основам HTML, CSS и веб-дизайна.
На рынке труда есть люди, которых можно назвать «дизайнер-верстальщик». Эти специалисты занимаются дизайном: проектируют интерфейсы, создают визуальные решения. Также эти люди верстают: превращают макеты в веб-страницы с помощью HTML и CSS.
Можно встретить термины «фронтенд-разработчик» и «веб-разработчик». Их вряд ли корректно применять в отношении к «чистым» верстальщикам. Фронтенд-разработчик — это скорее специалист, который не только верстает, но и программирует веб-страницы или создаёт полноценные фронтенд-приложения. Он должен владеть не только HTML и CSS, но ещё и JavaScript.
Веб-разработчик — ещё более широкое понятие, так как в веб-разработке задействованы фронтенд- и бэкенд-разработчики. Специалисты по бэкенду работают с PHP, Python, Java, JavaScript и другими языками программирования. Людей, которые занимаются фронт- и бэкендом одновременно, называют fullstack-разработчиками.
- HTML и CSS — языки гипертекстовой разметки и описания стилей соответственно;
- специалиста по HTML/CSS в русскоязычной среде чаще всего называют верстальщиком;
- язык гипертекстовой разметки и описания стилей также используют в работе веб-разработчики и дизайнеры-верстальщики.
Сфера применения HTML и CSS — веб-разработка, или О востребованности вёрстки
Как отмечалось выше, верстальщики используют HTML и CSS для создания веб-страниц, то есть страниц в интернете. По данным We Are Social, в январе 2020 года в мире насчитывалось 4,54 млрд пользователей интернета. Это 59 % от общего населения планеты. То есть потенциал роста интернет-пользователей исчисляется миллиардами человек.
Эти данные позволяют предположить, что интернет в обозримом будущем будет расти. То есть будут появляться новые сайты, а для создания этих сайтов понадобится HTML и CSS. Очевидно, эти языки будут развиваться, а их возможности будут расти.
Веб-разработчики, как фронтендеры, так и бэкэндеры, так или иначе сталкиваются с вёрсткой во время работы. Не каждому веб-программисту, особенно бэкенд-разработчику, нужно уметь верстать страницы «с точностью до пикселя». Но без понимания принципов HTML и CSS работать в веб-разработке практически невозможно.
То есть вёрстка сама по себе никуда не денется, пока существует и развивается интернет. Значит ли это, что верстальщикам можно не беспокоиться о перспективах на рынке труда? Нет.
На востребованность вёрстки можно посмотреть под другим углом. Порог входа в профессию верстальщика ниже по сравнению с программированием. Поэтому уровень конкуренции среди «чистых» верстальщиков высокий. Это первая причина задуматься.
Вот вторая причина: верстальщики сталкиваются с достаточно однотипными задачами. Это делает работу верстальщика механистической и скучной. Заниматься нелюбимым делом — не лучший выход, правда? Есть риск выгореть и потерять интерес к профессии.
Третья причина: есть большая вероятность, что в обозримой перспективе «чистые» верстальщики будут сильнее конкурировать не друг с другом, а с программами, которые конвертируют условные макеты psd в HTML. Это не вопрос сегодняшнего дня, но его нужно держать в голове при оценке перспектив рынка труда.
Значит ли это, что вёрстку изучать не стоит из-за отсутствия перспектив? Ни в коем случае. Профессию «верстальщик сайтов» можно рассматривать как способ войти в веб-разработку. Многие веб-программисты вырастают из «чистых» верстальщиков. То есть HTML и CSS — это отличный способ войти в отрасль, испытать себя, а затем развиваться дальше: изучать программирование.
- HTML и CSS востребованы в веб-разработке;
- знания вёрстки позволяют найти работу и зарабатывать деньги прямо сейчас;
- вёрстку можно считать первой ступенью на пути к профессии веб-программиста.
Есть ли работа для верстальщика: вакансии и зарплаты
Чтобы проанализировать ситуацию на рынке труда, в первую очередь заглянем на hh.ru и посмотрим вакансии для верстальщиков. Также изучим предложения на русскоязычной и англоязычной бирже фриланса.
По состоянию на середину марта 2020 года по запросу «верстальщик» на hh.ru есть 678 вакансий по всей России. По запросу «фронтенд-разработчик» есть более 2000 вакансий. Такая же картина по запросу «веб-разработчик».
Уже на этом этапе анализа можно сделать важный вывод: «чистые» верстальщики требуются реже по сравнению с фронтенд-разработчиками. То есть работодателям чаще нужны специалисты, которые умеют верстать страницы и программировать фронтенд-приложения.
При детальном анализе вакансий по запросу «верстальщик» этот вывод подтверждается. Практически в каждом объявлении в требованиях работодатели указывают как умение верстать, так и знание JavaScript.
Работодатели ждут от верстальщиков знания JavaScript
Ещё один важный момент: некоторые работодатели ищут верстальщиков полиграфической продукции. То есть количество вакансий для специалистов по вёрстке веб-страниц в реальности меньше, чем кажется на первый взгляд.
Приблизительный список требований к верстальщикам выглядит так:
- знание HTML и CSS, базовые знания JavaScript и jQuery;
- умение верстать адаптивно. Обычно требуют умение верстать на флексах;
- умение работать с препроцессорами, чаще Sass/SCSS, иногда Less;
- знания Git, Webpack, Figma, Photoshop и других инструментов.
Работа есть как для опытных специалистов, так и для джуниоров.
Работодатели на hh.ru предлагают верстальщикам зарплату от 25 000 рублей в месяц. Максимальная зарплата составляет 100 000 рублей для специалистов со знанием JavaScript. «Чистым» верстальщикам предлагают меньше.
Информация для тех, кто планирует работать верстальщиком удалённо. На Upwork по навыкам HTML и CSS есть вакансии, но большая часть из них требует и других знаний и умений. Обычно это знание JavaScript и фреймворков или знание популярных CMS, в том числе OpenCart, Magento, WordPress/WooCommerce и так далее.
На популярных русскоязычных биржах работа для верстальщиков есть. Здесь бросается в глаза ориентация на выполнение разовых задач и невысокая ожидаемая цена.
- работа для верстальщиков есть как в офисе, так и на фрилансе;
- специалисту проще трудоустроиться, если кроме вёрстки он умеет программировать.
Обучение вёрстке: какие курсы пройти, где получить практику использования HTML и CSS
Спойлер: считайте этот раздел рекламной паузой. Здесь короткий рассказ о возможностях изучения вёрстки на Code Basics и Хекслете.
Итак, на Code Basics бесплатно доступны курсы по HTML и CSS для начинающих. Курсы состоят из коротких тематических уроков. В каждом уроке есть теория и интерактивное практическое упражнение. Важно, что на Code Basics вы будете практиковаться в вёрстке с первого урока. В итоге у вас появится понимание принципов работы с HTML и CSS, а также вы научитесь создавать и стилизовать элементы веб-страницы.
Продолжить обучение профессии «Верстальщик» можно на Хекслете. В программу обучения входят работа с технологией Flex, позиционирование, адаптивная вёрстка, работа с препроцессором Sass.
По состоянию на середину марта 2020 года в профессии есть два проекта. Во время реализации проектов студенты верстают с нуля полноценные страницы под руководством менторов.
Профессия «Верстальщик» активно развивается, в ближайшее время в ней появятся два новых проекта и дополнительные курсы.
- если вы изучаете HTML и CSS с нуля, начните с бесплатных курсов на Code Basics;
- затем переходите к изучению профессиональной вёрстки на Хекслете;
- попрактиковаться и получить качественные работы в портфолио можно, если вы пройдёте проекты.
Когда роботы заменят верстальщиков: слово экспертам
На самом деле эксперты рассказывают не только о конкуренции людей и программ. Но на вопрос о влиянии программ-генераторов HTML и CSS они тоже отвечают. Слово специалистам.
Антон Немцев: отбросьте страх, верстальщики востребованы рынком
- независимый разработчик на протяжении 16 лет. Продался корпорациям;
- Jack of all trades, master of none. Скорее последнее;
- создатель и главный редактор Frontender Magazine. Всё про*рал;
- докладчик на международных и поместных конференциях. Чем дальше, тем поместнее;
- эксперт UA Web Challenge. Бывший.
Дмитрий Дементий: Как вы считаете, каким специалистам нужно изучать HTML и CSS? Будет ли полезным знание HTML/CSS людям, которые не занимаются вёрсткой и программированием?
Антон Немцев: Они будут полезны людям, которые работают в смежных или связанных областях, например дизайнерам. И этим словом я совершенно неправомерно обобщаю специалистов в области пользовательского опыта, юзабилити, доступности и даже разработки интерфейсов. Как можно разработать хороший UX не зная и не понимая возможностей, особенности и ограничений движка, на котором он будет реализован?
Что касается связанных — к примеру, существует несколько движков для верстки книг, работающих на базе CSS. Они неплохо продаются, и мы, как правило, сами того не зная, читаем книги, сверстанные с помощью CSS. Я могу привести ещё много примеров из самых разных областей, но если вам это действительно интересно — просто осмотритесь и немного поищите. Веб-технологии везде. Начиная от иллюстраций и плакатов и заканчивая вашим холодильником.
Д. Д.: Насколько, по вашему, актуальна профессия «верстальщик»? Чистые верстальщики нужны на рынке труда?
А. Н.: Спросите у http://riverco.de/ или, скажем, https://csssr.com/, а то и у древнего, как мир, https://www.psd2html.com/. Или, может быть, напишите в TemplateMonster, в котором здоровенный отдел состоит исключительно из верстальщиков. Если это то, чем вы хотите заниматься, то, обладая определенной целеустремленностью и настойчивостью, вы найдете своё место под этим небом.
Д.Д.: С финансовой точки зрения изучение вёрстки перспективно? Куда лучше идти верстальщику за деньгами: на биржи, в компании на фултайм, ещё куда-то?
На сегодняшний день есть три основных подхода к работе:
- офис фултайм;
- удаленный фултайм;
- фриланс (независимый разработчик).
В среднем вы будете получать 100 % зарплаты соответствующей вашему уровню компетенции в офисе, 65-75 % удаленно и 40-50 % как независимый разработчик.
Если хотите деньги — идите в офис. Если хотите свободу — двигайтесь в сторону независимого разработчика. Но свобода не даётся бесплатно.
Безусловно это очень грубая и упрощенная модель.
Я знаю пару консультантов, которые получают свыше 100 евро в час, и при этом всё их время выкуплено на несколько месяцев вперед, но рассматриваю их, скорее, как курьезную аномалию, что-то вроде рогатого медведя-осеменителя. Вы вряд ли встретите такого, прогуливаясь в ближайшем парке.
Д. Д.: Провокационный вопрос: можно ли работать программистом и не знать HTML и CSS?
А. Н.: Можно. Вы наймете меня, когда они понадобятся.
Д. Д.: Не заменят ли верстальщиков технологии в обозримом будущем? Насколько реально проиграть конкуренцию программе, которая автоматически конвертирует условный макет в psd в HTML?
А. Н.: Фронтендеры, услышьте меня! Это правда, есть программы, которые превращают макет в верстку, а верстку — в реакт-компоненты. И с каждым годом они всё лучше. Я видел их. Впереди нас ждут тяжелые времена! И чтобы встретить их достойно — отбросьте страх! Посмотрите, я стою перед вами без страха. Почему? Потому, что я знаю что-то чего не знаете вы? Потому, что я верю во что-то, во что не верите вы? Нет! Потому, что я помню. Помню о том, что я тот, кто я есть, не из-за пути, который мне предстоит пройти, но из-за пути, который пройден! Я помню, что двадцать лет нам говорят: «Вы не нужны!» Я помню, что двадцать лет нам говорят: «Вас заменят!» Двадцать лет! Двадцать лет они создают программы, чтобы заменить нас! И после всех этих лет я помню о самом важном: мы всё ещё здесь!
Д. Д.: Вёрстку изучать проще, чем программирование? Сколько времени нужно, чтобы с нуля научиться верстать макеты средней сложности?
А. Н.: Проще для кого? Для человека, который уже знает три языка программирования? Для человека, который проработал семь лет наборщиком в типографии? Для пожилого свинопаса? Для пятиклассника? Зависит от человека и контекста. Вы ожидаете оценки пальцем в небо? Запросто! Полгода работы с полной самоотдачей и огнем в ягодицах!
Людмила Мжачих: посоветую в первую очередь ориентироваться не на деньги, а на получение опыта, потому что его потом потом можно конвертировать в хороший заработок
Дмитрий Дементий: Как вы считаете, каким специалистам нужно изучать HTML и CSS? Будет ли полезным знание HTML/CSS людям, которые не занимаются вёрсткой и программированием?
Людмила Мжачих: Когда я обучала новичков фронтенд-разработке, в моих группах было много людей, которые пришли на обучение не с целью сменить профессию, а с целью разобраться в интересной теме. Среди них были дизайнеры, маркетологи и те, чья работа вообще была далека от веба. Веб-технологии настолько глубоко проникли в нашу жизнь, что понимание базовых принципов работы сайтов становится знанием, полезным для каждого. Необходимо ли всем изучать верстку? Думаю, что нет. Полезно ли это каждому? Однозначно, да!
Д. Д.: Насколько, по вашему, актуальна профессия «верстальщик»? Чистые верстальщики нужны на рынке труда?
Л. М.: HTML/CSS — это очень мощный и выразительный инструмент, который позволяет создавать красивые и удобные интерфейсы. Поэтому, однозначно, «чистые» верстальщики сегодня востребованы. Думаю, что и в будущем профессия верстальщика не станет менее актуальна, так как желание создавать красивые и уникальные вещи никогда не исчезнет. Но веб технологии развиваются очень стремительно, поэтому предполагаю, что профессия будет трансформироваться. Будут появляться новые инструменты, фреймворки, развиваться возможности HTML и CSS.
Д. Д.: С финансовой точки зрения изучение вёрстки перспективно? Куда лучше идти верстальщику за деньгами: на биржи, в компании на фултайм, ещё куда-то?
Л. М.: Профессия верстальщика однозначно востребована! Но я вам посоветую в первую очередь ориентироваться не на деньги, а на получение опыта, потому что его потом потом можно конвертировать в хороший заработок. Куда лучше идти за опытом? На мой взгляд, наиболее эффективным способом прокачки для новичка будет стажировка в компании. На стажировке у вас будет возможность быстрее обучаться на боевых задачах и получать фидбек от более опытных коллег.
Д. Д.: Провокационный вопрос: можно ли работать программистом и не знать HTML и CSS?
Л. М.: Фронтенд-разработка включает в себя владение HTML+CSS+JS. Нет, быть хорошим фронтенд-разработчиком без знания HTML и CSS нельзя.
Д. Д.: Не заменят ли верстальщиков технологии в обозримом будущем? Насколько реально проиграть конкуренцию программе, которая автоматически конвертирует условный макет в psd в HTML?
Л. М.: Пока верстальщикам об этом точно не стоит беспокоиться 🙂 Программы, которые умеют генерировать разметку из макета, не дадут вам поддерживаемый и масштабируемый код. Также они не смогут учесть особенности всех браузеров и платформ, не обеспечат адаптивность.
На сегодняшний день искусственный интеллект научился делать простые раскладки, но это все равно далеко от того, что может сделать даже начинающий верстальщик.
Д. Д.: Вёрстку изучать проще, чем программирование? Сколько времени нужно, чтобы с нуля научиться верстать макеты средней сложности?
Л. М.: Для того, чтобы верстать несложные макеты, надо в первую очередь изучить основы HTML и CSS: структуру документа и семантику, способы позиционирования, контекст наложения, блочную модель, селекторы. Также придётся научиться работать со всеми составляющими дизайн-системы: работа с текстом и цветом, изображениями и иконками, сетками и отступами и так далее.
В дополнение к этому желательно изучить основы git, уверенно пользоваться IDE и инструментами разработчика, уметь работать с макетом, который отдал дизайнер.
По срокам обучения все очень индивидуально, но освоить эти темы за 2-3 месяца усердной работы вполне реально.
Для того, чтобы программировать, придётся изучить больше тем, поэтому на первый взгляд верстка кажется проще. Однако, если учесть все особенности браузеров и платформ, различных нюансов, то объем знаний, которым нужно обладать, чтобы делать качественную верстку, тоже окажется очень внушительным. К тому же, чем больше вы будете верстать, тем больше интересных нюансов будете узнавать 😉
Виталий Киренков: все эти конверторы плодят кучу лишнего кода и кажется не умеют в адаптив
Дмитрий Дементий: Как вы считаете, каким специалистам нужно изучать HTML и CSS? Будет ли полезным знание HTML/CSS людям, которые не занимаются вёрсткой и программированием?
Виталий Киренков: Мне кажется, что данная формулировка вопроса не совсем корректна. Поясню. Если человек уже специалист в свой отрасли, например, повар, он не занимается ни версткой ни программированием. Разбираться с HTML и CSS ему вовсе ни к чему. Хотя, если его текущая специальность его не устраивает, и он хочет войти в айти, то сделать это через вёрстку будет проще, нежели чем через бэкенд-разработку.
Считаю, что дизайнеры должны обладать знаниями HTML и CSS как минимум на базовом уровне. Сверстать хотя бы простенький макет, чтобы понимать как выглядит процесс с другой стороны.
Д. Д.: Насколько, по вашему, актуальна профессия «верстальщик»? Чистые верстальщики нужны на рынке труда?
В. К.: Насколько «чистые»? Только HTML и CSS не особо востребованы. Функцию таких людей спокойно перекрывают сервисы, как например Тильда. Если человек уже знает основы JS, это другой разговор. И «рынок труда» — тоже довольно обширное понятие. Работа на фрилансе — она относится к этому рынку? В моём понимании, навык работы с jQuery также относится к верстальщикам, и, как следствие, обладая этими навыками, можно находить заказы как на фрилансе, так и устроиться на работу в веб-студию, например.
Д. Д.: С финансовой точки зрения изучение вёрстки перспективно? Куда лучше идти верстальщику за деньгами: на биржи, в компании на фултайм, ещё куда-то?
В.К.: Деньги — это несомненно важно, но есть также ряд других вещей, таких как комфорт, окружение, развитие и много чего другого. Так например, если положить на чашу весов работу в офисе и одну сумму денег, а на другую работа из дома (удаленка/фриланс) и чуть меньшую сумму, для кого-то перевес будет в сторону офиса, для кого-то в сторону дома. Я считаю, тут выбирать надо, исходя из желаний каждого отдельно взятого человека.
Д. Д.: Провокационный вопрос: можно ли работать программистом и не знать HTML и CSS?
В. К.: А чем он провокационный? У меня много знакомых программистов, которые пишут на Java и незнание HTML и CSS им никак не мешает жить, работать, зарабатывать 🙂
Д. Д.: Не заменят ли верстальщиков технологии в обозримом будущем? Насколько реально проиграть конкуренцию программе, которая автоматически конвертирует условный макет в psd в HTML?
В. К.: В обозримом вряд ли. Все эти конверторы плодят кучу лишнего кода, и, кажется, не умеют в адаптив. Но это не точно, поскольку я с конвертерами не пересекался уже лет 5-6. Также конверторам скармливают отдельно взятые страницы, и если в макете произошел случайный сдвиг какого-то элемента, программа этого не заметит. Хотя и человек может не заметить при вёрстке, но при этом, если есть уже база стилей, то элементы в рамках сайта всегда будут выглядеть одинаково.
Д. Д.: Вёрстку изучать проще, чем программирование? Сколько времени нужно, чтобы с нуля научиться верстать макеты средней сложности?
В. К.: Проще, но при этом сам процесс верстки не является простым, как многим это кажется. Тут нужно уметь предугадывать поведение интерфейса в различных ситуациях, поскольку многие кейсы на момент прорисовки дизайна не принимаются во внимание.
Я считаю, что за 3-4 недели можно сделать простой, очень простой сайт. Но при этом предварительно изучив HTML и CSS. Многие сейчас без обучения, не ознакомившись с документацией, пытаются сразу верстать сайт. И на протяжении долгого времени сталкиваются с одной и той же проблемой, просто под разными углами. Благодаря изучению документации этого можно было бы избежать в самом начале.
При условии, что человек верстает ежедневно, через 3-4 месяца он будет верстать уже макеты средней сложности.
Андрей Романов: изучение вёрстки перспективно, если на нём не останавливаться и дальше расти во фронтенде
Эксперт о себе: я фронтенд-разработчик из Омска, переехал в Москву в 2016 году после окончания Школы разработки интерфейсов Яндекса. Работаю в Joom в команде службы поддержки. Развиваю сайд-проекты: For Web (новости фронтенда) и frontend case studies (коллекция материалов об опыте разработки интерфейсов в реальных компаниях).
Дмитрий Дементий: Как вы считаете, каким специалистам нужно изучать HTML и CSS? Будет ли полезным знание HTML/CSS людям, которые не занимаются вёрсткой и программированием?
Андрей Романов: В первую очередь изучать HTML и CSS нужно фронтендерам, ведь это то, с чем они работают каждый день. Во вторую очередь это полезно веб-дизайнерам: чтобы проектировать интерфейсы для веба, нужно знать ограничения и возможности платформы. Если дизайнер умеет верстать, это делает его более ценным специалистом: он может гораздо быстрее проверять идеи, делая живые прототипы интерфейса прямо в браузере.
Знание основ HTML и CSS пригодится всем, кто пишет и редактирует статьи: не знаю, как сейчас, но раньше в Т—Ж авторы сами верстали свои статьи. Также знание основ пригодится владельцам небольших сайтов: они смогут решать мелкие задачи самостоятельно, не прибегая к помощи программистов.
Д. Д.: Насколько, по вашему, актуальна профессия «верстальщик»? Чистые верстальщики нужны на рынке труда?
А. Р.: Я начинал карьеру как раз с чистой вёрстки, но работал на фрилансе. Это не лучший формат работы для начинающих: без портфолио и отзывов сложно искать заказы, поток заказов нестабильный, перенимать опыт не у кого. К тому же для успешной работы в формате фриланса важны не только навыки вёрстки, но и так называемые «софтскиллы»: переговоры и общение с заказчиком, оценка сроков, управление временем и рисками.
Если говорить о работе в штате какой-либо компании, я давно не видел вакансий именно про вёрстку. На российском рынке в основном ищут именно фронтендеров, которые умеют не только верстать, но и программировать. На западе, насколько я знаю, вообще профессии «верстальщик» как таковой нет: там вёрсткой занимаются либо те же фронтендеры, либо дизайнеры.
На мой взгляд, ограничиваться вёрсткой нельзя. При этом вполне реально научиться вёрстке, устроиться в какую-нибудь компанию младшим фронтендером и дальше расти именно во фронтенде.
Д. Д.: С финансовой точки зрения изучение вёрстки перспективно? Куда лучше идти верстальщику за деньгами: на биржи, в компании на фултайм, ещё куда-то?
А. Р.: Изучение вёрстки перспективно, если на нём не останавливаться и дальше расти во фронтенде. Или если вёрстка поможет вам эффективнее работать по основной специальности. Например, если вы веб-дизайнер.
Если всё же рассматривать заработок на чистой вёрстке, мне кажется, больше возможностей для заработка на фрилансе. Во-первых, на фрилансе попросту больше потребность в верстальщиках, чем у компаний. Во-вторых, на фрилансе можно брать деньги за результат, а не за потраченное время, что потенциально выгоднее фултайм-работы с фиксированным окладом.
Д. Д.: Провокационный вопрос: можно ли работать программистом и не знать HTML и CSS?
А. Р.: Определённо можно. По сути любая специальность, кроме фронтенда, не требует знаний HTML и CSS: бэкенд, devops, data science, мобильная разработка.
Провокационным вопрос становится, если заменить «работать программистом» на «работать фронтендером». Я слышал, что в некоторых компаниях есть практика разделения фронтендеров на верстальщиков и программистов клиентской логики. Но полной независимости при таком разделении всё равно не добиться: в разработке интерфейсов всё равно есть задачи на стыке вёрстки и программирования. Пример такой задачи — разработка сложного UI-компонента вроде селекта (выпадающий список опций для выбора) или саджеста (поле ввода с подсказками).
Д. Д.: Не заменят ли верстальщиков технологии в обозримом будущем? Насколько реально проиграть конкуренцию программе, которая автоматически конвертирует условный макет в psd в HTML?
Визуальные конструкторы сайтов существуют довольно давно, точно больше пяти лет, но спрос на фронтендеров пока только растёт :–) Основная область применения таких конструкторов — обычные контентные сайты: визитки, лендинги, блоги и журналы. Здорово, что такие конструкторы есть, потому что они позволяют быстро и дёшево собирать несложные страницы, не погружаясь ни в какие технологии.
С более сложными интерфейсами никакие конструкторы и плагины для Photoshop/Sketch/Figma пока достойно не справляются, да и вряд ли станут: нужно учитывать слишком много аспектов вроде плавных анимаций, мультиязычности (адаптация интерфейса к RTL-языкам), корректного отображения на разных устройствах (от ноутбуков до умных часов).
Д. Д.: Вёрстку изучать проще, чем программирование? Сколько времени нужно, чтобы с нуля научиться верстать макеты средней сложности?
Я начинал с изучения вёрстки именно потому, что мне это далось легче, чем программирование. Сложно давать какие-то прогнозы по времени, потому что я изучал вёрстку в других условиях. За последние годы порог входа в вёрстку снизился: браузеры стали работать более или менее одинаково, исчезла необходимость помнить и использовать страшные хаки для обхода проблем в разных браузерах, появились более удобные и логичные API: флексы и гриды вместо флоатов.
Мне кажется, лучше всего найти и спросить о времени обучения тех, кто недавно устроился на работу младшим фронтендером.
Сергей Бехарский: вёрстку должен знать каждый фронтенд-разработчик, а бэкенд-разработчикам, связанным с вебом, надо понимать процесс доставки контента до посетителей
Об эксперте: Сергей Бехарский, Senior JavaScript Developer, Supermetrics Oy.
Дмитрий Дементий: Как вы считаете, каким специалистам нужно изучать HTML и CSS? Будет ли полезным знание HTML/CSS людям, которые не занимаются вёрсткой и программированием?
Сергей Бехарский: Начну издалека, часть этого ответа применима и к остальным вопросам.
Когда-то давно выделяли профессию веб-мастера: человека, который от начала и до конца заведовал ведением веб-проекта. В дальнейшем всё стало несколько сложнее, но вёрстка и фронтенд-разработка в целом не считались каким-то уникальным талантом, это была лишь небольшая часть того, что должны уметь веб-разработчики. Иногда с меньшим уровнем погружения, иногда с большим.
С развитием интернета и технологий вообще интерфейсы стали сложнее, стало возможным выделить отдельную позицию верстальщика, которая совмещала в себе и вёрстку шаблонов под различные системы управления контентом (Content Management System, CMS) и написание скриптов. И она никуда не делась вплоть до настоящего момента, лишь стала более выделенной и ещё более сложной и разделённой на области ответственности.
Если же прямо и просто ответить на вопрос, то, конечно, вёрстку должен знать каждый фронтенд-разработчик вне зависимости от того, верстает он сайты и интерфейсы, или же собирает их из готовых компонентов. Также вёрстку желательно знать и понимать контент-менеджерам и маркетологам для самостоятельной подготовки материалов. И, конечно же, бэкенд-разработчикам, связанным с вебом, стоит понимать весь процесс доставки контента до посетителей.
Д. Д.: Насколько, по вашему, актуальна профессия «верстальщик»? Чистые верстальщики нужны на рынке труда?
С. Б.: Как я ответил выше, классическая веб-разработка никуда уходить не собирается, да разработка лендингов тоже не ушла в веб-конструкторы. В продуктовых компаниях довольно часто присутствует отдельная позиция межкомандного верстальщика, подготавливающего шаблоны компонентов для последующего их «оживления».
Д. Д.: С финансовой точки зрения изучение вёрстки перспективно? Куда лучше идти верстальщику за деньгами: на биржи, в компании на фултайм, ещё куда-то?
С. Б.: Весьма перспективно, но сама по себе вёрстка будет приносить неплохой доход в случае ориентирования на фестивальные и промо-проекты, например, в рекламной сфере. Если же добавить в список умений JavaScript и сопутствующие технологии, достичь можно гораздо большего.
Фрилансом можно заработать очень хорошо, но для этого нужно быть либо очень широким специалистом, либо, наоборот, обладать умением очень быстро решать какие-то конкретные сложные проблемы. На мой взгляд развитие быстрее всего происходит в компании на фултайме, главное не погрязнуть в чём-то одном надолго.
Д. Д.: Провокационный вопрос: можно ли работать программистом и не знать HTML и CSS?
С. Б.: Конечно можно, профессия программиста имеет очень широкий спектр. Но если хочется доносить свои проекты и мысли до мира — презентационные инструменты стоило бы освоить.
Д. Д.: Не заменят ли верстальщиков технологии в обозримом будущем? Насколько реально проиграть конкуренцию программе, которая автоматически конвертирует условный макет в psd в HTML?
С. Б.: Подобные программы появились не сегодня, их было достаточно много. Проблема всегда одна: их код не предполагает возможности расширения и переиспользования. Даже современные инструменты могут выдать некий базовый набор правил, но адекватно нарезать макет на переиспользуемые компоненты — нет, границы применения их очень ограничены.
Д. Д.: Вёрстку изучать проще, чем программирование? Сколько времени нужно, чтобы с нуля научиться верстать макеты средней сложности?
С. Б.: Кому-то нравится «байты перекладывать», кому-то реализовывать математические алгоритмы отражения света. Порог входа в вёрстку ниже, чем в программирование в среднем, поскольку базовые правила очень просты. Но вот комбинации этих правил бесконечны а, собственно, условия применения крайне неоднозначны.
Думаю, за полгода активной коммерческой разработки научиться верстать макеты средней сложности вполне можно. Проблема в том, что понятие средней сложности у всех разное. Если же мы говорим о нулевом уровне, то за 6-9 месяцев влиться во фронтенд более чем реально.
Заключение: роботы стараются, но верстальщиков в обозримом будущем они не заменят
Такой вывод можно сделать по итогам анализа рынка труда и комментариев экспертов. «Чистым» верстальщикам сложнее конкурировать, чем фронтендерам со знаниями вёрстки и хотя бы основ программирования. Тем не менее вёрстку можно рассматривать в качестве первой ступени обучения.
HTML/CSS — отличный инструмент для комфортного входа в отрасль. Он позволяет «потрогать» веб-разработку, заработать первые деньги на фрилансе или устроиться в компанию, а затем продолжить образование.
Никогда не останавливайтесь: В программировании говорят, что нужно постоянно учиться даже для того, чтобы просто находиться на месте. Развивайтесь с нами — на Хекслете есть сотни курсов по разработке на разных языках и технологиях
Как и где учить HTML и CSS? Стоит ли брать курсы? Куда возьмут работать?
Приветствую всех пикабушников в своей первой статье. В этом материале хотелось бы ответить на все перечисленные в заголовке вопросы. Особую ценность этой статьи составляет то, что она основана исключительно на личном опыте.
Мне 23 года, работаю веб-разработчиком в строительной компании, создаю сайтики и администрирую уже существующие. Параллельно беру заказы со стороны, практикуюсь в разработке, контент-менеджменте, настройке рекламы и SEO-продвижении.
Сразу скажу, что гением я себя выставить не пытаюсь, а лишь поделюсь опытом с теми, кто хочет научиться создавать сайты, но пока не знает, с чего можно было бы начать изучение.
Как и где учить HTML и CSS?
Не знаю, стоит ли ради этого записываться на платные курсы или идти в шарагу/университет. Вспоминаю пары основ web технологий в своем колледже. Преподаватель писал тег на доске, заставлял переписывать его в тетрадь и писать определение.
Конечно, теория тоже важна. Но абсолютно такой же уровень знаний можно было получить, листая просто сайты по запросу «HTML справочник».
Лично я знал HTML и CSS еще до шараги. Учил я его с помощью Solo Learn. Есть как веб-версия, так и приложения в Google Play и App Store. В приложении есть и полноценные языки программирования. Просто выбираете любой курс и проходите теорию.
После каждой темы вы должны закрепить пройденный материал ответом на контрольный вопрос. А после прохождения всей темы проходите полноценный тест.
Радует наличие как простых тестов, так и фрагментов кода, куда вы должны написать или же перетащить недостающие кусочки.
А в конце вам дают такой сертификат:
Достаточно ли будет обучения в Solo Learn или нужно делать что-то еще? Ответ очевиден. Догадаетесь?
Смотрите марафоны по верстке на ютубе, где человек верстает реальный сайт. Параллельно пытайтесь что-то делать сами. Открывайте чужие сайты через инспектор и смотрите код.
Также вы можете скачивать чужие сайты через какие-нибудь онлайн-сервисы и пробовать работать над чужим кодом. Стоит это делать для того, чтобы больше понять структуру, да и в будущем это поможет, когда вы будете работать в команде.
Куда возьмут работать с HTML и CSS?
Сразу скажу, что знаний одних только HTML и CSS будет недостаточно. Конечно, если речь идет о хорошо оплачиваемой работе. Когда у меня совсем не было знаний, я работал контент-менеджером в интернет-магазине за 30к.
Работа была не очень пыльной, в основном она заключалась в публикации статей, которые мы заказывали, создании новых товаров, изучении SEO и съемки видео с обзорами товаров на ютуб.
Но мне это даже нравилось, потому что я мог развиваться сразу в нескольких сферах. А это стоит очень многого.
Стоит ли брать курсы?
На этот вопрос я уже ответил выше. Мне кажется, что в этом нет никакого смысла. Тот же HTML, CSS можно выучить в Solo Learn и по гайдикам на ютубе. Также не забывайте о практике и пытайтесь что-то сделать сами.
Вы можете найти какой-нибудь сайт или же дизайн. И просто пытаться его повторить. По началу будет тяжеловато, но в будущем вам будет открыта дорога и во фриланс, и в офис.
А что изучать после HTML и CSS, чтобы создавать сайты?
А, вот, на этот вопрос у каждого свой ответ. Я очень надеюсь, что в комментариях обязательно найдутся те, кто предложит свои варианты. Но я предлагаю освоить следующее:
1) В том же приложении Solo Learn пройдите курсы PHP и JS;
2) Освойте CMS Wordpress — систему управления контентом, которую использует огромное количество сайтов — от блогов до полноценных интернет-магазинов;
3) Откройте для себя фреймворк Bootstrap, который ускорит вашу фронтенд-разработку в разы за счет уже готовых блоков и стилей;
Если вам понравился мой материал, то можете открыть что-то новое для себя в моем блоге. Также вы можете перейти в мою группу в Вконтактике, а оттуда в беседу сообщества и задать любой интересующий вас вопрос!
Нигде не учил, да и учить то там нечего.
Де факт пересел с бэка на фронт по предложению коллег, за 1.5 года нафигачил на реакте фронт с нуля.
никогда не учил html и css направленно. Да и реакт так-то тоже по ходу.
Вообще похоже на рекламу курсов и СЕО продвижение своего мнения, @moderator, это не реклама случаем?
Напиши себе хуй на лбу)
Знакомо?
Топ 10 ресурсов на русском языке, которые могут помочь в изучении Python
Вот список из 10 ресурсов на русском языке, которые могут помочь в изучении Python:
1. Python.org на русском языке – официальный сайт языка Python, который содержит множество документации, руководств, обучающих материалов и примеров.
2. ‘A Byte of Python’ на русском языке – это онлайн-учебник, который предназначен для начинающих программистов и помогает освоить основы языка Python.
3. Pythontutor.ru – это онлайн-платформа с интерактивными задачами и упражнениями, которые помогают закрепить теоретические знания.
4. Rus-linux.net – это портал, который содержит множество статей и обучающих материалов по Python.
5. Learnpython.ru – это онлайн-курс, который предоставляет пошаговый и практический подход к изучению языка Python.
6. Pythonworld.ru – это онлайн-учебник по Python, который содержит подробные описания синтаксиса языка, примеры и задачи для решения.
7. Pythonicway.com – это сайт, который содержит множество статей, видеоуроков и других материалов, которые помогают в изучении Python.
8. Coursera.org – на этой платформе можно найти большое количество курсов по Python от ведущих университетов и экспертов в области программирования.
9. Geekbrains.ru – это онлайн-платформа, которая содержит множество курсов по Python и другим языкам программирования.
10. Tproger.ru – это портал о технологиях и программировании, где можно найти множество материалов о Python и других языках программирования.
Ровно год назад я мечтал стать программистом.
Я даже не представлял какие существуют направления в IT. Бэкенд, фронтенд, датасаенс — эти слова казались каким-то набором букв, значений этих слов я не знал.
10 марта 2022 года мне в личку постучался читатель с вопросом никак не связанным с IT. В конце сообщения он оставил подпись:
С уважением
<censored> Дмитрий.
<censored> Studio — Lead Producer
Я ответил на его вопрос и решил задать встречный. У меня в кругу знакомых и друзей не так много людей из IT-сферы, поэтому я решил задать все интересующие меня вопросы моему читателю. В ответ я получил сообщений 20 с информацией о том, какие направления существуют, кто чем занимается, где возможна удаленка и кому сколько платят. И ещё десяток ссылок на полезные статьи/книги/ресурсы.
Год назад я был далек от разработки настолько, насколько я далек сегодня от космонавтики. То есть полный 0. Но, как оказалось, довольно перспективный ноль, ведь я прошел путь от нуля до первой работы разработчиком за 7,5 месяцев. И это реальное достижение, которым я горжусь. На своем пути я встретил замечательных людей, которые уже давно в разработке и которые не отказались мне помочь.
Прошел ровно год с того момента, как я задал вопрос «а как войти в IT». Сейчас я работаю Java-разработчиком, успешно прошел испытательной срок (тут подробнее об этом), получаю настоящее удовольствие от рабочего процесса, от условий работы и от общения с коллегами.
Все труды, жертвы, лишения стоили того результата, которого я добился. И мне было плевать на мнение тех, кто считал, что это невозможно, что уже поздно, не тот возраст, что сейчас джунам нереально найти работу, особенно после 24.02.2022. У меня была цель, у меня было желание, были ресурсы и кем я был, если бы отказался от борьбы просто из-за чужого мнения.
А вот то самое сообщение, которое стало судьбоносным для меня:
Мечтайте, действуйте, добивайтесь и не слушайте тех, кто в вас не верит! Всем мир)
Нейронки на все случаи жизни
Для учёбы, монтажа, кодинга, дизайна, работы со звуком, улучшения фото и даже для устройства на работу — сохраняйте эту эпичную подборку себе.
MathGPT — подсобит с матаном.
editGPT — исправит ошибки в тексте на английском.
Consensus — огромная научная база знаний на основе ИИ.
ExamCram — превратит сложные учебные материалы в карточки и тесты для самопроверки.
Yip — то же самое, но в вебе и с поддержкой Википедии.
YouTube Summary with ChatGPT — превратит любое обучающее видео или лекцию в текст.
ChatBA — поможет сделать презентацию.
Explain Me Like I’m Five — объяснит заумные вещи простым языком.
Для программистов
Adrenaline — исправит ошибки в коде.
Tabnine — допишет код за вас.
CodePal — напишет код, исправит баги и выдаст ревью.
Code GPT — плагин-генератор кода для VSCode.
Autobackend — поможет с бэкендом.
Codesnippets — генерит код из текстовых запросов, подходит для команд.
Buildt AI — поисковик для VSCode, найдет готовый код в инете.
Для дизайнеров
Booth ai — генерирует стоковые фото по текстовому запросу.
AdCreative — генерит баннеры и другие рекламные креативы.
RoomGPT — сделает ремонт в вашей комнате с любым дизайном.
Hama — Удаляет лишнее с картинки.
Для улучшения фото
Photoroom — меняйте фон, вырезайте объекты в пару движений. Есть мобильные версии.
Nostalgia Photo — сделает старые фото чётче.
Pallete fm — раскрасит чёрно-белые фото.
Relight — поможе заново выставить свет на уже сделанном фото.
Picsart — заменит ваших бывших на собаку, флаг или батон.
LeiaPix — сделает из 2D-фотки 3D.
Для создания видео
Сolourlab AI — ИИ поможет с цветокором.
Luma AI — выдаст 3D-сцену киношного качества из нескольких фоток.
Kaiber — с этой штукой делали свежий клип Linkin Park.
Topaz Video AI — апнет видос до 4К и 60 FPS, уберёт тряску.
SpiritMe — создаст вашу говорящую цифровую копию.
CapCut — поменяет фон, переведет речь в сабы и многое другое. Прямо в браузере.
vidyo ai — быстро нарежете длинные видосы в шортсы,
Для работы со звуком
Fadr — порежет трек на отдельные дорожки инструментов и вокала.
Adobe Enhance — чистит запись от шумов. Бесплатно.
Elevenlabs — мощнейший синтезатор, подделает любой голос.
Beatoven — ИИ-композитор музыки для видео.
Clip audio — подберет музыку для любого видоса.
The MetaVoice — меняйте свой голос на один из восьми пресетов.
Cleanvoice — уберет из вашей разговорной записи мусор,
Для устройства на работу
kickresume — напишет резюме и сопроводительное.
Сover Letter AI — составит сопроводительное на основе резюме.
InterviewGPT AI — имитирует собеседование и помогает готовиться.
Resume Worded — прокачает резюме и профиль на LinkedIn.
Interview Warmup — разогреет перед собеседованием.
Для прокачки поиска в интернете
Lexii ai — чат-бот, которые отвечает за слова и прикладывает ссылки на источники.
Perplexity — мощнейший ИИ-поиск, работает и как расширение для браузера.
Chord — выдаст подробнейший реферат в ответ на ваш запрос.
Phind — поисковик для технарей, умеет в код.
Nuclia — найдет что угодно на сервере, накопителе и облачном диске.
Для развлечений
Natural Language Playlist — 7-часовой музыкальный плейлист по любому запросу.
Movie Deep Search — подыщет фильм под любой запрос.
RadioGPT — ИИ-диджеи ведут эфиры.
EndlessVN — у всех визуальных новелл есть финал. Кроме этой.
Tattoos AI — генерирует эскизы для тату.
Hello History — даст пообщаться с ИИ-двойником известной исторической личности.
Cool Gift Ideas — опишите человека и сервис подберёт под него подарок.
Endel — генератор ИИ-музыки, поможет расслабиться и выспаться.
PlaylistAI — соберет плейлист в Apple и Spotify по тексту или картинке.
SSD технологии древних: DiskOnChip
Автор: dlinyj
Оригинальный материал
Дополнительные фото, ссылки, а также информация по DiskOnChip в источнике материала. Всё попросту не влезло 🙁
В середине 1990-х, FLASH-накопители были очень дорогими, поэтому появление твердотельных накопителей сильно задерживалось. Стоимость 1 МБ FLASH-памяти была несоизмеримо дорога в сравнении со стоимостью 1 МБ памяти на физическом жёстком диске, с блинами.
Но, несмотря на это, в 1995 году — израильская компания M-Systems представила первый полупроводниковый накопитель. Это был настоящий жёсткий «диск», который выглядел как обычная 32-х контактная DIP-микросхема. Более того, он устанавливался вместо микросхемы расширения BIOS, при этом имел на борту ёмкость в десятки, а то и сотни мегабайт. В те годы — это было просто космические технологии, и в последствии они встречались и использовались достаточно часто, но уже в промышленном секторе.
Это система DiskOnChip – фактически полноценный жёсткий диск на одной маленькой микросхеме, с минимальной обвязкой, которая для своей работы потребует всего два чипа логики.
Ну что же, попробуем собрать свою необычную систему с этим жёстким «диском», проверю, может ли она работать с обычной ROM-памятью, запущу наконец свой BIOS на 386 машине с ISA-картой, чего не удалось в прошлый раз.
❯ Что же такое DiskOnChip®?
DiskOnChip (далее – DOC) – это фактически продолжение идеи расширения BIOS, о котором я достаточно подробно писал в статье «Пишем свой ROM BIOS».
DOC представляет собой обычную DIP-микросхему и вставляется в ту же панельку, что EEPROM, как на сетевой карте, живёт по тем же адресам и даже в начале содержит код BIOS инициализации. И микросхема pin-to-pin совместима с некоторыми микросхемами ПЗУ! Однако далее, в старших адресах этой микросхемы, содержатся регистры управления, которые переключают окна FLASH-памяти.
Для сравнения можно посмотреть расположение выводов DiskOnChip 2000 и микросхемы EEPROM SST 29EE512 (64К x 8). Отличие только в количестве адресных линий, потому что DOC работает через окно в 8К х 8 (как восьмикилобайтная EEPROM).
Сравнение распиновки EEPROM и DOC
Фактически электрический интерфейс работы с DiskOnChip ничем не отличается от интерфейса работы с обычной EEPROM. Сигнальные линии называются также, и она совместима с ними по ногам.
Структурная схема DOC
DiskOnChip занимает 8 КБ памяти. При этом — во время старта, она выглядит как обычная ROM BIOS, и инициализирует код для работы в реальном режиме, добавляя в прерывание BIOS 13h ПО для работы по этому интерфейсу.
При работе в реальном режиме, когда передаётся код управления BIOS в его внутреннюю EEPROM, он подменяет прерывание 13h по работе с диском. Таким образом, он начинает мапить в старшие адреса по очереди страницы флэш-памяти, с помощью регистров управления.
Карта памяти DiskOnChip 2000
Если рассмотреть карту памяти, которая доступна системе в пространстве 8 КБ, то мы увидим что оно состоит из четырёх разделов по 2 КБ.
Секция 0: Загрузочный блок. Этот раздел содержит данные, которые выполняются при загрузке BIOS.
Секция 1: Загрузочный блок 2. Содержит вторую часть загрузочной области.
Секция 2: Регистры управления. Используется для управления поведением DiskOnChip 2000 и флэш-носителя.
Секция 3: Окно доступа к FLASH-накопителю. Окно, чрез которую видно область FLASH для записи или чтения данных.
Как можно понять, вся доступная память, в моём случае 8 МБ, доступна через маленькое окно в 2 КБ и переключается с помощью регистров управления.
В более сложных системах, которые работают уже в защищённом режиме, таких как Windows CE, Windows 2000, QNX, Linux и т. д., где недоступен код инициализации и прерывание 13h, для работы требуются специализированные драйвера файловой системы DOC, называемой TrueFFS.
Подводя итог, можно сказать, что DiskOnChip – это примитивный SSD того времени, который успешно применялся во многих встраиваемых системах. Чаще всего его можно было встретить в одноплатных компьютерах, в кассах, тонких клиентах и другом аналогичном оборудовании. Вот, например, недавно через мои руки прошёл моноблок для ресторанов Micros WS4. Как я понял, он использовался официантами для приёма заказа.
Внешний вид моноблока
И после вскрытия внутри можно обнаружить микросхему DiskOnChip, несмотря на то, что он работает под управлением операционной системы Windows CE.
Микросхема DiskOnChip
Самое приятное, что из-за простоты устройства DOC для его подключения к компьютеру не требуется использовать каких-либо контроллеров жёстких дисков, от них можно вообще отказаться! Схема подключения содержит всего две микросхемы логики.
Кстати, если вас пугают импортные микросхемы 74-й серии, то, во-первых, их можно взять с другими буквенными индексами, а во-вторых, вполне можно заменить на отечественные аналоги, например:
74-серияаналог74139155ид1474138155ид7
А ещё их можно заменить на микросхемы серии к155, к555, кр1564 и всё будет прекрасно работать.
Схема простая, значит можно попробовать запустить его на любом старом железе!
❯ Ваяю плату расширения
Много лет хочу сделать плату расширения для шины ISA. Ещё со студенческой скамьи вынашивал идеи, прикидывал дешифраторы адреса для создания своей платы расширения. Даже как-то пытался паять параллельный порт на микросхеме КР580ВВ55. Но всё это было не торт, и толком не работало.
Здесь другое дело, схема простая, всего три микросхемы, как работает – понятно. Осталось дело за малым – это всё реализовать. Мне было лениво заниматься разводкой печатной платы, поэтому решил делать всё на макетке. В качестве основы платы взял проект IBM PC XT8-bit ISA Prototype PCB Card XL.
В Китае заказал изготовления платы, микросхему DOC на 8 МБ и уже здесь нашёл подходящие микросхемы логики: 74HC138AP и 74HC139AP (обратите внимание, что буквенные индексы иные). Самое тяжёлое – это было томительное ожидание, когда изготовят платы и их отправят. Спустя несколько месяцев у меня всё было на руках.
Всё готово к сборке
После того как я всё получил, распечатал схему и даташиты на микросхемы с распиновкой. Для удобства сразу нарисовал, что и куда должно идти. Что удобно, на макетке подписаны все сигналы, и ошибиться просто невозможно.
Набросок схемы
Далее предстоит кружок кройки и шитья, и покуда я собирал всё это хозяйство, десять раз пожалел, что не развёл плату сразу. Потому что убил просто громадное количество времени на все эти проводочки.
Кружок кройки и шитья
Спустя неделю вечеров пайки получил-таки готовый результат.
Вид спереди
Далее предстоит самое интересное – тестирование!
❯ Проверка работоспособности DiskOnChip
Проверку проводил на материнских платах с процессорами 386SX и Pentium 1. Как обычно бывает, где-то был неконтакт или непропай. После исправления мелких недочётов система сразу подхватила BIOS из DOC, и я увидел при загрузке ключевое сообщение, о том, что TrueFFS-BIOS запустился.
Если загрузиться вместе с жёстким диском, то можно увидеть второй диск D:, который можно отформатировать в системный раздел и перенести на него файлы, что я и сделал. Забегая вперёд, скажу, что форматировать стандартным format d: /s нельзя! То есть если очень хочется, то можно, но результат непредсказуем.
Намного более правильно работать с этим «диском» с помощью его родных утилит, которые корректно работают с TrueFFS. После того как я отформатировал диск родными утилитами, можно было перенести систему, отсоединить плату контроллера дисков и оставить только видеокарту и мою самодельную платку.
Удивительно, но это работает!
Ничего лишнего: только материнская плата, видеокарта и DOC
Самое забавное, что при загрузке BIOS не видит никаких подключённых носителей: ни флоппи, ни жёстких дисков. Но несмотря на это, всё равно идёт загрузка DOS. Лучше всего посмотреть на видео.
❯ Не всё так гладко с этим DOC…
На самом деле, не всё так гладко. То ли мне не повезло с микросхемой, то ли какая-то другая проблема, но DOC глючил. Он не всегда успешно загружался на моей плате, так и на железе, которое умеет работать с DOC из коробки (имеет аппаратную и программную поддержку в системном BIOS). То есть выглядело так, BIOS TrueFFS стартует, но диска при загрузке не видит. После перезагрузки стартует нормально, потом снова не видит. С чем связано – непонятно.
В какой-то момент при загрузке начались артефакты с запуском программ, а при переходе в папку увидел такое:
Так выглядит смерть жёсткого диска
И после этого загружаться он отказался. Спасло только форматирование его штатными утилитами. Что это было – я не знаю. Сетую на то, что у меня одна из первых версий микросхем, возможно, она немного сырая.
❯ Замена DiskOnChip на EEPROM
Hо перед нами прогресс открывал все пути,
И, бросив старых друзей ради новых ХТ,
Мы выжимали, что можно, из DOS и из архитектуры,
Меняли коды команд, трассировали INT’ы
Дизассемблировали BIOS и писали в порты
То, что я б не позволил печатать на месте цензуры.
Мне всё же хотелось продемонстрировать, что вместо DOC можно поставить обычную ROM микросхему, и это решение будет работать. В результате это вылилось в столь громадный квест, что потянет на ещё одну статью, а то и не одну. Там пришлось дизассемблировать основной BIOS, была попытка запустить его в qemu и много других забавных экспериментов. Но всё же, оставлю это всё самое интересное за кадром, и расскажу суть.
В качестве микросхемы ПЗУ взял EEPROM SST 29EE512 просто потому, что она у меня была под рукой, и была pin-to-pin совместима с DOC. Внимательный читатель заметит (хотя уверен, что таких нет), что это та же самая микросхема, которую я использовал в статье «Пишем свой ROM BIOS». Для корректной работы 64КБ ROM в области памяти 8 КБ, нужно посадить неиспользуемые старшие адреса на землю. То есть, фактически мы превращаем микросхему в 8 килобайтную EEPROM.
В процессе экспериментом выяснилось, что БИОС на материнской плате пытается писать в EEPROM, и, таким образом, портит её содержимое. Для того чтобы этого не происходило, доработал переходник, удалив контакт с сигналом разрешения записи WE.
Больше переходников, богу переходников!
Изначально планировал попробовать точно также запустить BASIC-ROM, но как я не бился, так и не смог его стартануть. То есть, видно, что происходит успешная инициализация, системный BIOS «зависает» без ошибок, значит переход на код ПЗУ состоялся, о чём также свидетельствовали POST-коды. Но ничего больше не происходило. В отчаянной попытке я начал искать JTAG-отладчики для 386 архитектуры, пытался запустить BIOS материнской платы в qemu, но всё тщетно. Идей, как отлаживать подобные BIOS у меня пока нет. Хотя задача, крайне интересная, как же заниматься отладкой различных расширений BIOS.
Обращаю внимание, что в qemu c SeaBIOS и на другой материнской плате, с EPROM на PCI-карте всё прекрасно работало.
Установленная микросхема ПЗУ, вместо DOC
В конце концов, я не нашёл выхода из этой ситуации, поэтому решил идти по более простому пути и запустить ROM HELLO. К слову сказать, в том коде я тоже обнаружил ошибку.
Как оказалось, после того как я посчитал контрольную сумму, оставшиеся байты надо было сделать равными нулю. Чтобы в результате общая сумма давала нуль. И мне сильно повезло, что на PCI тогда этот код завёлся. Вообще, то что на PCI плате это работало – чудо, потому что потом я внимательно прочитал стандарты, он не должен был работать никак. Исправление этой ошибки запуску BASIC не поспособствовали.
В результате всех мытарств, которые по времени заняли больший и наиболее сложный промежуток, чем эксперименты с DOC, мне удалось на этой же плате стартануть мой самописный BIOS.
Успешный запуск на материнской плате Pentium
Это, конечно, очень интересное колхозничество, но что насчёт промышленных железок, будет ли оно работать и там?
❯ Тест на железе с панелькой под DOC
Всё это забавно и хорошо, хочется попробовать запустить реальное железо, которое имеет поддержку DiskOnChip прямо из коробки. Специально для этого прикупил себе старинный тонкий клиент Light System LG8101, внутри которого есть панелька для DOC.
Внешний вид тонкого клиента
Если вскрыть эту штуку, то внутри можно обнаружить CF, с которой идёт загрузка, и панельку под DiskOnChip. В неё можно и проинсталлировать нашу замечательную микросхему.
Эта железка имеет поддержку DOC на уровне BIOS, так что запуск TrueFFS-BIOS не требуется. Обратная сторона этой поддержки в том, что сюда не получится вставить свою ROM-память, эта панелька предназначена только для микросхемы DiskOnChip (да, я попробовал вставить туда свою ROM, но ничего не произошло).
Выбираем в BIOS загрузку с DOC
После всех манипуляций система будет успешно загружена с этой микросхемы, будто бы там установлен обычный жёсткий диск.
Успешная загрузка тонкого клиента с установленной микросхемы DiskOnChip
❯ Заключение
Удивительно, но многие из вас не знают, что первые SSD-накопители появились аж в 1995 году, и даже вполне себе успешно применялись и использовались. Их высокая стоимость и малая ёмкость привели к тому, что рядовые пользователи не могли встретить их в своих ПК. Однако нашли широкое применение во встраиваемых системах, либо там, где не требуется частая запись на диск, как, например, тонкий клиент. Их могли использовать также в игровых автоматах или станках.
Условный игровой автомат на DiskOnChip
Тем не менее широкого распространения они так и не получили. Впоследствии дешевизна и расширение рынка CompactFlash свели на нет эту перспективную разработку. К её недостаткам также следует отнести, что она довольно медленная, так как работа идёт через маленькое окно в 2 КБ.