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







martes, 25 de abril de 2017

Programación en ASP.NET: Resumen

Contenido y Laboratorios


Módulo 01: Introducción

http://galileotalentodigital.blogspot.com/2016/08/programacion-en-aspnet-modulo-01.html


Módulo 02: ADO.NET

http://galileotalentodigital.blogspot.com/2016/08/programacion-en-aspnet-modulo-02-adonet.html

Laboratorios 6 al 8
http://galileotalentodigital.blogspot.com/2016/08/programacion-en-aspnet-modulo-02-adonet_29.html

Programación en ASP.NET: ADO.NET: Seguridad (Laboratorio 9)
http://galileotalentodigital.blogspot.com/2016/08/programacion-en-aspnet-adonet-seguridad.html

Programación en ASP.NET: ADO.NET: Ingreso de Tablas con Relación Padre - Hijo (Parent - Child, Laboratorio 11)
http://galileotalentodigital.blogspot.com/2016/08/programacion-en-aspnet-adonet-ingreso.html


Demostración DropDownList para Seleccionar Elementos
http://galileotalentodigital.blogspot.com/2017/05/aspnet-demostracion-de-dropdownlist.html



Módulo 03: MVC:  (Laboratorio 10)

http://galileotalentodigital.blogspot.com/2016/09/programacion-en-aspnet-mvc-modulo-03.html


Módulo 04: Controller

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

Módulo 04 Laboratorio 01

MVC Controller

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



Módulo 05: View

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

Módulo 05 Laboratorio 01

MVC View

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


Archivo para el Laboratorio
https://drive.google.com/open?id=0B7Ct7K_LTJvSUUdERmJheDJGNmM

Módulo 05 Laboratorio 02

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


Archivo para el Laboratorio
https://drive.google.com/open?id=0B7Ct7K_LTJvSaTVrcGVPZ295TTQ




Módulo 06: Seguridad

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

Módulo 06 Laboratorio 01

MVC Autenticación
https://drive.google.com/open?id=0B7Ct7K_LTJvSSWlJSVdmbjdfUlE


Módulo 06 Laboratorio 02


MVC Autenticación Facebook
https://drive.google.com/open?id=0B7Ct7K_LTJvSQWhUTmJ5RTNEYTg


Módulo 06 Laboratorio 03


MVC Autorización
https://drive.google.com/open?id=0B7Ct7K_LTJvSTFBVR2lMS00wbkU






Proyecto

http://galileotalentodigital.blogspot.com/2016/08/proyecto.html




Referencias


Programación en ASP.NET: Referencias
http://galileotalentodigital.blogspot.com/2016/07/programacion-en-aspnet-referencias.html

Programación en ASP.NET: Libros
http://galileotalentodigital.blogspot.com/2016/07/programacion-en-aspnet-libros.html

Retrieving and Modifying Data in ADO.NET
https://msdn.microsoft.com/en-us/library/ms254937(v=vs.110).aspx


Programación en ASP.NET: ListView
http://galileotalentodigital.blogspot.com/2016/07/programacion-en-aspnet-listview_23.html

Programación en ASP.NET: Data List
http://galileotalentodigital.blogspot.com/2016/07/programacion-en-aspnet-data-list.html

Programación en ASP.NET: GridView
http://galileotalentodigital.blogspot.com/2016/07/programacion-en-aspnet-gridview.html

Programación en ASP.NET: Controles: GridView, FormView, DataList
http://galileotalentodigital.blogspot.com/2016/07/programacion-en-aspnet-controles.html







jueves, 20 de abril de 2017

Pro C#: Módulo 03: Código Fuente: Estructura EmpleadoEstatico


Código Fuente de Ejemplo

EmpleadoEstatico.cs


    /// <summary>
    /// Estructura para Empleados
    /// </summary>
    public struct EmpleadoEstatico
    {
        private string Temporal; //Campo Privado
        //Propiedad Automática
        public string Apellido { get; set; }

        private string mNombre;

        //Propiedad Codificada
        /// <summary>
        /// Propiedad Nombre
        /// </summary>
        public string Nombre
        {
            get { return mNombre; }
            set { mNombre = value; }
        }

        public DateTime FechaNacimiento { get; set; }

       
        private int mEdad2;

        public int Edad2
        {
            get
            {
                mEdad2 = (int)
                    (Now.Subtract(FechaNacimiento).TotalDays / 365.25);
                return mEdad2;
            }          
        }

        /// <summary>
        /// Método que devuelva la Edad del
        /// Empleado
        /// </summary>
        /// <returns>int positivo</returns>
        public int Edad()
        {
            int mEdad = 0;
            mEdad = (int)
                (Now.Subtract(FechaNacimiento).TotalDays / 365.25f);
            return mEdad;
        }

        /// <summary>
        /// Inicializa la estructura y asigna el Apellido
        /// </summary>
        /// <param name="Apellido"></param>
        public EmpleadoEstatico(string Apellido)
        {
            Temporal = "";
            mEdad2 = 0;
            FechaNacimiento = Now;
            this.Apellido = Apellido;
            mNombre = "N/D";
            //Nombre = "N/D";
        }

        /// <summary>
        /// Inicializa la estructura
        /// Asigna Apellido y Nombre
        /// </summary>
        /// <param name="Apellido"></param>
        /// <param name="Nombre"></param>
        public EmpleadoEstatico(string Apellido,
            string Nombre)
        {
            Temporal = "";
            mEdad2 = 0;
            FechaNacimiento = Now;
            this.Apellido = Apellido;
            mNombre = Nombre;
        }

    }



Program.cs


    class Program
    {
        static void Main(string[] args)

        {
            EmpleadoEstatico Emp1;
            Emp1 = new EmpleadoEstatico();
            Emp1.Apellido = "Ape 1";
            Emp1.FechaNacimiento = new DateTime(1990, 4, 20);
            Console.WriteLine(
                $"Método: {Emp1.Edad()}");
            Console.WriteLine(
                $"Propiedad: {Emp1.Edad2}");

            EmpleadoEstatico Emp2, Emp3;
            Emp2 = new EmpleadoEstatico("Ape 2");
            Emp3 = new EmpleadoEstatico(
                Nombre: "Nombre 3", Apellido: "Ape 3");
           
        }

    }