Desarrollo aplicaciones visuales

DESARROLLO
APLICACIONES
VISUALES
PROGRAMACIÓN C# BÁSICA

INTRODUCCIÓN A LA
PROGRAMACIÓN
 La programación es el proceso de diseñar,
codificar, depurar y mantener el código fuente
de programas de computadora.
 El proceso de escribir código requiere
frecuentemente conocimientos en varias áreas
distintas, además del dominio del lenguaje a
utilizar, algoritmos especializados y lógica
formal

Breve historia de la
programación
 Para crear un programa, y que la computadora
lo interprete y ejecute las instrucciones
escritas en él, debe escribirse en un lenguaje
de programación. En sus inicios las
computadoras interpretaban solo instrucciones
en un lenguaje específico, del más bajo nivel,
conocido como código máquina, siendo éste
excesivamente complicado para programar.

¿Qué es un Lenguaje?
 Un lenguaje de programación es un lenguaje
formal diseñado para realizar procesos que
pueden ser llevados a cabo por máquinas como
las computadoras.
 Un compilador es un programa informático que
traduce un programa que ha sido escrito en un
lenguaje de programación a un lenguaje común
usualmente lenguaje de máquina, aunque
también puede ser traducido a un código
intermedio (bytecode) o a texto. Este proceso de
traducción se conoce como compilación.

Tipos y ejemplos de lenguajes.
 Los lenguajes débilmente tipados permiten
que un valor de un tipo pueda ser tratado
como de otro tipo, por ejemplo una cadena
puede ser operada como un número.
 Los lenguajes fuertemente tipados evitan que
cualquier intento de llevar a cabo una
operación sobre el tipo equivocado dispara un
error.

Tipos y ejemplos de lenguajes.
 Lenguajes con tipos débiles como Perl y
JavaScript permiten un gran número de
conversiones de tipo implícitas. Por ejemplo
en JavaScript la expresión 2 * x convierte
implícitamente x a un número, y esta
conversión es exitosa inclusive cuando x es
null, undefined, un Array o una cadena de
letras. Estas conversiones implícitas son útiles
con frecuencia, pero también pueden ocultar
errores de programación.

Programación: tipos.
 La programación puede seguir muchos
enfoques, o paradigmas, es decir, diversas
maneras de formular la resolución de un
problema dado. Algunos de los principales
paradigmas de la programación son:
1. Programación Declarativa
2. Programación Estructurada
3. Programación Modular
4. Programación Orientada a Objetos

