HTML – Page Markup

August 27, 2015

In the last entry to our HTML series, Brady went over some of the basic tags used within the <body> tag of a website. In today’s lesson, we will block out a basic website using semantic HTML5 tags and take a quick look at “Cascading Stylesheets.”

We’ve worked with semantic tags in the past when we added microdata to an address. Here we placed special attributes that helped define what the content is. With our new HTML5 tags we can better define each section of a website. For example, defining where on the page the navigation exists.

Let’s take a look at some of the tags we’ll be using in our project.

HTML5 Tags

  • header – This will be used to define the top of website. This is usually where you’d find the logo of a website. The header tag can also be used multiple times on your webpage, for example, to define the header of a <section>.
  • nav – This will be used to define where the navigation on our website exists.
  • main – This will be used to define where the main content of our website is located.
  • aside – This will be used to define any secondary content such as a sidebar.
  • footer – This will be used to define the bottom of the website. This is usually were you’d find copyright information. The footer tag can also be used multiple times on your webpage.  For example: To define the footer of a <section>.
<!doctype html>
<html>
<title>My Awesome Website</title>
<meta charset="utf-8">
<meta name="keywords" content="this, is, my, keywords">
<meta name="description" content="This describes the content of the page">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/styles.css">
<script type="text/javascript" src="/js/script.js"></script>

<body>
<header></header>
<nav></nav>
<main></main>
<aside></aside>
<footer></footer>
</body>
</html>

Using what you learned in the last lesson, let’s add some markup to our website:

<!doctype html>
<html>
<title>My Awesome Website</title>
<meta charset="utf-8">
<meta name="keywords" content="this, is, my, keywords">
<meta name="description" content="This describes the content of the page">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="stylesheet" href="/css/styles.css">
<script type="text/javascript" src="/js/script.js"></script>

<body>
<header>
<img src="/img/logo.jpg" alt="My Logo">
</header>
<nav>
<ul>
<li><a href="/index.html">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</nav>
<main>
<h1>Welcome to my website</h1>
<p>This is a paragraph</p>
</main>
<aside>
<h2>Upcoming Events</h2>
<ul>
<li>Sample Event 1</li>
<li>Sample Event 2</li>
<li>Sample Event 3</li>
</ul>
</aside>
<footer>
<p>Copyright Information</p>
</footer>
</body>
</html>

If you open your website in a browser, visually it might not be very interesting, but you do have a proper website.

To make our website visually appealing it will require some knowledge of “Cascading Stylesheets,” or “CSS.”  Using CSS, we can target elements of the page and change their default appearance.  For example: If you want to make the content within the <h1> tag red you’d have to open the styles.css file in your css folder and add:

h1 {
color: #FF0000;
}

Here you are using an element selector, targeting the <h1> tag directly, all <h1> tags on your website will now be the color red as long as the stylesheet is linked to the page. There many different ways to target elements, add styles, and layout a page using CSS. I encourage you to further look into the different possibilities using CSS.

avatar

John is a designer at Sephone.

FOR IMMEDIATE RELEASE  

August 18, 2015

                                                                                 Download to Print

For Immediate Release:  BANGOR, MAINE
Local business, Sephone Interactive Media, has updated and expanded the AFF mobile APP aimed to help 2015 American Folk Festival attendees navigate this year’s Festival easily and “paperless.”

The American Folk Festival app features the following:

  • Complete Artists information
  • Scheduled times of Performances
  • Maps of Stage and Venue Locations
  • Ability to take photos and share with other Festival Attendees

If someone would prefer not to download the app, Tablet and SmartPhone users can still go to the Festival website (http://www.americanfolkfestival.com), which is responsive to all web browsers.

This APP is the Official APP of the American Folk Festival, Sephone Interactive Media has been the creator of the APP and the website from the beginning in 2011. And since 2011, there have been annual updates and enhancements.

“This is our latest version of the American Folk Festival APP. It puts information about our Festival right at your fingertips,” says Justin Russell, lead developer at Sephone and veteran Festival volunteer.  “If there is some change in the location or time of an event, the APP will update itself, so unlike paper schedules, it is up to the minute information and always with you.”

This year’s APP includes automatic alerts, notifications from the Festival with news and updates. Notifications will also show festival-goers, who is currently performing on the stage where they are and provide a chance to see when the artist will be performing next over festival weekend.

Russell adds, “We love developing these kinds of tools for businesses, organizations and the region as a whole. We’re excited to add new features as more people use the American Folk Festival APP, and we can’t wait to work on more projects like it in the future.”

Sephone Interactive Media is a Bangor-based web and moblle development company, helping businesses and people use technology to grow and increase efficiency.

FMI contact: Kelly H. Cotiaux, Partner and Marketing Maven, Sephone Interactive Media 207.262.5040 blog.sephone.com ~ sephone.com , Twitter: @ladyotrout ~ @sephone, Facebook
###

avatar

Kelly's been known as the Marketing Maven since before the term was hip. (That means she's old.) As a natural Community Builder, she loves to get people together, bring resources to the table and solve problems!

Keep That Mock-Up Organized! (Part 1)

August 12, 2015

One of the important steps in creating a website is creating mock-ups of some possible designs. Here at Sephone, we use sketches to show our clients how certain aspects of their site may appear, how things are positioned on the page, and to give them a chance to see a few different possibilities and provide feedback. Not only are sketches a great tool in planning, they also help to keep everyone in the loop.

