Tech Education

We demystify some of the confusing parts of the web and technology.

Why we do server maintenance

June 24, 2016
FreeImages.com/Whrelf Siemens.

FreeImages.com/Whrelf Siemens.

Server maintenance comes with the territory when you do what we do.  As part of a recent exercise to ensure we are secure and running as efficiently as possible we had to do some updates to our servers, and we wanted to share with you why we do these things. 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.

Your phone WILL run out of space one day! Are you ready?

April 21, 2016

Are you a person who likes to travel or spend time with your kids?  Summer is right upon us and that means taking lots of photos.  One thing that you do not want to forget to do is backup those precious memories.  There are a lot of inexpensive options out there to help you.

  1. Create a Dropbox account and allow your photos to upload right after you take them.
  2. Connect your phone to iCloud.
  3. Connect your phone to your computer.
  4. Use a micro SD card (if your phone allows it).

There are many other options that you can take advantage of as well.  But these are just a few that I have been doing recently and they have been working out pretty well.  Keeping all the photos backed up on a flash drive and/or your computer plus Dropbox for me is the better way to go.  This way when I erase my photos on my phone, I know they are backed up and I do not have to worry about losing them.

avatar

Alex is a developer at Sephone, helping to build apps and websites. He is also working on his Master's degree in Computer Science.

Permission To Land

March 11, 2016

There are many kinds of apps out there, apps that can perform all sorts of tasks – from keeping track of your daily “To-Dos,” letting you show off your vocabulary to your friends, to pushing a button and hearing any one of many silly sounds. Some apps, especially those which rely on physical hardware to perform these actions, require certain permissions to function fully and properly. In the past, the list of permissions an app needed to function was displayed during installation on Android devices. This is no longer true, as recent Android updates have reformed how apps in the mobile OS interact with phones.

screen1

Out With The Old

Previous versions of Android required apps to display a list of necessary permissions during app installation. This meant that, upon trying to install an app, you’d see a screen much like the one to the left. This screen gives you a breakdown of exactly what information to which the app will have access. This is important because whomever developed the app also have access to this information. We should all be careful when it comes to this data. It’s our data. While it is completely understandable that a GPS app would need access to your physical location via your phone, there are apps out there that request your location that don’t really need it.

In With The New

As of Android 6.0, playfully dubbed ‘Marshmallow,’ apps will now ask for permissions during runtime instead of during installation. For consumers, this is good news in more than one way. First, it really shortens the amount of time it takes to install applications. Rather than having a bunch of screens to click through, clicking install really just installs the app.

screen2

Next, having the app ask for permission at runtime gives users a sense of when, and perhaps why, the software needs certain details. For instance, when loading a camera app, a screen may appear asking for permission to utilize the phone camera. This is expected, but the user can actually deny the app from accessing the camera at this screen. While in this example the app is rendered useless, this is not always the case. There’s a game called Alphabear, and during start-up, this screen is displayed:

While we realize that this feature is used to verify the identity of the phone should there be a purchase of an  in-app purchase, we may choose ‘deny’ for our own piece of mind. Spry Fox, the game creators, make some of our favorite mobile games, and though they proobably wouldn’t misuse the data, but it’s OUR personal information, and until a purchase is made in the game, we would continue to deny the app from accessing these files. And the game plays just as it should otherwise – and is quite fun!

 

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.

Getting AMP’ed Up

February 12, 2016

If you’re a web developer, you’ve probably heard about Accelerated Mobile Pages (AMP) – the newest trend in lightweight pages for cleaner, faster mobile browsing. Perhaps you aren’t so familiar with them, though. What exactly is an AMP, and how do we make one? Furthermore, why is it important?
Google's Email Alert about AMP 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.

HTML – Put it all together

February 8, 2016

Over the past year we have put together a bit of an intro course for you on the basics of HTML and CSS.  We have reviewed browsers and text editors, setting up your file architecture and HTML document head, and some of the general HTML and HTML5 tags and CSS that you will see when editing an HTML document.  Now that we have completed this course, you should be able to create a basic HTML page for display in a web browser.

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.

Keep That Mock-Up Organized! (Part 3)

October 9, 2015

Website design should be catered to the branding of the company that the site is for. This extends into the sketching phase of development, in that certain fonts, shape styles and colors should be used. Visual traits of the brand can actually make a great starting point in this way, as elements that work together have essentially been chosen outright. Keeping track of the specific color values can be a bit of work, though. While copy/pasting a set of hexadecimal or RGB values is an option, it’s a more complicated one than necessary.

So, now that we’ve gotten used to the idea of working with layers and comps, let’s take a look at how Photoshop works with colors and palettes! 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.

Keep That Mock-Up Organized! (Part 2)

September 2, 2015

Hello again, and welcome to Part 2 of a series of posts wherein I explain some helpful practices for organized sketches in Photoshop. Last time, I talked quite a bit about layers and groups. Well, there’s another aspect of layers I’d like to mention – “layer comps.” Layer comps (compositions) in Photoshop are, essentially, saveable “views” that can be easily interchanged, and even exported for easy sharing as a PDF file. They’re actually a little more complicated than that, though. 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.

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.