Tipos de programadores.
 Front End:
 Javascript (Frameworks)
 TypeScript
 HTML
 CSS
 Back End:
 Java
 C (C++, C#)
 PHP

Metodologías de desarrollo de
software.
 Cascada
 SCRUM
 Agile: Kanban, Xtreme Programing

Algoritmo
 Es un conjunto prescrito de
instrucciones o reglas bien
definidas, ordenadas y finitas
que permite llevar a cabo una
actividad mediante pasos
sucesivos que no generen
dudas a quien deba hacer dicha
actividad. Dados un estado
inicial y una entrada, siguiendo
los pasos sucesivos se llega a
un estado final y se obtiene una
solución.

Pseudocódigo
 El pseudocódigo es
una forma de escribir
los pasos que va a
realizar un programa
de la forma más
cercana al lenguaje
de programación
que vamos a utilizar
posteriormente.

Conocimientos Generales
Programación

Variables
 Es un espacio en el sistema de almacenaje
(memoria principal de un ordenador) y un
nombre simbólico (un identificador) que está
asociado a dicho espacio.
 Nunca debe empezar con número y no
debería contener caracteres especiales.
 El nombre debería de ser siempre homogeneo
al valor que contendrá.

Tipos de Variables
 Tipo de dato lógico: El tipo bool de C# se utiliza para representar valores
booleanos; valores que son true o false.
 Tipo de dato entero: Tipo de dato númerico.
 Tipo de dato de coma flotante (real, con decimales): Los dos tipos de punto
flotante, float y double, se representan mediante los formatos IEC-60559
de precisión sencilla de 32 bits y de doble precisión de 64 bits,
respectivamente.
 Tipo de dato carácter: El tipo char representa una unidad.
 Tipo de dato cadena: Representa una secuencia de unidades.
 Tipo de dato NULL: Representa un conjunto vacio del tipo de dato
identificado en la variable.

Constantes
 Una constante, por otro lado, es un valor que
no puede ser alterado/modificado durante la
ejecución de un programa, únicamente puede
ser leído.
 Una constante corresponde a una longitud fija
de un área reservada en la memoria principal
del ordenador, donde el programa almacena
valores fijos.
Por ejemplo:
El valor de PI = 3,1416

Operaciones con Variables
 Las operaciones con variables vienen definidas
por los siguientes operandos:
 Matemáticas:
 Suma (+)
 Resta (-)
 Multiplicación (*)
 División (/)
 Modulo (%)
 Comparativas
 Mayor que (>)
 Menor que (<)
 Igualdad (==)
 Desigualdad (!=)

Estructuras de Control
 Las estructuras de control permiten modificar
el flujo de ejecución de las instrucciones de un
programa.
 Todas las estructuras de control tienen un
único punto de entrada. Las estructuras de
control se pueden clasificar en: secuenciales e
iterativas.

Sentencia IF
 Se trata de una estructura de control
secuencial que permite redirigir un curso de
acción según la evaluación de una condición
simple, sea falsa o verdadera.
 Si la condición es verdadera, se ejecuta el
bloque de sentencias 1; de lo contrario, se
ejecuta el bloque de sentencias 2.

Sentencia IF
Simple:
IF (Condición) THEN
(Bloque de sentencias 1)
ELSE
END IF

Sentencia IF
Multiple:
IF (Condición 1) THEN
ELSEIF (Condición 2) THEN
.....
ELSEIF (Condición n) THEN
(Bloque de sentencias n)
ELSE
(Bloque de sentencias else)
END IF

Sentencia Select (Case)
 Esta sentencia permite ejecutar una de entre varias
acciones en función del valor de una expresión. Es
una alternativa a if then else cuando se compara la
misma expresión con diferentes valores.
 Se evalúa la expresión, dando como resultado un número.
 Luego, se recorren los "Case" dentro de la estructura
buscando que el número coincida con uno de los valores.
 Es necesario que coincidan todos sus valores.
 Cuando se encuentra la primera coincidencia, se ejecuta
el bloque de sentencias correspondiente y se sale de la
estructura Select -Case.
 Si no se encuentra ninguna coincidencia con ningún valor,
se ejecuta el bloque de sentencias de la sección Case
Else o "Default".

Sentencia Select (Case)
Select (Expresión)
Case Valor1
Case Valor2
Case Valor n
(Bloque de sentencias n)
Case Else
(Bloque de sentencias "Else")
End Select

Sentencia WHILE
 Las estructuras de control iterativas o de ciclo,
inician o repiten un bloque de instrucciones si
se cumple una condición o mientras se
cumple una condición.
 La sentencia WHILE mientras la condición sea
verdadera, se ejecutarán las sentencias del
bloque.
WHILE (Condición)
(Bloque de sentencias)
WHILE END

Sentencia FOR-NEXT
 La sentencia For da lugar a un lazo o bucle, y permite
ejecutar un conjunto de sentencias cierto número de veces.
 Primero, se evalúan las expresiones 1 y 2, dando como
resultado dos números.
 La variable del bucle recorrerá los valores desde el número dado
por la expresión 1 hasta el número dado por la expresión 2.
 El bloque de sentencias se ejecutará en cada uno de los valores
que tome la variable del bucle.
For (Variable) = (Expresión1) To (Expresión2) STEP (Salto)
(Bloque de sentencias)
Next

Estructuras de Almacenamiento
 Las estructuras de datos se basan
generalmente en la capacidad de un
ordenador para recuperar y almacenar datos
en cualquier lugar de su memoria.
 El tipo de vector más comúnmente utilizado es
el Arreglo. Un arreglo no es más que una zona
de almacenamiento contiguo que contiene una
serie de elementos del mismo tipo, los
elementos de la matriz

Arreglos (Arrays)
 En C# llamamos arreglo a una colección de
objetos, dicha colección tiene longitud definida
y esta no puede cambiar con el flujo del
programa.
 Para crear un arreglo haremos uso de la
palabra reservada new y los corchetes
cuadrados [ ], también es necesario conocer el
tamaño que necesitaremos, puesto que como
ya lo mencioné, no es posible cambiar el
tamaño una vez creado.

Arreglos (Arrays)
 char [] vocales = new char[5];
 int [] conteo = new int[10];
 object [] misObjetos = new object[3];
O directamente
 char [] vocales = new char[5] { 'a', 'e', 'i', 'o', 'u' };
 int [] conteo = new int[] { 1, 2, 3, 4, 5, 6, 7, 8, 9, 0
};
 object [] misObjetos = { "3", 1, 99.99 };

Arreglos (Arrays)
 Podemos acceder a los elementos del arreglo
usando nuevamente los corchetes cuadrados [ ]
y el índice del elemento al que queremos
acceder. Nota importante los arreglos están
indizados en 0 es decir, el primer elemento de
un arreglo está en el índice 0.
Console.WriteLine(vocales[0]); // a

Y de como llegamos a la OOP (o POO)
Programación Estructurada

Programación Estructurada
 Es un paradigma de programación orientado a
mejorar la claridad, calidad y tiempo de desarrollo
de un programa de computadora recurriendo
únicamente a subrutinas y tres estructuras
básicas: secuencia, selección (if y switch) e
iteración (bucles for y while).
 Una subrutina (también llamada procedimiento,
función, rutina o método), es un segmento de
código separado del bloque principal, el cual
puede ser invocado en cualquier momento desde
ésta u otra subrutina.

Declaración
 Las declaraciones de subrutinas generalmente son
especificadas por:
 Un nombre único en el ámbito: nombre de la función con el
que se identifica y se distingue de otras. No podrá haber
otra función ni procedimiento con ese nombre (salvo
sobrecarga o polimorfismo en programación orientada a
objetos).
 Un tipo de dato de retorno: tipo de dato del valor que la
subrutina devolverá al terminar su ejecución.
 Una lista de parámetros: especificación del conjunto de
argumentos (pueden ser cero, uno o más) que la función
debe recibir para realizar su tarea.
 El código u órdenes de procesamiento: conjunto de
órdenes y sentencias que debe ejecutar la subrutina.

Ejemplos
 public static int calculo (int a, int b){
return a + b;
}
 public static void calculo (int a, int b){
Console.WriteLine(a + b);
}

Programación Orientada a
Objetos
 La programación Orientada a objetos (POO)
es una forma especial de programar, más
cercana a como expresaríamos las cosas en
la vida real que otros tipos de programación.
 Con la POO tenemos que aprender a pensar
las cosas de una manera distinta, para escribir
nuestros programas en términos de objetos,
propiedades, métodos y otras cosas que
veremos rápidamente.

¿Cómo se piensa en objetos?
 Pensar en términos de objetos es muy parecido a cómo
lo haríamos en la vida real. Por ejemplo vamos a pensar
en un coche para tratar de modelizarlo en un esquema
de POO. Diríamos que el coche es el elemento principal
que tiene una serie de características, como podrían ser
el color, el modelo o la marca. Además tiene una serie
de funcionalidades asociadas, como pueden ser
ponerse en marcha, parar o aparcar.
Pues en un esquema POO el coche sería el objeto, las
propiedades serían las características como el color o el
modelo y los métodos serían las funcionalidades
asociadas como ponerse en marcha o parar.

Clases en POO
 Las clases son declaraciones de objetos, también
se podrían definir como abstracciones de objetos.
Esto quiere decir que la definición de un objeto es
la clase.
 Propiedades en clases: Las propiedades o
atributos son las características de los objetos.
Cuando definimos una propiedad normalmente
especificamos su nombre y su tipo. Nos podemos
hacer a la idea de que las propiedades son algo
así como variables donde almacenamos datos
relacionados con los objetos.

Clases en POO
 Métodos en las clases: Son las funcionalidades
asociadas a los objetos. Cuando estamos
programando las clases las llamamos métodos.
Los métodos son como funciones que están
asociadas a un objeto.
 Los objetos son ejemplares de una clase
cualquiera. Cuando creamos un ejemplar
tenemos que especificar la clase a partir de la
cual se creará. Esta acción de crear un objeto a
partir de una clase se llama instanciar.
miCoche = new Coche()

Clases en POO
 En C#, los getters y setters se pueden declarar rápidamente en una
propiedad (es decir, atributo público cuya asignación o lectura no
requerirá de un método particular) usando cualquiera de estos
métodos:
//Declaración abreviada
public tipo nombre{get; set;}
//Declaración con miembro privado
private tipo micampo;
public tipo acceso_micampo
{
get{ return micampo; }
set{ micampo = value; }
}

Modificadores de acceso
 En C#, los getters y setters se pueden declarar rápidamente en una
propiedad (es decir, atributo público cuya asignación o lectura no
requerirá de un método particular) usando cualquiera de estos
métodos:
//Declaración abreviada
public tipo nombre{get; set;}
//Declaración con miembro privado
private tipo micampo;
public tipo acceso_micampo
{
get{ return micampo; }
set{ micampo = value; }
}

Modificadores de acceso
 Todos los tipos y miembros de tipo tienen un nivel
de accesibilidad que controla si se pueden usar
desde otro código del ensamblado u otros
ensamblados. Puede usar los siguientes
modificadores de acceso para especificar la
accesibilidad de un tipo o miembro cuando lo
declare:
 Public: Puede obtener acceso al tipo o miembro
cualquier otro código del mismo ensamblado o de
otro ensamblado que haga referencia a éste.
 Private: Solamente el código de la misma clase o
estructura puede acceder al tipo o miembro.

Miembros estáticos
 Una clase puede contener métodos, campos, propiedades o eventos estáticos. El
miembro estático es invocable en una clase, incluso si no se ha creado ninguna
instancia de la clase. Siempre se tiene acceso al miembro estático con el nombre de
clase, no con el nombre de instancia.
public class Automobile
{
public static int NumberOfWheels = 4;
public static int SizeOfGasTank {
get{return 15; }
}
public static void Drive() { }
public static event EventType RunOutOfGas;
// Other non-static fields and properties...
}
----------------------------
Automobile.Drive();
int i = Automobile.NumberOfWheels;

Y su integración con C#
Base de Datos

SQL
 SQL (por sus siglas en inglés Structured Query Language; en
español lenguaje de consulta estructurada) es un lenguaje
específico del dominio que da acceso a un sistema de
gestión de bases de datos relacionales que permite
especificar diversos tipos de operaciones en ellos. Una de
sus características es el manejo del álgebra y el cálculo
relacional que permiten efectuar consultas con el fin de
recuperar, de forma sencilla, información de bases de datos,
así como hacer cambios en ellas.
select columna from tabla;
CREATE TABLE [nombre de la tabla] ( [definiciones de
columna] ) [parámetros de la tabla]

Base de Datos
 Una base de datos es una aplicación
independiente que almacena una colección de
datos. Así que podemos decir que se trata de una
colección de información organizada por campos,
registros y archivos, de manera que se pueda
seleccionar rápidamente los fragmentos de datos
que se necesiten.
 Desde el punto de vista informático, la base de
datos es un sistema formado por un conjunto de
datos almacenados en discos que permiten el
acceso directo a ellos y un conjunto de programas
que manipulen ese conjunto de datos.

Estructura de Base de Datos
 Cada base de datos se compone de una o
más tablas que guarda un conjunto de datos.
Cada tabla tiene una o más columnas y filas.
Las columnas guardan una parte de la
información sobre cada elemento que
queramos guardar en la tabla, cada fila de la
tabla conforma un registro.

Normalización de Base de
Datos
 La normalización de bases de datos es un
proceso que consiste en designar y aplicar una
serie de reglas a las relaciones obtenidas tras el
paso del modelo entidad-relación al modelo
relacional.
Las bases de datos relacionales se normalizan
para:
 Evitar la redundancia de los datos.
 Disminuir problemas de actualización de los datos en
las tablas.
 Proteger la integridad de datos.

Modelo Relacional
 En el modelo relacional es frecuente llamar
tabla a una relación, aunque para que una
tabla sea considerada como una relación tiene
que cumplir con algunas restricciones:
 Cada tabla debe tener su nombre único.
 No puede haber dos filas iguales. No se permiten
los duplicados.
 Todos los datos en una columna deben ser del
mismo tipo.

CRUD
 En informática, CRUD es el acrónimo de "Crear, Leer,
Actualizar y Borrar" (del original en inglés: Create, Read,
Update and Delete), que se usa para referirse a las funciones
básicas en bases de datos o la capa de persistencia en un
software.
 En programación, crear, leer, actualizar y borrar (con el
acrónimo CRUD) son las cuatro funciones básicas de la
persistencia de Bases de Datos. Términos alternativos son
usados a veces cuando se definen las cuatro funciones
básicas de CRUD, como “recuperar” en vez de “leer”,
“modificar” en vez de “actualizar” o “destruir” en vez de
“borrar”. CRUD se usa tambien a veces para describir
convenciones de interfaz de usuario que facilita la vista,
búsqueda y modificación de la información; a menudo se usa
en programación de formularios (forms) e informes (reports).

