    
|
|
|
Files and folders are a key concept in almost any career. Whether you want to create websites, make mobile apps, write music, or edit photos, it’s important to understand as much as you can about files and folders.
Websites and mobile apps are composed of many different files. In order to create software, it’s important to understand how files and folders work.
In my previous post, I talked about some of the reasons why new coders might not understand the concept of files and folders. Websites and mobile devices have cleverly hidden their file systems, so it’s possible you might not have much experience working with files and folders. If you’ve never used a file system before, learning about files and folders will help you kick start your journey on Treehouse, where you can learn how to make websites, build iPhone and Android apps, and more. In this article, we’re going to start from the beginning and work our way up to more advanced concepts. If you already know the topics we’re discussing, feel free to skip ahead.
A computer file is a piece of information that exists on some sort of storage medium, like a hard drive or an optical disc. A file can be almost anything, such as a song, a video, a picture, or a document. Modern computers typically have millions of files, so to organize them, files can be grouped into folders based on many types of categorization. For example, you might have a folder that contains all of your documents, with folders inside of it to organize the type of documents. This is how information is stored on every modern computer, so where did this idea come from?
Image courtesy Flickr user Marcin Wichary.
Last week was the 45th anniversary of a very famous presentation known as The Mother of All Demos given by Douglas Engelbart, an innovator in the field of human-computer interaction. In this demo, Engelbart was the first to outline many concepts that would become central to the modern computing experience we know today, including the mouse, multiple windows, graphics, hypertext, word processing, video conferencing, and more. In 1968, this was all completely ground-breaking work.
One of the things Engelbart demonstrated was the “paper paradigm” or what is more popularly known as the desktop metaphor. Before computers, people stored almost all information on printed papers which were typically called files. The most popular way to organize paper was to use folders. Because files and folders were used in offices around the globe, people that made some of the first personal computers borrowed the idea of files and folders to make computers easier to understand. This was a smart idea at the time, but now that computers have almost completely replaced paper, this might not make sense now.
The file and folder metaphor extends to many parts of Windows and Mac operating systems. For example, the Trash on Mac OS X and the Recycle Bin on Windows allows users to organize documents they want to get rid of before deleting them permanently.
Still, files are important for any job that even slightly involves a computer. Let’s learn how to use files and folders.
If you’re new to using files and folders, you’ll need to use either a Windows or a Mac operating system, because most devices like iPhones and iPads don’t give you direct access to the file system. If there’s a Windows logo in the bottom left of your screen, you’re using Windows. If there is an Apple logo in the top left of your screen, you’re using a Mac. Be sure to follow the directions for your operating system below.
Windows
If you’re using Windows, you can navigate the files and folders on your computer by using an app called File Explorer (previously known as Windows Explorer). If you’re using Windows 8, the easiest way to open File Explorer is to type it into the search bar. If you’re on an older version of Windows, go to the Start menu and select All Programs and then go to Accessories. Inside of the Accessories folder you’ll find Windows Explorer. Please note that this is a different app than the Internet Explorer web browser.
This is a screenshot of File Explorer in Windows 8.
Once you’ve opened Explorer, you’ll notice that the left side of the window contains a list of files and folders on your computer. If you click on the triangle next to a folder, it will reveal its contents in the list, but if you click on the folder itself, you’ll see its contents in the right side of the window. To open a file, simply double click it.
You can move files and folders around by clicking and dragging them to the desired location. Be very careful when moving files around, because it’s easy to misplace them! You can also reveal additional options by right-clicking on any file.
Mac
If you’re using a Mac, you can navigate your files and folders with an app called the Finder. To open a new Finder window, click the Finder icon in the Dock, which is usually located at the bottom of your screen (if not, then it should be on the left or right sides). The Finder should always on the left most icon in the dock.
In Mac OS X, the Finder can be accessed by clicking the Finder icon on the Dock.
Once a new Finder window is open, you’ll see a list of file locations on the left side under the “Favorites” header and on the right side you’ll see a list of files. The Finder usually defaults to a list of all the files on your computer, but you can look at other files by clicking on the opens in the left panel. For example, if you select Applications you’ll see all of your installed apps. If you select Desktop, you can see everything that’s stored on your Desktop (in fact, your Desktop is just another folder on your computer).
In Mac OS X, the Finder is the file system navigator. By contrast, there is no built-in equivalent to this on iOS devices like iPhones and iPads.
To view the contents of a folder, you can click the triangle next to the folder. You can also double click on a folder to open it and view its contents that way.
If you’d like to learn more about the Finder, here’s the official support article from Apple.
Windows
Almost every app interacts with files in some way, but on Windows, one common way to interact with files is to use the text editor called Notepad. This app has been included with every version since Windows 95. To open Notepad on Windows 8, simply type Notepad into the search bar. In older versions of Windows, you can click the Start menu, choose All Programs, then go to Accessories. Similar to Explorer, you should find Notepad in the Accessories menu.
On Windows, the app Notepad allows users to edit plain text documents.
Once Notepad is open, start typing some text into the blank area. Then, save the file by hitting the keys Control + S together at the same time. This will bring up a screen that asks you where you’d like to save the file. You can find a place on your computer, create a folder to save it in, or simply save it to the Desktop. It doesn’t matter where you save the file, as long as you can remember where you saved it.
Now, close Notepad by hitting the X in the upper right corner of the Window. Next, try opening Notepad again and hit the keys Control + O together. This will bring up a screen that allows you to open a file. If you navigate to where you stored the file originally, you’ll be able to open it again.
Alternatively, instead of opening Notepad again, you can open the File Explorer and navigate to the folder where you saved your file. Double clicking the file should open it in Notepad or a similar program that can read text files.
Mac
On a Mac, there are many apps that interact with the file system, but a common method for interacting with files is to use a text editor such as TextEdit. To open TextEdit, hit the keys Command + Spacebar at the same time to open Spotlight search. Then type “TextEdit” and hit enter.
On Mac OS X, the app TextEdit allows users to edit plain text documents, provided the “Make Plain Text” option is set in the Format menu.
Once TextEdit is open, click the “New Document” button in the bottom left corner of the window. Start typing some text in the blank area, then save the document by hitting the keys Command + S at the same time. This will open a new screen that allows you to save the document.
In save dialog boxes on Mac OS X, you can click the triangle icon to expand the window and view more file system options.
Next the text field that’s labeled “Save As” you’ll notice a triangle pointing downward. Clicking this triangle will expand the window and allow you to navigate to a more specific place to save your file.
Once you’ve saved your file, you can reopen it by searching for the filename in Spotlight, or by opening a Finder window and navigating to the file. You can also open it in TextEdit by hitting the keys Command + O at the same time to bring up the open file screen.
Word processing apps like Microsoft Word, Apple Pages, or Google Docs, all will add hidden formatting to files so that they can display fonts, colors, bolded text, and more. If you’re writing code, this is bad, because while the formatting might be hidden to you it is not hidden to the computer. If this hidden formatting is present, your code won’t run properly and probably won’t work at all.
Instead, you should always make sure you write code in apps that save what’s called plain text files. To save files as plain text, you need to make sure that your files have the proper file extension. A file extension comes at the end of a file’s name and is separated with a dot. The extension describes the file’s format and gives a hint about its contents. For example, MP3 is a popular file extension for music files and GIF is a popular extension for short animations. Plain text file formats include TXT, HTML, CSS, and many others.
HTML is the primary computer language used to create web pages, so it’s important to know how to create them. Here’s how to save HTML files on Windows and on a Mac:
Windows
If you open Notepad again (instructions above) and save a document, you’ll notice in the save dialog box that you can change the file extension. By default, Notepad will save files using the TXT extension, but if you’d like to save an HTML file, change the filename to the HTML extension. For example, your filename might look like this:
mydocument.html
Save the document and you’re done! HTML is one of the topics you can learn on Treehouse.
Mac
If you open TextEdit again (instructions above) and open a document, you’ll need to convert it to plain text before saving. To convert a document to plain text in TextEdit, select Format menu and click the item that says Make Plain Text.
In the app TextEdit on Mac OS X, you must select the “Make Plain Text” option from the Format menu in order to save plain text documents.
Now when you save the document, you can change the file extension. Instead of using the TXT file extension, try changing it to HTML and saving the document. For example, your filename might look something like this:
mydocument.html
HTML is one of the topics you can learn on Treehouse and is foundational to building websites.
This article is far more basic than the posts we typically write, but if you read the previous post in this series, you’ll understand why its helpful for new Treehouse students. If you’d like to learn about techniques that are a bit more advanced, tune in next week for an explanation of absolute versus relative file paths as well as file permissions.
The post Working with Files and Folders appeared first on Treehouse Blog.
]]>|
|
|
|
Once upon a time, websites were full of realistic textures, reflections, letterpressed type, and drop shadows. Buttons looked like actual physical buttons, menus like actual divider tabs. The departure from that aesthetic has a lot to do with the desire to move toward more resolution independent interfaces. It’s also just an evolution of taste as our users advance with technology. They are more open than ever to learn new features and interactions. This gives us more freedom as designers to explore new aesthetics like flat design.
But just because resolution independence and flat design prefer simple, scalable vector shapes over raster graphics and images doesn’t mean your website should be under-designed or any less usable. These tips will help ensure your flat aesthetic doesn’t fall victim to what might otherwise be referred to as a complete lack of design.
What I absolutely love about flat design is that it brings the emphasis back around to content. For awhile there, we were so focused on realism that content took a back seat. With flat design, there’s no fluff (quite literally) around the interface to distract the user from what’s important. But this can be a double edged sword if your information architecture isn’t well thought out.
Ensure usability when going flat by first fleshing out your content hierarchy. This usually takes place in the website planning and wireframing phase. Is your website’s content scannable? Can the user find his or her way quickly to the next actionable item on the webpage? A website’s aesthetic – whether flat or skeuomorphic – is irrelevant without a solid information architecture.
Content precedes design. Design in the absence of content is not design, it's decoration.
— Jeffrey Zeldman (@zeldman) May 5, 2008
One of the biggest usability concerns when implementing a flat design aesthetic is making sure actionable elements still look clickable. Flat design means less dimension, so harsh gradients and intense drop shadows on buttons are a no-go.
What that doesn’t mean is we simply strip our skeuomorphic design of any dimension and call it a day. Skeuomorphic and flat solve different design problems, so as designers and visual problem solvers, we have to approach flat design differently and address this particular usability concern in a new way.
Ensure actionable elements are still usable in your flat design by playing up contrast. This refers to color, size, and/or position of actionable elements to non-actionable elements. Provide visual cues as to which elements the user can interact with and visual feedback when the user hovers, clicks, or taps on actionable elements throughout your website. Was the click or tap successful? Is it loading? This could be as simple as a hover state (consider how this translates to mobile/tablet) or subtle CSS3 animation.
Exposure uses only a thin border to differentiate actionable elements, but provides strong visual feedback on hover.
Focus Labs‘ new website uses color, contrast, and positioning to differentiate clickable elements, and provide visual feedback on hover with CSS transitions.
Treehouse reserves bright, saturated colors as a way to distinguish actionable elements from non-actionable elements throughout the grayscale user interface.
Stripping a user interface of anything and everything remnant of real life can create a pretty cold and uninviting experience, void of brand personality. Although not a direct impact on usability, it can and will have an overall effect on the user experience.
Ensure your flat design continues to evoke a positive user experience by inviting the user to relate to your product as if it were just another human. This can be achieved by including plenty of supportive imagery as organic content to offset the flat user interface design. Including imagery – whether it be icons, illustrations, or photography – will also help create the illusion of depth inside an otherwise flat environment.
Mailchimp uses icons, illustrations, and photography to create depth and evoke brand personality.
Squarespace leverages photography as an opportunity to relate to the user.
ohbaby uses blurred imagery in the background to add depth to an otherwise flat environment.
Treehouse uses photography to add depth and personality to their flat design.
As you make the transition to a flat design aesthetic, whether it be for resolution independence or a simple matter of taste, consider the user experience along the way. It’s not as straightforward as stripping your current user interface of dimension, nor should it be. Flat design introduces an entirely new set of usability concerns that can be dealt with by refining the information architecture, emphasizing actionable elements, and humanizing your flat design.
The post How to Go Flat without Sacrificing Usability appeared first on Treehouse Blog.
]]>Variables are coming to CSS. They already have implementations, so there is no stopping it now. Firefox has them in version 29 and Chrome has them unprefixed in 29+ if you have the "Enable experimental Web Platform features" flag turned on.
To be clear, no amount of arguing on whether this is good or bad is going to change things at this point. But I still think it's interesting, so let's talk about it anyway.
I've been giving a talk recently about abstraction in computing. Looking back at the history of programming, there are several clear points where we stepped up abstraction to a new level. From the "1's and 0's" of machine code, to assembler languages, to compilers, and the abstractions of those giving us languages like C++.
Browsers are comprised of parts, like a rendering engine and a JavaScript engine. Those parts are written in C++. So when we write things like HTML, CSS, and JavaScript, we're yet another step up the abstraction ladder. HTML, CSS, and JavaScript don't replace the languages below them, they sit on top of them. They depend on the layers below to do the things they do best. HTML, CSS, and JavaScript are languages we invented in order to build the kind of things we wanted to build on the web: interactive documents.
As time goes on, we want/expect/need the web platform to do more. Capabilities are only ever added to browsers, never removed. We gobble up those new capabilities and use them to their limits. That makes building for the web more complex. We don't like complexity. It makes work harder and less efficient.
This has been going on long enough that we're taking that next step up the abstraction ladder. Abstraction is the natural combatant to complexity, so we employ abstraction to lower the complexity of the code we write.
The abstraction we most needed on the web was for HTML. It would be ridiculous to work on a website where every page was stored as a complete HTML document, from <!DOCTYPE html> to </html> that you edited directly. No one works that way anymore. Complete HTML documents are pieced together through templates and chunks of content.
Abstraction in JavaScript is inherent. The tools of abstraction are already there. Variables, loops, functions, etc.
The last web language to get the abstraction treatment is CSS, and that has come in the form of preprocessors. CSS is enormously repetitive and offers almost no abstraction tools. Preprocessors offer those things that we need so desperately and save the day.
Another thing at work here is the popularity of the web platform. It is the most successful platform ever in computers. More people build for it and use the things built from it than any other. In other words, HTML, CSS, and JavaScript are pretty damn successful. Largely due to the work of the efforts of web standards advocates, but that's a story for another day.
Why is a language like CSS so damn successful? Because it is so easy. Selectors and key/value pairs. That's it. Yes, there are lots of little gotchas as nuances. Yes, it takes a long time to really master. But the root language is very simple. In ten seconds you can show someone a block of code and explain how it works in such a way they completly get it.
h1 {
color: red;
}I'm convinced CSS is as successful as it is because of how easy the syntax is to understand, learn, and teach. There is plenty to bitch about in CSS, but I think correct language choices were made early on.
As languages do, CSS has evolved over time. Like everything in the web platform, it added new capabilities. Jeremey Keith pointed out that @keyframes represent a significant shift in CSS. For the first time, you could write CSS that had no meaning and wouldn't work at all if not for another block of CSS elsewhere in the code.
/* This means nothing... */
.animate {
animation: my-animation 0.2s;
}
/* ...if not for this, which could be anywhere or nowhere */
@keyframes my-animation {
to { color: red; }
}As Jeremy says:
So CSS variables (or custom properties) aren't the first crack in the wall of the design principles behind CSS. To mix my metaphors, the slippery slope began with @keyframes (and maybe @font-face too).
A given chunk of CSS is no longer guaranteed to have meaning.
CSS (the core language) is heading down the path of being fully programmatic. If variables are useful, surely loops are as well, right? We can start to imagine a version of CSS that has so many powerful programming capabilities that it no longer feels like that simple, easy, understandable language it came from. That simplicity that made it successful to begin with.
I'm absolutely not anti-variables or anti-any-programming-concept. I love these things. They empower me as an author, making my job easier and enabling me to do more. That's what all (good) abstraction layers do. So why not leave these concepts in the abstraction layer rather than alter the core principles of the language?
Again as Jeremy says:
Thanks to preprocessors like Sass, we can have our cake and eat it too.
In the spirit of back-and-forth blogging, allow me to respond to Jeremy again.
...not all abstractions are good abstractions.
He goes on to compare Sass and Haml, declaring Sass good and Haml bad. I'm largely in agreement there. I've worked with Haml a little and have never extracted much value from it, while I extract loads of value every day from Sass. I have two points to make here.
Chris made the case for abstractions being inherently A Good Thing.
The context here needs to be "over time". When these points in history come along where we step up the abstraction ladder, there are always languages that compete for that place in history. Developers duke it out (as we're seeing now with the CSS preprocessor market) and as the years go by a "winner" emerges with the vast majority of "market share" if such a term applies here.
The winners are A Good Thing as they have proven themselves. The losers were (probably) the less-good abstractions.
My second point is that I believe there is a such thing as a primary abstraction and secondary abstractions. Perhaps those aren't excellent terms, but what I mean is that there is an abstraction that provides the most important and valuable things authors need (the primary abstraction) then there are abstractions that provide little niceties (secondary abstractions).
As mentioned above, the primary abstraction of HTML is templates and content stored in data-stores. Haml is a secondary abstraction providing a more comfortable syntax for developers of certain flavors. CoffeeScript is also a secondary abstraction to JavaScript's inherent tools of abstraction.
Sass (or whatever the winner turns out to be over time) is the primary abstraction for CSS.
About Variables in CSS and Abstractions in Web Languages is a post from CSS-Tricks
]]>|
|
|
|