Sábado, 05 Marzo 2016 00:00

Empezando con Bower y creando un proyecto HTML5 en netbeans

Escrito por 
Valora este artículo
(0 votos)

Volviendo al  ruedo con los post en este 2016,  crearemos un proyecto "Front end"  en Netbeans 8.0.2,  que utilice  las librerias de Angular y Bootstrap, las cuales descargaremos con la Bower.

 

Que es bower

Bower es una aplicacion que nos permite gestionar los paquetes o librerias que usara nuestros proyectos, siempre y cuando estas sean open source. Antes de existir este tipos de herramientas, si queriamos usar Angular por ej. se las debia descargar  y ubicarlas  en nuestro proyecto directamente, cosa que no esta mal... quizas para proyectos chicos no sea nada complejo manejarlo de esta forma (yo alguna veces lo sigo haciendo asi), pero si estamos en proyectos complejos, en donde necesitamos  muchas librerias  con distintas versiones, o si creamos  una libreria y nesecitamos distribuirla de manera correcta, bower aparece para hacernos la tarea  mas ordenada.

Los que  programan en java pueden hacer una analogia con Maven, entonces  las principales bondades de bower seran

  • Administrar dependencias, osea si mi proyecto usa jquery o angular o los dos,  habra un archivo que declare que  para que mi aplicacion corra nesecita de tales librerias con una determiada version por dependencia.
  • Migrar un proyecto sin dependencias, y luego  mediante la ejecucion de un archivo de configuracion descargarlas a todas automaticamente

Manos a la obra

Antes que nada debemos tener instalado Node JS para poder  instalar bower (no entraremos en detalles de instalacion de Node JS), podemos descargarlo y encontrar la documentacion en  la  web oficial https://nodejs.org/en/.

Una vez instalado Node JS abriremos una consola  e instalamos Bower, a travez de npm

En windows o linux

1
npm install -g bower

Bien ya tenemos intalado bower, ahora veremos  los principales comandos

Antes que nada crearemos  un directorio  que es en donde se alojara nuestro proyecto, y nos ubicamos en la raiz del mismo,  yo lo hare por consola,ustedes pueden hacer lo mismo  o bien utilizar la interfaz grafica del s.o.

En windows o linux

1
mkdir proyectoBower

En la raiz del proyecto nesecitamos de dos archivos, uno necesario  y el otro opcional

bower.json

Este archivo es nesesario,  tendra un contenido en formato JSON, con alas siguiente lienas como minimo

1
2
3
4
5
6
7
{
    "name": "proyectoBower",
    "version": "0.0.1",
    "dependencies": {
       
    }
}

En donde  figura el nombre del proyecto, la version, y las dependencias, en este caso no tiene ninguna

Otra forma de hacerlo atomaticamente es mediante el comando 

1
bower init

Este comando es  un wizard  para crear el bower.json, nos hara varias preguntas, las cuales representan la informacion que contendra el archivo bower.json, yo solo complete

-nombre del proyecto

-autor

Luego a las demas preguntas (debido a los fines del tutorial) le di enter, entonces mi archivo quedo asi

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
  "name": "proyectoBower",
  "authors": [
    "Rafael Ramos <Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.>"
  ],
  "description": "Proyecto fron end",
  "main": "",
  "moduleType": [],
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ]
}

.bowerrc

Este archivo es opcional, en  este caso solo lo utilizaremos para configurar el directorio en donde se descargaran  nuestras librerias,  este archivo al igual que el anterior tendra tambien  un formato JSON

1
2
3
{
  "directory": "js"
}

Por defecto ni no inluimos este archivo con esas lineas, bower creara automaticamente el directorio bower-components y ahi descargara todo. Para redondear tendremos la siguiente estructura

/proyectoBower

             |_ bower.json

             |_ .bowerrc  

Con lo explicado anteriormente es lo basico para empezar a utilizar bower.

Buscando la libreria

En primer lugar buscaremos el framewrok MVC Angular para java script

En windows o linux

1
bower search angular

Nos aparecera los  siguientes resultados

Entra tantas que nos encontro vemos que esta la primera que es la de Angular que es la que nesecitamos, o por ejemplo tambien esta la de angular-bootstrap pero no descargaremos esta. Si ya detectamos cual libreria o framewrok utilizaremos, podemos obtener  informacion sobre ella, lo hacemos mediante el comando

En windows o linux