Lenguaje de Manipulación de
datos
 Lenguaje de Manipulación de Datos (Data
Manipulation Language, DML) es un lenguaje
proporcionado por los sistemas gestores de
bases de datos que permite a los usuarios de la
misma llevar a cabo las tareas de consulta o
modificación de los datos contenidos en las
Bases de Datos del Sistema Gestor de Bases de
Datos.
 El lenguaje de manipulación de datos más
popular hoy en día es SQL, usado para recuperar
y manipular datos en una base de datos
relacional.

Elementos del DML
 SELECT
 INSERT
 DELETE
 UPDATE

Elementos del DML : SELECT
 La sintaxis básica de select es la siguiente
utilizando el estándar de SQL:
SELECT columna FROM tabla;
Donde se sustituye la palabra columna por el
nombre del campo a consultar y la palabra
tabla por el nombre de la tabla que contiene el
campo mencionado.

Elementos del DML : INSERT
 La estructura básica para la sentencia insert
utilizando el estándar de SQL es la siguiente:
INSERT INTO table (nombre, apellidos, edad,
carrera) VALUES ("Nombre", "Apellido", "27",
"Ingeniería en TI");

Elementos del DML : DELETE
 Para eliminar los registros de una tabla usamos el
comando "DELETE":
DELETE FROM tabla;
La ejecución del comando indicado en la línea
anterior borra TODOS los registros de la tabla.
Si queremos eliminar uno o varios registros
debemos indicar cuál o cuáles, para ello
utilizamos el comando "DELETE" junto con la
clausula "WHERE" con la cual establecemos la
condición que deben cumplir los registros a
borrar.

