martes, 17 de enero de 2017

Un nuevo comienzo con ANGULAR 2

PRIMERA APP EN 10 PASOS

1. Instalar Node.js
     Para utilizar su gestor de paquetes npm.
     Url para la instalación: https://nodejs.org/en/download/


2. Crear un directorio para proyecto Angular, donde se servirá la aplicación

mkdir angular2
cd    angular2

También lo podemos crear la carpeta como siempre desde windows


3. Crear el fichero tsconfig.json 

     Este fichero es la configuración para el compilador de TypeScript:
{
    "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}


4. Añadimos el fichero typings.json

Para que TypeScript funcione correctamente:

{
  "ambientDependencies": {
    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
  }
}


5. Creamos el fichero package.json

Lo añadimos a la raíz del proyecto, nos sirve para definir las dependencias necesarias del proyecto para que el gestor de paquetes de node las gestione e instale lo necesario:

{
  "name": "angular2-prueba",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "typings": "typings",
    "postinstall": "typings install"
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.14",
    "systemjs": "0.19.25",
    "es6-shim": "^0.35.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.2",
    "zone.js": "0.6.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.9",
    "typings":"^0.7.12"
  }
}


6. Instalamos las dependencias en el proyecto

npm install
7. Creamos nuestro primer componente
Para ello creamos un nuevo subdirectorio dentro del principal:

mkdir app
cd    app
Creamos un archivo llamado app.component.ts:

// Importar el núcleo de Angular
import {Component} from 'angular2/core';
// Decorador component, indicamos en que etiqueta se va a cargar la plantilla
@Component({
    selector: 'my-app',
    template: 'Primera Prueba con Angular 2'
})
// Clase del componente donde iran los datos y funcionalidades
export class AppComponent { }


8. Creamos el main.ts dentro del directorio app

Se encarga de lanzar el framework al cargar la página:

import {bootstrap}    from 'angular2/platform/browser';
import {AppComponent} from './app.component';
bootstrap(AppComponent);


9. Creamos index.html en el directorio raíz

<html>
  <head>
    <title>Angular 2 - Hola mundo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
   
   
    <script src="node_modules/es6-shim/es6-shim.min.js"></script>
    <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
    <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>  
    <script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="node_modules/rxjs/bundles/Rx.js"></script>
    <script src="node_modules/angular2/bundles/angular2.dev.js"></script>
   
    <script>
      System.config({
        packages: {      
          app: {
            format: 'register',
            defaultExtension: 'js'
          }
        }
      });
      System.import('app/main')
            .then(null, console.error.bind(console));
    </script>
  </head>
 
  <body>
    <my-app>Cargando...</my-app>
  </body>
</html>


10. Compilamos y lanamos la aplicación.

npm start
El compilador de Typescript revisa los cambios en el código para compilarlo y lite-server cargará index.html refrescando los cambios, por lo que para ver los cambios realizados no tenemos que estar refrescando la página.
Podemos entrar con http://localhost:3000/ que carga lite-server o accediendo directamente al directorio donde esté guardado el proyecto.
Fuentes:
1.https://angularjs.org/ 2. http://victorroblesweb.es/2016/04/11/instalar-angular-2-hola-mundo/3. http://www.aprende-facilmente.com/angular-2/tutorial-de-angular-2-parte-1/

viernes, 13 de enero de 2017

Java en la web. ¿Que necesitamos para empezar?

Actualizando conocimientos en JAVA para desarrollar aplicaciones WEB.




¿Que queremos hacer?
Queremos desarrollar nuestra propia aplicación web.

¿Cómo lo podemos hacer?
Existen multitud de lenguajes de programación y framewors, por lo que tenemos que tener claro que queremos hacer y que necesidades tenemos. En mi caso el desarrollo será básado en el MVC, si buscamos información también veremos que existen multitud de opciones, nos decantamos por JAVA con ANGULAR 2 por múltiples razones que no voy a citar ahora mismo, pero nos podríamos haber decantado por ejemplo por .NET con ANGULAR o cualquier otra tecnología básada en PHP....

¿Que necesitamos?

Lenguajes de programación:
1. HTML (Lenguaje en que se escriben la páginas web)
2. CSS (Estilos)
3. Javascript. En nuestro caso intentaremos utilizar ANGULAR como framework y en algún caso quizá se necesite JQUERY
4. JSP (Forma de enlazar HTML con script de JAVA)
5. AJAX (Para no hacer refrescos de página en cada acción que se realice)
6. JAVA (Lenguaje Orientado a Objetos)
7. SPRING (O cualquier otro framework)
8. MAVEN
9. SQL para la creación de una BBDD

Los lenguajes de programación pueden ser otros y los framewors también, pero es una opción tan válida como otra la que se propone. Conjugando todo lo anterior se pueden hacer webs muy potentes y dinámicas, además nos permite separar el negocio de la presentación para seguir la arquitectura a tres capas.

Servidor de aplicaciones
Por ejemplo APACHE

Servidor de BBDD
Por ejemplo MySQL, además hace falta un cliente, por ejemplo myAdmin

IDE para el desarrollo de la aplicación.
Netbeans, Eclipse, JCreator, JBuilder…
En este sentido de momento me decanto por Eclipse que es tan válido como cualquier otro.

Enlaces que pueden ser interesantes:

  1. Empezando con angular
  2. Tutorial: Creación de proyecto MAVEN con ECLIPSE



jueves, 4 de abril de 2013

Diseño adaptativo :: Responsive web design

Intentando mejorar como siempre y buscando cual es la mejor forma de hacer las cosas nos podemos encontrar con artículos como este que nos pueden servir de ayuda para a la hora de plantear nuevos diseños.

Dejo dos URLs que como se puede ver se trata del mismo artículo de Katrien De Graeve uno en español y otro en inglés en que se nos explica en que consiste el "Responsive web design":

  • http://www.desarrolloweb.com/articulos/diseno-web-adaptativo.html
  • http://msdn.microsoft.com/en-us/magazine/hh653584.aspx


Funcionamiento de RSS

Fantástica web donde nos explican que es RSS, cómo puedo leer un RSS, cómo puedo suscribirme a un canal RSS y otros aspectos básicos.

http://www.rss.nom.es

miércoles, 20 de julio de 2011

Video-tutorial de como dibujar en Illustrator CS5

Muy buen vídeo de como vectorizar y colorear una imagen con Illustrator por cortesía de Diego Verástegui.



También recomiendo este tutorial:
http://www.neoteo.com/tutorial-como-vectorizar-una-imagen-con-adobe

martes, 19 de julio de 2011

martes, 14 de junio de 2011

el50

Blog de un diseñador gráfico de México, con contenidos de música, Internet, diseño, juegos y muchas otras cosas.

Es un blog muy interesante y lo recomiendo a todos los que estén interesados en diseño.


http://el50.com

viernes, 3 de junio de 2011

Por las montañas. Andorra

Autor: Ambrosio Morales Jiménez

Dejo esta fotografía con esta espectacular vista de mi viaje a Andorra. Fue una experiencia que mereció la pena. La fotografía fue tomada en pleno més de Julio aunque parece primavera

lunes, 18 de abril de 2011

Las Lagunas de Ruidera se abren a "Naturaleza sin barreras"



Varias asociaciones de discapacitados han podido visitar las Lagunas de Ruidera gracias a este programa.

Lo mejor del video es sin duda ver hablar a nuestro amigo Yogui. ¡Sigue aprendiendo!

Ver Noticia