Створення свого HTML шаблону в Processing

Тепер коли ви знаєте, як працює режим JAVASCRIPT, настав час створити ваш власний HTML шаблон Це дуже хороша ідея, особливо якщо ви хочете, щоб ваша веб-сторінка виглядала прекрасно перед тим, як викладати її в інтернет Стандартний HTML зручно тестувати, але це не найкращий інструмент для демонстрації вашої художньої роботи

Приступимо

Для нашого шаблону ми використовуємо HTML5 Reset Stylesheet від Річарда Кларка Цей файл CSS переустановлює внутрішні і зовнішні відступи та інші властивості CSS, щоб у вас був чистий аркуш для створення свого CSS файлу Це дозволить вам переконатися, що ваш веб-сайт буде виглядати однаково у всіх браузерах Зазначений CSS файл можна скачати за адресою http://html5doctorcom/html-5-reset-stylesheet/

Як це робиться

У цьому прикладі я не буду показувати вам кодів Processing Ви можете використовувати код з попереднього прикладу Ми розглянемо коди HTML і CSS, які будуть потрібні нам для створення шаблону, в який ви зможете вбудувати свій скетч Для створення нового скетчу відкрийте JavaScript | Start Custom Template Processing створить папку template в папці вашого скетчу і відкриє її У цій папці ви знайдете два файли: templatehtml і processingjs Відкрийте файл templatehtml у вашому улюбленому текстовому редакторі, видаліть код і замініть його наступним:

&lt!DOCTYPE html&gt

&lthead&gt

&ltmeta http-equiv=&quotcontent-type&quot content=&quottext/html charset=utf- 8&quot /&gt

&lttitle&gt@@sketch@@ : Built with Processing and Processingjs

&lt/title&gt

&ltmeta name=&quotGenerator&quot content=&quotProcessing&quot /&gt

&ltlink rel=&quotstylesheet&quot href=&quotresetcss&quot media=&quotscreen&quot /&gt

&ltlink rel=&quotstylesheet&quot href=&quotstylecss&quot media=&quotscreen&quot /&gt

&ltscript src=&quotprocessingjs&quot type=&quottext/javascript&quot&gt&lt/script&gt

@@scripts@@

&lt/head&gt

&ltbody&gt

&ltdiv id=&quotcontainer&quot&gt

&ltdiv&gt

&ltcanvas id=&quot@@id@@&quot data-processing-sources=&quot@@sketch@@pde&quot width=&quot@@width@@&quot height=&quot@@height@@&quot&gt

&ltp&gtYour browser does not support the canvas tag&lt/p&gt

&lt/canvas&gt

&ltnoscript&gt

&ltp&gtJavaScript is required to view the contents of this page&lt/p&gt

&lt/noscript&gt

&lt!–[if lt IE 9]&gt

&ltp&gtYour browser does not support the canvas tag&lt/p&gt

&lt![endif]–&gt

&lt/div&gt

&lth1&gt@@sketch@@&lt/h1&gt

&ltp id=&quotdescription&quot&gt@@description@@&lt/p&gt

&ltp id=&quotsources&quot&gtSource code: @@source@@&lt/p&gt

&ltp&gtBuilt with &lta href=&quothttp://processingorg&quot title=&quotProcessing&quot&gtProcessing&lt/a&gt and &lta href=&quothttp://processingjsorg&quot title=&quotProcessingjs&quot&gtProcessingjs&lt/a&gt&lt/p&gt

&lt/div&gt

&lt/body&gt

&lt/html&gt

Також вам потрібно скопіювати файл resetcss, який ва завантажили з сайті HTML5 doctor, в папку template Далі за допомогою вашого текстового редактора вам потрібно створити новий документ і зберегти його як stylecss в папці template Ось CSS код, який вам потрібно додати в файл stylecss:

body {

background: #fff color: #000

font-family: Helvetica, Arial, sans-serif font-size: 12px

line-height: 14em

}

#container { width: 640px

margin: 40px auto

}

h1 {

font-size: 2em line-height: 1em

margin-bottom: 05em

}

p {

margin-bottom: 14em

}

canvas {

margin-bottom: 30px

}

Коли ви запустите скетч у своєму браузері, він буде виглядати так:

Як це працює

Якщо Processing виявляє в папці вашого скетчу папку template, він використовує ці файли як шаблон для створення кінцевих файлів для Web

Вихідний файл templatehtml використовує внутрішній CSS, що є не найкращим варіантом Я зробив все файли CSS зовнішніми файлами, щоб було зручніше використовувати їх знову і знову

Існує кілька змінних, які ви можете використовувати разом з вашим HTML шаблоном Коли Processing створює файли Web, він перетворює їх у відповідні значення

f @ @ scripts @ @: Додає до підсумкового документу зовнішні файли JavaScript Її потрібно розташувати після завантаження файлу processingjs

f @ @ sketch @ @: Це імя вашого скетчу У нашому випадку custom_html_ templatepde Ця змінна завантажує ваш код для відображення на елементі element В даному випадку я використовував її разом з атрибутом елемента canvas data-processing-sources

f @ @ source @ @: Буде замінена на посилання на вихідний код вашого скетчу

f @ @ id @ @: Використовується для атрибута ID тега Це просто імя вашого скетчу, записане малими літерами і без спеціальних символів

f @ @ width @ @ and @ @ height @ @: Ці змінні повертають ширину і висоту вікна вашого скетчу Ви встановлюєте їх у функції size () вашого скетчу Вони можуть застосовуватися для установки ширини і висоти елемента canvas

f @ @ description @ @: Ця змінна буде замінена на опис вашого скетчу Для створення опису потрібно додати блок коментарів у початок вашого скетчу Блок коментарів повинен виглядати так:

/**

* This is a short description of the sketch

*/

Джерело: Ян Вантомм, Processing 2: креативне програмування, переклад з англійської Олександри Мішутіної, Published by Packt Publishing Ltd, 2012, BIRMINGHAM – MUMBAI

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*