viernes, 23 de octubre de 2020

Minimizar javascript y css con Visual Studio 2019

 

Parte importante del desarrollo de aplicaciones web es el css y el javascript. Cuando ya tenemos listo nuestro código de javascript y css es una buena práctica comprimir este código o minimizar su tamaño para la distribución del sitio web.

Con Visual Studio tenemos diferentes técnicas para hacer este tipo de tareas. Podemos usar webpack, gulp, etc. Sin embargo, hoy vamos a ver una herramienta muy simple que podemos utilizar para comprimir nuestros scripts y css.

Cuando creamos nuestro proyecto web debemos de instalar con Nuget la siguiente librería:


BuildBundleMinifier. Con esta librería vamos a poder minimizar nuestros scripts. Cuando esta instalado debemos crear un archivo en la ruta del proyecto llamado bundleconfig.json


Ejemplo de como luce el documento de configuración

[

  {

    "outputFileName": "output/site.min.css",

    "inputFiles": [

      " output/site.css

    ],

    "minify": {

        "enabled": true,

        "commentMode": "all"

    }

  },

  {

    "outputFileName": "output/site.js",

    "inputFiles": [

      " output/site.js"

    ]

  }

]

 

Se puede hacer otro tipo de configuraciones. Esta es como la simple. Lo importante es que cada vez que guardamos el javasctipt o el css automáticamente se dispara la tarea de minimizar los archivos.

Con esto no tenemos que preocuparnos por estar minimizando nuestro código ni corriendo tareas. Es fácil y muy rápido a la hora de comprimir el código.

Sitio de la Librería https://github.com/madskristensen/BundlerMinifier

Etiquetas: , , , ,

martes, 13 de agosto de 2019

Publicar un sitio web en Azure usando Visual Studio 2019


Con Azure podemos publicar sitios web pequeños sin costo si no es problema usar los URLs que da Azure. En caso de que queramos agregar un nombre de dominio ya tendríamos que pagar, pero se pueden usar para hacer pruebas o si no es problema usar un dominio de Azure podemos dejarlos así de manera gratuita.

Lo primero que vamos a hacer es crear un proyecto nuevo de tipo Razor MVC en Visual Studio 2019 (si no saben cómo hacer uno, pueden ver este blog)

Cuando ya tenemos listo con el proyecto debemos ir al portal de Azure usando nuestras credenciales.
Dentro del portal de Azure vamos a buscar la opción App Services para poder crear nuestro sitio web.

Se puede usar el campo de texto para buscar también esta opción.

Cuando damos clic vamos a ver otra venta con las opciones para crear nuestro sitio web.

Lo siguiente es dar clic al botón de Add

Luego del botón add vamos a ver la siguiente ventana

Aquí debemos seleccionar el runtime que deseamos correr, la región, el nombre de nuestro sitio web y podemos seleccionar que el plan es gratis para no tener que pagar por este sitio web. Ahora solo debemos esperar un momento que nuestro sitio web se termine de construir.

Cuando nuestro sitio web esté listo vamos a dar clic sobre el para ir a ver sus propiedades.

Dentro de las propiedades del sitio web vamos a poder el siguiente menú de opciones. En este punto lo que tenemos que hacer es dar clic al botón Get publish profile, lo que nos permite descargar un archivo de configuración para poder crear el perfil de publicación en VS2019.

Cuando se termine la descarga nos tenemos que dirigir a VS2019. Sobre nuestro proyecto vamos a dar clic derecho y buscamos la opción de Publish.

Con lo que podremos ver la siguiente ventana. En este punto debemos dar clic sobre el botón import Profile y simplemente buscamos el archivo que descargamos de Azure para poder publicar nuestro sitio web.

Finalmente, aparecerá una ventana con la opción de publicar

Simplemente dando clic al botón de Publish y esperar que el proceso termine podremos ver nuestro sitio web publicado en Azure, listo para ser utilizado.






Etiquetas: , , , , ,

viernes, 9 de agosto de 2019

Visual Studio 2019 – Crear Proyecto de Web MVC


Para hacer un proyecto web usando VS2019 podemos utilizar la versión gratuita con la que no vamos a tener ningún problema y se puede desarrollar todo tipo de proyecto.

Al momento de abrir VS2019 vamos a ver la siguiente ventana


Al lado izquierdo vamos a tener los proyectos recientes en los que hemos trabajado y al lado derecho las opciones para crear o descargar proyectos con lo que deseamos trabajar. Para este ejemplo vamos a dar clic al botón de “Create a new project” para iniciar nuestro proyecto web.

Después de esto vamos a ver la siguiente ventana


Ahora debemos dar clic sobre el tipo de proyecto que dice ASP.Net Core Web Application. Con esta opción seleccionado ya podemos dar clic al botón de next.


En este momento debemos de darle el nombre al proyecto que deseamos desarrollar. Además, de seleccionar el folder donde vamos a guardar nuestro nuevo proyecto.

Ya estamos listos para dar clic al botón de Create.

La siguiente ventana que vamos a ver seria esta


