Sitios para aprender y practicar CSS

Sitios para practicar y mejorar tu CSS:

Aquí te dejo una lista de sitios web muy útiles cuando estas utilizando CSS. estos enlaces son juegos, documentación oficial de referencia, bibliotecas de fuentes, colores e imágenes


Todos los enlaces fueron obtenidos del CURSO DE FRONTEND  de la plataforma de Aprendizaje PLATZI.

Agradezco a Estefany Aguilar Restrepo quien impartió este curso de manera épica.

ella trabaja como desarrolladora frontend en La Haus (Bienes inmobiliarios) y como profesora en PLATZI

A ella la puedes encontrar como el seudónimo de teffcode en diferentes redes sociales, te recomiendo seguirla, ya que comparte muy buen material relacionado a CSS y tecnologías Front End
https://twitter.com/teffcode?lang=es 

https://co.linkedin.com/in/teffcode 
https://github.com/teffcode
https://www.teffcode.com/

Ahora si, aquí están los enlaces prometidos:

HTML: 
Para comenzar, es necesario que tengas los conocimientos básicos de HTML, aquí hay una buena documentación de las etiquetas HTML que existen:
https://htmlreference.io/

Una vez construyas tu estructura HTML puede serte útil este sitio web, que puede revisar todas las etiquetas que utilizaste y mostrarte los errores
Validador de etiquetas:
https://validator.w3.org/

CSS:
Mozilla es un referente que tiene muy buena documentación en cuanto a tecnologías web, por lo que verás varios enlaces a mozilla sobre diferentes temas

Documentación de las propiedades existentes en CSS:
https://cssreference.io/

Referencia Oficial de Mozilla sobre Pseudoclases:
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes

Referencia Oficial de Mozilla sobre Pseudoelementos:
https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-elements


Bibliotecas:
Mientras estás creando un sitio web, vas a necesitar contenido adicional, aquí te dejo diferentes sitios donde puedes obtener todos estos elementos, gratis.

Biblioteca de Emojis:
te muestra un tablero con emojis, solo da click al que te guste y estará en tu portapapeles para que lo pegues en cualquier editor de texto
https://coolsymbol.com/emojis/emoji-for-copy-and-paste.html

Bibliotecas de iconos
https://iconos8.es/

Biblioteca de fuentes:
con fuentes me refiero a tipos de caligrafía, google nos ofrece descargar la fuente para luego incluirla en el código, o el código HTML para incluir la fuente directamente desde los repositorios de google
https://fonts.google.com/

Biblioteca de Fotos:
Definitivamente es mala idea que incluyas cualquier imagen en tu sitio web, ya que la imagen podría tener copyrigth.
Usa imágenes propias o que tengas permisos para utilizarlas o usa una de este sitio donde puedes obtener fotos y videos que comparten creadores talentosos totalmente gratis
https://www.pexels.com/es-es/

Bibliotecas de colores:
Cuando creas un sitio web, es importante tener una paleta de colores. Aquí te dejo enlaces de sitios donde puedes obtener los codigos RGB o hexadecimal de los colores que podrías incluir en tu sitio web
https://picular.co/Video
http://paletton.com/

En especial me gusta coolors.co te permite compartir paletas de color con un enlace, útil para trabajar en equipo
https://coolors.co/001514-fbfffe-6b0504-a3320b-e6af2e

Arquitecturas de CSS
Cuando trabajes en el desarrollo de sitios web, lo mejor es que uses una arquitectura, para que tu código pueda ser entendido por otros desarrolladores sin tantos problemas.

Aquí te dejo documentación oficial para que elijas la arquitectura que se adapte a las necesidades de tu proyecto, en mi caso elegí BEM.

CSS orientada a objetos
https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/

BEM
BLOQUE - ELEMENTO - MODIFICADOR
http://getbem.com/introduction/

SMACSS
arquitectura de CSS escalable y modular
http://smacss.com/

ITCSS
Triangulo invertido de CSS
https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/

ATOM
CSS modular y escalable, inspirada en química
https://bradfrost.com/blog/post/atomic-web-design/


