CHUVASH.eu

CHunky Universe of Vigourous Astonishing SHarepoint :)

Tag Archives: mobile

Tip: Use the weakest CSS selectors

I am reading Mobile HTML5 written by Estelle Weyle. It is an awesome recap and new knowledge about html, css and javascript. I want to highlight one of tips I got: Use the weakest CSS selectors (can be found on page 204).

We all know, that inline CSS and !important are evil. They have a higher level of specifity and override the standard cascade of the CSS rules. If you use !important, then it will be hard to override CSS rules when you really need it. After these two classic “evils” the evil number three is overqualifying of CSS selectors. You should really never add more classes or ids or elements than needed. Consider this:

.warning {
  background-color: red;
}

It is often enough, you don’t need those:

html .warning
div .warning
div.warning, div > .warning
body p#myP.blue strong.warning

SharePoint

In SharePoint sometimes we want override some OOB CSS rules. We have our own “namespace” to do that really simple. We have added a class to the html tag: “contoso-html”. Then it was really easy to update any OOB CSS rules, just copy the selector and add .contoso-html:

.contoso-html #s4-workspace { }

We also use less preprocessor and nest our selectors which has resulted that almost all of our selectors contain .contoso-html. Now back to the tip of that blog. This “namespace” made it harder to adjust CSS rules for special cases, like left navigation in the Search Center, we were forced to add more specific selectors, and selectors became bigger and bigger.

What I would recommend today is to skip the .contoso-html namespace in the CSS but keep it in the masterpage markup, use it wisely, meaning only if the original rule doesn’t work. Don’t nest too much in less files. Try always to find the weakest CSS selector. It is especially important in the SharePoint “markup djungle”.

Chuvash translation of Wikipedia Mobile

The official Wikipedia mobile app is now translated into Chuvash language and available to use:

What does Chuvash mean?

I am Chuvash. Chuvash is the name of an ethnicity which counts up to 2 milions peoply (mostly in Russia). Chuvashes talk the Chuvash language which is also an official language in Chuvash Republic (besides Russian). Chuvash language is a Turkic language and has a status “Vulnerable” in the UNESCO list of languages in danger. There is a Chuvash Wikipedia cv.wikipedia.org.

What is Wikipedia Mobile?

Wikipedia Mobile is a mobile application which is available on Google Play and App Store. It is written mostly in javascript and uses Cordova (PhoneGap) as a mobile container to interact with a mobile device.

Translation

I translated text strings into Chuvash on translatewiki.net which is used for the translation of wikimedia projects and external projects. Thanks for the tip to @aharoni and Sakha Wikipedia mailing list. If you can write Chuvash, please feel free to correct and add new text strings.

How to use

To be able to see the Chuvash interface we have to have a Chuvash locale. Unfortunately there is no one. If you are using Android then you are a lucky one, you can add any locale with MoreLocale 2 app.

Just install it and add a new locale (cv or cv-RU):

By the way, to write with additional four letters in Chuvash (besides the Russian 33 letters), you can use the Chuvash keyboard layout for Android which I published on Google Play. The most interface on your mobile will use default strings (English), but Wikipedia Mobile’s interface will be completely in Chuvash 🙂

jQuery mobile and SharePoint

In this post I want to explore how to build a mobile app using jQuery mobile. Recently I discovered two great blog posts about this:

  1. Building SharePoint web apps using Sencha Touch by Luc Stakenborg
  2. jQuery mobile and SharePoint by Chris Quick

In my post I’ll use their findings and share some of mine thougts. I’ll focus mostly on how to get started with jQuery mobile and SharePoint. So go ahead and create your jQuery mobile app, just drag’n’drop some controls:

Download it and yout get an “app.html” file and “my.css”. For now ignore my.css. app.html is something like that:

<!DOCTYPE html>
<html>
    <head>
<meta name="WebPartPageExpansion" content="full" />
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>Hello
        </title>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    </head>
    <body>
        <div data-role="page" id="page1">
            <div data-theme="a" data-role="header">
                <h3>
                    sp + $.mobile
                </h3>
            </div>
            <div data-role="content">
                <h1>
                    Hello world
                </h1>
                <h4>
                    Sharepoint &amp; jQuery mobile
                </h4>
            </div>
            <div data-theme="a" data-role="footer">
                <h3>
                    Footer
                </h3>
            </div>
        </div>
        <script>
            //App custom javascript
        </script>
    </body>
</html>

Then your site in SharePoint designer, create a folder, call it “mobile”:

Put the app.html-file that you got from jquery.mobile.com into the “mobile”-folder and rename it to “default.aspx”:

So now it is ready!

Open your web browser and go to your site:

http://your-site/mobile

Or go to that page in your phone. But here you have to add ?mobile=0 to your url:

http://your-site/mobile/?mobile=0

aspx vs html

Using html gives you more control about the markup than aspx. Chris Quick:

Using HTML pages instead of ASPX pages allows full control of the markup produced by the solution. I did some initial experiments with data view web parts hosted on ASPX pages, but the data view web parts prefers to be wrapped in a form element. This would occasionally break the markup required for jQuery mobile. It also insured page-to-page navigation would require non-ajax navigation.

But to be able to see the html pages directly in a browser rather than getting them as files, we must change the “Browser File Handling”:
file handling

knockout: http://stackoverflow.com/questions/6089727/how-to-architecture-a-webapp-using-jquery-mobile-and-knockoutjs

SPDocumentNavigator

Want to see some real example. Check out SPDocumentNavigator (by Ben Tedder on Codeplex).

Knockout and jQuery Mobile

Let’s try the combination of knockout and jQuery Mobile. For this lab I used a very nice intro example by Thorsten Hans: SharePoint Development using HeadJS KnockoutJS and SPServices. I took it as is and put it into jQuery Mobile context:

For this example I just created a custom list, called MyContacts and added two additional columns: FirstName and WorkCity. The source code can be found on github.

Вула Чăвашла

VulaCV - Чăвашла вулаттаракан сайт

Discovering SharePoint

And going crazy doing it

Bram de Jager - Coder, Speaker, Author

Office 365, SharePoint and Azure

SharePoint Dragons

Nikander & Margriet on SharePoint

Cameron Dwyer

Office 365, SharePoint, Azure, OnePlace Solutions & Life's Other Little Wonders

paul.tavares

Me and My doings!

Share SharePoint Points !

By Mohit Vashishtha

Jimmy Janlén "Den Scrummande Konsulten"

Erfarenheter, synpunkter och raljerande om Scrum från Jimmy Janlén

Aryan Nava

DevOps, Cloud and Blockchain Consultant

SPJoel

SharePoint for everyone

SharePointRyan

Ryan Dennis is a SharePoint Solution Architect with a passion for SharePoint and PowerShell

SharePoint 2020

The Vision for a Future of Clarity

Aharoni in Unicode

Treacle tarts for great justice

... And All That JS

JavaScript, Web Apps and SharePoint

blksthl

Mostly what I know about SharePoint - CommunicoCuspis

SharePointDiver

SharePoint på ren svenska