Elementos del DML : UPDATE
 Para modificar uno o varios datos de uno o
varios registros utilizamos "UPDATE"
(actualizar):
UPDATE tabla SET campo='nuevo valor';
Utilizamos "UPDATE" junto al nombre de la
tabla y "set" junto con el campo a modificar y
su nuevo valor. El cambio afectará a todos los
registros. Podemos modificar algunos
registros, para ello debemos establecer
condiciones de selección con "WHERE".

Front End Apps y Back End Apps
Aplicaciones Web

HTML
 Sigla en inglés de HyperText Markup
Language (lenguaje de marcas de hipertexto),
hace referencia al lenguaje de marcado para
la elaboración de páginas web.
 Es un estándar a cargo del World Wide Web
Consortium (W3C) o Consorcio WWW,
organización dedicada a la estandarización de
casi todas las tecnologías ligadas a la web,
sobre todo en lo referente a su escritura e
interpretación.

HTML: Etiquetas
 El HTML se escribe en forma de «etiquetas»,
rodeadas por corchetes angulares (<,>,/). El
HTML también puede describir, hasta un cierto
punto, la apariencia de un documento, y puede
incluir o hacer referencia a un tipo de programa
llamado script, el cual puede afectar el
comportamiento de navegadores web y otros
procesadores de HTML.
 Los elementos son la estructura básica de HTML.
