Div vs Span

Div

Block Element
Legal to have a span within a DIV

w3c Describes span as follows;

"The div element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements."

Span

Inline Element
Illegal to have a DIV within a span

w3c Describes span as follows;

"The span element doesn't mean anything on its own, but can be useful when used together with the global attributes, e.g. class, lang, or dir. It represents its children."

Reference:
http://www.w3.org/TR/html5/grouping-content.html#the-div-element
https://www.w3.org/wiki/HTML/Elements/span

Responsive Web Design is a Perfect Model?

One Mantra to remember in the world of Web Design / Web Development is that "There is No Perfect Model".

The technology and the user experience is always changing. The change is such that it brings about a Evolution in the system that lasts for a while and still Evolves.

There will always be small problems / issues / complaints by the users based on different cases from slower loading to accessibility to quirks.

However this is the best model available to date to improve the user experience across devices and boost user engagement.

Responsive web design model should be considered for any new web development.

Understanding all the internal and external factors of working makes it very difficult. However time invested in learning the same is totally valuable and brings the best return on investment when designing world class websites.

Introduction to Responsive Web Design

Here are a few pointers on to understand on what is responsive web design and clear a few myths.

1. One Code all Screens

This is the real aim is to fit in any screen. From smart phones to Smart TV. One Code Many Screens is the mantra.

2. Typography is Automatically Taken Care

Implementing a library will not take care of all the aspects, the typography needs to be taken care.

3. The Responsive Web Sites "Load Slower"

Negative, there are a lot of websites that give you the best service when designed to be responsive. The reason for a slower page is not the code but the design, so please go back to the drawing board.

4. Will not work on for all websites

False, a good designer can help to identify, clarify and manage the requirements.
5. Retail Companies - Stay away from Responsive Website

False, they work like a charm for retail and over 30% of ecommerce transactions take place over mobile devices.

6. Takes Longer time to implement

True to an extent, but this time can be minimized by using a responsive design framework like jQuery Mobile, Bootstrap, etc

7. Browser Dependence

HTML 5, is the new standard adopted and thus all the web browsers in the industry should comply to the parser standards making responsive web design browser independent.

8. It's Expensive to implement

Not so True now, because the resource crunch is coming down and HTML5 is a standard now.

9. Is not well connected

False, the connections are being improved in a very drastic manner, thanks to Google algorithm update which does have a direct impact on the website rankings if not mobile ready.

10. Transition to Mobile Web

It's relatively easy to move from HTML4.x to HTML 5 with the frameworks in place. However there is a little customization to be done in the design.

12. Mobile Ready

Thinking Mobile Ready means being user friendly and market ready.

14. One Image Many Screens

The same image can be used for various containers but it is recommended to optimize the same for the pages. Smaller images will be skewed on large screens, large images on small screens will nto load.

15. Responsive Web Design is "The Future"

Nope, it is the present. There is a demand for more number of responsive websites today than after 2 or 3 or even 5 years.

In the near future, we can always look towards more seamless accessibility and integration.

To all the people who want to build a website or design one, the only focus should be on "User Experience", the best example can be Gmail or Flipkart where the users learn every feature on their own.

Mobile Developer Summit #mods Day - 2

Crazy and Focused

Takeaway: Human Interface Guideline
 
Tagline: Focus your audience.

Really focused... :)

Samsung - Keynote

Mostly on Health Care and Health Care apps. A lot of them in market place (Samsung, I presume)

Tag Line: Maintain Health rather than Health Care... :)

NFC beyond Payments: the New Faces of Mobile Computing

I'm not geeky enough to understand the concept of NFC. 

Eagerly waiting for the nest talk by Scott Davis on HTML5 + iOS7



A  few technical take away;

progress
iframe seamless
video 

.vtt format for captioning a video track

Camera option (API)

input type ="file" accept="image"

posititon: -webkit-sticky

-webkit-image-set
speech library

Blocks for the Reluctant Developer

An insight on blocks in objective - C. Easy to understand.

Lunch with Gulab Jamoon... :)

Building Fast & Fluid Next Gen Mobile Websites

A small insight to single page application architecture.

A few issues;

