Pull to refresh

Веб-разработка на iPad

Reading time 2 min
Views 29K
В этом посте мне хотелось бы пообщаться с вами на тему «пригоден ли айпад для создания контента». А поскольку сочинять музыку и рисовать картины я совсем не умею, мы сейчас попробуем создать веб-страничку на айпаде и выложить ее в интернет.



Инвентарь


Нам понадобится текстовый редактор (я выбрал Gusto, хотя можно было использовать, например, Textastic), графический редактор (установил на всякий случай сразу два: Adobe Photoshop Express и PhotoPad, оба бесплатные), приложение Яндекс.Фотки для загрузки картинок в интернет, и CSS3Machine — про нее расскажу прямо сейчас.

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

CSS3 на кончиках пальцев


На айпаде, за отсутствием клавиатуры, работать с исходным кодом напрямую не очень удобно. Поэтому мы будем использовать CSS3Machine — визуальный редактор CSS3, позволяющий буквально в два касания создавать сложные, красивые эффекты (которые почти совсем не работают в IE).

Добавим новый файл стилей.



Немного поправим разметку по умолчанию. К этому фрагменту HTML программа будет применять стили в процессе редактирования.



Так выглядит наше (пустое) рабочее окружение.



Создаем фоновый градиент.



Воспользуемся тем, что CSS3 разрешает задавать тексту несколько теней (text-shadow).



И еще немного.



Вот теперь классно, настоящий боевой вебдваноль.



Работа с изображениями


Теперь добавим на сайт иллюстрацию. Находим в интернете нужную картинку:



Обрезаем ее в Photoshop Express.



С удивлением обнаруживаем, что Adobe не предусмотрели функции ресайза, открываем PhotoPad, ресайзим.



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



Работа с исходным кодом


Для последних правок и загрузки нашей веб-странички в интернет мы используем Gusto. Это полноценный текстовый редактор для программирования, с проектами и табами; наличествует также встроенный (S)FTP-клиент.

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



Копируем из CSS3Machine исходники и вставляем в Gusto.



Вносим завершающие правки в код.



Загружаем файл на сервер.



Смотрим на результат в Safari, радуемся.



Выводы


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

Программу CSS3Machine я теперь использую для работы, она оказалась действительно удобной.

В результате эксперимента получилась вот такая веб-страничка.
Tags:
Hubs:
+79
Comments 40
Comments Comments 40

Articles