Adobe is passing by Montreal on Thursday December 6th, 2012 for the "Create the Web Tour". At this event you will get a chance to see the various Adobe Edge Tools in action and also how to create mobile apps using HTML, JavaScript and CSS using PhoneGap.
So all really cool stuff and if you want to attend follow this link to register, there is still places available.
2012-10-21
Brackets is now Adobe Edge Code
I recently wrote about Adobe's foray into creating an HTML/CSS/JavaScript code editor called Brackets. Since then Adobe has created the Adobe Edge Tools and Services platform, which contains a suite of tools to help developers build better web applications and as such, Brackets has become Adobe Edge Code within this suite. The difference between the two is that Adobe Edge Code integrates with other Edge tools such as Edge Web Fonts and PhoneGap Build; while Brackets remains the open source version of the code editor. The open-source Brackets web site is still maintained on GitHub.
You can currently download the preview of Adobe Edge Code from the web site to give it a try if you are interested. I wrote about some the features in a previous post here. Also, if you want to see the editor in action, there is great demo video that can be found on YouTube right here.
Enjoy!
You can currently download the preview of Adobe Edge Code from the web site to give it a try if you are interested. I wrote about some the features in a previous post here. Also, if you want to see the editor in action, there is great demo video that can be found on YouTube right here.
Enjoy!
HTML5 / CSS / Javascript documentation
One of the best tools we have at hand when developing is online documentation. Online documentation is available for many programming languages such as Java, PHP, Ruby and can also be found for application frameworks such as jQuery and Spring.
For HTML, CSS and JavaScript, I typically go to the W3Schools web site to look something up and it has been a great resource for many years. Recently however, Adobe put forth a community drivin Web Platform Docs wiki site for all related web technologies. Although the site is currently in alpha form, it seems to have gotten off to a very good start. So I suggest you head on over there to take a look and contribute if you can :)
Other sites that I typically go to for such information is caniuse.com and the HTML5 comparison of layout engines.
For HTML, CSS and JavaScript, I typically go to the W3Schools web site to look something up and it has been a great resource for many years. Recently however, Adobe put forth a community drivin Web Platform Docs wiki site for all related web technologies. Although the site is currently in alpha form, it seems to have gotten off to a very good start. So I suggest you head on over there to take a look and contribute if you can :)
Other sites that I typically go to for such information is caniuse.com and the HTML5 comparison of layout engines.
2012-10-09
Getting responsive design to work
I was recently working on a web site and wanted to make it work across several mobile devices. In my case I was testing on an iPhone 4, Android Tablet and an Android phone. So no big deal, I created three different CSS files to cover the range of devices, namely phones, tablets and PC. The low level details are that you create the different CSS files and then specify which one to use based on the screen size using CSS media queries, like so:
<link rel="stylesheet" media="all and (max-width: 320px)" href="site-max320.css"/>
<link rel="stylesheet" media="all and (min-width: 361px) and (max-width: 800px)" href="selene-max800.css"/>
<link rel="stylesheet" media="all and (min-width: 801px)" href="selene.css"/>
However, once I started testing on the phone and tablet something wasn't working right. It was like the mobile browsers were ignoring the media queries; they were auto-zooming out to display the web site in its entirety, which was not what I wanted. After some googling, I discovered that you have to tell the browsers scale the content to the width of the screen, this way the media queries will be taken into effect. To accomplish this, you have to put the viewport meta data tag in the head of your HTML document, like so:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
Once I added this meta data tag, it all worked as expected :) A more detailed explanation about this meta data tag can be found here.
<link rel="stylesheet" media="all and (max-width: 320px)" href="site-max320.css"/>
<link rel="stylesheet" media="all and (min-width: 361px) and (max-width: 800px)" href="selene-max800.css"/>
<link rel="stylesheet" media="all and (min-width: 801px)" href="selene.css"/>
However, once I started testing on the phone and tablet something wasn't working right. It was like the mobile browsers were ignoring the media queries; they were auto-zooming out to display the web site in its entirety, which was not what I wanted. After some googling, I discovered that you have to tell the browsers scale the content to the width of the screen, this way the media queries will be taken into effect. To accomplish this, you have to put the viewport meta data tag in the head of your HTML document, like so:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"/>
Once I added this meta data tag, it all worked as expected :) A more detailed explanation about this meta data tag can be found here.
Subscribe to:
Posts (Atom)