1
bower info angular

Este comando nos mostrara lo siguiente

La imagen anterior muestra la ejecucion del comando (sobre windows, en linux es igual), nos muestra los siguientes valores

  1. name : nombre de la libreria/paquete/framework
  2. version: version de la libreria/paquete/framework
  3. license : lecencia de la libreria/paquete/framework
  4. main: nombre del archivo principal
  5. ignore: direcotrios o archivos ignorados
  6. dependencies: dependencias de la cual hace uso la libreria/paquete/framework.
  7. homepage: Pagina oficial

Cabe acotar que esta informacion es extraida de un archivo bower.json.

Debemos analizar la informacion y elegir cual version utilizaremos, procedemos a instalar la  libreria indicando al version de la siguente manera

En windows o linux

1
bower install angular#1.5.0

Nos fijamos que en el comando  esta el nombre de la libreria/paquete/framework separada mediante un luego sigue la version, una opcion muy util al comando seria agregarle --save,  esto nos escribira la dependencia en el archivo bower.json

En windows o linux

1
bower install angular#1.5.0 --save

quedando nuestro bower.json como sigue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
  "name": "proyectoBower",
  "authors": [
    "Rafael Ramos <Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.>"
  ],
  "description": "Proyecto fron end",
  "main": "",
  "moduleType": [],
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "1.5.0"
  }
}

Vemos que se nos agrego la dependencia de angular con su correpondiente version, cabe alclarar que podemos modificar directamente este archivo bower.json y luego ejecutar el comando 

1
bower install 

si vemos nuestra estructura del proyecto tendremos lo siguiente

proyectoBower/

             |_ js/

                     |_angular/

             |_ bower.json

             |_ .bowerrc  

y dentro del directorio angular todos nuestros archivos necesarios.

De la misma manera descargaremos bootrap

1
bower search bootstrap

Detectamos la libreria css correcta  y  mostramos su informacion 

A diferencia del framework angular vemos que tiene dependencia de jquery 

Procedemos a instalar la version 3.3.5

1
bower install bootstrap#3.3.5 --save

Ahora nuestro archivo bower.json  se le agrego otra dependencia

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "name": "proyectoBower",
  "authors": [
    "Rafael Ramos <Esta dirección de correo electrónico está siendo protegida contra los robots de spam. Necesita tener JavaScript habilitado para poder verlo.>"
  ],
  "description": "Proyecto fron end",
  "main": "",
  "moduleType": [],
  "license": "MIT",
  "homepage": "",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "angular": "1.5.0",
    "bootstrap": "3.3.50"
  }
}

proyectoBower/

             |_ js/

                     |_angular/

                     |_bootstrap/

             |_ bower.scon

             |_ .bowerrc  

Dentro de bootstrap estaran  todos los archivos de bootstrap, dentro de este directorio quizas solo nos haga falta el directorio dist, a los demas archivos demomento para el desarrollo lo podemos eliminar, o bien incorporar  en el atributo ignore dentro del archivo bower.json, para que estos no se descarguen.

Para finalizar desde nuestro ide Netbeans podemos crear una aplicacion HTML5 con codigo existente

Luego elegimos la ubicacion de nuestro proyecto , en este caso el directorio proyectoBower

Le damos en finish y esta sera la estructura

Con esto estamos listos para empezar a codificar haciendo uso de estas librerias, alguno dira pero me conviene descargar la libreria y ponerla directamente al proyecto, pues no estan muy errados, repito que  es mas nesesario cuando encaramos proyectos muy  complejos con mucha librerias, y luego tenemos que distribuirlos. Imaginense que como profesionales del desarrollo deben pasar el codigo a otras personas,  si estas personas conocen bower, una de las primeras cosas que haran sera mirar el bower.json  en el caso de que tengan dudas de las dependencias de las que cuenta el proyecto, sion deberian ver el nombre de los archivos, y sino hasta abrirlos para ver si figura la version por ejemplo,  esto es de mucha ayuda y uds. como profesionales quedan  bien vistos porque entregan codigo con estandares usados por la gran mayoria actualmente.

 

 

Visto 3051 veces Modificado por última vez en Sábado, 05 Marzo 2016 20:08

