lunes, 15 de mayo de 2017

ASP.NET: Demostración de DropDownList

Demostración de un DropDownList, en Web Form de ASP.NET, que permite seleccionar un cliente y muestra el Código del Cliente seleccionado.

https://drive.google.com/open?id=0B7Ct7K_LTJvSeV9Ja3NKLXBuc1U


DemoCombo.aspx


<%@ Page Title="" Language="C#" MasterPageFile="~/Default.Master" AutoEventWireup="true" CodeBehind="DemoCombo.aspx.cs" Inherits="CrediSeguro.DemoCombo" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>Demo Combo</title>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cphPrincipal" runat="server">
    <!-- Primera fila Grid -->
    <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12">
            <div class="jumbotron">
                <h1>Demo Combo</h1>
            </div>
        </div>
    </div>
    <!-- Primera fila Grid -->

    <div class="row">
        <!-- Primera Columna -->
        <div class="col-xs-1 col-md-2 col-lg-4">
        </div>
        <!-- Segunda Columna -->
        <div class="col-xs-11 col-md-10 col-lg-8">
            <form action="DemoCombo.aspx" method="post" runat="server">
                <fieldset>
                    <legend>Datos:</legend>
                    <div class="form-group">
                        <label class="control-label">Código</label>
                        <asp:Label ID="lblCodigo" runat="server"
                             Text="Label"></asp:Label>
                        <asp:DropDownList ID="ddClientes" runat="server"
                             AutoPostBack="true"
                             OnSelectedIndexChanged=
                             "ddClientes_SelectedIndexChanged" >
                             </asp:DropDownList>
                        <asp:SqlDataSource ID="sdsClientes" runat="server">
    </asp:SqlDataSource>
                    </div>
                </fieldset>
            </form>
           
        </div>

    </div>

</asp:Content>


DemoCombo.aspx.cs


using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;

namespace CrediSeguro
{
    public partial class DemoCombo : System.Web.UI.Page
    {
        private void LlenarCombo()
        {
            StringBuilder sbCond;
            string sApellido = "";
            string sCondicion;
            sbCond = new StringBuilder();

            sApellido = "Da";
            //Construye el SELECT
            sbCond.Append(" SELECT CodCliente, Apellido+', '+Nombre AS Cliente ");
            sbCond.Append(" FROM dbo.Cliente ");
            sbCond.Append(" WHERE ");
            sbCond.AppendFormat(" Apellido LIKE '{0}%' ", sApellido);
            sbCond.Append(" ORDER BY Apellido, Nombre ");
            //SELECT FROM WHERE
            sCondicion = sbCond.ToString();

            //Configura la conexión del DataSource
            sdsClientes.ConnectionString = Properties.Settings.Default.ConexionSQL;
            //Configura el Select del DataSource
            sdsClientes.SelectCommand = sCondicion;

            //Asocia el Combo con los datos
            //Campo que se va a mostrar en el Combo
            ddClientes.DataTextField = "Cliente";
            //Valor que devuelve al seleccionar el elemento del Combo
            ddClientes.DataValueField = "CodCliente";
            ddClientes.DataSource = sdsClientes;
            ddClientes.DataBind();
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            //Solo llena el contenido del combo
            if (!IsPostBack)
            {
                //Llenar el Combo
                LlenarCombo();
            }
        }

        protected void ddClientes_SelectedIndexChanged(object sender, EventArgs e)
        {
            //Cuando selecciona un elemento del Combo
            //Cambia el valor del componente Label lblCodigo
            lblCodigo.Text = ddClientes.SelectedValue;
        }
    }
}







viernes, 12 de mayo de 2017

Programación en HTML5, CSS3 y JavaScript: Módulo 10: Laboratorio: Código Fuente Ejemplo

DemoVideo.js


/// <reference path="jquery-3.1.1.js" />

function playVideo1() {
    //Archivo Content/EdgeF12Tools_high.mp4
}

function playVideo2() {
    //Archivo Content/TWOW219.mp4

}


DemoGeolocation.js


/// <reference path="jquery-3.1.1.js" />


function mostrarLoc(latitud, longitud) {
    console.log("Latitud y Longitud: ",
        latitud, longitud);
    $("#parLat").text(
        "Latitud: " + latitud + "°").addClass(
        "alert-success").removeClass("alert-warning");
    $("#parLong").text(
        "Longitud: " + longitud + "°").addClass(
        "alert-success").removeClass("alert-warning");
    //URL
    var xMap = "https://maps.googleapis.com/maps/api/staticmap?center="
        + latitud + "," + longitud + "&zoom=16&size=600x600&sensor=false";
    console.log(xMap);
    //Imagen
    var xImagen =
        $("<img></img>").attr("src", xMap).addClass(
        "img-circle").addClass("removerImagen");

    //Remover imagenes anteriores
    $(".removerImagen").remove();
    //Agregar Imagen al DIV
    $("#miPosicion").append(xImagen);
}

