Πολλοί θα πουν πως είναι ακόμα νωρίς για HTML 5. Εγώ λέω πως ο καιρός να ασχοληθούμε με το HTML 5 είναι τώρα.
Όσοι αναπτύσουν εφαρμογές σε asp.NET ξέρουν πως δεν υπάρχει αυτή η δυνατότητα "out of the box" στο Visual Studio 2010.
Ένας τρόπος που βρήκα να αναπτύσω εφαρμογές σε HTML 5 με το Visual Studio 2010, είναι ο ακόλουθος.
Καταρχήν χρειάζονται δύο αρχεία που μπορείτε να κατεβάσετε ελεύθερα, τουλάχιστον σε αυτή την υλοποίηση.
Πρώτα το Modernizr που βασικά εξασφαλίζει ότι οι browsers θα αναγνωρίσουν τα νέα tags αλλά και άλλες δυνατότητες για CSS compatiobility.
Επειδή "by default" αυτά τα νέα tags ρεντάρονται σαν inline elements, η λύση στο πρόβλημα έρχεται από το html5doctor.com Reset Stylesheet.
Γενικώς χρησημοποιώ nested master pages, και δεν θα κάνω εξαίρεση τώρα. Έτσι εφόσον έφτιαξα ένα νέο web site στο Visual Studio 2010 και συμπεριέλαβα το css και το script που ανέφερα παραπάνω, προσέθεσα ένα master page με το όνομα html5base.master που είναι το παρακάτω mark up.
Όσοι αναπτύσουν εφαρμογές σε asp.NET ξέρουν πως δεν υπάρχει αυτή η δυνατότητα "out of the box" στο Visual Studio 2010.
Ένας τρόπος που βρήκα να αναπτύσω εφαρμογές σε HTML 5 με το Visual Studio 2010, είναι ο ακόλουθος.
Καταρχήν χρειάζονται δύο αρχεία που μπορείτε να κατεβάσετε ελεύθερα, τουλάχιστον σε αυτή την υλοποίηση.
Πρώτα το Modernizr που βασικά εξασφαλίζει ότι οι browsers θα αναγνωρίσουν τα νέα tags αλλά και άλλες δυνατότητες για CSS compatiobility.
Επειδή "by default" αυτά τα νέα tags ρεντάρονται σαν inline elements, η λύση στο πρόβλημα έρχεται από το html5doctor.com Reset Stylesheet.
Γενικώς χρησημοποιώ nested master pages, και δεν θα κάνω εξαίρεση τώρα. Έτσι εφόσον έφτιαξα ένα νέο web site στο Visual Studio 2010 και συμπεριέλαβα το css και το script που ανέφερα παραπάνω, προσέθεσα ένα master page με το όνομα html5base.master που είναι το παρακάτω mark up.
<%@ Master Language="VB" CodeFile="html5base.master.vb" Inherits="masters_html5base" %> <!doctype html> <html lang="en"> <head runat="server"> <meta charset="utf-8" /> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> <meta name="author" content="mitsbits" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <!--scripts--> <script src='<%= Page.ResolveUrl("~/scripts/jquery-1.4.3.js") %>' type="text/javascript"></script> <script src='<%= Page.ResolveUrl("~/scripts/modernizr-1.5.min.js") %>' type="text/javascript"></script> <!--css--> <link href='<%= Page.ResolveUrl("~/Styles/html5reset.css")%>' rel="stylesheet" type="text/css" /> </head> <body> <form id="baseform" runat="server"> <div id="container"> <asp:ContentPlaceHolder ID="contentwrapper" runat="server"> </asp:ContentPlaceHolder> </div> </form> </body> </html>
Τα πράγματα όπως βλέπετε είναι πολύ απλά, δύο place holders, ο ένας στο head και ο άλλος για το περιεχόμενο της σελίδας. Καταρχήν, αυτό αρκεί για να φτιάξει κάποιος μια asp.NET φόρμα με HTML 5 mark up.
Για να δώσω μια βασική δομή και ομοιομορφία στην εφαρμογή προσέθεσα άλλο ένα master page, το html5content.master που είναι το mark up που ακολουθεί.
Για να δώσω μια βασική δομή και ομοιομορφία στην εφαρμογή προσέθεσα άλλο ένα master page, το html5content.master που είναι το mark up που ακολουθεί.
<%@ Master Language="VB" MasterPageFile="~/masters/html5base.master" AutoEventWireup="false" CodeFile="html5content.master.vb" Inherits="masters_html5content" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server"> <!--css--> <link href='<%= Page.ResolveUrl("~/styles/html5main.css")%>' rel="stylesheet" type="text/css" /> <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="contentwrapper" runat="Server"> <header> <asp:ContentPlaceHolder ID="header" runat="server"> </asp:ContentPlaceHolder> </header> <nav> <asp:ContentPlaceHolder ID="navigation" runat="server"> </asp:ContentPlaceHolder> </nav> <section id="maincontent" role="main"> <asp:ContentPlaceHolder ID="maincontent" runat="server"> </asp:ContentPlaceHolder> </section> <footer> <asp:ContentPlaceHolder ID="footer" runat="server"> </asp:ContentPlaceHolder> </footer> </asp:Content>
To Visual Studio θα παραπονεθεί για τα tags δεν υποστηρίζονται στο HTML 4, αλλά δεν υπάρχει σφάλμα. Προσέξτε ότι προσθέτω και άλλο ένα stylesheet για την βασική μορφοποίηση των σελίδων. Από εδώ και πέρα όποια σελίδα χρησημοποιεί σας master page το html5content.master υποστηρίζει τα νέα HTML 5 tags. Για την ιστορία ορίστε το html5main.css
nav{float:left; width:20%;} section #maincontent {float:right; width:79%;} footer {clear:both;}
Comments
No responses to “HTML 5 & asp.NET τώρα!”
Post a Comment