32 comentarios

  • Enlace al Comentario Katie Martes, 13 Febrero 2018 21:57 publicado por Katie

    latina mature porn jenifer lopez sex tape free sex chats sex stories percy jackson and athena grany sex sloppy
    seconds watsky female singer live lesbian sex safe sex facts
    sex on beach drink mix male sex kitten programming sex
    photo best porn actress spycam porn salma hayek sex tape military sexual trauma statistics
    webcam porn videos rola misaki porn what age do men stop having sex self sex side effects for females gay porn bloopers sex workers outreach project funny sex
    jokes with photos sex and the single mom youtube how to have great sex on wedding night real estate sexsmith questions about love sex and relationships extra small porn sex stores in panama city florida big
    butt gay porn brown bunny sex scene too much
    sex can cause fever slave leia porn cat sexting
    star wars sexuality gay otter porn hamster sex live sex cams free
    real brother sister sex free petite porn caught jerking off porn best sex position for cancer and pisces sex function improve sex by
    the pool man has sex change operation godzilla porn sex mascara free xnxx porn full sexting conversation with
    pictures slut sex cheerleader forced sex male sex drive
    pills uk

  • Enlace al Comentario Enriqueta Martes, 13 Febrero 2018 19:47 publicado por Enriqueta

    plan cul a lille plan cul gratuit sur lyon plan cul bas rhin plan cul gironde plan cul vitre plan cul
    saint fargeau ponthierry plan cul saint cyprien plan cul
    gratuit nantes videos plan cul comment obtenir un plan cul cherche plan cul plan cul 67 plan cul toul plan cul loir
    et cher plan cul gap plan cul nimes plan cul saint martin boulogne plan cul vitry le francois plan cul petit
    bourg sites de plan cul plan cul montrouge chat gratuit plan cul plan cul baise plan cul seyssinet pariset plan cul saint pierre
    des corps plan cul soir plan cul hotel plan cul la courneuve
    plan cul indre et loire plan cul les sables d'olonne plan cul 14 plan cul antony chat plan cul gratuit histoire
    plan cul plan cul sur nice plan cul femme cougar site de rencontre
    pour plan cul gratuit plan cul trav plan cul montpellier plan cul saint egreve plan cul 83 plan cul vertou plan cul gratuit paris plan cul isere plan cul le chambon feugerolles plan cul 18 ans plan cul lille plan cul cotes d armor plan cul villemomble plan cul
    pour ce soir plan cul somain

  • Enlace al Comentario Lloyd Martes, 13 Febrero 2018 19:44 publicado por Lloyd

    nine of wands tarot meaning free online tarot and horoscope reading tarot solitaire the
    magician tarot love past aries horoscope tarot love tarot card swords in back gemini love tarot
    reading justice in tarot 10 of cups tarot career justice in tarot scorpio weekly tarot horoscope dark grimoire tarot death queen tarot card meaning
    free tarot question answered how to read celtic tarot spread sacred geometry tarot texting tarot readers two pages tarot knight of swords reversed tarot meaning tarot card six of
    cups free tarot accurate reading free tarot apps for android meaning
    three queens tarot reading physical death in tarot tarot card design your own horoscope by tarot card meaning of the
    fool tarot card tarot deck candle catbird spanish tarot meanings tarot card holder
    justice tarot card love relationships astro tarot tarot
    card readinf 7 card tarot reading tarot card three of cups daily love tarot card reading
    easy to read tarot decks tarot cars vampyre tarot card meanings best tarot apps free
    online tarot answers 3 cups tarot meaning love the magician tarot
    love past tarot how to read 5th tarot card major arcana tarot 8 swords relationship chariot meaning tarot free tarot deck printable two of swords tarot health crowley tarot
    deck online spiritual guidance tarot spread

  • Enlace al Comentario Deangelo Martes, 13 Febrero 2018 19:18 publicado por Deangelo

    signe astrologique en aout compatibilite signe astrologique gay ne le
    17 novembre quel signe astrologique test quel signe astrologique est
    fait pour moi signe astrologique du 25 janvier astrologie chinoise singe signe astrologique date
    et heure de naissance quel est le signe zodiaque du mois d'avril signe astrologique date 21 juin astrologie noir du poisson signes astrologiques chinois
    signification 5 octobre signe zodiaque vierge
    signe astrologique astrologie amoureuse lion scorpion astrologie mythologie
    grecque signe du zodiaque feu eau terre et air astrologie
    couple signe astrologique du jour cancer astrologie humaniste nancy septembre signe zodiaque signe zodiaque 12 mars signe astrologique pour le 10 octobre
    signe zodiaque du mois de decembre signe astrologique 20 septembre signe
    astrologique chinois coq d'eau pierre sarkozy signe astrologique gemeau signe astrologique homme arbres astrologie celtique novembre signe zodiaque decan astrologie lion meilleures affinites astrologiques quel est le signe
    astrologique le plus fort compatibilite astrologique amoureuse
    chinoise signes astrologiques chinois annees signe astrologique mois mars cancer astrologie amour astrologie scorpion ascendant lion signe
    astrologique amerindien l'aigle astrologie siderale calcul caracteristique signe astrologique verseau signe astrologique du
    14 decembre tatouage signe astrologique gemeaux
    tribal signe chinois zodiaque occidental astrologie femme cancer homme lion quel signe astrologique le 27 septembre signe
    astrologique taureau du mois signe astrologique eau chinois astrologie
    amerindienne chouette signe astrologique pour 24 mai astrologie voyance astrologie chinoise cochon d'eau

  • Enlace al Comentario Lorna Martes, 13 Febrero 2018 17:58 publicado por Lorna

    videos porno familiar vidios porno lesbianas buscadores porno porno gratis espanol debby ryan porno contactos sexo
    cordoba busco porno porno gey espanol videos porno madrastras porno japonesas gratis
    videos porno recientes videos porno espanoles gay videos porno vidios porno espanoles videos porno espnaol sexo prostitutas vidios porno
    amater porno con negros sexo gay porno bears video
    sexo casero porno 18 19 posiciones para el
    sexo mujeres para sexo en madrid sexo ronda modelos porno sexo amater real sexo oral embarazo contactos chicas sexo porno gordas maduras porno cratis
    peliculas porno con argumento porno video gratis mobile porno videos porno xxx maduras porno gay xx sexo explicito en el cine sexo
    esporadico grupos de sexo porno subtitulado en espanol videos porno de gordas peliculas porno incesto actrices porno fotos peliculas con sexo
    cam gratis sexo peruanas porno sexo gay cam porno lesbico
    espanol sexo en los simpson sexo en plasencia porno dibujo

  • Enlace al Comentario Myrtis Martes, 13 Febrero 2018 17:34 publicado por Myrtis

    porno star tube lubricantes para sexo anal maduras videos sexo contactos sexo badajoz comics porno javichu videos sexo robados sexo gratis alcala
    de henares sexo gratis en burgos masajes sexo valencia porno
    espanol 18 videos porno de camaras ocultas sexo mvl trios pornograficos
    videos espanol porno gratis escenas de sexo spartacus porno camaras ocultas sexo anal para hombres videos torbe porno pelicula hacemos
    una porno pornos en espanol mujer busca sexo
    telefonico sexo en vivo xxx peniculas porno gratis canales
    de pornografia videos porno follando por dinero como hacer un buen sexo oral sexo
    video maduras noticias de sexo gratis blogspot porno despedidas de soltera porno artistas porno
    sexo o amor chat de sexo para movil peliculas porno espanolas chicas para
    sexo en huelva sexo trucos miley cyrus videos porno casting porno
    madrid descarga porno videos sexo castellano orgias sexo sexo gratis en vigo sexo dos chicas videos
    porno gratis orgias porno francia maduritas porno gratis libros
    porno sexo maduras casero porno casero en espanol videos peliculas porno video sexo
    travesti

  • Enlace al Comentario Milford Martes, 13 Febrero 2018 17:28 publicado por Milford

    dominacion porno daniela castro porno porno rama cine porno espanol tercer sexo escenas de
    sexo en series elena anaya lucia y el sexo sonia
    rox porno citas de sexo gratis sexo en nueva york 2 videos pornograficos de mujeres gratis chat
    gratis espanol sexo posturas para el sexo porno hentai sin censura
    porno totalmente gratis videos porno raros sexo gay huelva
    fotos porno xx sexo donostia fotos de sexo en nueva york webcan porno gratis videos porno de alta calidad
    descargar videos porno cortos red social para sexo fotos porno amater buen sexo porno gey espanol sexo oral para ellas sexo aficionados porno
    maduras espanola comic porno de doraemon porno gays
    espanol sexo en gh porno con cubanas pelicula porno xxx videos porno completos peliculas porno caseras
    gratis porno clasico italiano pareja haciendo sexo sexo con rubias gratis sexo en cordoba
    videos porno con argumento sexo facil sexo video gratis sexo madre e hija porno negras
    hd muneca sexo chat sexo galicia sexo explicito en el cine
    convencional sexo hablado porno full hd

  • Enlace al Comentario Marilou Martes, 13 Febrero 2018 16:35 publicado por Marilou

    plan cul mions plan cul baise plan cul montmorency plan cul a blois plan cul mondeville plan cul noisy le sec plan cul le cannet site plan cul 100 gratuit plan cul
    seclin plan cul challans plan cul val de marne plan cul le pradet recherche plan cul plan cul le pradet plan cul landerneau
    plan cul digne les bains plan cul vitrolles plan cul 68
    plan cul avec mature plan cul 64 site rencontre plan cul plan cul
    cote d'or beurette pour plan cul plan cul bischwiller
    plan cul chateauroux plan cul a bourges plan cul challans avoir un plan cul plan cul sete
    plan cul femme mure plan cul eaubonne plan cul argenteuil plan cul occitanie plan cul pyrenees atlantiques plan cul oise suis je un plan cul
    numero plan cul plan cul 24 plan cul sur caen suis je un plan cul
    plan cul sur metz meilleur site plan cul plan cul 36 mature plan cul plan cul couple plan cul
    beauvais plan cul villepreux comment trouver des plan cul plan cul saint
    mande plan cul le petit quevilly plan cul venissieux

  • Enlace al Comentario Bridgette Martes, 13 Febrero 2018 16:17 publicado por Bridgette

    site de rencontre 20 ans rencontres directes mon facebook
    n'est pas un site de rencontre amitie rencontre sur le 84 rencontrer un homme site de rencontre pour personnes handicapees gratuit site pour rencontrer des amies gratuit site de rencontre 85 gratuit
    rencontre sur lorient rencontres amicales
    toulouse rencontre sexe tours site de rencontre vraiment gratuit pour les hommes rencontre entre
    celibataire juif rencontres hommes femmes gratuites site de rencontre avec homme d affaire rencontre coquine metz
    site rencontre pour retraite question pour une premiere rencontre
    site de rencontre connu site de rencontre ado app
    site de rencontre parisien gratuit rencontre sans inscription et gratuit rencontre 06 ado rencontre asie gratuit rencontre coquine lyon rencontres entre adultes la rencontre
    du dernier espoir application de rencontre gratuit iphone mot pour site de rencontre
    rencontre femme indre et loire shooting photo pour site de rencontre site de rencontre celibataire montreal site rencontres
    gratuit hommes rencontre asie gratuit site rencontre
    asiatique rencontres amicales rennes 35 site
    de rencontre gratuit 46 site de rencontre black and white canada rencontre celibataire metal agences rencontres montreal rencontrer japonais tokyo rencontre femme par numero telephone rencontre sexe reims app rencontre gratuit site de rencontre lgbt rencontre orne l'aigle rencontre amicale senior
    lille site pour se faire des amis pour ado rencontres insolites
    rencontre celibataire ille et vilaine site rencontre centre gratuit

  • Enlace al Comentario Olive Martes, 13 Febrero 2018 16:15 publicado por Olive

    sex calendar method app massage with sex taiwan porn octopus sexuality
    the 1975 sex drum tab live webcam sex sexual lebanese porn swa sex-workers anonymous sex museum
    ny hours skyrim sex mods on nexus all mobile porn porn gangbang meth and sex japanese wife sex
    shy porn sex related jokes in hindi language sex ideas to try together busty redhead porn sex on fire dj yella porn having sex
    for the first time with the person you love selena gomez sex scene star wars porn how
    to initiate sex with a guy mobile porn perfect girls threesome sex video no sex in marriage christian panda porn food porn meaning funny sex pun names disney
    channel porn sex on fire cover acoustic new cartoon porn sex doll that engages in small talk
    hard anal sex male sex therapist melbourne
    black ebony porn sex booster pills for male sex mat margo
    sullivan porn michelle monaghan sex good morning texts for her long
    distance having sex while pregnant pictures sims 3 sex mod for
    android entourage sex scene sex in club anal sex poop
    nasty sexting text messages for him sex on beach drink mix free sex videis

Deja un comentario

Asegúrate de llenar la información requerida marcada con (*). No está permitido el código HTML. Tu dirección de correo NO será publicada.