function mostrarError(codigo, mensaje) {
    console.log("Error: ", codigo, mensaje);
    $("#parLat").text(
        "Error: " + codigo + "  " + mensaje).addClass(
        "alert-warning").removeClass("alert-success");
}

function getGeoLoc() {
    //Existe el objeto navigator.geolocation
    if ("geolocation" in navigator) {
        //geolocation Disponible
        //maximumAge: Timpo máximo de antiguedad de los datos.
        //timeout: Tiempo máximo de espera por una respuesta.
        var geo_options = {
            enableHighAccuracy: true,
            maximumAge: 30000,
            timeout: 27000
        };


        navigator.geolocation.getCurrentPosition(
            function (position) {
                mostrarLoc(position.coords.latitude,
                    position.coords.longitude);
            },
            function (error) {
                mostrarError(
                error.code, error.message);
            }
            );
    } else {
        //geolocation No Disponible
        console.log("No hay información de GeoPosicionamiento");
    }
}

function demoWatch() {
    //Activar
    var watchID =
        navigator.geolocation.watchPosition(
        function (position) {
            mostrarLoc(position.coords.latitude,
                position.coords.longitude);
    });

    //Desactivar
    navigator.geolocation.clearWatch(
        watchID);

}




miércoles, 3 de mayo de 2017

Programación en HTML5, CSS3 y JavaScript: Laboratorios


Módulo 01 Laboratorio 01

Introducción a HTML y CSS
https://drive.google.com/open?id=0B7Ct7K_LTJvSXzFUSmd1SHJPVWc


Módulo 01 Laboratorio 02

Tutorial de Tema Simple con Bootstrap del sitio w3schools.com
https://www.w3schools.com/bootstrap/bootstrap_theme_me.asp

En el tutorial deben utilizar sus propias imagenes y textos de información en español.



Módulo 03 Laboratorio 01


Realizar ejercicios del 1 al 3.

https://drive.google.com/open?id=0B7Ct7K_LTJvSWndMQ0UwckFTSDg



Módulo 04 Laboratorio 01

Formularios en HTML
http://galileotalentodigital.blogspot.com/2017/05/programacion-en-html5-css3-y-javascript_17.html


Módulo 05 Laboratorio 01


jQuery DOM
http://galileotalentodigital.blogspot.com/2017/05/programacion-en-html5-css3-y-javascript_18.html



Módulo 05 Laboratorio 02


Realizar ejercicios del 4 al 8.

https://drive.google.com/open?id=0B7Ct7K_LTJvSWndMQ0UwckFTSDg




Módulo 06 Laboratorio 01

jQuery AJAX



Módulo 07 Laboratorio 01

Tutorial de Tema Company con Bootstrap del sitio w3schools.com
https://www.w3schools.com/bootstrap/bootstrap_theme_company.asp

Tutorial de Tema Band con Bootstrap del sitio w3schools.com
https://www.w3schools.com/bootstrap/bootstrap_theme_band.asp


En los tutoriales deben utilizar sus propias imagenes y textos de información en español.



Módulo 07 Laboratorio 02



A partir del Laboratorio 01 del Módulo 06, hacer las modificaciones correspondientes.

https://drive.google.com/open?id=0B7Ct7K_LTJvSRjZRcVJMc0lzZWM




Módulo 08 Laboratorio 01

Objetos en JavaScript

Solución Completa del Laboratorio

https://drive.google.com/open?id=1cNPP1TIjMGrLh2F3idLMFpybwqSARv_c


Módulo 09 Laboratorio 01

Almacenamiento Local

Instrucciones:
https://drive.google.com/open?id=0B7Ct7K_LTJvSTjJUak9OeHhuX2M

Archivos para trabajar
https://drive.google.com/open?id=0B7Ct7K_LTJvSQWxUcW44aDdDbFk



Módulo 10 Laboratorio 01