In this post, I’ll be looking over how to keep these sketches organized.

read more

avatar

Gary is a team member at Sephone, helping to design, build and maintain websites. He is also a web design student at the New England School of Communications of Husson University.

The 2015 American Folk Festival app

August 6, 2015

2015 American Folk Festival appThe 2015 American Folk Festival on the Bangor Waterfront is coming at the end of August, and we’re excited to announce that the official app for this year’s festival is now available on iOS and Android!

When we built the first version of the Folk Festival app in 2011, we wanted to make sure visitors had the most important information about the festival at their fingertips. Mobile usage has been going up every year, and phones can do more than ever. Every year we try to use new technology to help enhance your festival experience: a tool to build your own schedule of performances and artists you want to see, an interactive map of what’s available at the festival, sharing your photos on the American Folk Festival page on Facebook, an easy way to donate, and more. This year is no different.

Many of us at Sephone head over to the Waterfront every festival weekend to hear some amazing music (and eat way too much food). As we walk by a stage, we’ll often say, “This is great! Who’s playing?” We’ll pull out our phones, check the schedule, and find the name of the performer.

Now you can find out information about who’s playing instantly thanks to the new iBeacon support in this year’s app. As you walk by a stage, your phone will automatically let you know who’s playing or when their next performance at the festival will be. The app also has artist information and a schedule of performances, complete with any changes throughout the weekend. Make sure you have notifications turned on for the app and Bluetooth enabled to make sure you receive these helpful notifications!

We hope we’ll see you on the Waterfront between Friday, August 28th and Sunday, August 30th! It should be a great weekend full of music, and we’re really proud to be a long-time sponsor of the festival. And don’t forget to kick in, whether you donate online or find a donation bucket while you’re at the festival!

avatar

Justin is the Director of User Experience and Development at Sephone. He's interested in user-driven design, social media, and web services. He also enjoys learning and exploring new ways for businesses and people to use the web.

Having A Plan

July 24, 2015

We plan for things throughout our entire lives.  From weddings to road trips to parties and more, we have a general plan of how we want things to happen.  Your website is no different, and should have a plan as well. read more

avatar

Brady is the voice on the other end of the phone line when you call Sephone. He graduated from the New England School of Communications in 2009 and assists Sephone in building and maintaining our sites.

Social Media App Development

July 10, 2015

There are so many types of “apps” today. Web apps, android apps, iOS apps, amazon apps, and desktop apps just to name a few. One that often gets forgotten is social media applications.

What is a Social Media Application?

It’s a board term, but in general it means it leverages the API of a social media site. It can be used to post on your behalf, read latest posts, or provide statistical information.
read more

avatar

Alan has been creating websites since CompuServe was huge. Today he still is developing websites using technologies such as CSS3, HTML5, jQuery and CakePHP.

Facebook Does “It” Again!

July 1, 2015

Websites With Facebook Feeds Look “Funny”

Facebook has changed the way they handle their (your) newsfeed. Previously, it allowed your website to grab (or Facebook to feed that status update) automatically to your site. You can tell if you are effected by going to your website now.

If there is a blank space where the Facebook feed used to be and you are a Sephone customer, then we have 2 options:

We can remove the feed all together – this will be free of charge. This may effect your search effectiveness, leave a blank space on your site, but it is free of charge.

OR:

Immediately, we can remove the old feed (which is currently an empty space on your site), and install the new Facebook page plugin that Facebook has provided as a replacement. Unfortunately, It is not as customizable as the feed solution previously available, but does provide the latest posts to your website visitors.

We are working on a better solution that will provide more customization as well as the search benefit as was previously provided.

This fix will carry a minimum billing charge and can be done immediately.

Just a note

Facebook plays a major role in “search.”  Why?  Because everyone uses it and Google loves to hang out with all the “popular kids!”

As you are aware “Search Engine Optimization” (SEO) is a moving target. Having the feed on your website in the fashion that it was provided additional, constantly changing, content for Google to grab onto.  This is good for SEO, and is something to keep in mind when you make the decision of how to handle the feed on your site (remove it or repair it).  We are always ready to respond to changes that influence the Google algorithm, and how your website ranks, so please let us know if you have any questions.

As the internet and all the players change, we strive to recommend the latest and most sensible solutions for you and your business to run effectively and smoothly.

Drop us an email and let us know which solution you would like and we will fix it right away. Thank you for your patience.

avatar

Kelly's been known as the Marketing Maven since before the term was hip. (That means she's old.) As a natural Community Builder, she loves to get people together, bring resources to the table and solve problems!

Only 10% Will See This Post – and That’s OK

June 19, 2015

When a news site needs to post something about social media, it seems like the surefire winner over the past few years has been to talk about how few of a page’s Facebook followers will see what they post – in marketing terms, the organic reach of a post. The comments that follow are just as predictable. “That’s crazy!” “That’s horrible.” “Facebook sucks.”

Get your torches and pitchforks ready: Facebook’s doing what’s best for its users.

read more

avatar

Justin is the Director of User Experience and Development at Sephone. He's interested in user-driven design, social media, and web services. He also enjoys learning and exploring new ways for businesses and people to use the web.