tag:blogger.com,1999:blog-34236513388840183922024-03-18T00:27:41.898-07:00Digital ZenPractical digital design that you can use.AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.comBlogger67125tag:blogger.com,1999:blog-3423651338884018392.post-19229679549279229512013-11-26T07:00:00.000-08:002020-01-15T12:53:45.886-08:00No more boring fonts for your site!<div class="MsoNormal">
Accommodating possible font options for every user has been
a daunting task in years past. True
creativity in web design has suffered to make sites more usable. The code for hosted fonts has been available but
with a cost attached. That is changing
with HTML 5 and CSS 3, hosting fonts is becoming main stream. Let’s dig into using specific fonts for our
web designs.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Tasks involved:</div>
<div class="MsoNormal" style="margin-left: .25in;">
</div>
<ol>
<li>Acquire the font you wish to use
on your site. You can do a search to
find an endless list of possible choices.
I downloaded a font I liked from <a href="http://www.fontsquirrel.com/"><span style="color: #003366; font-family: "inherit" , "serif"; mso-bidi-font-family: "Times New Roman"; mso-fareast-font-family: "Times New Roman";">http://www.fontsquirrel.com/</span></a>
.</li>
<li>Unzip the download, and remember
to include the font file when you upload your site.</li>
<li>Add a style linking to the font.</li>
<li>Apply the font to the html page.</li>
</ol>
<br />
<div class="MsoNormal">
You should be able to handle the font download so let’s dig
into the code to make the font work on your site.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<i><u>link to the font: </u></i>Add
this in the style tags.<i><u><o:p></o:p></u></i></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
@font-face<br />
{<br />
font-family: HennyPenny;<br />
src: url('HennyPenny-Regular.otf'), url('
HennyPenny-Regular.eot'); /* IE9 */<br />
}</div>
<div class="MsoNormal">
<i><u><br /></u></i></div>
<div class="MsoNormal">
<i style="text-decoration: underline;">CSS to
apply the font:</i> Works with other tags as well.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
p {</div>
<div class="MsoNormal">
font-family: HennyPenny;<br />
font-size: 12px;</div>
<div class="MsoNormal">
}</div>
<br />
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
I added the font to the page created for earlier HTML 5 posts, check out the fancy font!</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH63tkAn8CWjT6LutjNhUk58jXv4M7pimKbInrPowuuMwaPoQzATxn88YIofoHKzbQ9I86xX8S2FCKVfExsGViJ4UeZcx0Wrlt9Ajccw-7SyQjbvO9EZ62B6RS427wsT4WcCjqwyPGD-o/s1600/11-5-2013+9-52-41+PM.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="312" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgH63tkAn8CWjT6LutjNhUk58jXv4M7pimKbInrPowuuMwaPoQzATxn88YIofoHKzbQ9I86xX8S2FCKVfExsGViJ4UeZcx0Wrlt9Ajccw-7SyQjbvO9EZ62B6RS427wsT4WcCjqwyPGD-o/s400/11-5-2013+9-52-41+PM.jpg" width="400" /></a></div>
<div class="MsoNormal">
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /></div>
AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0tag:blogger.com,1999:blog-3423651338884018392.post-20680925626877561632013-11-19T08:32:00.000-08:002020-01-15T11:34:37.079-08:00HTML 5 Semantics = cleaner code!<div class="MsoNormal">
In the past if you wanted to style generic tags like the
paragraph tag you could use p for the selector and add properties that would
affect every paragraph tag on the page or in the document. Or you could have just created class
selectors to apply to different paragraph tags.
All viable options but a lot of extra coding is required and great
organization is needed to apply the right class to where you needed it used.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now with semantics you can format every paragraph in a
specific section by using pseudo selectors.
If you need a review on how to use HTML 5 semantics<a href="http://www.digitalzenblog.com/2013/11/html-5-semantics.html" target="_blank"> please review previous posts explaining</a>. </div>
<br />
<div class="MsoNormal">
<i>Using our example of a paragraph tag let’s look at how we
can now format text according to semantic element:</i></div>
<div class="MsoNormal">
<br /></div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="background-color: black; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 239.4pt;" valign="top" width="319"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: white;"><b>New Way</b></span><o:p></o:p></div>
</td>
<td style="background-color: black; border-left: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 239.4pt;" valign="top" width="319"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="color: white;"><b>Old Way</b></span><o:p></o:p></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 239.4pt;" valign="top" width="319"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
CSS EXAMPLE:<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
header p {<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
font-family: helvetica, arial, sans-serif;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
font-size; 2em;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
color:#000000;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
}<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
section p {<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
font-family: helvetica, arial, sans-serif;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
font-size; 1em;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
color:#336699;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
}<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
HTML EXAMPLE:<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<header><o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<p> My company rocks content. </p><o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</header><o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<section><o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<p> My company rocks content. </p><o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
</section><o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 239.4pt;" valign="top" width="319"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
CSS EXAMPLE: <br />
Applies to every paragraph on the page<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
p {<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
font-family: helvetica, arial, sans-serif;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
font-size; 1em;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
color:#000000;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
}<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
OR for formatting paragraphs differently<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
.class {<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
font-family: helvetica, arial, sans-serif;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
font-size; 2em;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
color:#000000;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
}<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
.class2 {<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
font-family: helvetica, arial, sans-serif;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
font-size; 1em;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
color:#336699;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
}<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
HTML CLASS EXAMPLE:<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<p class=”class”> content for first class goes here </p><o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<p class=”class2”> content for second class goes here
</p><o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
</td>
</tr>
</tbody></table>
<br />
Of course the less code I have to write the better! You can use this method for other semantic tags and with tags other than paragraph. <i>More tips coming soon.</i>AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0tag:blogger.com,1999:blog-3423651338884018392.post-15019413235273782562013-11-12T08:29:00.000-08:002020-01-15T11:34:53.139-08:00Formatting HTML 5 Semantic tags with CSS 3<span style="font-family: "calibri" , "sans-serif"; font-size: 11.0pt; line-height: 115%;">Last
week we got a taste of HTML 5 semantics, this week we will look at how to style
them using CSS 3. Really both html and
css will work in tandem even more than they have in the past. In addition the old html formatting tags are
depreciating and will soon be obsolete.
So learning CSS is a must. </span><br />
<span style="font-family: "calibri" , "sans-serif"; font-size: 11.0pt; line-height: 115%;"><br /></span>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsGr8q-siQxym1FhEYZgDLainta9PDJ5svqKecBo4atPCuntAZo31uR3iJmMjY_V98ERw6tfjWI6pFvi3T_vjf2miXW0VkEdGliSJwJYoNnxwNiSFDJEidweOSfcvjOrFM_nln5w0_ki4/s1600/semantics-image.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsGr8q-siQxym1FhEYZgDLainta9PDJ5svqKecBo4atPCuntAZo31uR3iJmMjY_V98ERw6tfjWI6pFvi3T_vjf2miXW0VkEdGliSJwJYoNnxwNiSFDJEidweOSfcvjOrFM_nln5w0_ki4/s200/semantics-image.jpg" width="160" /></a></div>
<div class="MsoNormal">
Let’s build this diagramed layout. So you can see how to use
the semantic tags. First we need to look
at the CSS.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 1.95in;" valign="top" width="187"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
header {<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
background-color:#EFCE16;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
width: 100%;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
height:90px;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
clear:both;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
}<o:p></o:p></div>
</td>
<td style="border-left: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 4.7in;" valign="top" width="451"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
We are specifying background color and width in percent so the screen
will be adjustable. There is a height
added for the purpose of making it show in this example, but you can make it
a percent or experiment more with that, the last style clears any possibility
of this element to float.<o:p></o:p></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 1.95in;" valign="top" width="187"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
nav {<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
background-color:#918F87;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
width: 100%;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
height:25px;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
clear:both;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
}<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 4.7in;" valign="top" width="451"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
Just like the header we have background color, flexible width, height
for showing the element in this example and we are clearing any floats.<o:p></o:p></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 1.95in;" valign="top" width="187"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
section {<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
background-color:#EFE3A7;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
width: 70%;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
height:200px;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
float:left;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
}<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 4.7in;" valign="top" width="451"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
The section is the main column so in addition to defining a themed
background color and a float we need to make sure the width is smaller to accommodate
a column on the left.<o:p></o:p></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 1.95in;" valign="top" width="187"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
aside {<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
background-color: #1294C1;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
width: 30%;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
height:200px;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
float: right;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
}<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 4.7in;" valign="top" width="451"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
Using aside for the right column means we need the width to add accommodate
the design. That means if section is
70% then aside can’t be larger than 30% or it will drop below its intended
resting spot. Of course since section
floats left aside must float right. Of
course we have a coordinating height and added a background color.<o:p></o:p></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 1.95in;" valign="top" width="187"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
article {<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
background-color:#0B6994;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
width: 60%;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
position: absolute;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
left: 20px;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
top:180px;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
height:30px;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
}<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 4.7in;" valign="top" width="451"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
Since the article is dropped in absolute positioning was used, with
top and left values defined. This can
be experimented with further to help it drop in just the right place. Like other elements background color,
height and width were added to the style.<o:p></o:p></div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 1.95in;" valign="top" width="187"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
footer {<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
background-color:#EFCE16;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
width: 100%;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
height:50px;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
clear:both;<o:p></o:p></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
}<o:p></o:p></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 4.7in;" valign="top" width="451"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
For this layout footer can be set up like the header.<o:p></o:p></div>
</td>
</tr>
</tbody></table>
<span style="font-family: "calibri" , "sans-serif"; font-size: 11.0pt; line-height: 115%;"></span><br />
<div class="MsoNormal">
<b><i>So how could this code look on an actual html page?</i></b></div>
<div class="MsoNormal">
<b><i><br /></i></b></div>
<div class="MsoNormal">
<span style="font-size: x-small;"><!DOCTYPE html></span></div>
<div class="MsoNormal">
<span style="font-size: x-small;"><html></span></div>
<div class="MsoNormal">
<span style="font-size: x-small;"><head><title> test </title></span></div>
<div class="MsoNormal">
<span style="font-size: x-small;"><style type=”text/css”></span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">header {</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">background-color:#EFCE16;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">width: 100%;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">height:90px;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">clear:both;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">}</span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: x-small;">nav {</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">background-color:#918F87;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">width: 100%;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">height:25px;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">clear:both;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">}</span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: x-small;">section {</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">background-color:#EFE3A7;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">width: 70%;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">height:200px;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">float:left;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">}</span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: x-small;">article {</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">background-color:#0B6994;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">width: 60%;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">position: absolute;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">left: 20px;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">top:180px;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">height:30px;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">}</span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: x-small;">aside {</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">background-color: #1294C1;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">width: 30%;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">height:200px;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">float: right;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">}</span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: x-small;">footer {</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">background-color:#EFCE16;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">width: 100%;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">height:50px;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">clear:both;</span></div>
<div class="MsoNormal">
<span style="font-size: x-small;">}</span></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<span style="font-size: x-small;"></style></span></div>
<div class="MsoNormal">
<span style="font-size: x-small;"></head></span></div>
<div class="MsoNormal">
<span style="font-size: x-small;"><br /></span></div>
<div class="MsoNormal">
<span style="font-size: x-small;"><body></span></div>
<div class="MsoNormal">
<span style="font-size: x-small;"><header> Page header goes here. </header></span></div>
<div class="MsoNormal">
<span style="font-size: x-small;"><nav> HOME | ABOUT US | CONTACT US </nav></span></div>
<div class="MsoNormal">
<span style="font-size: x-small;"><section> Page content goes here.</section></span></div>
<div class="MsoNormal">
<span style="font-size: x-small;"><aside> Right column content goes here. </aside></span></div>
<div class="MsoNormal">
<span style="font-size: x-small;"><article> Special attention getter goes here.
</article></span></div>
<div class="MsoNormal">
<span style="font-size: x-small;"><footer>Copyright, legal, text links. </footer></span></div>
<div class="MsoNormal">
<span style="font-size: x-small;"></body></span></div>
<br />
<div class="MsoNormal">
<span style="font-size: x-small;"></html></span></div>
<div class="MsoNormal">
<span style="font-size: x-small;"><br /></span></div>
<div class="MsoNormal">
<b><i>Check out how this code looks in a browser with two
potentially different screen widths:</i></b></div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4a8HUIFD_dAGBPh3NWBTp9nwSNlAxFR-xAu0K3P0mD80ehx1KFsYypkBW3DG9WwKoyGIfHsHjrjE8B-L8cdXkWlRrKpxPcsh7iPhhww4hPq_MiBZf4ctyo4YNKna-ilvxmzGF1LWwup8/s1600/11-5-2013+10-04-47+AM.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="262" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj4a8HUIFD_dAGBPh3NWBTp9nwSNlAxFR-xAu0K3P0mD80ehx1KFsYypkBW3DG9WwKoyGIfHsHjrjE8B-L8cdXkWlRrKpxPcsh7iPhhww4hPq_MiBZf4ctyo4YNKna-ilvxmzGF1LWwup8/s320/11-5-2013+10-04-47+AM.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBaoQEMzU7xg1a4YiEMJu5cCNFxzSFQCd5wgIjgnEGjGZ3urh23Y_CElHQ-mBgAybLuSFg5mapJ_afdM_I1dBgMSOosBl8d5rRhbpaZdJTH3HtAlc88Ua98e9_XAjxRPWWjOR8wKVzSwg/s1600/11-5-2013+10-05-24+AM.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="162" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBaoQEMzU7xg1a4YiEMJu5cCNFxzSFQCd5wgIjgnEGjGZ3urh23Y_CElHQ-mBgAybLuSFg5mapJ_afdM_I1dBgMSOosBl8d5rRhbpaZdJTH3HtAlc88Ua98e9_XAjxRPWWjOR8wKVzSwg/s320/11-5-2013+10-05-24+AM.jpg" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="MsoNormal">
This is just a small taste of how HTML 5 and CSS 3 can work
together. More exploring and posts
coming soon! <a href="http://www.digitalzenblog.com/2013/11/html-5-semantics.html" target="_blank">If you missed the overview of semantics check out last weeks post</a>!</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com2tag:blogger.com,1999:blog-3423651338884018392.post-33714972193602201242013-11-05T08:28:00.000-08:002020-01-15T11:37:41.491-08:00HTML 5 Semantics<div class="MsoNormal">
<b><i>What are HTML 5 Semantics?</i></b></div>
<div class="MsoNormal">
<br />
Semantic tags are tags with a special purpose. Non-semantic tags like <div> and <span> are generic in use since you could apply them pretty much anywhere in your code and style them for use. There are tags that we are already familiar with that fall into the semantics category like <form>, <table> and <img> but there are new tags with a very specific purpose that will make organizing a layout much easier to do.</div>
<div class="MsoNormal">
<br />
Some of the new tags seem obvious but others might need a little
more explanation, so let’s talk about the most common semantic tags a little further.<br />
<br />
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Pn1qtRLHe00Lvg0uznN4vl2Nl-gYmcHOVj5HjSlc8Qx-yORA2Wkb1lNAkGC7UgNfcnq23QqBjl8ocmRU4WGPgITaG0Ujwv8HXzhn7JiJlu9tuGvOaW7VoAso4s0RltzR_bfeuIoBZYk/s1600/semantics-image.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em; text-align: center;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi5Pn1qtRLHe00Lvg0uznN4vl2Nl-gYmcHOVj5HjSlc8Qx-yORA2Wkb1lNAkGC7UgNfcnq23QqBjl8ocmRU4WGPgITaG0Ujwv8HXzhn7JiJlu9tuGvOaW7VoAso4s0RltzR_bfeuIoBZYk/s400/semantics-image.jpg" width="320" /></a></div>
<div class="MsoNormal">
<u><b><header></b></u> used to hold a banner, business logo or
tagline sitting at the top of the page.
<i>Don’t confuse this tag with head which is a structural tag and does a
completely different job.</i><br />
<b><u></u></b><br />
<div class="MsoNormal">
<b><u><b><u><br /></u></b></u></b></div>
<b><u>
<nav></u></b> this tag should be easy, it holds navigation.<br />
<b><u><br /></u></b></div>
<div class="MsoNormal">
<b><u><footer></u></b> the bottom of most pages could have text
links, copyright information, and maybe legal disclaimers. This tag is meant to contain these elements.<br />
<b><u><br /></u></b></div>
<div class="MsoNormal">
<b><u><section></u></b> contains elements that are part of the site
theme and in the main flow of content.<br />
<b><u><br /></u></b></div>
<div class="MsoNormal">
<b><u><article></u></b> used for blocks of copy that might pop out
more taking on a contrasting color or element.<br />
<b><u><br /></u></b></div>
<div class="MsoNormal">
<b><u><aside></u></b> used for content that runs in a column next to
the main content area.<br />
<ul>
</ul>
</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now that we have a taste of semantics for HTML 5 we need to
dive into how we can use them, and that will take a little CSS 3 which we will
tackle next week.</div>
AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com1tag:blogger.com,1999:blog-3423651338884018392.post-56168883393182042552013-02-12T10:10:00.002-08:002013-02-12T10:10:19.177-08:00Targeting your market<br />
<div class="MsoNormal">
I was working on prep for a class I teach and realized how
much we talk about targeting the right audience and I have never mentioned that
here. So I decided to put together a few
tips on designing for your audience.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<i>First off you need to
determine who your audience is.<o:p></o:p></i></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Your business or service might be so cut and dry you know
exactly who your customer is, that’s great. Some of us have a wide range of
potential customers and industries we
can target which makes targeting a little more difficult.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<i>A few things we can ask ourselves to determine who we are
talking to:</i></div>
<div class="MsoListParagraphCxSpFirst" style="mso-list: l0 level1 lfo1; text-indent: -.25in;">
</div>
<ol>
<li><b style="text-indent: -0.25in;">What is the age range of our customer? </b>There are so many ways to break out the age
range; youth, adult, senior as one example.
If you have a product geared toward a specific decade then you might
want to break it out further for that group.
Once you determine your target age range you can focus on trends that
appeal to that group. For example youth would be attracted to cartoonish or
brighter colors, where as seniors would enjoy a little more muted colors and
imagery of folks a little closer to their age group.<br /></li>
<li> <b style="text-indent: -0.25in;">What might the possible educational level
be? </b>Educational level meaning high school graduate,
tech school training, undergrad degree, graduate degree, and higher. Knowing this information will help to
determine appealing content that might appeal to various education levels. For example youth will would require simple
phrases since they typically don’t have a wide vocabulary yet, where as someone
with a graduate degree would be more drawn to a more diverse wording.<br /></li>
<li><b style="text-indent: -0.25in;"><span style="font-size: 7pt; font-weight: normal;"> </span></b><b style="text-indent: -0.25in;">Is our audience technically savvy or at
least internet savvy? </b>Technically savvy markets will be surfing
the web and using a computer on a daily basis for work. Of course there are ranges of savvy comfort
levels but for the most part they can troubleshoot simple technical challenges
and know when to ask an expert for help.
Less savvy users might have a little technology fear because they don’t
use it for work. To apply this for a web
site design I would know that savvy visitors will know where to find common
site navigation and how to submit a form. So direction can be minimal and
content can get to the point. Less savvy visitors would need some hand holding,
my home page might give an overview of where to find things on each page and
possibly even how to navigate the site.
Forms would have details on how to fill
out and submit instead of anticipating they already know.</li>
</ol>
Yes, targeting a market is much larger than I discussed but
hopefully this will help you start thinking about who your advertising or site
is talking to and how you might need to accommodate them to get better results. AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0tag:blogger.com,1999:blog-3423651338884018392.post-68406264262920382622012-11-20T02:00:00.000-08:002012-11-20T02:00:01.232-08:00Adobe Acrobat for Creative & Business – Forms Part III<br />
<div class="MsoNormal">
So far we have discussed how to add and format form fields,
we added text fields, multi-line text fields, a radio button and a drop down
box. There are other fields that can be added and managed much like these
fields. You can add check boxes, list
boxes, bar codes and buttons. In the past
buttons were fairly two dimensional in how they worked but now you can add
interactivity to that button to make the form do so much more.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
To add a button click <b>Add New Field</b> found under the form
tools on the right, click <b>Button</b> from the sub-menu and click on the pdf where the
button should go.</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUorHG4JwLmq-9uP9EK7uxG7IKcOxRYLjAFGM7vLoesGvUdWfmVKMo6UW3Kdc921DcZTXYWBVAI2Xfv9N5jcE2zyljvMMAprz2AW34HNg4-gMkymYmHeBBbH7tQ6VrNb3xzY3VbTFXstA/s1600/button1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="328" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUorHG4JwLmq-9uP9EK7uxG7IKcOxRYLjAFGM7vLoesGvUdWfmVKMo6UW3Kdc921DcZTXYWBVAI2Xfv9N5jcE2zyljvMMAprz2AW34HNg4-gMkymYmHeBBbH7tQ6VrNb3xzY3VbTFXstA/s400/button1.jpg" width="400" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Name the button, and since this will be a submit button we
will click the <b>Required</b> box. Now click
<b>All Properties</b> to launch the palette. You
can edit colors, fonts, and button states.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Let’s go straight to the <b>Options Tab</b>. The first options is Layout, it allows us to
make the button a text button or an icon which would allow us to use an image
for the button. Click the field to view
possible options.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg68YwvCAtXJV0rXV2i2wjPdU_7CtJB2K1WDv6tpSbsxJag7-oLAZaFxTULBfWvixotDO5q3v0JWDibSdU0Ey6swYFuaNn3aj6UCTnquAoKWnJHWQsGRUeqPGQK2rQnH75t13UDK89fsZ0/s1600/buttons-options1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="381" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg68YwvCAtXJV0rXV2i2wjPdU_7CtJB2K1WDv6tpSbsxJag7-oLAZaFxTULBfWvixotDO5q3v0JWDibSdU0Ey6swYFuaNn3aj6UCTnquAoKWnJHWQsGRUeqPGQK2rQnH75t13UDK89fsZ0/s400/buttons-options1.jpg" width="400" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Select From:</div>
<div class="MsoNormal">
</div>
<ul>
<li><span style="text-indent: -0.25in;"><u>Label Only:</u> is the default button with the name
of that button on it.</span></li>
<li><span style="text-indent: -0.25in;"><u>Icon Only:</u> is the image we upload for an icon
used for the button with no additional label added.</span></li>
</ul>
<br />
<div class="MsoNormal">
Or we can choose from combinations of both icon and label
with:<i> icon top, label bottom; label top, icon bottom; icon left, label right;
label left, icon right; label over icon.</i>
Choose the set up that best fits for this button.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<i><b><span style="font-size: large;">Button Look</span></b></i></div>
<div class="MsoNormal">
Next you can customize button behaviors by clicking the drop
down and making a selection.</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2h3pkayVYr0wBG4CpHHNRlbhagAPV2N_BBFm3VrGZfs3ZrOsost7kOGzum1hxssbjRWBjvcN_LHkGpDJj8eH7F_NJkxjFBwAaS5BuNaPh4HYer7VmbWki9Xk648RKE7q4_zQ0v9arOn8/s1600/buttons-options2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="381" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2h3pkayVYr0wBG4CpHHNRlbhagAPV2N_BBFm3VrGZfs3ZrOsost7kOGzum1hxssbjRWBjvcN_LHkGpDJj8eH7F_NJkxjFBwAaS5BuNaPh4HYer7VmbWki9Xk648RKE7q4_zQ0v9arOn8/s400/buttons-options2.jpg" width="400" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<u>Button Behavior</u> options:</div>
<div class="MsoNormal">
</div>
<ul>
<li><span style="text-indent: -0.25in;"><b>None:</b> Keeps the appearance of the button the
same.</span></li>
<li><span style="text-indent: -0.25in;"><b>Push:</b> Specifies appearances for the Up, Down,
and Rollover states of the mouse. Select an option under State, and then
specify a label or icon option:</span></li>
<ul>
<li><span style="text-indent: -0.25in;"><u>Up:</u> Determines what the button looks like when
the mouse button isn’t clicked.</span></li>
<li><span style="text-indent: -0.25in;"><u>Down:</u> Determines what the button looks like when
the mouse is clicked on the button, but before it’s released.</span></li>
<li><span style="text-indent: -0.25in;"><u>Rollover:</u> Determines what the button looks like
when the pointer is held over the button.</span></li>
</ul>
<li><span style="text-indent: -0.25in;"><b>Outline:</b> Highlights the button border.</span></li>
<li><span style="text-indent: -0.25in;"><b>Invert:</b> Reverses the dark and light shades of
the button.</span></li>
</ul>
<br />
<div class="MsoNormal">
If you are using an icon you can upload different icons for
different button states under Icon and Label.
Clicking on <i>Up</i>, <i>Down</i>, or <i>Rollover</i> (if available for behavior you chose) then
click <b>Choose Icon</b> on the right to select an image from your computer to use for
an icon.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
For label only or labels with the icon<u> type the name</u> that
should appear on the button in the <b>Label</b> field.
Now the look of the button is set.
Let’s make it do something.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<i><b><span style="font-size: large;">Button Actions</span></b></i></div>
<div class="MsoNormal">
Click on the <b>Actions Tab</b>, the first thing we can do is
select a <b>Trigger</b> with options of<i> Mouse Up, Mouse Down, Mouse Enter, Mouse Exit,
On Blur, On Focus</i>. </div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh53YZ3WjIocy-c4U7HpahsJfI5a0xf8Zab9fzC-68d8luw_cJ0jTzzRFY2wbW-oGXQl4wOYyakSW_nElrPhHlsaZBpMzoEVDWPBL8GW5moLfhNaZcr6OmMhKkBZCP5Iko25wgzKEtZxFs/s1600/button-action1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh53YZ3WjIocy-c4U7HpahsJfI5a0xf8Zab9fzC-68d8luw_cJ0jTzzRFY2wbW-oGXQl4wOYyakSW_nElrPhHlsaZBpMzoEVDWPBL8GW5moLfhNaZcr6OmMhKkBZCP5Iko25wgzKEtZxFs/s400/button-action1.jpg" width="345" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Select <i>Mouse Down</i> because we want the action to take place
when the button is clicked. From the
<b>select Action Menu</b> you will set up what happens when the button is clicked.
Choose from a variety of options including sending someone to a link, making a
sounds, running a script showing a hidden layer or what we want to do submit a
form. Click the <b>Add</b> button.</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgJPEJAoFk24uC0Zf3lihKflrr-18D7hftUv5hz9D2eUx_1kW8EhF6h9ZlrV5HYKfO5_c3MPlILbZD55G8a7cinfbR5NlRk2ReO4m57uUrovN1WuwQE10fiqF9Vh2yyYrI3f4tu8_SA0E/s1600/button-action2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="366" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgJPEJAoFk24uC0Zf3lihKflrr-18D7hftUv5hz9D2eUx_1kW8EhF6h9ZlrV5HYKfO5_c3MPlILbZD55G8a7cinfbR5NlRk2ReO4m57uUrovN1WuwQE10fiqF9Vh2yyYrI3f4tu8_SA0E/s400/button-action2.jpg" width="400" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
The last step is setting up where the information entered
into the form will be sent to. At the
top <b>Enter a URL for this link</b> type in where the form entries would go. We have two choices we can enter an email for
all the form data to be sent to or we can set up server information to dump the
form info into.</div>
<div class="MsoNormal">
</div>
<ul>
<li><span style="text-indent: -0.25in;">If we want to send form info to an email we
would type </span><a href="mailto:youremail@email.com" style="text-indent: -0.25in;">mailto:youremail@email.com</a></li>
<li><span style="text-indent: -0.25in;">If we wanted to use a server we would put </span><a href="http://www.domain.com/folder/subfolder/whatever" style="text-indent: -0.25in;">http://www.domain.com/folder/subfolder/whatever</a></li>
</ul>
<br />
<div class="MsoNormal">
Click <b>Close</b> at the bottom of the pallet and let’s view our
completed form.</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicqeF_uHgxbzVHj-2Fc_gwa-mUNGBxME7iyih95DrhCVpU_d4TcIcoeqTf-6NwK0bckc5z4zjd1Oj_UdET5BTHaDQBeypJ2CLW34b6MZDUH1NyKGw3aCsEfem4kfbY9R0heoncL3G7GOc/s1600/finalform.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="544" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicqeF_uHgxbzVHj-2Fc_gwa-mUNGBxME7iyih95DrhCVpU_d4TcIcoeqTf-6NwK0bckc5z4zjd1Oj_UdET5BTHaDQBeypJ2CLW34b6MZDUH1NyKGw3aCsEfem4kfbY9R0heoncL3G7GOc/s640/finalform.jpg" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Check out the radio buttons, text boxes, drop down and
submit button. All as we set it up and
ready for information to be entered into.
Notice the fields that were marked as required have a red outline. Our form is ready for use!</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
If you missed the first two parts check out <a href="http://www.digitalzenblog.com/2012/11/adobe-acrobat-for-creative-business.html" target="_blank">basics & text fields</a> and
<a href="http://www.digitalzenblog.com/2012/11/adobe-acrobat-for-creative-business_14.html" target="_blank">additional fields</a> previously posted.<br />
<br />
Remember you can't do any of this without the full version of Adobe Acrobat, get your version now. <a href="http://www.amazon.com/gp/product/B000IT4MH0/ref=as_li_tf_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B000IT4MH0&linkCode=as2&tag=digitalzen-20">Adobe Acrobat 8.0 Standard Windows</a><img alt="" border="0" height="1" src="http://www.assoc-amazon.com/e/ir?t=digitalzen-20&l=as2&o=1&a=B000IT4MH0" style="border: none !important; margin: 0px !important;" width="1" /></div>
AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0tag:blogger.com,1999:blog-3423651338884018392.post-9982713294596748402012-11-14T10:15:00.000-08:002012-11-14T18:20:10.471-08:00Adobe Acrobat for Creative & Business – Forms Part IILast week we got started with forms by adding a basic text input field, this week we are going
to look at more form features and finish adding input fields to our example pdf.<br />
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
We can add a multi-line text field the same way we added a
single line text field, click <b>Add New
Field</b>, then selecting <b>Text Field</b> <span style="font-family: 'Times New Roman', serif; line-height: 115%;">and click on the pdf where we want it added.</span></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyRbbAKBuR2Pt0wVD36H1XerkJBuRraQDh5b1sDcwZPNMPYgWJc0Fdtr_yVr86LRPET0cKXnaNFQmBCuBduiXXBpljBzm7-j_rhkNEQhlv8MZyNB8OKJV4UH_OsQyJ7A3Sm4ntn5HxzVU/s1600/BForm1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="200" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyRbbAKBuR2Pt0wVD36H1XerkJBuRraQDh5b1sDcwZPNMPYgWJc0Fdtr_yVr86LRPET0cKXnaNFQmBCuBduiXXBpljBzm7-j_rhkNEQhlv8MZyNB8OKJV4UH_OsQyJ7A3Sm4ntn5HxzVU/s400/BForm1.jpg" width="400" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Click <b>All Properties</b> to launch the palette. Just like the single
form field you can edit a variety of things like the font and color. To make this a multi-line form click the
<b>Options</b> tab and click the <b>Multi-line check box</b>. Click the <b>Close button </b>to look at our form.<br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcYOpAsSur3lUK3uGVnYBEcJ0id-lF915QH8t6lIdZYqbsRZ4rAuam5A5YjlTskP67jqQ0V7BHos21Lrx8NXMfzSitka5nqy09R8ISfd0ni0HOiYuEHE-X9m-CD3d5oY3EoefGyv1B3j8/s1600/BForm2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcYOpAsSur3lUK3uGVnYBEcJ0id-lF915QH8t6lIdZYqbsRZ4rAuam5A5YjlTskP67jqQ0V7BHos21Lrx8NXMfzSitka5nqy09R8ISfd0ni0HOiYuEHE-X9m-CD3d5oY3EoefGyv1B3j8/s400/BForm2.jpg" width="328" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Multi-line is applied to the message box, however it is
still small, and would hard to type much info in, so we need to make the box
bigger. Click on it to select, then
click on one of the little dots on the side or bottom and drag it out to your desired size.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiojcbR2JsKaIipzkQmOvO0YVJV1f-Q3czo2b6mxzxyN184BB8UExsRS6zo2fzkfQ8bUKXQ1zSgMtQcE0LrIntFARJCLlD0dpf_NocmA8XGksnFoXVWj7pJXAbF134Oo7z5CAw2fcxET8s/s1600/BForm3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="143" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiojcbR2JsKaIipzkQmOvO0YVJV1f-Q3czo2b6mxzxyN184BB8UExsRS6zo2fzkfQ8bUKXQ1zSgMtQcE0LrIntFARJCLlD0dpf_NocmA8XGksnFoXVWj7pJXAbF134Oo7z5CAw2fcxET8s/s400/BForm3.jpg" width="400" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now, let’s add more fields to the form. In the Tools Menu on the right click <b>Add New Field</b>, then
select <b>Radio Buttons</b>. Click in the pdf
file to place the radio button. </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSPhO7jwVoFjztOIQJZGl7hSyzsvmh6SDiizkQul_22kKs1rC2tTBryBpfivw6PAP15u6IfKv_vmAV_effoHZMmRLbIH2Yd4ClvnttioO6Z8HifqGtCci7lw8hE9YWS6C7Joum4azg6AI/s1600/BForm4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="256" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSPhO7jwVoFjztOIQJZGl7hSyzsvmh6SDiizkQul_22kKs1rC2tTBryBpfivw6PAP15u6IfKv_vmAV_effoHZMmRLbIH2Yd4ClvnttioO6Z8HifqGtCci7lw8hE9YWS6C7Joum4azg6AI/s400/BForm4.jpg" width="400" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
To use a radio button group there needs to be more than one radio button placed. Click <b>Add Another Button</b> at the
bottom of the palette window and click in the pdf to placed another, continue doing this until all the radio buttons for this group are added. It automatically assigned a name and grouping for our buttons, each is
unique so we don’t need to change it but we can by typing new names in each box.</div>
<div class="MsoNormal">
<br />
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif;">Finally let’s add a drop
down menu by clicking <b>Add New Field</b> in the Forms tools palette on the right,
then click <b>Drop Down</b> from the sub-menu.
Click on the pdf where the new drop down box should go.<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHSNrijiKTTCn16FpFekr2yZOKFjgJlDRL5czDppK2YMKLazguYwpNNyRq0f0xXr7W0SiqgMfj3f8p2-MVBVfaEBBH4LfSEUQw1b66_w750Hq-FJCFRzvmjjN3l5PM8mp9N34vEK_CJ8g/s1600/BForm5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="255" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHSNrijiKTTCn16FpFekr2yZOKFjgJlDRL5czDppK2YMKLazguYwpNNyRq0f0xXr7W0SiqgMfj3f8p2-MVBVfaEBBH4LfSEUQw1b66_w750Hq-FJCFRzvmjjN3l5PM8mp9N34vEK_CJ8g/s400/BForm5.jpg" width="400" /></a></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif;">Like other input fields
you can change the name and click the Required Field check box to not allow
form processing until a selection is made from this field. </span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif;"><br /></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif;">Click on <b>All Properties</b> to add items to the
drop down list.<o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTD-dc2NW5Vga08j-FYaYcOzU9CZkkMoI19F_wY8Dbk0MqOhPfl5fAVBtirSre6e7cijUE8HpIqBba-q6ByCmBnpruvvrLNxbcZWWfvcoCYfl3722tip6Lq51ykruWAEy7zqHURRan1Zc/s1600/BForm6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="449" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiTD-dc2NW5Vga08j-FYaYcOzU9CZkkMoI19F_wY8Dbk0MqOhPfl5fAVBtirSre6e7cijUE8HpIqBba-q6ByCmBnpruvvrLNxbcZWWfvcoCYfl3722tip6Lq51ykruWAEy7zqHURRan1Zc/s640/BForm6.jpg" width="640" /></a></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif;">Like the other entry
fields you can edit the color, font and look of the test in Appearance. To add items to the list click the <b>Options
tab</b>. Notice towards the top <i>Items</i>,
<i>Export Value</i> and <i>Item List</i>. <o:p></o:p></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif;">Type the name as you
want it to appear on the actual form in the <b>Item field</b>. If the information is going to be exported to
a database the <b>Export Field</b> should have a value that matches the database
configuration, for example I put TX for Texas. This field can be left blank if not applicable. </span><br />
<span style="font-family: 'Times New Roman', serif;"><br /></span>
<br />
<span style="font-family: 'Times New Roman', serif;">Click the <b>Add button</b> next to the Item field
and you will see the name added to the <b>Item List</b>. Repeat entering the name into the Item field and clicking the Add button until all items for the drop down are added.</span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif;">Once all items are added
move down to the <b>item list</b>, you can click on each item and move it up or down with the buttons to the right, this order will be the order items will display on the actual pdf form. You can also delete items with that button. </span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif;"><br /></span></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif;">Remember clicking an item in the list and
then clicking <b>close</b> (at the bottom of the palette) will make that item the default value for the drop down.<o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNrAbQDQ3jDqKnYAW7W1WqH_VrEEGqOelb7izk8MbmG4Myomue2AZOp-ckFuSyzmF5CkhIfUIZqsFx0mEsbprUWjm0BJOWQcD8MyhgoS5dDu4zDAsF5zWNKTUWb5CXMBQKuKsXyhefuu4/s1600/BForm7.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="290" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNrAbQDQ3jDqKnYAW7W1WqH_VrEEGqOelb7izk8MbmG4Myomue2AZOp-ckFuSyzmF5CkhIfUIZqsFx0mEsbprUWjm0BJOWQcD8MyhgoS5dDu4zDAsF5zWNKTUWb5CXMBQKuKsXyhefuu4/s400/BForm7.jpg" width="400" /></a></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
<div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<span style="font-family: 'Times New Roman', serif;">Check out our form!</span><span style="font-family: 'Times New Roman', serif;"> </span><span style="font-family: 'Times New Roman', serif;">We did radio buttons, text boxes including a
multi-line box and a drop down.</span><span style="font-family: 'Times New Roman', serif;"> </span><span style="font-family: 'Times New Roman', serif;">I am going
to finish dropping in form fields to get ready for next weeks buttons post!</span><br />
<span style="font-family: 'Times New Roman', serif;"><br /></span>
<a href="http://www.amazon.com/gp/product/B000IT4MH0/ref=as_li_tf_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B000IT4MH0&linkCode=as2&tag=digitalzen-20">Adobe Acrobat 8.0 Standard Windows</a><img alt="" border="0" height="1" src="http://www.assoc-amazon.com/e/ir?t=digitalzen-20&l=as2&o=1&a=B000IT4MH0" style="border: none !important; margin: 0px !important;" width="1" /><br />
<span style="font-family: 'Times New Roman', serif;"><br /></span></div>
</div>
AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com1tag:blogger.com,1999:blog-3423651338884018392.post-35112455206261791362012-11-06T02:50:00.000-08:002012-11-06T02:50:00.852-08:00Adobe Acrobat for Creative & Business - Creating Forms<br />
<div class="MsoNormal">
A great features that I have used throughout many versions
of Adobe Acrobat is form fields. You can
open a pdf and add interactive fields.
Then email that form out for someone to fill out and send back. The only catch is if someone is using just
the free Reader version they can fill out the form but they can’t save it, so
they would need to print it out. Anyone with a full version of Adobe Acrobat
can save what they enter and submit via email or however you wish.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
In adding form fields Acrobat offers text boxes, check
boxes, radio buttons, lists, dropdowns, buttons and digital signatures.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
In the <u>Tools</u> on the right click on <u>Forms</u> to access a list of
options.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Click on <b>Create</b> to start the conversion process preparing
your document to be a form.</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgktdrntMtvsQibToN6SBxv5ifdjIU3BsZfofbe0h6WAzH_DfiTQKznx5wmjRqavGezWLof58IW1yUiu6MYg_B7ke2GK0fhRHCf-se8A0ZVuAH50M8JP15HrTiHBPD93yG8kxnx2Hp5wzE/s1600/Form_text1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="400" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgktdrntMtvsQibToN6SBxv5ifdjIU3BsZfofbe0h6WAzH_DfiTQKznx5wmjRqavGezWLof58IW1yUiu6MYg_B7ke2GK0fhRHCf-se8A0ZVuAH50M8JP15HrTiHBPD93yG8kxnx2Hp5wzE/s400/Form_text1.jpg" width="176" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
This feature will detect any current form fields already in
the document in addition to change the navigation options for adding new form
fields.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
I drug a text field on to my form by clicking <b>Add New Field </b>from the tasks panel, then selecting <b>Text Field </b>from the drop down. Click next to the name label on the page to drop it in. </div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
After placing the first text form field I see a yellow box. I added Name to the field name since I placed it next to the Name label of my document. Then I clicked the Required Field text box. This will require the user to fill in that field.</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP1SEwajvaF71mVDrKgt4Kd9zxjwBXC7HXoRzCVdvV6wezLsCxLOfRazNL5XSKcd2Kx8MbihPaBL0equK_QxQ0eMvmSYFmilSEzs8YN5hCGrYWD6q0JA5WX1rXsclty7ypedHfbgH8IrU/s1600/Form_text2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="298" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgP1SEwajvaF71mVDrKgt4Kd9zxjwBXC7HXoRzCVdvV6wezLsCxLOfRazNL5XSKcd2Kx8MbihPaBL0equK_QxQ0eMvmSYFmilSEzs8YN5hCGrYWD6q0JA5WX1rXsclty7ypedHfbgH8IrU/s400/Form_text2.jpg" width="400" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
It is important to remember to give each field in the yellow box a different name when setting up. Any fields with like names will copy the user entry into all form fields with the same name. What that means if I name my text box Name for my name and the same for the address fields then when I enter my name it will automatically fill that in to the address field as well.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
You could stop there but I want to fine tune further. Click
the <b>properties</b> link to launch field editing.
There are a lot of properties that can be edited but for now we will just do some basic font edits.</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYD7usaslafHW6pirnB-lLqZdgaAPG3A1Q7Xp_QP_s4p3amomIOKgYiIiJGqVcW_yP0F6e8GEd40EXlGYAM7Y4UDiK9X7zyB17QlMYzFX0CNYUSlSvQjNabQfcluwmVYh21l1dEu_CPns/s1600/Form_text3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="295" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYD7usaslafHW6pirnB-lLqZdgaAPG3A1Q7Xp_QP_s4p3amomIOKgYiIiJGqVcW_yP0F6e8GEd40EXlGYAM7Y4UDiK9X7zyB17QlMYzFX0CNYUSlSvQjNabQfcluwmVYh21l1dEu_CPns/s320/Form_text3.jpg" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Click the <b>appearance tab</b> at the top. You can set the colors of the actual form
field or a border for a form field. You
can change the font family, font size and color of the text that will be typed
into the field. </div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEietSWXvGQgp_qae435P1P0mimKXhNylOEjc-0zEzWFXaE_0owx9CSrzj6DOI8T0YisADxH6jRWfq4HCVuUy6htmFgU_o1k0I6RB23wBFbdDQemEWR37GBKPK0Y9wTNCSiNgiSAfiNSlm4/s1600/Form_text4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEietSWXvGQgp_qae435P1P0mimKXhNylOEjc-0zEzWFXaE_0owx9CSrzj6DOI8T0YisADxH6jRWfq4HCVuUy6htmFgU_o1k0I6RB23wBFbdDQemEWR37GBKPK0Y9wTNCSiNgiSAfiNSlm4/s320/Form_text4.jpg" width="262" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Click on the <b>options tab</b> at the top. Click on the <i>alignment drop down</i> to choose
right, left and center justification.
You can leave the <i>default field</i> blank or add helpful hints like please
type name here. There are a lot of great
options to play with and I will go over some of them in future posts.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Once my formatting is selected I clicked <b>close</b> to set my
form field. Save it and test out your new form field.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Viola we just added a form field in Adobe Acrobat! More fun with forms next week!<br />
<br />
<a href="http://www.amazon.com/gp/product/B000IT4MH0/ref=as_li_tf_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B000IT4MH0&linkCode=as2&tag=digitalzen-20">Adobe Acrobat 8.0 Standard Windows</a><img alt="" border="0" height="1" src="http://www.assoc-amazon.com/e/ir?t=digitalzen-20&l=as2&o=1&a=B000IT4MH0" style="border: none !important; margin: 0px !important;" width="1" /></div>
AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0tag:blogger.com,1999:blog-3423651338884018392.post-8838354793203391312012-10-30T02:34:00.000-07:002012-10-30T02:34:00.495-07:00Adobe Acrobat for Creative & Business - Editing Text<br />
<div class="MsoNormal">
In the last post I looked at the OCR feature in Adobe
Acrobat. That feature is needed if the
pdf is a flattened file, but if the pdf is not a flattened file you can
actually select and edit text if you have the full version.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Once your pdf file is launched in Adobe Acrobat click on the
<u>Tools</u> link to see possible features.</div>
<div class="MsoNormal">
From the list click on <u>Content</u> to open that palette.</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUqKR3H9nvOAQhP2BsXW1Lseuu9usg9A2anaUKpulBIhWxyzsrgQc0LNifM6eTxrS4p_w_cheDMi-pY71q-7xF43WAo_X9dyNeuGaAJ86ADIC_g1nkFw7ldwHTtSGBAhMjdF525ha7fcc/s1600/edit1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="303" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUqKR3H9nvOAQhP2BsXW1Lseuu9usg9A2anaUKpulBIhWxyzsrgQc0LNifM6eTxrS4p_w_cheDMi-pY71q-7xF43WAo_X9dyNeuGaAJ86ADIC_g1nkFw7ldwHTtSGBAhMjdF525ha7fcc/s400/edit1.jpg" width="400" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
There are a lot of great features here, for editing text we
are going to click <b>Edit Document Text</b>. </div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Now click on the document, you can see a box outline the
paragraph you just clicked in, and a blinking curser in the text. Just start typing where the curser is to add text.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
To edit exiting text highlight the word you wish to change
and type the new word.</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinw0pAkwNpxZrtiyBj3CL6a2u7hRNRhd168ukraxTZwyd0oXvhKLmHZQp92dJn_5nDUMeUFxj4Q3DkmP3AdIY4Nddt7G0cBGT8o4XLQ4V7RrL0zU-DARAeXbwPkZLcHQ2D7VZILUT4ssc/s1600/edit3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="372" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinw0pAkwNpxZrtiyBj3CL6a2u7hRNRhd168ukraxTZwyd0oXvhKLmHZQp92dJn_5nDUMeUFxj4Q3DkmP3AdIY4Nddt7G0cBGT8o4XLQ4V7RrL0zU-DARAeXbwPkZLcHQ2D7VZILUT4ssc/s400/edit3.jpg" width="400" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<i>So we have edited text in a pdf, and even added to it, but
we did all those changes in existing paragraph blocks. What if we need to add an entirely new
paragraph? Easy!</i></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
In the same <u>Content palette</u>, that we had found under <u>Tools</u>
we can click on <b>Add or Edit Text Box</b> which will launch a text formatting
menu.</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhegwiYsZZVdw9TdS5wsa5D2kA_4a1KUrWN_SzxjBT_4T9IhQ9lKE3_5Zar8JySMEF3JMXTVGgHvRDBii8G8ym7ENfxLO0Y8GgbyIEzIt-8Z2ecxl-rFDJBpJrT0runAx53zVjkS7cTmm0/s1600/edit5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="303" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhegwiYsZZVdw9TdS5wsa5D2kA_4a1KUrWN_SzxjBT_4T9IhQ9lKE3_5Zar8JySMEF3JMXTVGgHvRDBii8G8ym7ENfxLO0Y8GgbyIEzIt-8Z2ecxl-rFDJBpJrT0runAx53zVjkS7cTmm0/s400/edit5.jpg" width="400" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Click in your document and start typing.</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiniB0Mn22Z-shlZ4K47UawQjxgk73u6YFl19IrTXCvtQh7MocdYik0JPnik-_YdObT5E-JNZ_r8WhQ-ApQCUKhrTPGLqG6rKF68WKdlMWX-qOCxDUTOHhnFZHZQDTDMX8R49pS6k2NPPk/s1600/edit6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="372" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiniB0Mn22Z-shlZ4K47UawQjxgk73u6YFl19IrTXCvtQh7MocdYik0JPnik-_YdObT5E-JNZ_r8WhQ-ApQCUKhrTPGLqG6rKF68WKdlMWX-qOCxDUTOHhnFZHZQDTDMX8R49pS6k2NPPk/s400/edit6.jpg" width="400" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
You will probably have to edit the font to make the text fit
in with the rest of your document. You
can either set it before you start typing or highlight your text after you
type. Then use the Typewriter box to
adjust desired font settings.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Finally just a reminder to save your document when you
finish. Rename it if you need to keep
the old document, since saving these changes will copy over that.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
I remember the days of choppy unpredictable pdf files. I was happy to view them let alone edit. Who would have thought pdfs would evolve to
this! Stay tuned for another Adobe
Acrobat tutorial next week.<br />
<br />
<a href="http://www.amazon.com/gp/product/B000IT4MH0/ref=as_li_tf_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B000IT4MH0&linkCode=as2&tag=digitalzen-20">Adobe Acrobat 8.0 Standard Windows</a><img alt="" border="0" height="1" src="http://www.assoc-amazon.com/e/ir?t=digitalzen-20&l=as2&o=1&a=B000IT4MH0" style="border: none !important; margin: 0px !important;" width="1" /></div>
AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0tag:blogger.com,1999:blog-3423651338884018392.post-9909748252037203172012-10-23T02:08:00.000-07:002012-10-23T02:08:00.837-07:00Adobe Acrobat for Creative & Business – Built in OCR<br />
<div class="MsoNormal">
A pdf could have been made from a layered or text file which
will open in Acrobat and allow you to highlight text for copying or editing.
Sometimes pdf files come from programs like Photohshop which flatten the text
and don’t allow highlighting in Acrobat.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
OCR stands for Optical Character Recognition. There are tons of OCR programs that will read
an image file and turn the text to editable letters, and Adobe Acrobat has
added this to its available features.</div>
<div class="MsoNormal">
I had someone send me a flattened pdf file which would not
allow me to copy and paste text. Of
course I did not want to retype 35 pages so I thought how can I grab this text.</div>
<div class="MsoNormal">
</div>
<ul>
<li><span style="font-family: Symbol; text-indent: -0.25in;"><span style="font-family: 'Times New Roman'; font-size: 7pt;"> </span></span><span style="text-indent: -0.25in;">First I opened the file in Adobe Acrobat</span></li>
<li><span style="text-indent: -0.25in;">Open Tools on the right.</span></li>
<li><span style="font-family: Symbol; text-indent: -0.25in;"><span style="font-family: 'Times New Roman'; font-size: 7pt;"> </span></span><span style="text-indent: -0.25in;">I tried to use the text tool under Content, Edit
Text & Objects but could not grab any text.</span></li>
<li><span style="font-family: Symbol; text-indent: -0.25in;"><span style="font-family: 'Times New Roman'; font-size: 7pt;"> </span></span><span style="text-indent: -0.25in;">Next I selected Recognize Text and clicked the
first option I saw “In this file”</span></li>
<li><span style="font-family: Symbol; text-indent: -0.25in;"><span style="font-family: 'Times New Roman'; font-size: 7pt;"> </span></span><span style="text-indent: -0.25in;">The built in OCR ran through all the pages and
converted the text to actual letters I could select.</span></li>
<li><span style="text-indent: -0.25in;">I again went into Content, Edit Text &
Objects and selected the text tool.</span></li>
<li><span style="text-indent: -0.25in;">This time it let me select the text, which I was
able to copy and paste into my presentation file.</span></li>
</ul>
<br />
<div class="MsoNormal">
That just saved me hours of typing (and hours of proofing
because I type horribly). So as I started
working with this type for the most part it was very easy to highlight then
copy and paste to my presentation but like any OCR sometimes the software has a
hard time recognizing some of the type.</div>
<div class="MsoNormal">
</div>
<ul>
<li><span style="text-indent: -0.25in;">To refine the OCR conversion I went back into
Recognize Text, and selected Find All Suspects under OCR Suspects.</span><span style="text-indent: -0.25in;"> </span></li>
</ul>
<br />
<div class="MsoNormal">
It went through my text and highlighted text the areas it
could not distinguish. I clicked Accept
and Find which converted that word to text and moved on to the next. Now with this extra step I was able to make
even better selections to copy and paste actual characters of text.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
It’s not perfect, like most OCR software, but what a great
feature to have. </div>
<div class="MsoNormal">
<br /></div>
<a href="http://www.amazon.com/gp/product/B000IT4MH0/ref=as_li_tf_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B000IT4MH0&linkCode=as2&tag=digitalzen-20">Adobe Acrobat 8.0 Standard Windows</a><img alt="" border="0" height="1" src="http://www.assoc-amazon.com/e/ir?t=digitalzen-20&l=as2&o=1&a=B000IT4MH0" style="border: none !important; margin: 0px !important;" width="1" />AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0tag:blogger.com,1999:blog-3423651338884018392.post-41088197823565918672012-10-16T08:08:00.000-07:002012-10-16T08:08:00.846-07:00Adobe Acrobat for Creative & Business – Which version should I get?<br />
<div class="MsoNormal">
At some point we all run into a pdf file whether it is a
website attachment, a form from our doctors office or a creative file. To open and view a pdf at some point you had
to download Adobe Acrobat Reader. This
is the free download from Adobe that allows you to read a pdf file. The free
version has some features you can print, crop and probably make some notes in
the document. </div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
In addition to the free Acrobat Reader version you can
purchase a full working version of Adobe Acrobat. For just a couple hundred dollars you can get
a lot of features, including the ability to make your own pdf files because you
can’t create a pdf with the free version.
</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
There are now two different types of paid versions. Acrobat Standard is best used for a single
user, and Acrobat Pro is best used for working in a group. You can test drive
with a free trial and purchasing is roughly $100 difference in price.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<i>Some features for
each:<o:p></o:p></i></div>
<table border="1" cellpadding="0" cellspacing="0" class="MsoTableGrid" style="border-collapse: collapse; border: none; mso-border-alt: solid windowtext .5pt; mso-padding-alt: 0in 5.4pt 0in 5.4pt; mso-yfti-tbllook: 1184;">
<tbody>
<tr>
<td style="border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
</td>
<td style="border-left: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
Acrobat Reader (FREE)</div>
</td>
<td style="border-left: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
Acrobat Standard</div>
</td>
<td style="border-left: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
Acrobat Pro</div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
Read PDF Files</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
x</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
x</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
x</div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
Create PDF Files</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
x</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
x</div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
Convert PDF to other formats</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
X (Word, Excel, HTML)</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
X (Word, Excel, HTML, Power Point)</div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
Edit PDFs</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
x</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
X</div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
Merge files into PDF</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
X (merge pdf files)</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
X (merge pdf & other formats)</div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
Create PDF& web forms</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
x</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
x</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
X</div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
Review PDF documents</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
x</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
x</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
X (allows file sharing)</div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
Sign electronic PDF</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
x</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
x</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
X</div>
</td>
</tr>
<tr>
<td style="border-top: none; border: solid windowtext 1.0pt; mso-border-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
Protect PDF files</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
<br /></div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
x</div>
</td>
<td style="border-bottom: solid windowtext 1.0pt; border-left: none; border-right: solid windowtext 1.0pt; border-top: none; mso-border-alt: solid windowtext .5pt; mso-border-left-alt: solid windowtext .5pt; mso-border-top-alt: solid windowtext .5pt; padding: 0in 5.4pt 0in 5.4pt; width: 119.7pt;" valign="top" width="160"><div class="MsoNormal" style="margin-bottom: 0.0001pt;">
X</div>
</td>
</tr>
</tbody></table>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Whether you get standard or pro one huge win to me is actually
making a pdf because you can create a secure file. That means you can password protect the
document which will not allow anyone else to change it. Keeping the integrity of your file, and all
pdfs can be created to a fairly compact size that is easy to email.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
This series is going to discuss some of the great features
available in Adobe Acrobat that might really benefit your business
workflow. I have used several features
like OCR and creating forms that I will share, and I will explore some features
I haven’t tried and share that with you.
Should be fun!<br />
<br /></div>
<a href="http://www.amazon.com/gp/product/B000IT4MH0/ref=as_li_tf_tl?ie=UTF8&camp=1789&creative=9325&creativeASIN=B000IT4MH0&linkCode=as2&tag=digitalzen-20">Adobe Acrobat 8.0 Standard Windows</a><img alt="" border="0" height="1" src="http://www.assoc-amazon.com/e/ir?t=digitalzen-20&l=as2&o=1&a=B000IT4MH0" style="border: none !important; margin: 0px !important;" width="1" />AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0tag:blogger.com,1999:blog-3423651338884018392.post-9431902817089803902012-09-25T03:16:00.000-07:002012-09-25T05:16:44.100-07:00Hexidecimal color<br />
<div class="MsoNormal">
Many years ago when the internet was first available to the
general public, and most people thought it was the latest fad, the internet
didn’t have color. Anything you saw
online had a grey screen with black type. You could surf a topic and get to the
end of available pages for that topic quickly.
Of course we have gone quit far in a short amount of time.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
The color system put into place for the internet is called hexadecimal
color which is a combination of letters and numbers put together to represent a
specific color. Anyone that has worked
in offset printing has worked with CMYK (Cyan, Magenta, Yellow, Black) or
Pantone color systems, and hexadecimal is a color system providing web safe
colors. Although color has come a long
way there are still some hues that don’t convert nicely to viewing on a screen
so it is important we always choose from web safe colors for anything that will
be viewed digitally.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
I personally use Photoshop, Fireworks or Illustrator to
choose my hexadecimal colors but not everyone can afford these programs. There is a way to calculate the color code
using RGB (red, green, blue) values. An
RGB color is going to have a value that ranging from 0 to 255. For example this color used 175 red, 40 green
and 40 blue.</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj7Jx9ZiEMa8EWZoE0GlKZQne_EUmEoXwJmYI79WMT97U_IzL2eRE3Q33lX0NRyGtGxHGWjTAtRsRj5YSHBmNI-WXyj4afatg1zztTWcqvBVoaxZkiyk_TAO04LBUOOFDJd0LzDkYPC6I/s1600/hex-RGB.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhj7Jx9ZiEMa8EWZoE0GlKZQne_EUmEoXwJmYI79WMT97U_IzL2eRE3Q33lX0NRyGtGxHGWjTAtRsRj5YSHBmNI-WXyj4afatg1zztTWcqvBVoaxZkiyk_TAO04LBUOOFDJd0LzDkYPC6I/s1600/hex-RGB.png" /></a></div>
<div class="MsoNormal">
<o:p><br /></o:p></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
To convert this to a hexadecimal color I would use a formula
that looks something like this one:</div>
<div class="MsoNormal">
R/16 = X + y/16<br />
G/16 = X + y/16<br />
B/16 = X + y/16</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Or for the color we have our formula would look like:</div>
<div class="MsoNormal">
175/16 = X + y/16<br />
40/16 = X + y/16<br />
40/16 = X + y/16</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
The whole number will be ‘x’ and the remainder as a decimal
would be ‘y’. </div>
<div class="MsoNormal">
175/16 = 11 + 0/16<br />
40/16 = 2 + .5/16<br />
40/16 = 2 + .5/16</div>
<div class="MsoNormal">
Take the decimal point number times 16 to get a whole
number.</div>
<div class="MsoNormal">
175/16 = 11 + 0/16<br />
40/16 = 2 + 8 /16<br />
40/16 = 2 + 8/16</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
So if we take out our calculations we have:</div>
<div class="MsoNormal">
11, 0, 2, 8, 2, 8</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Numbers are represented in 1 – 9, but we have 11 as one of
our calculations. Starting with 10 we
replace the number with the coordinating letter for that number. </div>
<div class="MsoNormal">
10 = A, 11 = B, 12 = C, 13 = D, 14=E, 15=F (it doesn’t go higher than 15).</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
So our hexadecimal color would be: B02828</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim8OX64yEpFlMPUWje2Z0Jwizn_JQ8JmrZz4LLcQJ_f30tU4oyQW8ju2zYh_xXc9jX1ef2nIQ-svX3vJdVukv-HRKMBOyUlCqwawlUBFuyBQlG-BUxDCB19rHLQhNVwkdW2o_EOZZ_gxE/s1600/Hexi-hexi.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim8OX64yEpFlMPUWje2Z0Jwizn_JQ8JmrZz4LLcQJ_f30tU4oyQW8ju2zYh_xXc9jX1ef2nIQ-svX3vJdVukv-HRKMBOyUlCqwawlUBFuyBQlG-BUxDCB19rHLQhNVwkdW2o_EOZZ_gxE/s1600/Hexi-hexi.png" /></a></div>
<div class="MsoNormal">
The color converted nicely from our original.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Ok, so you don’t really want to go through all this effort
to choose colors so I suggest finding a color chart online. Not usually as
complete of an option as calculating but will at least get you rolling visually
with color. I recommend using <a href="http://w3schools.com/html/html_colors.asp">http://w3schools.com/html/html_colors.asp</a>.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Happy Coloring! ;)</div>
AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0tag:blogger.com,1999:blog-3423651338884018392.post-38980737699542887532012-09-18T02:06:00.000-07:002012-09-18T02:06:00.129-07:00Template Discounts!Just wanted to share this discount on templates at <a href="http://website-templates-store.com/">http://website-templates-store.com/</a> for whatever your project calls for: Flash, CMS, Websites and much more.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4A9AoPQKeLDaf_Rozi7AWR7NT_Z5cWnN94HwZSBXVvhH1URv_gp_2X4rTiqC4iA9CDXEODLpKxW12W-px1w0Rb3kvU2fsHUQwcWQloHG5eKlcXKsjtxE3PjN3zZjGDWLmGG3qIrisAJY/s1600/offer.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="106" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4A9AoPQKeLDaf_Rozi7AWR7NT_Z5cWnN94HwZSBXVvhH1URv_gp_2X4rTiqC4iA9CDXEODLpKxW12W-px1w0Rb3kvU2fsHUQwcWQloHG5eKlcXKsjtxE3PjN3zZjGDWLmGG3qIrisAJY/s320/offer.jpg" width="320" /></a></div>
<br />
Hurry, The offer ends 9/30.<br />
<br />
Really someone not so savvy in design can grab a template for a low cost and then customize. It could be a great budget solution.<br />
<br />
<br />AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0tag:blogger.com,1999:blog-3423651338884018392.post-63563397395570458932012-09-04T02:00:00.000-07:002012-09-04T02:00:04.327-07:00Adobe Illustrator - Artboards<br />
<div class="MsoNormal">
I was designing icons for an eLearning project and had to
build a button with different states. I
had started all in Adobe Illustrator, lately my program of choice, and thought
about using layers to build each state in, but what a hassle having to switch
to each layer screen to work. Then it struck me, why not use Artboards for each
state. I can line up all the
Artboards in one window and go from one
button to the next without having to make extra clicks and I can duplicate
Artboards for altered states. Then I
started thinking of so many uses for Artboards; multipage website layouts, two
sides print brochures, and even something text heavy like a newsletter.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
By default Illustrator opens with one Artboard, but there
are two places additional Artboards can be added.</div>
<div class="MsoNormal">
When you launch any new document there is a set-up panel
that can be edited with the number of Artboards you wish to add, among other
things.</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj7bLEr6XSeLHPnTNYXg6E2EtQprBSjAaRR8q2b4DQi9aWpmuRRFgABoTqc4qN7Q6sTJ3Pvzn15D1AEPMEU4peqSWmOMD9dFURSMPzkrLDuf-E4jLq9EqfdsiuxL6yrCH6nDDHLTWBqSw/s1600/artboard1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="174" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgj7bLEr6XSeLHPnTNYXg6E2EtQprBSjAaRR8q2b4DQi9aWpmuRRFgABoTqc4qN7Q6sTJ3Pvzn15D1AEPMEU4peqSWmOMD9dFURSMPzkrLDuf-E4jLq9EqfdsiuxL6yrCH6nDDHLTWBqSw/s320/artboard1.jpg" width="320" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<!--[if gte vml 1]><v:shapetype
id="_x0000_t75" coordsize="21600,21600" o:spt="75" o:preferrelative="t"
path="m@4@5l@4@11@9@11@9@5xe" filled="f" stroked="f">
<v:stroke joinstyle="miter"/>
<v:formulas>
<v:f eqn="if lineDrawn pixelLineWidth 0"/>
<v:f eqn="sum @0 1 0"/>
<v:f eqn="sum 0 0 @1"/>
<v:f eqn="prod @2 1 2"/>
<v:f eqn="prod @3 21600 pixelWidth"/>
<v:f eqn="prod @3 21600 pixelHeight"/>
<v:f eqn="sum @0 0 1"/>
<v:f eqn="prod @6 1 2"/>
<v:f eqn="prod @7 21600 pixelWidth"/>
<v:f eqn="sum @8 21600 0"/>
<v:f eqn="prod @7 21600 pixelHeight"/>
<v:f eqn="sum @10 21600 0"/>
</v:formulas>
<v:path o:extrusionok="f" gradientshapeok="t" o:connecttype="rect"/>
<o:lock v:ext="edit" aspectratio="t"/>
</v:shapetype><v:shape id="Picture_x0020_1" o:spid="_x0000_i1028" type="#_x0000_t75"
style='width:582.75pt;height:315pt;visibility:visible;mso-wrap-style:square'>
<v:imagedata src="file:///C:\Users\Princess\AppData\Local\Temp\msohtmlclip1\01\clip_image001.emz"
o:title=""/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></div>
<div class="MsoNormal">
Or you could already have the document open and want to add
Artboards. In that case click on Windows
from the main navigation at the top and click on Artboards from dropdown. This will add an icon to the control palette
on the right. Click the icon to open the
window, and clicking the little paper icon at the bottom will add an Artboard.</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-FlRWXpEgSgzYRgAxGs_UekiNy0_oVVZLFEN9tGRoRIv-yyvhtA36_CanT-6z-zke-54KhfBjaACbqBhuzcCx8L_pzrgDmQqnNJGAZdWw7zvyuxKZ5Ynr7AKTqy0nEN6_LqZJiayq27g/s1600/artboard2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-FlRWXpEgSgzYRgAxGs_UekiNy0_oVVZLFEN9tGRoRIv-yyvhtA36_CanT-6z-zke-54KhfBjaACbqBhuzcCx8L_pzrgDmQqnNJGAZdWw7zvyuxKZ5Ynr7AKTqy0nEN6_LqZJiayq27g/s320/artboard2.jpg" width="240" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<!--[if gte vml 1]><v:shape
id="Picture_x0020_2" o:spid="_x0000_i1027" type="#_x0000_t75" style='width:204pt;
height:273pt;visibility:visible;mso-wrap-style:square'>
<v:imagedata src="file:///C:\Users\Princess\AppData\Local\Temp\msohtmlclip1\01\clip_image003.emz"
o:title=""/>
</v:shape><![endif]--><!--[if !vml]--><!--[endif]--></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2lDuM562VGDdYAnzTi_eL8HnAoJj2X5ItCoGe9NtflsW_13kGgj0i_mwY1cVXs5w1xA2cV3vKpAjeNZemp57q2TN8_6nOM_bgZjrfNj-pIuFyZv1eOLhZ1MDVCiMB1w7aORtrMo1OBRo/s1600/artboard4.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2lDuM562VGDdYAnzTi_eL8HnAoJj2X5ItCoGe9NtflsW_13kGgj0i_mwY1cVXs5w1xA2cV3vKpAjeNZemp57q2TN8_6nOM_bgZjrfNj-pIuFyZv1eOLhZ1MDVCiMB1w7aORtrMo1OBRo/s1600/artboard4.jpg" /></a></div>
<div class="MsoNormal">
Maybe you need to resize an artboard, or have them all
different sizes, no problem. Click the
Artboard Tool from the tool palette on the left. Notice how one of the Artboards now has little
handles on it. Just click and drag to
the size you desire.</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx2t3pamRMnD6C7SQm1_hQtd9UDHEW_6AIoG8umVQefiZdJKfI9vQmJiLOMweMAqOjJfxdKZRQrzPCHjdxsaKASSY_JDnko4gAWCCKH6dctMgkFBc5PPULx762R56JCGSmIBcR3evAc-4/s1600/artboard3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="133" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx2t3pamRMnD6C7SQm1_hQtd9UDHEW_6AIoG8umVQefiZdJKfI9vQmJiLOMweMAqOjJfxdKZRQrzPCHjdxsaKASSY_JDnko4gAWCCKH6dctMgkFBc5PPULx762R56JCGSmIBcR3evAc-4/s320/artboard3.jpg" width="320" /></a></div>
<div class="MsoNormal">
<br /><!--[endif]--></div>
<div class="MsoNormal">
With the Artboard Tool still selected click on the other
artboard to select it and edit as desired.
You can even click on either Artboard and drag it to a different place
in the window.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
One of many features that I use is setting the rulers to
Global or Individual. What that means is I can have a ruler for each Artboard
or a ruler that spans all of the Artboards. This is a big help with laying out
a multipage document. You can also flow
copy across all of your artboard pages or whichever ones you wish.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Try using Artboards for your next project!</div>
<div class="MsoNormal">
<br /></div>
AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0tag:blogger.com,1999:blog-3423651338884018392.post-1228965875938961052012-08-28T02:27:00.000-07:002012-08-28T02:27:00.045-07:00To domain or to sub-domain?<br />
<div class="MsoNormal">
In years past sub-domain names were more readily found since
server space was left to the pros with free site space being attractive and
domain forwarding not as accessible to an average non-tech user. You would have your page name, the server
name and the extension; usually .com at that time.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
A standard domain might look similar to: <b>www.mydomain.com</b> your web server would go into the mydomain
area and your extension could be something other than .com (.net, .org. edu to
name a few).</div>
<div class="MsoNormal">
Today you might find sub-domains used for the free blogs
like blogger.com or on a larger scale you could have a company site that has
sub-domain pages for various departments.
</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
A sub-domain might look similar to: <b>mypage.mydomain.com </b> your
specific page would go into the mypage field is the only difference from the domain.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
A pro to using the sub-domain is if the server name is a
large company that is well marketed your page will might come up sooner on
searches by having that association.
What I personally do is keep the sub-domain name, and forward an easy to
remember domain name of my own.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
This way I have the benefit of the association with the
larger server name as well as an easy to remember name that will take my
visitors directly to my page.</div>
AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0tag:blogger.com,1999:blog-3423651338884018392.post-21708527857511646822012-08-14T02:40:00.000-07:002012-08-14T02:40:00.171-07:00How do I purchase hosting for my website?<br />
<div class="MsoNormal">
I read an excellent article on how to purchase hosting for
your website <a href="http://www.netmagazine.com/opinions/how-buy-hosting">http://www.netmagazine.com/opinions/how-buy-hosting</a>
and wanted to expand a little on it for anyone new to the biz.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
If your site is already built then you need to find out how
much space you need. For example a small
five page brochure site could probably fit into a smaller 10 meg hosting
plan. If you have an ecommerce store, or
your site built in a content management system you will probably want more
storage space, and a database. Packages
usually start around 10 megs and go as far up as a designated remote
server. So the sky is the limit.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Different hosts support different types of programming. So if you have a form, credit card
processing, really any interactive features you probably have programming
beyond standard html. So you need to
find out if you are using php, .net, or what type of programming and make sure
you purchase hosting that supports it.</div>
<div class="MsoNormal">
Those are the two big things, beyond that check out the
article for assistance in purchasing hosting for your site. I might add my favorite resource is <a href="http://www.winhost.com/a/myrxkx" target="_blank">Winhost</a> they
offer affordable, robust hosting supporting a wide range of needs.<br />
<br />
Ok, now that we got the nitty gritty hosting out of the way what about your site? For anyone not ready to dive into a site from scratch check out some great <a href="http://store.templatemonster.com/?aff=goldrush0304" target="_blank">templates</a> or a great starting point might be a free template you could customize.<br />
<br />
<br /></div>
<script src="http://www.templatehelp.com/codes/pr_interface_samples.php?bgcolor=%23FFFFFF&view_sample_ids[1]=on&pr_code=csGjCk311XnLM3201H3tOD2MS62tUz&frname=" type="text/javascript"></script>AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0tag:blogger.com,1999:blog-3423651338884018392.post-78449367136044205912012-08-07T02:38:00.000-07:002012-08-07T02:38:01.026-07:00Free Illustrator Pattern!<br />
<div class="MsoNormal">
Found another cool freebee I had to share. Free Illustrator pattern swatches at <a href="http://wegraphics.net/downloads/50-free-herringbone-illustrator-pattern-swatches/">http://wegraphics.net/downloads/50-free-herringbone-illustrator-pattern-swatches/</a>. All herringbone patterns in different colors
and line patterns. Click the green free
download button to the right and there you go.
You should be able to find your Illustrator Patterns folder to dump it
in for use. If you have Illustrator open
you need to close it and relaunch to see them.</div>AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0tag:blogger.com,1999:blog-3423651338884018392.post-46305769319039786322012-07-31T02:37:00.000-07:002012-07-31T02:37:00.377-07:00For all you creative folks, free fonts!<br />
<div class="MsoNormal">
Check out <a href="http://www.creativebloq.com/graphic-design-tips/best-free-fonts-for-designers-1233380">http://www.creativebloq.com/graphic-design-tips/best-free-fonts-for-designers-1233380</a>. Clicking on the font will take you to a
download page where you can make a donation and download the font. One thing I want to point out is on the
download page it tells what character sets are included in the download. Most free fonts don’t give complete character
sets, so please check to make sure the download will fit your needs.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Also want to remind you not all free fonts are good for your
computer. This link is fine, but some
free font sites download ad tracking software or worse yet will spread a virus
so always download from trusted sites. So please be careful in all “free” downloads.</div>AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0tag:blogger.com,1999:blog-3423651338884018392.post-11846159214349207872012-05-29T01:00:00.000-07:002012-05-29T01:00:02.815-07:00Google Analytics - Part III<br />
<div class="MsoNormal">
Last week we discussed setting up your Google Analytic
account this week we are going to check out our data. It takes some time to collect data but at
some point you will collect enough info to see what site visitors are doing. </div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Go to <a href="http://www.google.com/analytics/">http://www.google.com/analytics/</a>
and log into your account. If you have
several sites set up you will see a list of sites to choose from. Select your site to launch the analytics
dashboard.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisd93nt1VV8MsLN7NW84iMJ7mxbpZoCsCq_L8aH9OGiGmLQ8_CbKOT6EcO2MGoJ548g7evSwR3D4mYiYvUdgZa3efN4fPxtbRfAMsOHQFUWjlDo-8t1AEZXT7Pkm7CXEeJxSIY1NVH8sk/s1600/google_data1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="492" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisd93nt1VV8MsLN7NW84iMJ7mxbpZoCsCq_L8aH9OGiGmLQ8_CbKOT6EcO2MGoJ548g7evSwR3D4mYiYvUdgZa3efN4fPxtbRfAMsOHQFUWjlDo-8t1AEZXT7Pkm7CXEeJxSIY1NVH8sk/s640/google_data1.jpg" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Notice the left side has navigation, and the right area has
the data. By default you go into the
overview. You can dig deeper by
selecting a category from the menu choosing from: Audience, Advertising, Traffic Sources,
Content and Conversations. We are not going
to dig into Advertising or Conversations right now because both require
additional setup to even record any data.
For Advertising you could set up an AdWords program and track the
success, and for Conversations you could set up goals and custom reports. Since we did not set any of this up yet we
don’t really have any data to look at.</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Clicking on Audience will open several sub-categories, you
can dig deeper in the navigation or click on topics beneath the graph. Getting
an overview of Audience data showing how many visitors you have. Beneath the chart there are numbers for
Visitors and Unique Visitors. A Visitor
is anyone coming to your site. A Unique
Visitor is a new visitor instead of someone that has been there before. </div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
You can scroll down a little more to learn more about your
visitors. Knowing things like: country, language, device, internet provider,
operating system and even screen resolution can come in handy in future site
development. Just click on the topic and
see the detail to the right.</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHiuHFY07djLGuZ0s4m_arWaLn-wminQBmtNnlItxHBSgihdK9i3GZ9UV_U_rUSo97bBohYd2GZvXMa0frm2TBormEhmugpIq1j1GFF-wntYfVVcUEhWTVU2gZRRV3SkC_44pWew2GGCE/s1600/google_data4s.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="302" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHiuHFY07djLGuZ0s4m_arWaLn-wminQBmtNnlItxHBSgihdK9i3GZ9UV_U_rUSo97bBohYd2GZvXMa0frm2TBormEhmugpIq1j1GFF-wntYfVVcUEhWTVU2gZRRV3SkC_44pWew2GGCE/s640/google_data4s.jpg" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Traffic Sources tell you how your visitors found you. They could be Direct Traffic which means they
just typed in your URL, Search Engine is finding you in a keyword search, and
Referral Traffic is following a link from another site.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Beneath that you dig deeper by selecting Keywords to find
out what search terms were used to find you.
In addition you can find which search engine was used, what referring
sites are linking to you, and which page visitors are entering on.</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8I6j8-z3QlEBJdF5DFvisiMziq8vpbs5GRB82SqOR3ayIokYrw5BvzUfZGdWRFPLaQDFiXCSuhhFdR_NDNl65UqdEj0FUMOgNv4bxV3dEzYF0J2TWJKDuASl9E7Of6GK1PK2jw8u8b6I/s1600/google_data5c.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="332" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg8I6j8-z3QlEBJdF5DFvisiMziq8vpbs5GRB82SqOR3ayIokYrw5BvzUfZGdWRFPLaQDFiXCSuhhFdR_NDNl65UqdEj0FUMOgNv4bxV3dEzYF0J2TWJKDuASl9E7Of6GK1PK2jw8u8b6I/s640/google_data5c.jpg" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Content will show pages being viewed and search terms can be
very helpful to see how people are searching to find you. You can use this information
to target even more of your market.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
This was a general overview of all you can do with Google
Analytics. Really a lot to see so click
around and discover who is visiting your site! </div>AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0tag:blogger.com,1999:blog-3423651338884018392.post-898410174517572492012-05-22T01:00:00.000-07:002012-05-22T01:00:03.285-07:00Google Analytics - Part II<br />
<div class="MsoNormal">
Last week we set up the general Google Account, this week we
will set up the analytics account and link it to your website. After this is done we can start collecting
data.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<b>Setting Up Google
Analytics<o:p></o:p></b></div>
<div class="MsoNormal">
Go to <a href="http://www.google.com/analytics/">http://www.google.com/analytics/</a>
log in with the account info created in setting up the Google account and you
will be taken to the analytics login page. Select Sign Up to add your first site.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixVU0qQUQrL8i1cnpkJTgupYYH8r8cXFaVuUc1PepBjj6OgHT2gd-5yJiI_OtDJeuDSwoIpMFzIaEybm2CGjd-2D9ctcQ8aie_pXJpNnVDO9XcRQN_HK6dP3y3n8lyaVzwzEgSMx-s_-Y/s1600/google_acct3.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="246" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixVU0qQUQrL8i1cnpkJTgupYYH8r8cXFaVuUc1PepBjj6OgHT2gd-5yJiI_OtDJeuDSwoIpMFzIaEybm2CGjd-2D9ctcQ8aie_pXJpNnVDO9XcRQN_HK6dP3y3n8lyaVzwzEgSMx-s_-Y/s400/google_acct3.jpg" width="400" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Fill in the account name, URL, time zone and check all needed boxes. When all looks good select Create Account at the bottom. <br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMRmE4j5QwswV0l7241kjIHf0Ykp8LrVjAZ-MReG3HKyfUDzrj5vWI_9lle_GS9wdYtDLNNqT8EC0EcB-RCs00AlnLt3MhtP3sx70rvR0sJPKAfmH2qIQsrxbxSp5garcUbNVUEsK0FKg/s1600/google_acct4.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="273" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMRmE4j5QwswV0l7241kjIHf0Ykp8LrVjAZ-MReG3HKyfUDzrj5vWI_9lle_GS9wdYtDLNNqT8EC0EcB-RCs00AlnLt3MhtP3sx70rvR0sJPKAfmH2qIQsrxbxSp5garcUbNVUEsK0FKg/s400/google_acct4.jpg" width="400" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
You should see your official site analytics page, which might look similar to this:</div>
<div class="MsoNormal">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7bCHlQJejcpvPNc6PH_IJt66QKCzgqCtFOxCvYPukfdf24sHgGtTcj9NT_ixUMAMMdRoQ07XdhbAHhvYBB6tLIUHHoV9WURH8j8-3jHSsYx983wlrRYLuUvc7Yyr0oXJbcLZ89nCVZmM/s1600/google_acct5.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7bCHlQJejcpvPNc6PH_IJt66QKCzgqCtFOxCvYPukfdf24sHgGtTcj9NT_ixUMAMMdRoQ07XdhbAHhvYBB6tLIUHHoV9WURH8j8-3jHSsYx983wlrRYLuUvc7Yyr0oXJbcLZ89nCVZmM/s640/google_acct5.jpg" width="420" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
<i>The account is set up now there is just one more step to link up your site.</i>
<br />
<i><br /></i><br />
<b>Adding the script to your site</b></div>
<div class="MsoNormal">
Scroll down the new account page to find the code that needs to be added to your site, this code is specific for your account. Copy everything including the <script></script>
tags, this will be pasted in the code of your site. Typically this kind of code should go in
between the opening and closing <head> </head> tags. <br />
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpWyKKiNqQjRhiLwBarD9aUIlCIDs89MCYyQI5aM9U_xCPyyJ-sGywPsvEZbECuMjz-XS2VmInvVwAWHZDUCSfFBs0lhyphenhypheniIhustV3s-0M7XZIl9efuKvbani-j2X3GxCVsXFiEHCP-gLA/s1600/google_acct6.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="347" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpWyKKiNqQjRhiLwBarD9aUIlCIDs89MCYyQI5aM9U_xCPyyJ-sGywPsvEZbECuMjz-XS2VmInvVwAWHZDUCSfFBs0lhyphenhypheniIhustV3s-0M7XZIl9efuKvbani-j2X3GxCVsXFiEHCP-gLA/s640/google_acct6.jpg" width="640" /></a></div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Continue pasting this script in all the pages to be tracked by
analytics just like we did for this one page.</div>
<div class="MsoNormal">
<br /></div>
<div class="MsoNormal">
Finally load your edited pages on to the hosting server and
you are all set to start collecting data!<br />
<br />
Next week we will look at the data we collect and get some general ideas
on what we can do with it.</div>AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0 Carrollton, TX 75006, USA32.981020148981479 -96.882934570312532.554798648981482 -97.5146485703125 33.407241648981476 -96.2512205703125tag:blogger.com,1999:blog-3423651338884018392.post-20238281370148042512012-05-15T21:07:00.000-07:002012-05-15T21:07:11.051-07:00Google Analytics - Part I<br />
<div style="margin-bottom: .0001pt; margin: 0in;">
<span style="font-size: 13.5pt;">One of the best tools for anyone doing online business is Google
Analytics. Once all is set up it will give you a lot of valuable
information about your website that you can use for site improvements,
targeting markets and driving traffic further in your site for sales. In
this series we will discuss first how to set up your own account and then dive
into what the data means and later how to use it.<o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0in;">
<br /></div>
<div style="margin-bottom: .0001pt; margin: 0in;">
<span style="font-size: 13.5pt;">In setting up your account go to<span class="apple-converted-space"> </span><a href="http://www.google.com/analytics/">http://www.google.com/analytics/</a><span class="apple-converted-space"> </span>to get started. In the upper
right you will see Create an account. If
you already have an analytics account and just want to add a site then you may
log in and add one to that existing account, or if you are registered with
Google for a different product then you don't need to set up another account.
You can just add analytics to that account.
We will learn how to do that next week.<o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0in;">
<br /></div>
<div style="margin-bottom: .0001pt; margin: 0in;">
<i><span style="font-size: 13.5pt;">Setting up a general Google Account</span><u1:p></u1:p></i><span style="font-size: 13.5pt;"><o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0in;">
<span style="font-size: 13.5pt;">First let's set up a general Google account, select<span class="apple-converted-space"> </span><b>Sign Up</b><span class="apple-converted-space"> </span>in the upper right corner. You only
need to add basic info to get your account up and running, so fill in the form
and select<span class="apple-converted-space"> </span><i>create my account</i>.<o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0in;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxkDe8xJB8xwLkqQAwyXulXT9OBclAhhTpoKjkWJL0NtQYaXsuAJc2s4IA8cd7wloeWzZMG2WAZqF_mwEOm7SrVuYAS3pd5FKQGp5Cmd-uR7SeK9foSstXtfJ8mu24pU9KzAdLq_z7iLw/s1600/google_acct1.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="276" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxkDe8xJB8xwLkqQAwyXulXT9OBclAhhTpoKjkWJL0NtQYaXsuAJc2s4IA8cd7wloeWzZMG2WAZqF_mwEOm7SrVuYAS3pd5FKQGp5Cmd-uR7SeK9foSstXtfJ8mu24pU9KzAdLq_z7iLw/s400/google_acct1.jpg" width="400" /></a></div>
<div align="center" class="separator" style="margin-bottom: 0.0001pt; margin-left: 0in; margin-right: 0in; margin-top: 0in; text-align: center;">
<span style="font-size: medium;"><br /></span></div>
<div style="margin-bottom: .0001pt; margin: 0in;">
<br /></div>
<div style="margin-bottom: .0001pt; margin: 0in;">
<br /></div>
<div style="margin-bottom: .0001pt; margin: 0in;">
<span style="font-size: 13.5pt;">Now you should be on the Google home page. Mine has a list
of all the sites I have set up, but if you set up a new account your page might
look something like this:<o:p></o:p></span></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUBAxBeN3giwneJIMvcQH9e3Q6XjfYbtUDbeZx4ZzolLepCBcLnOHiefswZeXIXSJAu2FNgWZCBgr6Z2DG3t3kbbHXpZPfDGA49up14csGLkCKgkDa9-GNyEvvTB8jq0o6KWjMPyrPidE/s1600/google_acct2.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="220" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhUBAxBeN3giwneJIMvcQH9e3Q6XjfYbtUDbeZx4ZzolLepCBcLnOHiefswZeXIXSJAu2FNgWZCBgr6Z2DG3t3kbbHXpZPfDGA49up14csGLkCKgkDa9-GNyEvvTB8jq0o6KWjMPyrPidE/s400/google_acct2.jpg" width="400" /></a></div>
<div align="center" class="separator" style="margin-bottom: 0.0001pt; margin-left: 0in; margin-right: 0in; margin-top: 0in; text-align: center;">
<span style="font-size: medium;"><br /></span></div>
<div style="margin-bottom: .0001pt; margin: 0in;">
<br /></div>
<div style="margin-bottom: .0001pt; margin: 0in;">
<br /></div>
<div style="margin-bottom: .0001pt; margin: 0in;">
<span style="font-size: 13.5pt;">Really Google has lot of great tools that can be added to your
account that can make productivity smoother, and you can link up all accounts
so managing can be done in one window. Ok, we are totally emerged in
GoogleLand now!<o:p></o:p></span></div>
<div style="margin-bottom: .0001pt; margin: 0in;">
<br /></div>
<div style="margin-bottom: .0001pt; margin: 0in;">
<span style="font-size: 13.5pt;">Next week we will set up our analytics account and link it to our
website so we can start collecting data.<o:p></o:p></span></div>AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0tag:blogger.com,1999:blog-3423651338884018392.post-79452786382946306872012-05-08T01:52:00.000-07:002012-05-08T01:52:00.246-07:00Template StoreI'm excited to finally get the template store up and running. There is a tab on this blog that goes to <a href="http://www.digitalzenblog.com/p/templates.html">http://www.digitalzenblog.com/p/templates.html</a> or you can check out the <a href="http://www.website-templates-store.com/" target="_blank">template store</a>. I am working on some cool new tutorials to help you get up and running with template creative or really any internet creative.<br />
<br />
To get the ball rolling a special offer for special blog readers! ;)<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUaIlONslkotRa5fTBFstHYYMbivUT9QhwTNQQQbA1R58VYaZHqffNNbRhpnwcJid2fvsJQp7m1vgKUWoBNN8i2uvSdXzIYBuK-Qne2cRt9sCCKkzwpWP2JcjkOYgR1wst1IUHfFAnEpk/s1600/offer-5-15.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="195" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUaIlONslkotRa5fTBFstHYYMbivUT9QhwTNQQQbA1R58VYaZHqffNNbRhpnwcJid2fvsJQp7m1vgKUWoBNN8i2uvSdXzIYBuK-Qne2cRt9sCCKkzwpWP2JcjkOYgR1wst1IUHfFAnEpk/s320/offer-5-15.jpg" width="320" /></a></div>
<br />AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0tag:blogger.com,1999:blog-3423651338884018392.post-42242442383792342542012-05-01T01:58:00.002-07:002012-05-01T01:58:00.427-07:00What is Silverlight?<div class="MsoNormal">Switching gears a little let’s look at Silverlight. Actually a free Microsoft plug-in Silverlight uses the .net framework. Used with Microsoft Visual Studio it allows rich interactivity and robust streaming media capabilities. Similar to Flash you can develop cross platform, device specific web apps.</div><div class="MsoNormal"><br />
</div><div class="MsoNormal">An impressive array of industries use Silverlight to build their web presence into a user experience. Features include data smoothers to provide a high definition smooth stream, user friendly formatting tools, rotatable 3D perspective plane, and hi-res zooming technology. In addition there are an array of out-of-the box controls like charts, containers and media that are fully skinable. Silverlight apps are delivered to the web with XAML (Extensible Application Markup Language). XAML uses Namescopes to store actual Objects and their interactions.</div><div class="MsoNormal"><br />
</div><div class="MsoNormal">A great way for a nonprogrammer to take advantage of Silverlight capabilities is to purchase and download a template, which could prove to be more affordable than hiring a programmer or fighting with code. <a href="http://www.website-templates-store.com/search.html?type=38" target="_blank">Into templates</a> and <a href="http://www.website-templates-store.com/search.html?type=33" target="_blank">app templates</a> have the legwork done and ready for you to use.</div>AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0tag:blogger.com,1999:blog-3423651338884018392.post-22470849950954329942012-04-24T01:53:00.000-07:002012-04-24T01:53:00.712-07:00What is Drupal?<div class="MsoNormal">Drupal is a free Open Source CMS that can be used for anything from a blog platforms to an enterprise application. Drupal has been around for a while and at one point was a highly regarded resource. Better solutions began hitting the net and Drupal did not maintain earlier standards which set them back. Now with a resurge into the market Drupal is competing with top Open Source CMS offering a robust array of core features and an incredible add-on library for site customization.</div><div class="MsoNormal"><br />
</div><div class="MsoNormal">Drupal has several standard content types. The default content types are Article and Basic Page but you can create additional content types for Blog Entry, Book Page, Comment, Forum and Poll. By categorizing content types Drupal is able to organize data appropriately. There are also modules that can be added on to customize a site for your needs. Modules for shopping carts, embedding media, advanced navigation, and email integration can be loaded on to the core structure. In addition modules can be added to integrate additional resources like AJAX, jQuery, and JavaScript.</div><div class="MsoNormal"><br />
</div><div class="MsoNormal">Drupal themes can install seamlessly after you build a theme or download a template theme. Whatever method you use make sure your theme is built for the version of Drupal you have installed on your hosting server. If you are downloading a template extract all the files so you can work with them. FTP files to your hosting server placing them in a themes folder. Once all has loaded you need to enable the theme. Go to administrator, site building and then themes, check the ‘enabled’ box next to the theme you wish to apply. Remember to click ‘Save Configuration’ button once you have enabled the theme. Viola!</div><div class="MsoNormal"><br />
</div><div class="MsoNormal">If you think Drupal is the right fit for your business it is usually easy to install on to your server, with most <a href="http://www.winhost.com/a/myrxkx" target="_blank">hosts</a> offering one click installation. Then you can create a custom theme or save the frustration by downloading a template to use. Check out <a href="http://www.website-templates-store.com/search.html?type=26">http://www.website-templates-store.com/search.html?type=26</a> for great template themes.</div>AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0tag:blogger.com,1999:blog-3423651338884018392.post-32867231819621788432012-04-17T02:01:00.002-07:002012-04-17T05:45:04.491-07:00What is Joomla?<div class="MsoNormal">Joomla is a leading Open Source CMS. Please check out my post defining Open Source and CMS if you don’t understand what that means be <a href="http://www.digitalzenblog.com/2012/04/getting-your-business-online.html" target="_blank">clicking here</a>.</div><div class="MsoNormal"><br />
</div><div class="MsoNormal">You can build a site in Joomla for practically any type of business nonprofit and for profit. It is created using PHP (Open Source code) and MySQL (Open Source database). I mention this detail for any nonprogrammers because you need to make sure your web site host is compatible with this structure.</div><div class="MsoNormal"><br />
</div><div class="MsoNormal">Joomla can be used for simple sites as well as complex ecommerce sites, you could use also use Joomla for an internal corporate communication tool since the interface is user friendly to manage and allows varying admin rights for multiple contributors. Core features as stated by joomla.org are managing users, files, media, languages, banners, and contacts. In addition you can create polls, search features, three-tiered content management, and news feeds. You would use site templates to ensure consistency but can override styles as specific pages require. You can add menu items and structure as your site grows. In addition to the core features there are tons of extensions that can be downloaded and added to your site to customize actual site functionality to your needs. Add calendars, invoicing, appointment scheduling, and live chat to name a few things.</div><div class="MsoNormal"><br />
</div><div class="MsoNormal">Administration is a simple; modules can be added with a few clicks. The visual icons in the admin panel make it very easy to understand where to go for your task. Content can be added with a Word like formatting panel. Templates can be changed in the template manager. Select the template and menu structure and apply it. </div><div class="MsoNormal"><br />
</div><div class="MsoNormal">Developing templates consist of standard html code with Joomla specific codes added. All can be formatted with CSS. An example code addition to the html code might look like:<br />
<br />
</div><div class="MsoNormal"><b><jdoc:include type=”component” /></b> </div><div class="MsoNormal"><br />
The <i>jdoc:include</i> specifies a Joomla request is being made, then the type could vary with modules, components, menus or whatever feature you want added. Every template requires an XML schema, any outside files like an external style sheet needs additional PHP code in the link. So it might look like this:</div><div class="MsoNormal" style="background: white; line-height: 14.4pt; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt; vertical-align: top;"><br />
<link rel="stylesheet" href="<b><?php echo $this->baseurl ?</b><b>></b>/templates/system/css/system.css" type="text/css" /><o:p></o:p></div><div class="MsoNormal" style="background: white; line-height: 14.4pt; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt; vertical-align: top;"><br />
</div><div class="MsoNormal" style="background: white; line-height: 14.4pt; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt; vertical-align: top;">Notice the <i><?php echo $this->baseurl ?></i><b> </b>is added to the path leading to the actual css file that you are linking to.<o:p></o:p></div><div class="MsoNormal" style="background: white; line-height: 14.4pt; margin-bottom: .0001pt; margin-bottom: 0in; tab-stops: 45.8pt 91.6pt 137.4pt 183.2pt 229.0pt 274.8pt 320.6pt 366.4pt 412.2pt 458.0pt 503.8pt 549.6pt 595.4pt 641.2pt 687.0pt 732.8pt; vertical-align: top;"><br />
</div><div class="MsoNormal">Finally remember the html should be saved as a PHP file. So the home page would look like index.php For exact requirements check out <a href="http://docs.joomla.org/Creating_a_basic_Joomla!_template">http://docs.joomla.org/Creating_a_basic_Joomla!_template</a> for sample template code.<br />
<br />
</div><div class="MsoNormal">Joomla could be the right choice for your site but developing a template can feel a bit overwhelming. Purchasing a pre-made template could save a lot of time and frustration and all templates can be customized with your own business info. A great place to go is <a href="http://www.website-templates-store.com/search.html?type=24">http://www.website-templates-store.com/search.html?type=24</a> search by program type and even business type to see completed templates that will fit your needs. Select your favorite design, add it to the cart and pay, then just download customize and upload to your hosting server. You can have your Joomla site up and running in a matter of hours. So what are you waiting for, go get your template and get started with Joomla today!</div>AnitaKhttp://www.blogger.com/profile/17498805618287360083noreply@blogger.com0