Iniciar un nuevo proyecto Categoría Web, template Web Application.

  1. La aplicación debe utilizar Empty y activar la casilla de Web Forms Reference.
  2. Agregar al proyecto los paquetes NuGet de jQuery y Bootstrap.
  3. Descargar el archivo y añadir a la carpeta Content.  https://drive.google.com/open?id=0B7Ct7K_LTJvSTUw0amFadmJYdVU
  4. Descargar el archivo y añadir a la carpeta Contenthttps://drive.google.com/open?id=0B7Ct7K_LTJvSVlpaZjdVMzlOd3M
  5. Agregar a la Carpeta Script, un archivo JavaScript de nombre DemoVideo.js
  6. Agregar a la Carpeta Script, un archivo JavaScript de nombre DemoGeolocation.js
  7. Descargar el archivo DemoGeoLocation.html, desempacar y agregar al proyecto.  https://drive.google.com/open?id=0B7Ct7K_LTJvSSmFHbG1FMWdjN3M
  8. Configurar la página de inicio (Set As Start Page).
  9. Agregar el código fuente a DemoVideo.js, para que cambie el atributo source del elemento <video> dependiendo de la selección.
  10. Agregar el código fuente a DemoGeolocation.js, ejemplo de código fuente: http://galileotalentodigital.blogspot.com/2017/05/programacion-en-html5-css3-y-javascript_12.html
  11.  


Módulo 11 Laboratorio 01

Angular 2

Instrucciones Instalación:
https://drive.google.com/open?id=0B7Ct7K_LTJvSc0xpejhzQ1VZbmM


Módulo 11 Laboratorio 02

Angular 2

Instrucciones para la Aplicación
https://drive.google.com/open?id=0B7Ct7K_LTJvSUF9QdGFyRlNNbFU



Módulo 11 Laboratorio 03

Instrucciones:
https://drive.google.com/open?id=0B7Ct7K_LTJvSMXFOMVo5XzB1MDg





Módulo 11 Laboratorio 04

Instrucciones:
https://drive.google.com/open?id=0B7Ct7K_LTJvSamp6QXJ1Q3BkNjQ





Módulo 11 Laboratorio 05

Instrucciones:
https://drive.google.com/open?id=0B7Ct7K_LTJvSNk9UbGVGM29Ld2M






Programación en HTML5, CSS3 y JavaScript: Resumen

Presentaciones


Módulo 1: Introducción a HTML
http://galileotalentodigital.blogspot.com/2016/09/programacion-en-html5-css3-y-javascript.html

Módulo 2: HTML5
http://galileotalentodigital.blogspot.com/2016/09/programacion-en-html5-css3-y-javascript_13.html

Módulo 3: JavaScript
http://galileotalentodigital.blogspot.com/2016/09/programacion-en-html5-css3-y-javascript_21.html

Módulo 4: Formularios
http://galileotalentodigital.blogspot.com/2016/09/programacion-en-html5-css3-y-javascript_14.html

Módulo 5: jQuery
http://galileotalentodigital.blogspot.com/2016/09/programacion-en-html5-css3-y-javascript_19.html

Demo ASPX - jQuery
https://drive.google.com/open?id=0B7Ct7K_LTJvSUEtzOEEzeEtlM1k

Módulo 6: Comunicación Remota (AJAX)
https://drive.google.com/open?id=0B7Ct7K_LTJvSZmxZX0hPUkxYRVE

Módulo 7: Bootstrap
https://drive.google.com/open?id=0B7Ct7K_LTJvSaWRoVjFES0xFZjQ

Código demostración
https://drive.google.com/open?id=0B7Ct7K_LTJvSMmRJY2Q2Uk52aFk

Módulo 8: Objetos en JavaScript
https://drive.google.com/open?id=0B7Ct7K_LTJvSTGlQMlRwcjEyVnM

Módulo 9: Acceso a Datos Locales y Modo Fuera de Línea
https://drive.google.com/open?id=0B7Ct7K_LTJvSTktQVWlTUE1ianc

Módulo 10: Páginas Interactivas
https://drive.google.com/open?id=0B7Ct7K_LTJvSZ3VxVmlEV19yQlU

Módulo 11: Angular 2
https://drive.google.com/open?id=0B7Ct7K_LTJvSRlg1UXFvb1FMMWs



Laboratorios


http://galileotalentodigital.blogspot.com/2017/05/programacion-en-html5-css3-y-javascript_3.html





Referencias


JavaScript Types
From https://github.com/google/closure-compiler/wiki/Types-in-the-Closure-Type-System

Google JavaScript Style Guide
From https://google.github.io/styleguide/jsguide.html

JavaScript Style Guide and Coding Conventions
https://www.w3schools.com/js/js_conventions.asp


jQuery
http://jquery.com/

jQuery API
http://api.jquery.com/

jQuery.ajax()
http://api.jquery.com/jquery.ajax/

Google Hosted Libraries
https://developers.google.com/speed/libraries/#jquery



Bootstrap

https://bootswatch.com/

https://www.bootstrapcdn.com/

http://getbootstrap.com/getting-started/

http://www.oneskyapp.com/es/docs/bootstrap/css

http://www.w3schools.com/bootstrap/default.asp

http://www.tutorialspoint.com/bootstrap/bootstrap_grid_system.htm