Tecnologías para maquetación en HTML5
desde HTML5 la propiedad display (que permite trabajar con los layouts) nos ofrece las tecnologías FLEXBOX o CSS-GRID, no debemos pensar que una tecnología es mejor que otra, simplemente en algunas ocasiones lo recomendavle será usar flexbox y en otras ocasiones CSS-GRID

FLEXBOX documentación oficial
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

conceptos básicos de FLEXBOX
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Definitivamente, la manera que me ayudo mas a afianzar los conocimientos de FLEX, fue este juego, donde usando propiedades CSS para FLEX debemos colocar ranitas en sus hojas

FLEXBOX FROGGY
https://flexboxfroggy.com/#es

CSS-GRID documentación oficial
https://css-tricks.com/snippets/css/complete-guide-grid/

CSS-GRID documentación oficial Mozilla
https://developer.mozilla.org/en-US/docs/Web/CSS/grid

Jen Simmons es diseñadora y programadora senior en Mozilla, ella tiene un sitio web, donde tiene ejemplos de CSS usando CSS-GRID
https://labs.jensimmons.com/

Jen Simmons también tiene un canal en youtube, llamado Layout Land, donde podrás encontrar contenido relacionado a CSS
https://www.youtube.com/channel/UC7TizprGknbDalbHplROtag

Similar al juego de las ranas para flex, está este juego donde tendrás que regar plantas usando propiedades de CSS-GRID, muy recomendado
https://cssgridgarden.com/#es


Accesibilidad:
Cuando creamos sitios web, es nuestra responsabilidad, otorgar toda la información posible a los lectores de pantallas para las personas no videntes.

Para esto debemos trabajar en nuestro código para utilizar las etiquetas de manera adecuada y tomar en cuenta el tab-index de las etiquetas

Aquí te dejo unos enlaces que serán de ayuda
Configuración de voces:
https://support.apple.com/es-lamr/HT202362

ANDI herramienta de pruebas de accesibilidad
https://www.ssa.gov/accessibility/andi/help/install.html

herramienta de prueba de navegacion tabindex
https://developer.mozilla.org/es/docs/Web/HTML/Atributos_Globales/tabindex



Storybook
https://storybook.js.org/docs/guides/guide-html/

Borrado Masivo de datos en Oracle usando particiones

Borrado Masivo de datos en Oracle usando particiones

Borrar datos masívamente usando un comando delete afecta los recursos de la base de datos.

Si los borrados masivos son frecuentes en tu sistema, es mejor que organices tus tablas para que puedan soportar este comportamiento.

Puedes investigar mas sobre particiones en Oracle y las diferentes particiones que se pueden aplicar, en esta ocasión recomiendo las particiones por lista horizontales.

Ejemplo:

las particiones son para manejar grandes volúmenes de datos, pero para explicar mejor presento una tabla con pocos datos. 

Tabla tblRevisiones:

Revision	codigo	dato1	dato2
rev1	sku1	aaaaa	12343
rev1	sku2	bbbb	125324
rev1	sku3	ccc	238305
rev1	sku4	dd	351286
rev1	sku5	ff	464267
rev1	sku6	ggg	577248
rev1	sku7	hhhh	690229
rev1	sku8	dd	803210
rev1	sku9	ff	916191
rev1	sku10	ggg	1029172
rev1	sku11	hhhh	1142153
rev1	sku12	dd	1255134
rev1	sku13	ff	1368115
rev2	skucode1	rojo	12
rev2	skucode2	blanco	15
rev2	skucode3	azul	78
rev2	skucode4	rojo	101
rev2	skucode5	blanco	134
rev2	skucode6	azul	167
rev2	skucode7	rojo	200
rev2	skucode8	blanco	233
rev3	sku1	datos	valores
rev3	sku2	datos	valores
rev3	sku3	datos	valora
rev3	sku4	datos	valores

Tenemos una tabla que nos interesa borrar todos los datos que pertenecen a una dicha revisión es decir, la rev1, rev2, rev3 o cualquier otra revisión que pudiera existir.