En esta ventana vamos a poder seleccionar la versión del .Net Core que queremos utilizar para correr nuestra aplicación, entre otros formatos que le podemos dar. En este caso vamos a seleccionar el que dice Web Applciation (Model-View-Controller). Finalmente, damos clic al botón Create. Ahora esperamos que VS2019 termine de construir nuestro proyecto.


Cuando este proceso termina ya estamos listos para trabajar en nuestra nueva aplicación web.


Otros artículos que pueden ser de su interés

Etiquetas: , , , , , , , ,

jueves, 4 de julio de 2019

Trabajo colaborativo con Visual Studio 2019


Ya era necesario una herramienta tan interesante como el live share de Visual Studio 2019. Es simplemente increíble.

Esta herramienta nos permite compartir nuestra solución entre compañeros de manera remota y de una manera sumamente simple. Esta herramienta nos permite compartir nuestra solución, pero no es nada más enviar el código a otros, esto nos permite trabajar en la misma solución al mismo tiempo. 

Podemos ver los cambios mientras están ocurriendo y quien esta haciendo los cambios.

Hace unos días lo intentamos entre 4 compañeros y funciono muy bien sin problemas. Y cuando uno corre la solución también se ejecuta donde los otros que están viendo la solución.

Para poder usar esta herramienta ocupamos Visual Studio 2019 o Visual Studio Code. En mi caso usamos Visual Studio 2019.

En la esquina superior derecha vamos a ver la nueva opción

Debemos de dar clic al botón y con esto vamos a tener una serie de opciones.

Si no les sale de una vez la siguiente pantalla pueden dar clic al botón que dice More Info en el siguiente banner.


Ahora si para poder compartir nuestra solución debemos compartir este link con las personas que van a ver mi solución. La otra opción es directamente sobre el banner dar clic al botón de Copy Again. Pasamos el link y ya casi estamos listos para compartir nuestra solución.

Ahora si la persona que va a trabajar con nosotros debe abrir en el browser el link con lo que va a poder ver una pantalla como esta 

Y en este punto debe seleccionar si quiere abrir la solución con Visual Studio Code o con Visual Studio 2019.

De esta manera se abre la solución a las personas que van a colaborar con mi proyecto.

Finalmente, para terminar la sesión solamente vamos nuevamente al menú de la parte superior de la derecha y damos clic en End Live Share Session



Etiquetas: , , , ,

martes, 18 de junio de 2019

Devintersection Jueves 13 junio 2019


Jueves 13 de junio del 2019 ultimo día de la conferencia dev intersection. Realmente fue super interesante todo lo que vimos en tan corto tiempo

Key Note
Con Brad Green



Iniciamos con un key note sobre angular con las nuevas herramientas que tiene y la gran cantidad de aplicaciones que se han desarrollado con esta tecnología. Es simplemente increíble. Cosas super interesantes el comando de ng update en el CLI que nos permite actualizar la aplicación de una manera fácil y sin que tengamos que hacer nada. Esto permite fácilmente la continuidad de nuestra aplicación con una migración limpia y simple.

Otra característica muy importante es que la nueva versión de angular 8 permite crear aplicaciones más pequeñas. Haciendo que se carguen más rápido para el usuario.

El framework es un OpenSource que vive en github el cual el equipo de Google lo clona a G3 antes de trabajar en las nuevas versiones, en este punto se hacen todas las pruebas necesarias para que la versión que liberen este en las mejores condiciones para producción.

Ya esta por salir la versión Angular 9 con muchas nuevas características para que las apps sean mejores.

Increase your .net productivity and streamline Azure development with Visual Studio 2019
Con Allison Buchholtz y Kendra Havens


Cosas que están saliendo nuevas para el VS2019 son refactor en los ciclos de foreach para mejorar estas estructuras.

Los if son otras estructuras con las que están implementando mejoras.

Las interfaces vienen con mejoras para fácilmente mover propiedades de una clase a una interfaz. Además, si esta no existe se crea de manera automática.

Las expresiones regulares vienen con colores nuevos para poder visualizarlas con mayor facilidad. Con esto se pueden evaluar las expresiones regulares y mostrar posibles errores.

Vienen nuevas características como la capacidad de editar el archivo de configuración más fácil, se puede agregar validaciones de compilación propias como en que orden se quieren crear las clases. Por ejemplo, abstract public class.

Con más y nuevos colores para la sintaxis. Además de nuevas opciones para unit testing.

Cognitive services - Machine Learning for developers
Chris Noring



Con los servicios de machine learning de Azure cualquier desarrollador puede crear aplicaciones con implementaciones de ML.

Por medio de servicios de Rest podemos crear ejecutar las tareas de ML y obtener una respuesta. Existen algunos límites para uso gratuito, pero sigue siendo más cómodo usar estos servicios que desarrollarlos, buscar el equipo de especialistas, hospedar los servicios, etc.

Podemos usar los servicios tal cual están, pero si se requiere de algunas cosas diferentes se pueden mejorar por nosotros mismos. Lo primero que debemos hacer es tratar de ver si lo que ya tenemos nos funciona y usarlo ya después si requerimos algo más se pueden adaptar.

Key note
John Papa

