Ir al contenido principal

Entradas

Mostrando las entradas de abril, 2018

JavaScript: Conjuntos de datos, u Objetos planos

Objeto plano Conjuntos de datos Un conjunto de datos se define como: {} ; Los datos se los insertamos mediante mencionarlo, y de por medio un punto mencionar el dat que agregamos al conjunto. {}.datoNuevo = 34 ; {}[ "datoOtro" ] = 55 ; Pero el problema es que  {}  crea un objeto distinto. Es decir, es lo mismo... {} ; que new Object () ; Entonces si queremos trabajar con un mismo conjunto deberemos ponerle nombre a través de una variable que lo referencie en memoria. Ejemplo: var miConjunto = {} ; var otroConjunto = {} ; Ahora, a cada conjunto le iremos agregando datos nuevos con el método anteriormente mencionado. miConjunto.datoNuevo = 34 ; miConjunto.otroDato = 55 ; otroConjunto.suDatoNuevo = 56 ; Para saber qué contiene en el momento dado conjunto deberemos realizar un  console.log() ... console .log( miConjunto ) ; Esto nos dará en la consola algo como... { "datoNuevo" : 34 ...

Agregar degradados como fondos

Agregar degradados mediante CSS Degradado lineal y degradado radial o elíptico. Degradado lineal La expresión inglesa para indicar linealidad es  linear . .deg-lineal-1 { /* Degradado vertical */ background-image : linear-gradient ( red, black ) ; } .deg-lineal-2 { /* Degradado según un ángulo decimal */ background-image : linear-gradient ( 45deg , red, black ) ; } .deg-lineal-3 { /* Degradado con transparencia */ background-image : linear-gradient ( 45deg , black, rgba ( 0 , 0 , 0 , . 4 ) ) ; } .deg-lineal-4 { /* Degradado con varios puntos de colores */ background-image : linear-gradient ( 45deg , red, blue, black ) ; } Degradado elíptico o circular La expresión inglesa para indicar radialidad es  radial . .deg-eliptico-1 { /* Degradado elíptico, se adapta a la proporción del DIV */ background-image : radial-gradient ( red, blue...

Trabajar con imágenes en HTML

Imágenes Ícono del sistema <head> ... <link rel="icon" href="ubicacion/del/archivo.img" id="el-icono" /> ... </head> Formatos: { .png, .bmp, .jpg, .ico, .gif } Objeto imagen <body> ... <img src="ubicacion/del/archivo.img" width="opcional-ancho" height="opcional-alto" id="nombre-imagen" /> ... </body> Como fondo de un DIV objetos-a-controlar { ; background-image: url( ubicacion/del/archivo.img/desde/el/css ) ; background-position: center center /* Para coincidir ambos centros */ ; background-size: cover|contain| 600px 500px } Mediante JavaScript Construimos un objeto llamado  Image()  mediante el constructor  new  de JavaScript. Debemos considerar que la imagen quizás tarde en descargarse si se invoca desde la web, por eso se utiliza el evento .o...