Ответы пользователя по тегу HTML
  • Как сделать конструктор пиццы, т.е. выбираешь какие-то ингредиенты и они добавляются на основной картинке как бы слоями сверху?

    copist
    @copist
    Empower people to give
    У них используется много полупрозрачных изображений для отдельных ингредиентов.
    Вот, например, изображение для начинки "шампиньоны" 500600.ru/images/ingridients/shampiniony1.png
    Изображения накладываются друг на друга с помощью JS в объекте типа canvas.
    Вот так это реализовано в HTML: copi.st/LE8L

    Пример реализации: codepen.io/copist/pen/EVayRq
    Ответ написан
    1 комментарий
  • Какой workflow front-end разработки у вас?

    copist
    @copist
    Empower people to give
    1. локально развёрнута система в виртуалке Vagrant почти такая же как demo-сервер и prod-сервер.
    2. весь код отправляется на bitbacket в репозиторий git в ветку dev
    3. bamboo периодически проверяет состояние ветки dev (по хуку + таймаут) и через 15 минут от последнего комита запускает юнит-тесты
    4. если тесты прошли, делает merge ветки dev -> в ветку demo. Конфликтов нет.
    5. deployhq по хуку определяет, что изменилась ветка demo и запускает автоматическое обновление demo-сервера. Перед обновлением (* см. ниже) делается дамп базы, пользовательский интерфейс закрывается, крон-задачи и очереди тушатся (** см. ниже). После обновления делается дамп базы, интерфейс открывается, крон-задачи и очереди восстанавливаются, выполняется рестарт кэша.
    6. с демо-сервера собираются метрики скорости и делаются селениум тесты
    7. когда релиз, вручную мержим dev -> prod. Конфликтов нет.
    8. deployhq по хуку определяет, что изменилась ветка prod и запускает автоматическое обновление прод-сервера. Перед обновлением делается дамп базы, пользовательский интерфейс закрывается, крон-задачи и очереди тушатся. После обновления делается дамп базы, интерфейс открывается, крон-задачи и очереди восстанавливаются, выполняется рестарт кэша.

    9. если хотфиксы, то восстанавливаешь у себя базу с последнего дампа, берёшь код из prod, исправляешь, комитишь в prod, затем мержишь prod -> demo -> dev

    * обновление - это что?
    Обновление исходных кодов (PHP, Python, JS, SCSS), компиляция и сжатие CSS, сборка и сжатие JS, обновление зависимостей, установка обновлений на базу данных.

    ** зачем закрывать интерфейс, тушить крон и очереди?
    В проекте много всяких вещей, которые не хранятся в репозитории, а именно: CSS собранные из SCSS, модульное приложение на AngularJS с кучей зависимостей, подмодули git, пакеты для PHP (composer) - они на bamboo, на demo, на prod собираются заново. Это занимает время. Чтобы не было сбоев, выключаем всё, кроме самой сборки. На машинах разработчиков все зависимости обновляются по мере необходимости, а на CSS и JS следит gulp.

    Настройка всей этой кухни заняла 2 месяца. По другим проектам - неделю максимум.

    Ссылки: Bitbucket (git), Vagrant (develop), Bamboo (continuous integration), Deployhq (continuous deployment).

    Ну и чуть рекламы от спонсора ;)
    Icons8 15 000+ free flat style icons
    download?id=ufWm2fSkYEEsK5OXT4v2JzxGfn5O
    Наш стек технологий на stackshare.io
    Ответ написан
    3 комментария
  • CodePen/JSFiddle альтернатива на своем сервере?

    copist
    @copist
    Empower people to give
    JSFiddle и Codepen используют онлайн редактор кода с подсветкой синтаксиса CodeMirror.
    Cloud9 используют Ace.

    Нужно приделать авторизацию, храненение кусков кода и отображение результата.
    База подойдёт NoSQL, а можно в файликах хранить
    Интерфейс можно написать на AngularJS + NodeJS + Meteor, а можно на PHP + jQuery собрать

    Репо CodeMirror https://github.com/codemirror/codemirror
    Репо Ace https://github.com/ajaxorg/ace

    Есть навороченный, но не такой красивый как Codepen проект JSBin https://github.com/jsbin/jsbin/

    А тебе зачем?
    Ответ написан
    4 комментария
  • Ошибка на сайте (писался на php) umenie.php:573 Uncaught ReferenceError: hideshow is not definedonmouseout @ umenie.php:573, в чем дело?

    copist
    @copist
    Empower people to give
    Картинки нет.
    У вас ошибка в Javascript.
    Проверьте, что к странице подключились все файлы javascript
    Ответ написан
    Комментировать
  • Что делать дальше?

    copist
    @copist
    Empower people to give
    Собирай опыт сам в том, к чему душа тянется.
    Ответ написан
    Комментировать
  • На каких технологиях основана работа подобных сайтов?

    copist
    @copist
    Empower people to give
    Не заметил я там никого уменьшения. У них сайт не респонсив.

    Подсветка по события onmouseover и onmouseout, повешана на теги <path> через javascript в файле www.a-centauri.ru/assets/js/js_pack.js строки 324

    take.ms/1G7mh
    take.ms/sbRPt

    Движущаяся область <div class="floor_popup"> с обозначением текущего выделения привязана к курсору через событие onmousemove на <body class="korpus1-1">
    take.ms/dED5U

    Всё это можно определить через отладчик
    Ответ написан
    1 комментарий
  • Как структуризировать процесс обучения?

    copist
    @copist
    Empower people to give
    У вас среди вопросов уже был подобный и в нём уже указан приоритет технологий для изучения (ответ).

    А Petja указал правильный подход изучения каждой отдельной технологии (ответ)

    Я хотел бы раскрыть пункт "4. Практика и еще раз практика, решение множества конкретных задач"

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

    Для примера были взяты свежие задачи с бирж фрилансеров weblancer.net и fl.ru типа "создать тему к CMS", "сделать посадочную страницу" (landing page) или "разработать сайт-визитку".

    Были рассмотрены следующие способы изучения:
    1. Повторить работы опытных фрилансеров. Исходные макеты либо не дали, либо они уже отличаются от того, что есть на сайте.
    2. Включиться в открытый проект. Проблема в том, что сверстать страницы HTML можно несколькими способами, вплоть до image map или таблиц. А сравнить-то результат вёрстки не с чем.
    3. Взять где-нибудь бесплатно или купить шаблон, к которому прилагается макет PSD, изучить свёрстанный вариант и повторить. Это оказался самый эффективный способ. Платные шаблоны делают профессионалы, "вылизывают" их, доводят до совершенства. И бесплатные шаблоны есть очень крутые, но их мало.


    Мы использовали шаблоны с templatemonster. Там есть шаблоны под популярные CMS и просто HTML шаблоны. Также позже брали примеры из обзоров (35 примеров прекрасных посадочных страниц...) и повторяли несколько из них. Несложный макет в итоге верстается за сутки.

    Это покрывает темы (из указанного же списка):
    • XHTML, HTML4, HTML5
    • CSS2.1, CSS3
    • JavaScript, Ajax
    • jQuery
    • Twitter Bootstrap
    • CSS Grids
    • CSS Frameworks
    • Progressive Enhancement, Graceful Degradation
    • Responsive Web Design
    • CSS Pre-Processors (LESS / Sass)
    • CMS (WordPress, Joomla)
    • Data Formats (JSON, XML)
    • Internationalization / Localization
    • Image Editing Tools (Photoshop, Fireworks, etc.)
    • работа со шрифтами

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

    Так что мои советы:
    1. Чтобы получить бесценную практику, занимайся реальными вещами, а не учебными примерами
    2. Используй опыт профессионалов, чтобы повторять и копировать лучшие решения

    Но это не отменяет необходимость изучения учебных примеров. Надо знать, откуда копипастить решения :) Онлайн курсы и правильные статьи очень пригодятся.
    Ответ написан
    Комментировать
  • Чем отличается верстальщик от front-end developer?

    copist
    @copist
    Empower people to give
    Верстальщик преобразует графический макет (Photoshop или иной) в набор HTML + CSS + картинки. Иногда к свёрстанному макету может подключить типовые библиотеки Javascript, например, slider для картинок, или всплывающие подсказки (tooltip), или диалоговые окна (dialog/popup).
    Знания и навыки:
    • работа с графическими программами, чтобы понять, как собран макет
    • знание HTML, HTML5, CSS, CSS3, понятие про веб-шрифты, спрайты и другие технологии
    • пригодятся знания по HTML-фреймворкам, например, Twitter Bootstrap или Semantic UI
    • навыки кроссбраузерной вёрстки, чтобы в разных браузерах выглядело и работало одинаково
    • навыки отзывчивой вёрстки, чтобы можно было использовать на устройствах с разными возможностями и разрешениями
    • знание типовых решений javascript, чтобы реализовать простейшие вещи, заложенные в макете


    Фронтенд-разработчик делает так, чтобы макеты, полученные от верстальщика, были наполнены реальными данными. Если приложение построено как client-side (то есть вся основная логика загружается в виде огромного javascript в браузер, а данные запрашиваются с сервера по AJAX; это называется "толстый клиент"), то фронтенд-разработчику потребуется следующее:
    • знание HTML, HTML5, CSS, CSS3, понятие про веб-шрифты, спрайты, Comet и другие технологии
    • глубокое знание Javascript, включая использование готовых фреймворков, библиотек и написание расширений для них, что подразумевает объектно-ориентированное и событийное программирование
    • знание AJAX, CORS и навык создания тестовых затычек на стороне сервера, чтобы можно было разрабатывать приложение пока бакенд не готов


    Если фронтенд строится на стороне сервера, то дополнительно потребуется знать используемый серверный язык программирования (например, Python, Ruby или PHP) и используемый фреймворк (Django, Ruby-on-Rails, Yii). На практике бывало такое, что фронтендер просил в нужной части проекта сделать var_dump от структуры данных, которую надо показать и перечислить серверные методы, которые надо вызвать по нажатию предполагаемых кнопок.

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

    И моё личное мнение - фронтенд разработчику не помешают базовые знания про UML. Иногда с ними так тяжело обсуждать обмен данными по AJAX. У них это какой-то непрерывный поток магической энергии, волшебным образом преобразующийся в буковки на экране пользователя, а вот для бакенда это набор отдельных операций, иногда ещё и асинхронный. Диаграммы последовательностей ни читать, ни писать многие не умеют. Таймлайны составлять не умеют.

    -----------

    Написал дополнение: copist.ru/blog/2015/08/29/layout-designer-vs-front...
    Ответ написан
    2 комментария
  • Где PHP программисту взять современные бесплатные несложные шаблоны сайтов?

    copist
    @copist
    Empower people to give
    Предположим, что у вам разделение про профилю.
    Есть бакенд-разработчик, который возится с моделью данных (СУБД), кэшем, авторизацией, безопасностью.
    Есть фронтенд-разработчик, который занимается пользовательским интерфейсом.

    Точно так же как фронтенд-разработчик не будет (не должен) в шаблонах писать прямые запросы в базу данных, чтобы показать в диалогах дополнительно "что-то этакое", так же и бакенд-разработчик не будет (не должен) отшлифовывать кроссбраузерность вывода своего var_dump().

    Идеальный вариант - это работы, выполняемые в такой последовательности:

    1. готов дизайн-макет страницы
    2. дизайн-макет свёрстан верстальщиком
    3. полнота данных оценена бакенд'щиком, при необходимости расширена модель данных и дописаны методы для работы с ними (CRUD), настроены права (RBAC)
    4. данные для страницы "вывалены" в виде var_dump() в подходящее место макета
    5. фронтенд'щик убрал var_dump() и расставил все данные по своим местам в макете

    далее итеративный процесс доводки страницы до идеала

    Если к моменту вывода var_dump() макета нет - извиняйте, вот вам

    <div style="background: green; border: 1px solid red;"><pre><?php var_dump($model) ?></pre></div>


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

    P.S. Чуть помогают, но и мешают тоже, генераторы кода, как например в фреймфорке Yii. Можно по быстрому зафигачить таблицу, или диалог, или форму для конкретной выборки данных или модели Active Record, причём все они уже будут работать (сохранение, поиск, постраничный вывод). Уже не так страшно, как var_dump().
    Ответ написан
    Комментировать
  • Какой есть терминал под windows для веб-разработки?

    copist
    @copist
    Empower people to give
    на github'e дают ссылку для установки, только вот что и как оно устанавливает, не могу понять


    Это клиентское приложение для системы контроля версий GIT.
    На хабре habrahabr.ru/post/125799
    Документация на русском: git-scm.com/book/ru
    Клиент GIT для Windows (один из ...) : git-scm.com/download/win

    После этого сможешь получать копии проектов с GIT (git clone ...)
    Вообще копии проектов можно получать и без клиента, потому что gitbub позволяет скачать их в виде архивов ZIP.

    Также может кто знает терминал для windows ?

    Указанный дистрибутив клиента git включает и визуальное средство для работы с репозиториями и терминал, очень похожий на терминал linux, и очень много линуксовых команд поддерживаются,
    а Linux для этого ставить не потребуется, потому что это только имитация для совместимости.

    в видеоуроках разработчики под маком вводят для открытия файлов команды в строку

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

    Но если речь идёт о консольной среде linux и ты не планируешь менять операционную систему компьютера, то потребуется виртуальная машина.
    Прочитай вот эту статью на хабре о системе Vagrant, которая автоматизирует процесс создания виртуальных машин из заранее подготовленных файлов-образов: habrahabr.ru/post/113354

    По всем вопросам по этой кухне (virtualbox, vagrant, linux, git) обращайся - контакты в моём профиле.
    Ответ написан
    Комментировать
  • CSS - как прижать навигационное меню?

    copist
    @copist
    Empower people to give
    <div stype="position: fixed; top: 0;">header</div>
    Ответ написан
    Комментировать