En el Keynote final lo que podemos rescatar es que tenemos herramientas para trabajar de manera colaborativa con VS2019 y trabajar dos o mas al mismo tiempo sobre el mismo archivo.

Todas las herramientas de git están integradas con VS2019 y permite hacer todas las tareas desde el IDE.

Y finalmente super importante es que se requieren muchos especialistas en el área de IA. Al parecer un campo que no requiere de mucha preparación si la persona es desarrolladora. Conocimiento que se puede aprender fácilmente. Esperando que el futuro sea Quantum Computer….

¿Quieres aprender java y C#?

Etiquetas: , , , , , ,

lunes, 11 de marzo de 2019

Visual Studio git y Netbeans 10


Cuando hacemos trabajo colaborativo lo mejor es poder usar un buen sistema para el control de versiones y ahora Git es muy popular y muy eficiente para hacer este trabajo. Lo mejor es que podemos hacer cambios entre varios programadores sin hacer un desastre.

Una opción es usar visualstudio.com donde tenemos una versión de Git que podemos usar de manera gratuita. Tiene algunas limitaciones como el numero de colaborares que pueden trabajar usando la versión gratuita. Pero tenemos muchas diferentes opciones para organizar nuestros proyectos y códigos.

Lo primero que vamos hacer es crear una cuenta en visualstudio.com. Para tener acceso a las herramientas de versión de controles. Después de crear nuestro usuario vamos a ingresar a la plataforma.

En la página de inicio vamos a crear una nueva organización y un nuevo proyecto

Luego vamos a crear un repositorio nuevo para almacenar y manejar nuestro código.

Vamos a dar clic al botón de clone repository y copiamos el link que tenemos en la opción de https.
Ahora nos vamos a Netbeans 10 y después de esto nos vamos al menú de Team, después al de Git.

Cuando le damos clic al botón de Clone vamos a ver el siguiente menú

Donde vamos a tener que copiar el URL que encontramos en visualstudio.com, el correo y el password con del repositorio.

En la parte que dice clone into vamos a buscar en que parte de nuestra maquina queremos clonar el proyecto.

Y ya con esto estamos listos para trabajar con Git en Netbeans 10.

Sobre el proyecto clonado si le damos clic derecho vamos a poder ver las opciones para los comandos de Git.

Etiquetas: , ,

lunes, 25 de febrero de 2019

¿Como migrar datos y estructura para bases de datos de SQL Server?


En muchas ocasiones nos toca migrar datos de una base de datos a otra de SQL server, comprar datos o estructura entre diferentes datos. Hay muchas herramientas muy buenas para hacer esta tarea sin embarga muchas tienen un alto costo.

Hace ya varios años que he utilizados las herramientas de Visual Studio para hacer esta tarea. Se puede hacer con bases de datos locales o también para migrar datos a la nube. Con un detalle que son gratuitas si ya se cuenta con el Visual Studio. De igualmente, estas vienen con la versión gratuita de VS.

Lo primero que tenemos que hacer es abrir el VS y vamos al menú de Tools

Debemos buscar las herramientas que dicen SQL Server. En este punto vamos a poder hacer la migración, comparación de datos y la comparación de la estructura.

Lo primero que vamos hacer es dar clic al botón de “New Data Comparison” esta opción nos permite compara los datos de todas las tablas o algunas para poder hacer la migración de datos o actualizar lo que se necesita.

Después de esto vamos a ver la siguiente venta

Donde vamos a poder seleccionar la base de datos de origen que serial la de la izquierda y luego la base de datos de destinos donde queremos actualizar los datos que serian los de la derecha. Si vemos los check boxes de la izquierda podemos cambiar algunas opciones para ver el nivel de comparación de datos que deseamos visualizar.
  • Pprimero nos permite ver los datos que son diferentes y podemos actualizar en la base de datos de destino
  • El segundo cuales datos están únicamente en el destino y podemos insertar en la base de datos de destino
  • El tercero nos muestra los datos que existen únicamente en la base de datos de destino y podemos borrar
  •  Y la ultima opciones es para ver los datos que son iguales en las dos bases de datos 

Cuando tenemos las dos bases de datos seleccionadas debemos de dar clic al botón de siguiente.

Después de esto vamos a ver una pantalla que nos permite seleccionar cuales son las tablas que deseamos sincronizar. Podemos seleccionar todas o únicamente la que requerimos.

Damos clic en finalizar y el proceso inicia la comparación de todas las tablas seleccionadas. Cuando el proceso termina vamos a ver el resultado para cada uno de las categorías o los check boxes que seleccionamos.

Vamos a poder ver un botón en la parte superior que dice “Update Target” con el que podemos sincronizar los datos.

Ahora también podemos navegar por los datos para seleccionar únicamente lo que deseamos sincronizar.

Para poder comparar y sincronizar la estructura debemos ir a la opción que dice “New Schema Comparison”

Con esto vamos poder ver la estructura de las dos bases de datos y hacer los cambios necesarios. En la siguiente ventana solamente debemos seleccionar la base de datos de origen y la base de datos de destino. Con esto estamos listos para verificar la estructura de la base de datos.


Etiquetas: , ,