• Page Loading
• Device Specific Issues
• Navigation Static and History URL
• Refresh
• Memory Issue
  

Responsive Design

Modular Layout + CSS Media Query = Responsive Web Design
IE8 - Media Query, media-query.js or respond.js

New take away require.js, history.js

Optimization

• Minification and Gzip
• AppCache
• Minimize DOM manipulation
• Conditional JS loading
• CSS Optimization
• Image Optimization
• Reduce HTTP calls and HTTP payload

Unit Testing Frameworks: Jasmine, Karma

Editor for HTML5 web-apps: RubyMind

A Journey towards successful HTML5 Mobile Apps 

A very detailed insight on the HTML5 app development strategy and approach and the journey to take.

Verdict

With still a couple of more sessions to go but till now there are No regrets for attending #mods, it is time well spent.

All the sessions till now were informative with a little intuitive information.


A Few Tweets Today

Intel XDK + Intel WiDi = Magic, thank you #INTEL #mods2013 wish to develop an app ASAP..

From the front row in Hall1 just turned around to see a packed hall at #mods for @scottdavis99 presentation on #ios + #html5

#MODS day 2 counting on the ticker 90 minutes to start...
A small writeup and a feedback on my blog http://tinyurl.com/ltjphbu  about #mods day-1 @saltmarchmedia do read through and respond

prize winning tweets at #mods can be projected.. Just a Tweety Feedback to @saltmarchmedia

Mobile Developer Summmit - Day#1

At the Mobile Developer Summit #mods;

1. Spark instilled on the apps possibilities
2. Ford Developer Program
3. New plans / Phases and ideas in the Automotive sector
4. Intel WiDi
5. Intel SDX
6. Intel HTML5 Development Tools

All this six packed pointers packed up in just 2 hours. A deep dive yet to come.

Visited the Ford and the Intel stalls to know about their developer events and the SDKs they provide which is a completely new insight. Another spark instilled to think is a different view for mobile solution / product to be integrated into a automobile. No ideas yet..!!


The Other Side to Usability

Any application UI should be Engaging, Well Styled, Effective, Easy to Learn
For the home page which takes time to load, we can use any of the following approach
    Progressive Loading
    Splash Screen
    Gamification screen
    Lazy Load
The best practice to develop a mobile app is (my opinion is for any web application);
    1. Ease the load on the UI thread.
    2. Use the Worker Thread / Process to do most of the processing.
    3. Cache the objects (Example: Images, JavaScript, StyleSheets). In HTML5 use the META file.
    4. Not over using OverDraw
    5. Themes; Inbuilt Themes - Build on them.
    6. Use a TimeStamp to clear the client cache.

Mobile OSes

This was a very interesting session on the different mobile OSes that are already in market or going to be in the market;

A few note points are;

• Software vs Hardware
• Market Share vs Profitability
• Free SDK to Store pattern (Google)
• Hardware to sell products (Amazon)
• Selling the Software (Microsoft)
• Google + Amazon => ?
• Tizen Phones?
• Fragmentation charts are a good input.
• Multiple OSes on the same hardware an year away.
• Firefox OS for phones. Should the HTML5 standard be emphasized???
• Ubuntu Touch
• Web OS
• Apple OS

There were No canned solutions here only pointers to think.

Lunch arrangements were good with separate Vegetarian and Non-vegetarian counters with a sweet and ice-cream.



Firefox OS & the Power of HTML 5



The n/w was not good here. But the presentation by Soumya Deb was good giving an insight on the Firefox OS and how and what HTML5.



It was a honor attending this session sitting beside Scott Davis.



Tea Break, a confluence where there is a Tech Buzz of Mobi Geek terminologies lingering the air.



Develop, Optimize, Debug and Tune your Android Apps


Currently in this session by the person from the Intel team. Gave a good insight on the Intel Graphics hardware-software combination and the intel on power systems directly proportional to the performance.

Feedback for the MODS Organizers

1. The Lunch can be boxed up and provided to manage the crowd better. 
2. A mobile app with a scheduler and remainder for the event would be great. BarCamp Bangalore Organizing Team can be the right point of contact for the consulting. They having run the app successfully for over 2 camps now. 

Anticipating and Action Packed Day #2 tomorrow...

