Introducci贸n a .NET MAUI

1

驴Qu茅 aprenderemos en este curso?

2

Qu茅 es .NET MAUI y Arquitectura de una aplicaci贸n

3

Breve historia de Xamarin

4

Single project

Conociendo el XAML y su estructura

5

驴Qu茅 es XAML?

6

Pages, Layouts y Views

Pages

7

ContentPage

8

FlyoutPage y NavigationPage

9

TabbedPage

Layouts

10

StackLayout

11

AbsoluteLayout

12

Grid

13

Retos usando el Grid

14

FlexLayout

15

Retos usando FlexLayout

Estilos

16

Tipos de estilos

17

Practicando estilos en .NET MAUI

18

Retos usando estilos

Conclusi贸n

19

Conclusi贸n

Reto de UI con .NET MAUI

20

驴Qu茅 implica el reto de replicar el UI?

21

UI de una tarjeta de perfil

Bienvenidos

Conceptos B谩sicos de JS y JQuery

22

Bases de desarrollo web moderno

23

Definici贸n de JSON y API Rest

24

驴Qu茅 es JSON?

25

DOM, BOM, JSON, AJAX

26

DOM: Document Object Model

27

Etiqueta Template en HTML5

28

Geolocation

Closures, Jquery y Local Storage en nuestra aplicaci贸n

29

Closures

30

Introduccion a GIT

31

Conectando con API Externa

32

Inyectando Datos en nuestro template

33

A帽adiendo m谩s ciudades a nuestra app

34

Guardando datos en LocalStorage

35

Despliegue con Git y GitHub

Introducci贸n al Front-end: Componentes, Stylus y Jade

ECMAScript 6, AJAX y Promises

36

驴Qu茅 es un API? (Usando el API de Marvel)

37

Creaci贸n de un entorno de desarrollo local

38

AJAX con jQuery

39

Promises

40

ECMAScript6

41

Request de una imagen y modificaci贸n con JQuery

42

Modificar Elementos Con API Data

43

Arrow Functions

44

Ellipsis CSS

45

Preguntas y Respuestas

46

Clases de Ecmascript 6

LocalStorage, Latencia y Plantillas con ECMAScript6

47

Latencia y Local Storage

48

Templates en ECMAScript 6

49

Uso de Clases en Javascript

50

Operadores y Funciones Matem谩ticas en Javascript

51

Funciones orientadas a eventos

52

Datos en la plantilla usando Promises

53

Preguntas y Respuestas

Introducci贸n a Single Page Apps

54

Single Page App

55

Page.js y Middlewares

56

Preguntas y Respuestas

Optimiza tu Single Page App con Browserify Y Gulp

57

The road to a single page app

58

Browserify y Component Oriented Development

59

Gulp

60

Preguntas y Respuestas

Livereload, Express y Node.js

61

Configuraci贸n de Livereload

62

Node.JS: Javascript del lado del servidor

63

Express: Web Framework para Node.JS

64

Realtime en Node.JS usando Socket.io

65

Preguntas y Respuestas

DOM: Document Object Model

26/65

Lectura

Siempre que entramos al mundo de la interacci贸n con el usuario y el dinamismo web necesariamente tocamos el lenguaje de programaci贸n JavaScript que es el que corre por excelencia en todos los navegadores de manera casi est谩ndar, pero para poder crear contenido en JavaScript e integrarlo a nuestra web debemos saber algo denominado el DOM, Document Object Model.

B谩sicamente el DOM es el documento html denominado por objetos a los cuales podemos acceder por su id o por su clase, cuando hablamos de JavaScript puro hablamos de que podemos acceder de una forma casi est谩ndar en cada navegador pero no es de preocupaci贸n el tema pues lo m谩s necesario como el acceder por id y por clase es demasiado est谩ndar.

Para entender mejor qu茅 es el DOM el siguiente gr谩fico:



Tenemos a document que har谩 referencia a nuestro documento html y despu茅s de este tenemos nuestro documento estructurado como lo vemos en la imagen.

Acceso al DOM


Podemos acceder a un id casa de la siguiente forma:

> document.getElementById('main')
   <div id=鈥"main">鈥嬧︹</div>鈥

Por su clase:

> document.getElementsByClassName('chapter')
   [<div class=鈥"chapter">鈥嬧︹</div>鈥,<a class=鈥"chapter" href=鈥"dom_obj_document.asp">鈥
芦 Previous鈥</a>鈥,<a class=鈥"chapter" href=鈥"dom_obj_all.asp">鈥婲ext Reference 禄鈥</a>鈥媇

En este caso nos devuelve un arreglo de accesos al DOM.

Eventos


Tambi茅n tenemos eventos del mouse y el teclado:

onkeydown:


<script>
    function myFunction(){
        alert("You pressed a key inside the input field");
    }
</script>
<input type="text" onkeydown="myFunction()">

En este caso cuando presione una tecla me saldr谩 el alert.

onclick:


<script>
    function myFunction(){
        document.getElementById("demo").innerHTML="Hello World";
    }
</script>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>

En este caso al darle click al bot贸n desplegar谩 hello world en el p con id demo.

Otras Alternativas


A muchos les gusta ser hardcode y utilizar JavaScript puro para hacer cosas como estas, pero tenemos frameworks que nos hacen la vida m谩s f谩cil como los siguientes:

1.  JQuery
2.  MooTools
3.  Prototype

En este curso trabajaremos con el framework que est谩 en pleno auge y que personalmente me gusta mucho para algunas cosas (no para todo).

...

Reg铆strate o inicia sesi贸n para leer el resto del contenido.

Aportes 0

Preguntas 0

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.