Bootstrap 4 Cheat Sheet
Aunque ya tenemos la versión 5 disponible (se pueden ver las diferencias entre la version 5 y la 4 aquí).
Un buen sitio donde ver un resumen de todas las clases de Bootstrap 4 de forma amigable es el siguiente: https://hackerthemes.com/bootstrap-cheatsheet/
Por otro lado, también tenemos la siguiente imagen:
Recopilación de recursos para desarrollo web. Año 2020. (Parte 3)
Videos de Fondo
BigVideo: http://dfcb.github.io/BigVideo.js/
VideoBG: http://syddev.com/jquery.videoBG/
Tubular: http://www.seanmccambridge.com/tubular/
Misceláneos
Color Thief: http://lokeshdhakar.com/projects/color-thief/
Colorzilla: https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp
Tippy.js: https://atomiks.github.io/tippyjs/
Plugin con Formularios
jqueryFlexdatalist: http://projects.sergiodinislopes.pt/flexdatalist/
Gráficas
MorrisJS: https://morrisjs.github.io/morris.js/
Mapas
Google Maps: https://developers.google.com/
Node y NPM
Lite Server: https://github.com/johnpapa/lite-server
Recopilación de recursos para desarrollo web. Año 2020. (Parte 2)
Pugins especiales
Metro Notification: https://codecanyon.net/item/metro-notifications/3903495
Yose Modal: https://codecanyon.net/item/yose-modal/8776097
Autumn: https://codecanyon.net/item/autumn-leaf/5244654
Metro Menu: https://codecanyon.net/item/metro-menu/4476162
Metro Modal: https://codecanyon.net/item/metro-modal/5337148
Generadores de Animaciones
Animate.css: https://daneden.github.io/animate.css/
Greensock: http://greensock.com/
Sliders
Super Simple Slider: http://supersimpleslider.com/
Better-simple-slideshow: http://leemark.github.io/better-simple-slideshow/
Galleria: http://galleria.io/
Supersized: http://buildinternet.com/project/supersized/
Swiper: http://idangero.us/swiper/
Especiales de jQuery
Masonry: http://masonry.desandro.com/
Detect mobile browsers: http://detectmobilebrowsers.com/
Lazy Load: https://github.com/tuupola/jquery_lazyload
Stickyjs: http://stickyjs.com/
Lightboxes
swipebox: http://brutaldesign.github.io/swipebox/
fancybox: http://fancyapps.com/fancybox/
frescojs: http://www.frescojs.com
lightbox2: http://lokeshdhakar.com/projects/lightbox2/
Recopilación de recursos para desarrollo web. Año 2020. (Parte 1)
Fuentes
Font-Awesome: https://fortawesome.github.io/Font-Awesome/
ionicons: http://ionicons.com/
Glyphicons: http://getbootstrap.com/components/
Weather-icons: https://erikflowers.github.io/weather-icons/
Google Fonts: https://www.google.com/fonts
Blokfont: http://blokkfont.com/
Iconos, letras e imágenes
Real Favicon Generator: http://realfavicongenerator.net/
Iconspedia: http://www.iconspedia.com/
CSSAuthor: http://www.cssauthor.com/free-mockup-templates-psd-designs/#iPhone
Freepik: http://www.freepik.com/
Skitch: https://evernote.com/intl/es/skitch/
ARCTEXT.JS: http://tympanus.net/Development/Arctext/
Shuffle Letters: http://tutorialzine.com/2011/09/shuffle-letters-effect-jquery/
mThumb: https://github.com/mindsharelabs/mthumb
Generadores de código
JSON-Generator: http://www.json-generator.com/
HTML-Compressor: https://htmlcompressor.com/compressor/
CSS3-Generator: http://css3generator.com/
Generador de Color HTML: https://color.hailpixel.com/
Gradient-Editor: http://www.colorzilla.com/gradient-editor/
placehold.it: http://placehold.it/#
Servicios en Linea
Son Parser Online: http://json.parser.online.fr/
Pingdom: http://tools.pingdom.com/fpt/
Codepen.io: http://codepen.io/
Responsinator: http://www.responsinator.com/
Programas y aplicaciones
HTTP-Server: https://www.npmjs.com/package/http-server
Sweet Alert: http://t4t5.github.io/sweetalert/
Bootstrap Modals: http://getbootstrap.com/javascript/#modals
Date Picker: http://amsul.ca/pickadate.js/date/
Chosen: http://harvesthq.github.io/chosen/
Complexify: https://www.danpalmer.me/jquery-complexify/
Resumen generación de documentación con Compodoc para Angular 10
Compodoc facilita la generación de la documentación de tu proyecto de Angular. A continuación, voy a exponer un resumen de como utilizarlo.
1 – Instalación
npm install -g @compodoc/compodoc
2 – Añadir en package.json el comando que lo ejecuta.
"scripts": { "compodoc": "npx compodoc -p tsconfig.app.json" //En angular 10 tuve que poner tsconfig.base.json para //que me generase bien la documentación. }
3 – Ejecutar la creación de la documentacion
npm run compodoc
————————————————————————
Aunque hay muchas más, como se puede ver en la documentación que facilita la gente de Compodoc. Algunas de las opciones que se puede ir añadiendo al comando de ejecución son:
-d ---------> directorio destino -o ---------> abre automáticamente la documentación en el navegador -s ---------> levanta el servidor de node --theme -----> selecciona el tema --includes --> documentacion adicional. Se pone el directorio del summary.json. Se crean ficheros md. https://docs.github.com/en/github/writing-on-github/basic-writing-and-formatting-syntax -w ---------> detecta los cambios en el código y actualiza la documentación. --customFavicon -> cambia el favicon. --hideGenerator -> oculta el logotipo de compodoc. -y ----------> hoja de estilos propia para compodoc. Se le indica un directorio donde haya un style.css.
El comando de generación añadiendo todos esos flags quedaría así:
"compodoc": "npx compodoc -p tsconfig.base.json -d docs -o -s --theme vagrant --includes ./aditionaldoc -w --customFavicon ./src/favicon.ico --hideGenerator -y ./src/assets/cssCompodoc"
————————————————————————
Los comentarios deben añadirse así:
- Documentar un método, variable, componente,.... /** * */ - Documentar parámetro de un método /** * @param variable */ - Documentar retorno de un método /** * @returns */ - Ignorar en la documentacion para que no salga /** * @ignore */ - Ejemplo de uso de un componente u otro objeto. /** * @example * */
. Se puede comprobar el nivel de comentarios añadidos en la sección de cobertura de código que te genera.
– Excluir en el tsconfig.base.json los ficheros que no queremos que se revisen. Así no saldrán en la cobertura.
"exclude": [ "src/test.ts", "e2e/**" ]
Dynamic Angular Gallery
Aplicación web realizada en Angular 10 que partiendo de un fichero *.json completa dinámicamente todo su contenido. Generando una galeria de imágenes divididas por categorias.
El código se encuentra subido en el siguiente repositorio:
https://github.com:roberto-pf/DynamicAngularGallery
Se ha generado la documentación mediante Compodoc y puede consultarse la documentación aquí:
https://roberto-pf.github.io/DynamicAngularGallery/
Demo funcionando en este enlace: http://gallery.disastercode.com.es
Además, se ha generado una rama swiperjs_version en el repositorio. En dicha rama, la presentación de las imágenes se realiza con el componente Swiperjs
Demo funcionando en este enlace: http://galleryswiper.disastercode.com.es
Ejemplo para creación de Pipe personalizado en Angular
Primero vamos a crear un Pipe llamado NewLine con el comando ng que lo que va a hacer es sustituir los saltos de linea por saltos html.
//Comando de creación Pipe ng g pipe pipes\NewLine //código de la clase import { Pipe, PipeTransform } from '@angular/core'; /** * Pipe que convierte los saltos de linea en saltos html. */ @Pipe({ name: 'newLine' }) export class NewLinePipe implements PipeTransform { /** * Metodo que realiza la transformación * @param value * @param args */ transform(value: string, args: string[]): any { return value.replace(/(?:\r\n|\r|\n)/g, ' '); } }
Ejemplo de uso:
< div [innerHtml]= "description | newline"> < /div >
Primera aplicación con IONIC
Ionic es una herramienta, gratuita y open source, para el desarrollo de aplicaciones híbridas basadas en HTML5, CSS y JS. Está construido con Sass y optimizado con AngularJS.
Se trata de una tecnología muy valida siempre que se impongan al cliente ciertas restricciones en las versiones de los dispositivos soportados. Es decir: Android 4.4+, IOS 8+ y Windows 10+ (Phone y Desktop).
Requisitos previos
– Tener instalado jdk 1.8
– Para android, tener instalado la sdk android (puedes usar el Android Studio)
– Tener instalado Gradle (descargar, descomprimirlo y luego meterlo al path)
Instalamos el framework
npm install -g ionic@beta npm install -g ionic npm install -g cordova
Creamos la primera aplicación de ejemplo, podemos elegir uno de estos tipos:
– tabs : a simple 3 tab layout
– sidemenu: a layout with a swipable menu on the side
– blank: a bare starter with a single page
– super: starter project with over 14 ready to use page designs
– tutorial: a guided starter project
ionic start AppExampleIonic sidemenu --typescript
Comandos a conocer:
//Lanza la aplicación en el emulador ionic serve //Lanza la aplicación en varios tipos de plataformas en el navegador ionic serve --lab //añade las plataformas a utilizar ionic cordova platform add ios android windows //Lanza la aplicación android ionic cordova run android //cosntruye la apliación android ionic cordova build android //Generar una version de android para producción ionic cordova build android --release //Generar una version de android para producción ionic cordova build ios --prod
Transiciones CSS. Mejorando el diseño.
A continuación se muestran dos links con información sobre transiciones.
https://www.bootply.com/tagged/transition
Se trata de una web que contiene diferentes ejemplos de transiciones realizadas con Bootstrap.
https://daneden.github.io/animate.css/
Se trata de una css que contiene un monton de animaciones muy interesantes. Se instala con npm mediante:
npm install animate.css --save
Y luego solo tienes que incluirla:
< head> < link rel="stylesheet" href="animate.min.css"> < /head>
Carga de una imagen para previsualizarla
Ejemplo de como podriamos cargar en una página HTML una imagen obtenida desde el disco y hacer una previsualización de ella usando javascript.
En la pagina podemos añadir un objeto de formulario de tipo file, así como una imagen donde cargaremos la que seleccionemos:
< input type="file" id="files" name="files[]" class="btn btn-default btn-file" / > < img src="" id="imgPrevisualizacion" class="img-rounded" height="50" width="50" / >
Ahora sobre ese objeto programamos con javscript el evento change. De tal forma que cada vez que se seleccione una imagen se lance al detectar ese cambio.
function archivo(evt) { var files = evt.target.files; //obtenemos la lista de archivos for (var i = 0, f; f = files[i]; i++) { if (!f.type.match('image.*')) { //comprobamos de que es una imagen continue; } var reader = new FileReader(); reader.onload = (function(theFile) { return function(e) { //asignamos la imagen seleccionada document.getElementById("imgPrevisualizacion").src = e.target.result; }; })(f); reader.readAsDataURL(f); } } //creamos el evento document.getElementById('files').addEventListener('change', archivo, false);
Categorias
- adobe (2)
- agile (1)
- Alfresco (1)
- Android (26)
- Angular (6)
- angularjs (10)
- axis (2)
- Bases de datos (14)
- Bootstrap (1)
- C# (3)
- chrome (2)
- Codeigniter (2)
- Control de Versiones (2)
- CSS (24)
- CVS (1)
- Django (9)
- Django Rest Framework (1)
- DNS (1)
- Docker (1)
- dominio (1)
- eclipse (5)
- Entity Framework (2)
- ETL (1)
- Firefox (5)
- flash (1)
- Git (7)
- Groovy (1)
- Handlebars (1)
- hibernate (4)
- hosting (1)
- HTML (45)
- HTML 5 (20)
- Impresión 3D (8)
- IOS (2)
- ireports (3)
- Java (40)
- Javascript (49)
- JBoss (3)
- JPA (2)
- JQuery (20)
- Json (5)
- JSP (5)
- Lamp (1)
- lean (1)
- linkedin (1)
- LINQ (1)
- linux (11)
- Livecycle (1)
- log (1)
- microcontroladores (1)
- MongoDB (4)
- MySQL (7)
- Node.js (5)
- OC4J (1)
- Openshift (2)
- Oracle (5)
- Patrones de Diseño (1)
- Photoshop (2)
- php (19)
- PostgreSQL (1)
- python (18)
- rabbitmq (1)
- Raspberry PI (13)
- Raspherry PI (5)
- seguridad (3)
- Selenium (3)
- Sencha Touch (1)
- Sin categoría (16)
- Spring (13)
- SQL (7)
- SQLServer (1)
- struts (2)
- SVN (1)
- Talend (1)
- Tomcat (5)
- unity (3)
- Visual Studio Code (2)
- vmware (4)
- Web Services (11)
- windows (17)
- wordpress (10)
- xml (2)
Trabajos Realizados
- App Android – Autoka Fr
- App Android – Cartelera Cántabra
- App Android – Gramática y Vocabulario Ingles
- App Android – Hoja de Gastos
- App Android – Hotel Torre Cristina
- App Android – OcioEnjoy
- App Android – Visor CardBoard
- App Firefox – Managapp
- DiamanteBomba – DisasterCode
- Generador de Partes de Trabajo
- GitHub – Android Web Generator
- GitHub – Dynamic Angular Gallery
- GitHub – Sotilizator
- GitHub – SpringAngularJS
- GitHub – Swiper Dynamic Angular Gallery
- HazParejas – DisasterCode
- RompeCabezas – DisasterCode
- Unity Game – English Couple
- Unity Game – Kill Wasp
- WordPress – El Buen Apicultor
- WordPress – El Cajón de los Retales
- WordPress – El Vestidito Azul
- WordPress – Feuchas
- WordPress – Fragua de Navajas Ponce
- WordPress – Humor a las Tres
- WordPress – Photo Places