Signing off,

Naveen

How to delete a Windows Service

We can use the command sc "Service Control". This is used to communicate to the service control manager and the services.

1. WND +R -> CMD (or) Start -> All Programs -> Command Prompt (Right click and rin as administrator)
2. Give the following command;

    sc delete "SERVICE NAME"

On successful deletion, the we get the following message;

    [SC] DeleteService SUCCESS

Additionally, to list all services running on the computer, we can use the following command;

OPTIONS

A complete list of options available with sc command can be viewed by typing sc on the command prompt.

Happy Administration...!!!



Tags: Windows Service, Deleting a Windows Service, Windows Service Administration, Services.msc

IIS 7: Access restriction

Here is another simple glitch and a tweak that I had experienced in IIS 7 in Windows 7.
When trying to code a simple html page and save it in the root of the IIS (C:\inetpub\wwwroot) folder, there is an access restriction error.

Root Cause: The logged in user is not granted the complete administrator credentials even if the user name is a part of the administrator user group.
The following steps are to be followed to do the fix viz.,

1. Navigate to the root path and right click on the wwwroot folder –> Properties.
2. Navigate to the securities tab and click on the Edit button under the Group or User Names list.
3. In the Permissions dialog that opens, click on the Add Button.
4. Mention the user name in the textbox titled “Enter the object names to select” and click Ok button.
5. Now in the Permissions dialog, select the Checkbox against the Full Control and Apply the settings.

Now, the user will be able to save the files in the root folder.

Tags: IIS7, Access Restriction, Access Denied in IIS

IE8: Open Popup in Tab

As a rookie surfer, I was a little confused why a popup is always opened in a new page? I am using IE 8 for browsing and finally today found out the setting to change.

1. Navigate to Tools –> Internet Options.
2. Under the General tab, click on the settings button in the Tabs area.
3. In the Tab Browser Settings, select the radio button “Always open pop-ups in a new tab”.
4. Click on Ok for the settings to take effect.

Phew… One small tweak in the settings, to avoid opening new windows in IE… :).

Splitting Harddrive Space

The main scenario that led me to share this thought with you is the single partition with the complete disk space of 500 gigs that was supplied with my new Laptop. I took some time in figuring out the steps to the solution. Well it goes this way.,

1. Right click on the My Computer icon, click on Mange.
2. Select Storage –> Disk Management from the left pane of the Computer Management window.
3. Right click on the required drive (only C:\ will be available by default) and select shrink volume.
4. Enter the amount of bytes to shrink and click on ok. After the process is complete, the free space will be shown in the Computer Management window
5. Right click on the Free Space and select New Simple Volume to create a new partition.

Installing IIS in Windows 7

The following are the sequence of steps to be followed to install / enable IIS in Windows 7 (Home Premium Edition).

1. Open the Control Panel.
2. Click and open the Programs option.
3. Click on the Program and features.
4. Click on the “Turn Windows features on or off”
5. Select the Internet Information Services and click on Ok button.

There will be a progress message displayed and the IIS would be up and running.

To check if the installation is completed success, open the internet explorer and type http://localhost in the URL and the following will be the resultant screen

Tags: IIS 7, Installing IIS in Windows 7

Haier CE100 – Troubleshooting

The scenario is that the CE100 Dialler is installed but there is no signal for the connection to be activated.

The problem occurred when trying to install the driver and use the same in a machine with Microsoft Windows Windows 7.

Solutions that did not work are as follows viz.,

1. Un-Install the software from the control panel.
2. Uninstall the program from the control panel and restart the program.
3. Uninstall the program from the program menu installation.
4. Uninstall the program from the program menu installing and restarting the machine.

Solution that worked is as follows viz.,

1. Open the device manger.
2. Navigate the Modems –> USB Wireless Modem
3. Right click on the Uninstall.
4. Un-plug the Modem and restart the machine.
5. Plug the Modem, either of the following approaches would work for installation viz.,

• The modem will install by itself and a message will be shown in the taskbar.
• Open the location mentioned in the My Computer and Navigate to the installer inside the setup folder and install the application.

Tags: Haier CE100, wire less modem, troubleshooting, Haier CE100 Network