Trochę wybranych informacji z tematyki tandemu ASP.NET MVC i HTML5.
ASP.NET MVC
- do udostępniania danych zamiast WCF, jeszcze łatwiej używać danych JSON z poziomu klienta HTML/JS
- własny dependency resolver (np. oparty o Unity.MVC3 zapewniający odpowiednie disposowanie obiektów związanych z aplikacją web)
//kontroler do udostępniania danych w JSON, nie dla widoku HTML/CSS
public class DataServiceController: Controller {
IAppointmentRepository _appointmentRepository;
//zasilanie z IoC
public DataServiceController(IAppointmentRepository appointmentRepository) {
_appointmentRepository = appointmentRepository;
}
public ActionResult GetAppointment(int id) { //JsonResult dziedziczy po ActionResult
return Json(_AppointmentRepository.GetAppointment(id), JsonRequestBehavior.AllowGet);
}
}
http://html5boilerplate.com/ – szablony użycia
- najlepsze praktyki
- cross-browser
- HTML5
- optymalizacje dla mobilnych przeglądarek
- wsparcie także dla starszych IE
- rozwiązania dla wydruku
- hostowane w sieci skrypty
BoilerPlate na starcie
- HTML5 doctype
- kodowanie utf-8
- tryb renderowania IE na edge (w ostatniej wersji)
- viewport na device-width
- jQuery pobierane z sieci z lokalnym fallbackiem
- ładowany Modernizr
Modyfikacja _Layout.cshtml
- Wspólny “master” dla wszystkich widoków/stron HTML w ASP.NET MVC
- Możemy umieścić w nim odpowiednie elementy z index.html z BoilerPlate
- obsługa różnych wersji IE
- utf-8
- tryb renderowania IE na edge
- referencje do skryptów (jQuery z lokalnym fallbackiem, Modernizr, …)
- prośba o zainstalowanie przeglądarki zgodnej z HTML5 (IE od wersji 9, Chrome, …) //aplikacja dedykowana dla nowoczesnych przeglądarek
- …
///<reference path=”…” /> - intellisense w VS działa także dla naszych skryptów
Biblioteki dla canvas:
Łatwe rysowanie wykresu za pomocą Flot:
var chartOptions = {
series: {
lines: { show: true, fill: true },
points: { show: true, radius: 5 }
},
grid: { hoverable: true, autoHighlight: true },
legend: { position: ‘se’ }, //south-east
yaxis: { max: maxY, min: minY },
xaxis: { minTickSize: [1, ‘hour’], mode: ‘time’, timeformat: ‘%h %P’, twelveHourClock: true }
};
$.plot(canvasDiv, [
color: color,
shadowSize: 4,
label: ‘Rytm serca’,
data: heartData
}], chartOptions);
SVG
Biblioteka: Raphael
Proste rysowanie interaktywnych diagramów kołowych:
raphael(‘Aaa’, x, y)
.pieChart(scene.width / 2,
scene.height / 4 + 10,
66, values, labels, “#fff”);
Tekst na ścieżce:
<svg>
<defs>
<path id=”path1” d=”M75,20 a1,1 0 0,0 100,0” />
</defs>
<text x=”10” y=”100” style=”fill:green;”>
<textPath xlink:href=”#path1”>Koko koko svg spoko</textPath>
</text>
</svg>
Video HTML5
Brak komentarzy:
Prześlij komentarz