Los elementos tienen dos propiedades básicas:
atributos y contenido. Cada atributo y contenido
tiene ciertas restricciones para que se considere
válido al documento HTML.

HTML: Etiquetas
 Un elemento generalmente tiene una etiqueta de
inicio (por ejemplo, <nombre-de-elemento>) y una
etiqueta de cierre (por ejemplo, </nombre-de-
elemento>). Los atributos del elemento están
contenidos en la etiqueta de inicio y el contenido
está ubicado entre las dos etiquetas (por ejemplo,
<nombre-de-elemento
atributo="valor">Contenido</nombre-de-
elemento>). Algunos elementos, tales como <br>,
no tienen contenido ni llevan una etiqueta de
cierre.
Ej. <a href=”enlace”><img src=”imagen” /></a>

HTML: Arquitectura de una
página
 <html>: define el inicio del documento HTML, le indica al
navegador que lo que viene a continuación debe ser
interpretado como código HTML. Esto es así de facto, ya que
en teoría lo que define el tipo de documento es el DOCTYPE,
que significa la palabra justo tras DOCTYPE el tag de raíz.
 <head>: define la cabecera del documento HTML; esta
cabecera suele contener información sobre el documento
que no se muestra directamente al usuario como, por
ejemplo, el título de la ventana del navegador.
 <body>: define el contenido principal o cuerpo del
