mirror of
https://github.com/ikrpg/ikrpg.github.io.git
synced 2026-05-13 14:27:22 +00:00
268 lines
No EOL
8.7 KiB
HTML
268 lines
No EOL
8.7 KiB
HTML
---
|
||
layout: ikrpg
|
||
tags: [Sache, Raum, Zeit]
|
||
---
|
||
<table class="col-menu levels right">
|
||
<thead>
|
||
<tr>
|
||
<th colspan="3">NPC Type</th>
|
||
</tr>
|
||
<tr>
|
||
<th>NPC XP Level</th>
|
||
<th>Comprehensive</th>
|
||
<th>Antagonist</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>Starting</td>
|
||
<td>14</td>
|
||
<td>See profile.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Hero</td>
|
||
<td>18</td>
|
||
<td>See profile.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Veteran</td>
|
||
<td>23</td>
|
||
<td>See profile.</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Epic</td>
|
||
<td>28</td>
|
||
<td>See profile.</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p>Do you <a href="#">remember your</a> first form? The <em>first time</em> you realised you could send emails through your site, thanks to a hosted service like Bravenet (remember them?!).</p>
|
||
<p>Or perhaps you hacked together a cgi script or even <a href="#">some PHP</a>. But when that first email arrived with the subject line ‘test’ you realised that your website had now become interactive. You could now not only interact with your users, but also tailor your site based on their input. You could send emails through your site, thanks to a hosted service. We now have <em>feature-rich forms</em>, but all at the expense of programming complexity.</p>
|
||
<h2>Long Live Forms</h2>
|
||
<table class="col-menu hero">
|
||
<thead>
|
||
<tr>
|
||
<th>XP Total</th>
|
||
<th>Character Advancement</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>2</td>
|
||
<td>+2 occupational skills</td>
|
||
</tr>
|
||
<tr>
|
||
<td>4</td>
|
||
<td style="width: 12em;">+1 spell, ability, connection, or military skill</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p>Years later forms are still the primary way <strong>our users</strong> can interact with us, more than just <a href="#">clicking on links</a> or triggering JavaScript events. Indeed, it’s likely the first thing you do when you start up your favourite browser is type a search query into a form.</p>
|
||
<table class="col-menu veteran left">
|
||
<thead>
|
||
<tr>
|
||
<th>XP Total</th>
|
||
<th>Character Advancement</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>50</td>
|
||
<td>+1 archetype benefit</td>
|
||
</tr>
|
||
<tr>
|
||
<td>55</td>
|
||
<td>+2 occupational skills</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<table class="col-menu epic right">
|
||
<thead>
|
||
<tr>
|
||
<th>XP Total</th>
|
||
<th>Character Advancement</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>100</td>
|
||
<td>+1 stat</td>
|
||
</tr>
|
||
<tr>
|
||
<td>105</td>
|
||
<td>+2 occupational skills</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p>Forms and form elements, <a href="#">as they appeared</a> in the HTML4 spec, were utilitarian but hardly elegant. So we got smart. We enlisted our ever loyal friend JavaScript to <a href="#">lift forms to</a> new heights, create new types of interaction, and give the user instant feedback and support.</p>
|
||
<h2>Feature Rich Forms</h2>
|
||
<table class="race right">
|
||
<thead>
|
||
<tr>
|
||
<th colspan="8">Human</td>
|
||
</tr>
|
||
<tr>
|
||
<th> </th>
|
||
<th>Starting Value</th>
|
||
<th> </th>
|
||
<th>Hero Limit</th>
|
||
<th>Vet Limit</th>
|
||
<th>Epic Limit</th>
|
||
<th> </th>
|
||
<th>Current Value</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
<tr>
|
||
<td>PHY</td>
|
||
<td>5</td>
|
||
<td> </td>
|
||
<td>7</td>
|
||
<td>8</td>
|
||
<td>8</td>
|
||
<td> </td>
|
||
<td>5</td>
|
||
</tr>
|
||
<tr>
|
||
<td>SPD</td>
|
||
<td>6</td>
|
||
<td> </td>
|
||
<td>7</td>
|
||
<td>7</td>
|
||
<td>7</td>
|
||
<td> </td>
|
||
<td>6</td>
|
||
</tr>
|
||
<tr>
|
||
<td>STR</td>
|
||
<td>4</td>
|
||
<td> </td>
|
||
<td>6</td>
|
||
<td>7</td>
|
||
<td>8</td>
|
||
<td> </td>
|
||
<td>4</td>
|
||
</tr>
|
||
<tr>
|
||
<td>AGL</td>
|
||
<td>3</td>
|
||
<td> </td>
|
||
<td>5</td>
|
||
<td>6</td>
|
||
<td>7</td>
|
||
<td> </td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>PRW</td>
|
||
<td>4</td>
|
||
<td> </td>
|
||
<td>5</td>
|
||
<td>6</td>
|
||
<td>7</td>
|
||
<td> </td>
|
||
<td>4</td>
|
||
</tr>
|
||
<tr>
|
||
<td>POI</td>
|
||
<td>4</td>
|
||
<td> </td>
|
||
<td>5</td>
|
||
<td>6</td>
|
||
<td>7</td>
|
||
<td> </td>
|
||
<td>4</td>
|
||
</tr>
|
||
<tr>
|
||
<td>INT</td>
|
||
<td>3</td>
|
||
<td> </td>
|
||
<td>5</td>
|
||
<td>6</td>
|
||
<td>7</td>
|
||
<td> </td>
|
||
<td>3</td>
|
||
</tr>
|
||
<tr>
|
||
<td>ARC</td>
|
||
<td>*</td>
|
||
<td> </td>
|
||
<td>4</td>
|
||
<td>6</td>
|
||
<td>8</td>
|
||
<td> </td>
|
||
<td>*</td>
|
||
</tr>
|
||
<tr>
|
||
<td>PER</td>
|
||
<td>3</td>
|
||
<td> </td>
|
||
<td>5</td>
|
||
<td>6</td>
|
||
<td>7</td>
|
||
<td> </td>
|
||
<td>3</td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<p>With a combination of server-side <a href="#">scripting and AJAX</a> we now have feature-rich forms, but all at the expense of programming complexity. Funny thing is, we’re now so used to this sort of code that what is about to <em>happen almost seems</em> too simple.</p>
|
||
<p>Inevitably, as is the case with much of the HTML5 spec, <em>HTML has now caught up</em> with the needs of web designers and developers by providing a remarkably simple way of creating usable and even extensible forms.</p>
|
||
<h2>Email Sign-up Form Demo</h2>
|
||
<p>Each form field uses something <strong>from the HTML5 spec</strong> and we’ll run through it one step at a time. When I refer to a <a href="#">browser supporting</a> a particular feature, I mean the very latest stable release of that browser which you can download from the relevant vendor website.</p>
|
||
<p>Of course, <a href="#">when dealing with anything HTML5 related</a> there is a huge browser caveat – some browsers support all some or none of what we’re about to discuss. And it’s changing really fast.</p>
|
||
<p>Your best bet at the moment is to use Opera, <strong>Chrome</strong> or mobile Safari, although we’ll look at browser support a <em>little</em> later on (together with a piece of <a href="#">JavaScript</a> which helps test for certain features).</p>
|
||
<table class="career full">
|
||
<tbody>
|
||
<tr>
|
||
<td style="width: 14em;">Starting Abilities, Connections, and Skills</td>
|
||
<td>
|
||
Abilities: Medical Knowledge and Medical Training<br />
|
||
Connections: Connections (any)<br />
|
||
Military Skills: Hand Weapon 1 and Pistol 1<br />
|
||
Occupational Skills: Medicine 1, Lore (Medicine) 1, and Research 1
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Starting Assets</td>
|
||
<td>75gc, surgical kit</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="2"> </td>
|
||
</tr>
|
||
<tr>
|
||
<td>Physician Abilities</td>
|
||
<td>Anatomical Precision, Apothecary, Field Medic, Medical Knowledge, Medical Training, Precision Strike, Trauma Surgeon, University Education</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Physician Connections</td>
|
||
<td>Connections (any)</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Physician Military Skills</td>
|
||
<td>Hand Weapon 2, Pistol 2</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Physician Occupational Skills</td>
|
||
<td>Etiquette 4, Forensic Science 2, General Skills 4, Lore (Alchemy) 2, Lore (Medicine) 4, Medicine 4, Negotiation 2, Research 2</td>
|
||
</tr>
|
||
<tr>
|
||
<td colspan="2"> </td>
|
||
</tr>
|
||
<tr>
|
||
<td>Current Abilities</td>
|
||
<td>Medical Knowledge, Medical Training</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Current Connections</td>
|
||
<td>Connections (any)</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Current Military Skills</td>
|
||
<td>Hand Weapon 1, Pistol 1</td>
|
||
</tr>
|
||
<tr>
|
||
<td>Current Occupational Skills</td>
|
||
<td>Medicine 1, Lore (Medicine) 1, Research 1</td>
|
||
</tr>
|
||
</tbody>
|
||
</table> |