Lo que hacemos en este caso es preparar la tabla para que almacene todos los registros rev1 en una partición, todos los rev2 en otra partición, todos los rev3 en otra partición y que pueda crear automáticamente otras particiones cuando se ingresen nuevas revisiones:

Paritción rev1

Revision	codigo	dato1	dato2
rev1	sku1	aaaaa	12343
rev1	sku2	bbbb	125324
rev1	sku3	ccc	238305
rev1	sku4	dd	351286
rev1	sku5	ff	464267
rev1	sku6	ggg	577248
rev1	sku7	hhhh	690229
rev1	sku8	dd	803210
rev1	sku9	ff	916191
rev1	sku10	ggg	1029172
rev1	sku11	hhhh	1142153
rev1	sku12	dd	1255134
rev1	sku13	ff	1368115

Partición rev2:

Revision	codigo	dato1	dato2
rev2	skucode1	rojo	12
rev2	skucode2	blanco	15
rev2	skucode3	azul	78
rev2	skucode4	rojo	101
rev2	skucode5	blanco	134
rev2	skucode6	azul	167
rev2	skucode7	rojo	200
rev2	skucode8	blanco	233

Particion rev3:

Revision	codigo	dato1	dato2
rev3	sku1	datos	valores
rev3	sku2	datos	valores
rev3	sku3	datos	valora
rev3	sku4	datos	valores

De esta manera, cuando necesitemos borrar todos los registros que pertencen a la rev1 por ejemplo será suficiente con el comando:

ALTER TABLE table_name TRUNCATE PARTITION partition_name

ALTER TABLE tblRevisiones TRUNCATE PARTITION rev1

Esto eliminará todos los registros que pertenecen a rev1 de manera inmediata, utilizando muy pocos recursos de la base de datos.

Crear Tabla Particionada

CREATE TABLE tblRevisiones (

    revision    VARCHAR2(30),

    codigo      VARCHAR2(30),

    dato1       VARCHAR2(30),

    dato2       NUMBER

)

PARTITION BY LIST (revision)

(

PARTITION rev1 VALUES ('rev1'),

PARTITION rev2 VALUES ('rev2'),

PARTITION rev3 VALUES ('rev3'),

PARTITION ERR VALUES (null)

);

De esta manera cuando se inserten registros, automáticamente se insertarán en la partición correspondiente según el valor de la revisión que contenga cada registro.

Crear Particiones de manera dinámica

Seguramente deseas crear particiones de forma dinámica , esto se puede hacer en un procedimiento almacenado:

vs_tabla := 'tblRevisiones';

vs_Particion := 'rev1';

vn_existe_particion := 0;

SELECT count(1) 

INTO vn_existe_particion 

FROM ALL_TAB_PARTITIONS 

WHERE TABLE_NAME = vs_table 

AND PARTITION_NAME = vs_Particion;

IF vn_existe_particion = 0 THEN

    EXECUTE IMMEDIATE 'ALTER TABLE tblRevisiones ADD PARTITION '

||vs_Partition

||' VALUES('''||vs_Partition||''')';

--ELSE

--    EXECUTE IMMEDIATE 'ALTER TABLE tblRevisiones TRUNCATE PARTITION ' 

-- || vs_Particion

END IF;

/* CONTINUAR CON EL PROCEDIMIENTO DE INSERTAR */

El ELSE que está comentado serviría para truncar la partición antes de insertar, pero si no se necesita entonces se hará la inserción normal, agregando registros a la partición correspondiente

El truncado solo se puede hacer si la partición existe, por eso va dentro de un ELSE.


Saludos a Yadir Rivera y Norman Hernández, espero les sea de utilidad

Logos InframundoHN

Logos de InframundoHN con fondo transparente, archivos PNG

InframundoHN es una tienda de cubos rubik de velocidad, de marcas reconocidas como GAN, QiYi, MoYu, etc. y otros articulos de coleccion de series, peliculas y videojuegos, ubicada en Tegucigalpa Honduras