documento. Esta es la parte del documento html que se
muestra en el navegador; dentro de esta etiqueta pueden
definirse propiedades comunes a toda la página, como color
de fondo y márgenes. Dentro del cuerpo <body> es posible
encontrar numerosas etiquetas.

CSS
 CSS es el acrónicmo de CascadingStyle
Sheets (es decir, hojas de estilo en cascada).
 CSS es un lenguaje de estilo que define la
presentación de los documentos HTML. Por
ejemplo, CSS abarca cuestiones relativas a
fuentes, colores, márgenes, líneas, altura,
anchura, imágenes de fondo, posicionamiento
avanzado y muchos otros temas.

CSS
Sintaxis básica de un comando (Selector) de CSS :

CSS: Inclusión Referenciada y en
Línea
 Método 1: Un modo de aplicar CSS a HTML
es usando el atributo de HTML style.
<html>
<head>
<title>Ejemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta es una página con fondo rojo</p>
</body>
</html>

Línea
 Método 2: Otra forma es incluir el código CSS
usando la etiqueta HTML <style>
<html>
<head>
<title>Ejemplo</title>
<style type="text/css">
body {background-color: #FF0000;}
</style>
</head>
<body>
<p>Esta es una página con fondo rojo</p>
</body>
</html>

Línea
 Método 3: El método recomendado es enlazar con lo que se
denomina hoja de estilo externa. Una hoja de estilo externa es
sencillamente un archivo de texto con la extensión .css.
 Por ejemplo, digamos que tu hoja de estilo se llama style.css y está
localizada en una carpeta que se llama style. Esta situación se
puede ilustrar de la siguiente manera:
<link rel="stylesheet" type="text/css" href="style/style.css" />

CSS: Directo, por Clase o por
ID
 Los selectores declaran qué etiquetas se le
aplican los estilos que coincidan con la
etiqueta o atributo señalados en la regla. Los
selectores pueden aplicarse a:
 Todos los elementos de un tipo, como los
párrafos <p>
 Elementos seguidos de un atributo, en
particular:
 id: un identificador único para la etiqueta (#)
 class: un identificador para anotar múltiples
elementos (.)

CSS: Directo
 Se aplican a todos los elementos HTML
del mismo tipo:
 P{ color: #FF00CC; }
En este caso TODOS los elementos <p>
tomaran color morado en color de la letra.

CSS: Clase
 Se aplican a todos los elementos HTML
con el mismo atributo class:
<p>Uvas para el vino blanco:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class=" redwine ">Pinot Blanc</a></li>
</ul>
a {color: blue;}
a.whitewine {color: #FFBB00;}
a.redwine {color: #800000;}

CSS: Clase
 Se aplican a un único elemento a traves
de su atributo id:
<h1 id="c1">Capítulo 1</h1>
<h2 id="c1-1">Capítulo 1.1</h2>
<h2 id="c1-2">Capítulo 1.2</h2>
#c1-2 {color: red;}

CSS: Peso de herencia
 Dependiendo del peso, se aplicará la modificación a un selector:

CSS: Float
 Los elementos se pueden hacer flotar a la derecha o a la izquierda
usando la propiedad float. Es decir, que la caja con su contenido
flota bien a la derecha o la izquierda de un documento (o de la caja
contenedora):

CSS: Teoría de la caja
 El modelo de caja en CSS describe las cajas que se generan a
partir de los elementos HTML. El modelo de caja también contiene
opciones detalladas en lo referente al ajuste de márgenes, bordes,
relleno (padding) y contenido de cada elemento.

Programación Web
 Desarrollo web es un término que define la
creación de sitios web para Internet o una
intranet. Para conseguirlo se hace uso de
tecnologías de software del lado del servidor y
del cliente que involucran una combinación de
procesos de base de datos con el uso de un
navegador web a fin de realizar determinadas
tareas o mostrar información.

Programación Web MVC
 El patrón de arquitectura del controlador de vista
de modelos (MVC) separa una aplicación en tres
componentes principales: Modelo, Vista y
Controlador. El patrón de MVC ayuda a crear
aplicaciones que son más fáciles de actualizar y
probar que las tradicionales aplicaciones
monolíticas.
 El patrón de MVC ayuda a crear aplicaciones que
separan los diferentes aspectos de la aplicación
(lógica de entrada, lógica comercial y lógica de la
interfaz de usuario), a la vez que proporciona un
acoplamiento vago entre estos elementos.

Arquitectura MVC
 Modelos: clases que representan los datos de la aplicación.
Las clases de modelo usan lógica de validación para aplicar
las reglas de negocio para esos datos. Normalmente, los
objetos de modelo recuperan y almacenan el estado del
modelo en una base de datos.
 Vistas: las vistas son los componentes que muestran la
interfaz de usuario de la aplicación. Por lo general, esta
interfaz de usuario muestra los datos del modelo.
 Controladores: las clases que controlan las solicitudes del
explorador. Recuperan los datos del modelo y llaman a
plantillas de vistas que devuelven una respuesta. En una
aplicación MVC, la vista solo muestra información; el
controlador controla la interacción de los usuarios y los datos
que introducen, y responde a ellos.

El Controller
 Cada método public en un controlador puede ser invocado como un
punto de conexión HTTP. En el ejemplo anterior, ambos métodos
devuelven una cadena. Observe los comentarios delante del
método.
//
// GET: /HelloWorld/Welcome/
public string Welcome()
{
return "This is the Welcome action method...";
}
MVC invoca las clases del controlador (y los métodos de acción
que contienen) en función de la URL entrante.

El Controller
 La lógica de enrutamiento de URL predeterminada que usa MVC emplea un formato
similar al siguiente para determinar qué código se debe invocar:
/[Controller]/[ActionName]/[Parameters]
Este formato es controlado desde la Clase RouteConfig dentro del folder App_Start.
Para agregar varias rutas, agregue más llamadas a MapRoute.
Hacerlo le permite definir varias convenciones o agregar rutas convencionales que
se dedican a una acción específica, como en el ejemplo siguiente:
routes.MapRoute("blog", "blog/{*article}",
defaults: new { controller = "Blog", action = "Article" });
Las rutas de la colección de rutas están ordenadas y se procesan en el orden en
que se hayan agregado.

El Modelo
 El Modelo: Es la representación de la información
con la cual el sistema opera, por lo tanto gestiona
todos los accesos a dicha información, tanto
consultas como actualizaciones, implementando
también los privilegios de acceso que se hayan
descrito en las especificaciones de la aplicación
(lógica de negocio).
 Envía a la 'vista' aquella parte de la información
que en cada momento se le solicita para que sea
mostrada (típicamente a un usuario). Las
peticiones de acceso o manipulación de
información llegan al 'modelo' a través del
'controlador'.

El Modelo
 Los modelos son específicos de la aplicación y,
por consiguiente, el marco de ASP.NET MVC no
impone ninguna restricción sobre los tipos de
objetos de modelo que se pueden generar. Por
ejemplo, puede utilizar objetos DataReader o
DataSet de ADO.NET o puede utilizar un conjunto
personalizado de objetos de dominio. También
puede utilizar una combinación de tipos de objeto
para trabajar con datos.
 Con MVC, Entity Framework y Scaffolding de
ASP.NET, puede crear una aplicación web que
proporciona una interfaz a una base de datos
existente.

Entity Framework
 Es un conjunto de API de acceso a datos para el
Microsoft .NET Framework, apuntando a la
versión de ADO.NET que se incluye con el .NET
Framework.
 Una entidad del Entity Framework es un objeto
que tiene una clave representando la clave
primaria de una entidad lógica de datastore. Un
modelo conceptual Entity Data Model (modelo
Entidad-Relación) es mapeado a un modelo de
esquema de datastore.
 Usando el Entity Data Model, el Framework
permite que los datos sean tratados como
entidades independientemente de sus
representaciones del datastore subyacente.

Entity Framework
 El Entity SQL es un lenguaje similar al SQL para consultar el
Entity Data Model (en vez del datastore subyacente).
Similarmente, las extensiones del Linq, Linq-to-Entities,
proporcionan consultas tipeadas en el Entity Data Model.
Consulta Linq to Queries:
//Querying with LINQ to Entities
using (var context = new SchoolDBEntities())
{
var query = context.Students
.where(s => s.StudentName == "Bill")
.FirstOrDefault<Student>();
}

Entity Framework - Find
 Find permite que a traves del Id de la entidad
se pueda sustraer un objeto especifico:
var AddedCliente =
context.Students.Find(cl.Id);

Entity Framework – ToList
 ToList() trae todos los objetos abstraidos de la
entidad
var std = context. Students.ToList();
foreach (Students item in std) {
Console.WriteLine(item.Id + "__" +
item.Nombre);
}

Entity Framework –
Add/Remove
 Comandos que permiten añadir o remover objetos
de la entidad. Vease que hay que mandar a salvar
el context completamente para poder guardar el
cambio.
Add():
context. Students.Add(cl);
context.SaveChanges();
Remove():
context. Students. Remove (cl);
context.SaveChanges();

View
 En el modelo Model-View-Controller (MVC), las
vistas están pensadas exclusivamente para
encapsular la lógica de presentación. No deben
contener lógica de aplicación ni código de
recuperación de base de datos. El controlador
debe administrar toda la lógica de aplicación.
 Una vista representa la interfaz de usuario
adecuada usando los datos que recibe del
controlador. Estos datos se pasan a una vista
desde un método de acción de controlador
usando el método View.

jQuery
 jQuery es una biblioteca (Framework) multiplataforma de
JavaScript, creada inicialmente por John Resig, que permite
simplificar la manera de interactuar con los documentos
HTML, manipular el árbol DOM, manejar eventos, desarrollar
animaciones y agregar interacción con la técnica AJAX a
páginas web. Fue presentada el 14 de enero de 2006 en el
BarCamp NYC. jQuery es la biblioteca de JavaScript más
utilizada.
 jQuery es software libre y de código abierto, y al igual que
otras bibliotecas, ofrece una serie de funcionalidades
basadas en JavaScript que de otra manera requerirían de
mucho más código, es decir, con las funciones propias de
esta biblioteca se logran grandes resultados en menos
tiempo y espacio.

jQuery
 jQuery consiste en un único fichero JavaScript
que contiene las funcionalidades comunes de
DOM, eventos, efectos y AJAX.
 La característica principal de la biblioteca es
que permite cambiar el contenido de una
página web sin necesidad de recargarla,
mediante la manipulación del árbol DOM y
peticiones AJAX. Para ello utiliza las funciones
$() o jQuery().

jQuery: Init
 Comúnmente antes de realizar cualquier acción en el
documento con jQuery(), debemos percatarnos de que el
documento esté listo. Para ello usamos
$(document).ready();, de esta forma:
$(document).ready(function() {
//Aquí van todas las acciones del documento.
});
O
$(function () {
//Aquí van todas las acciones del documento. //Aquí van
todas las acciones del documento.
});

jQuery: Events
 jQuery maneja los eventos básicos de manera
simple utilizando las referencias del DOM:
 $("p").click(function(){//codigo});
 $(“select").change(function(){ //codigo});

jQuery: Ajax
 jQuery maneja eventos asincronos utilizando
tecnologia ajax (Asynchronous JavaScript and
XML). De esta manera, es posible ejecutar varios
procesos simultaneos sin necesidad de realizar
requerimientos de posteo lo que hace mas
amigable la interacción con las aplicaciones.
 Entre las funciones Ajax que maneja jQuery
tenemos:
 $(selector).load(URL,data,callback);
 $.get(URL,callback);
 $.post(URL,data,callback);

jQuery: Load
 jQuery Load es el objeto de ajax mas poderoso de jQuery, permite
la carga de información externa a la interfaz tanto por metodo post
como get:
 $("#div1").load(“controller/action/ ", function(responseTxt, statusTxt,
xhr){
if(statusTxt == "success")
alert("External content loaded successfully!");
if(statusTxt == "error")
alert("Error: " + xhr.status + ": " + xhr.statusText);
});
 $( "#feeds" ).load( “controller/action/", { limit: 25 }, function() {
alert( "The last 25 entries in the feed have been loaded" );
});

Desarrollo aplicaciones visuales

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (16)

Similar a Desarrollo aplicaciones visuales

Similar a Desarrollo aplicaciones visuales (20)

Último

Último (10)

Desarrollo aplicaciones visuales