CSS3 09 Textos y alineaciones

 CSS3 09 Textos y alineaciones

CSS también dispone de ciertas propiedades relacionadas con el texto con objetivos de alineación o tratamiento de espaciados. Veamos algunas de ellas:

CSS3 08 Fuentes y Tipografias

 CSS3 08 Fuentes y Tipografías

Las fuentes (tipografías) también tienen cabida dentro del mundo del CSS. De hecho, son uno de los pilares más importantes del diseño web. La elección de una tipografía adecuada, su tamaño, color, espacio entre letras, interlineado y otras características pueden cambiar, de forma consciente o inconsciente, la forma en la que una persona interpreta o accede a los contenidos de una página web.

Detalles de una tipografía

Existen multitud de características en las tipografías que convendría conocer antes de continuar, por lo que vamos a ver algunas de ellas:

Serifa: Las fuentes o tipografías que utilizan serifa o gracia, son aquellas que incorporan unos pequeños adornos o remates en los extremos de los bordes de las letras. Muchas de estas tipografías suelen terminar en «Serif» (con serifa).

CSS3 07 Tipos de Elementos

 CSS3 07 Tipos de Elementos

Cada etiqueta HTML tiene una representación visual en un navegador, lo que habitualmente se suele denominar el tipo de caja. En principio, se parte de dos tipos básicos:

Obsérvese que por defecto, todos los elementos <div> son elementos de bloque (block) y todos los elementos <span> son elementos en línea (inline). Para entender esto facilmente, vamos a crear un HTML con 3 etiquetas <div> como las siguientes:

CSS3 05 Fondos

 CSS3 05 Fondos

Imágenes de fondo

Si no quieres un color plano de fondo, sino que prefieres utilizar una imagen, puedes utilizar la propiedad background imageimage. En el valor, se introducirá el nombre de la imagen o la dirección donde está alojada, siempre rodeado del texto url().

En el caso de que sólo se coloque el nombre de la imagen (por ejemplo, imagen.jpg), el navegador buscará la imagen en la misma carpeta donde está el archivo CSS. Esto es lo que se llama ruta relativa. En el caso de que se coloque la ruta completa, por ejemplo https://miurl.com/img/logo.png, se accederá a la imagen alojada en esa dirección. 

Esto es lo que se llama ruta absoluta.

    

CSS3 04 Bordes

 CSS3 04 Bordes

En CSS es posible especificar las propiedades que tendrán los bordes de cualquier elemento, pudiendo incluso, dar valores distintos a las diferentes zonas predeterminadas del elemento (zona superior, izquierda, derecha o zona inferior).

Las propiedades básicas existentes de los bordes en CSS son las siguientes:

En primer lugar, border-color establece el color del borde, de la misma forma que lo hicimos en apartados anteriores de colores. En segundo lugar, con border-width podemos establecer la anchura o grosor del borde utilizando tanto palabras clave predefinidas como un tamaño concreto con cualquier tipo de las unidades ya vistas.

CSS3 03 Modelo de Cajas

 CSS3 03 Modelo de Cajas

Durante varios años, el denominado modelo de cajas fue una pesadilla para los desarrolladores web, puesto que se trataba de forma diferente en Internet Explorer y los demás navegadores. Por fortuna, todos los navegadores actuales ya interpretan de la misma forma el modelo de cajas.

La representación básica del modelo de cajas es el siguiente:

Dimensiones

Para dar tamaños específicos a los diferentes elementos de un documento HTML, necesitaremos asignarles valores a las propiedades width (ancho) y height (alto). Además, ambas tienen propiedades hermanas para establecer el tamaño máximo y mínimo que pueden alcanzar:

CSS3 02 Unidades

 CSS3 02 Unidades

Antes de comenzar a utilizar propiedades que utilicen medidas, como por ejemplo width (que sirve para establecer un ancho a un elemento concreto), es conveniente conocer los tipos de Unidades que pueden utilizarse en CSS para indicar un determinado Tamaño. Existen varios tipos de unidades, vamos a desglosarlas en grupos y explicar cada una de ellas. Más adelante veremos las propiedades que pueden utilizarlas.

Unidades absolutas

Las unidades absolutas son un tipo de medida fija que no cambia, que no depende de ningún otro factor. Son ideales para medios no variables como pueden ser los medios impresos, por ejemplo, pero son poco flexibles y adecuados para la web en la actualidad, ya que no tienen la capacidad de adaptarse a diferentes resoluciones o pantallas, que es lo que tendemos a hacer actualmente.

CSS3 01 Colores

CSS3  01 Colores

Uno de los primeros cambios de estilo que podemos pensar realizar en un documento HTML es hacer variaciones en los colores de primer plano y de fondo. Esto es posible con las primeras dos propiedades que veremos a continuación:

Colores CSS

La propiedad color establece el color del texto, mientras que la propiedad background-color establece el color de fondo del elemento.

Todas las propiedades CSS

CSS3 00 Que es CSS y como incluirlo en nuestro html

 ¿Qué es CSS? Y cómo incluirlo

CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de
los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de
separar los contenidos y su presentación y es imprescindible para crear páginas web
complejas.

Windows 10 Error al crear imagen del sistema 0x8078006B y 0x81000203

Hola a todos, hoy vamos a comentar como solucionar el problema que se nos presenta al no poder realizar una imagen del sistema en nuestro Windows 10.

Puede deberse a varias razones, veremos dos causas probables, podría ser una de ellas o las dos en conjunto.

También hemos de recordar que a la hora de restaurar nuestra imagen de sistema W7/10, tal vez no sea reconocida, principalmente se debe a que la imagen no se ha realizado correctamente. No se debe realizar ninguna acción en la máquina cuando se realiza la imagen del sistema.

Hemos de tener muy en cuenta que si redimensionamos nuestras particiones, las imágenes antiguas no nos servirán para realizar una restauración.

La verdad es que muchos usuarios de W10 se han pasado a Acronis True Image o CloneZilla.

Puedes realizar la imagen del sistema teniendo en cuenta los clusters o no y no tiene problemas de restauración.

Para los errores 0x8078006B, 0x8004230F y 0x81000203.

JavaScript 02. Dónde ubicar nuestro código

2. Dónde ubicar nuestro código.

- Casi siempre lo veremos ubicado dentro de lo que es el head de nuestro documento html.
- O dentro del body.
- O fuera del body antes del final de la etiqueta </html>.
- O en un archivo externo .js que enlazaremos desde una etiqueta desde nuestro head.

JavaScript 01. Introducción

JavaScript 01 Introducción

- Java Script fue inventado por Netscape (navegador) en 1995, es un lenguaje de programación que permite agregar animación, interactividad y efectos dinámicos a nuestras páginas html. Por ejemplo interactuar con menús, botones, galerías de imagen, etc.

* Su principal ventaja es que al ejecutarse del lado cliente tiene una inmediatez  que no tienen otros leguajes que se ejecutan del lado del servidor.

- Nosotros cuando visitamos una página web, lo que hacemos es escribir una url en nuestro navegador de preferencia y con esto estamos realizando una petición http. Esta petición va a llegar a nuestro servidor, va a buscar la página html que nosotros estamos solicitando, una vez encontrada, nos manda una respuesta a nuestro navegador y es con este documento que nos retorna donde viene nuestro código JavaScript, y es ahí, del lado del cliente, nuestro navegador, en donde se ejecuta este código.
Del lado del front end, en términos de diseño y programación.

Visual Studio Code Configuracion SFTP JSON

 En este post veremos una extensión para Visual Studio Code que nos puede ser muy útil a la hora de sincronizar nuestro proyectos con nuestro servidor, ya sea local o remoto.

La antigua extensión SFTP Liximomo ha sido sustituida por SFTP Natizyskunk, ya que la primera ha dejado de recibir soporte, pero su configuración es exactamente igual que su predecesora.

Visual Studio Code Configuracion Php Intelephense

Con estos sencillos pasos podremos configurar e instalar las extensiones recomendadas para trabajar con php en Visual Studio Code y depurar errores en tiempo de escritura.
Las extensiones que yo utilizo son estas dos:
Prettier - Code formatter
Php code Intelephense

Entrando en configuración con Ctrl+,

WapmServer Habilitar links Your Projects

 WapmServer Habilitar links Your Projects.

En este post vamos a comentar como poder habilitar los links de nuestros proyectos en la página principal de WampServer, cuando tras la instalación del mismo no aparecen nuestro proyectos en la lista Your Projects de nuestro local host.

Php 8.1 CRUD Administradores

 Php CRUD Administradores Backend.

Hoy os dejo el proyecto de gestión de usuarios en php y sql.

La descarga gratuita desde mi GitHub.

Espero que os se muy útil.

 

- Acceso administradores y usuarios.
- Bloqueo y desbloqueo ip.
- Formulario de contacto. 

- Copia de seguridad Bbdd auto y en demanda.

- generador de código qr usuarios.

- lector de códigos qr integrado.

Descargala gratis desde: https://github.com/JuanBarrosPazos/Modulo_Admin

ACCESO AL SISTEMA

Angular (2022) 03. Estructura carpetas

3. Estructura carpetas

- Vamos a analizar la estructura de carpetas del proyecto, para lo que vamos a utilizar Visual Studio Code.
Una vez abierto VSC nos dirigimos a la carpeta del proyecto.
Inicializamos el servidor desde la terminal de VSC.
Este servidor tiene que estar abierto mientras nosotros estamos trabajando, tendremos que abrir otra ventana de terminal para poder ejecutar comandos.

Angular (2022) 02. Crear nuevo proyecto

2. Crear nuevo proyecto.

- Para crear un nuevo proyecto de Angula, lo primero que hemos de hacer es crear un directorio donde vamos a crear nuestros proyectos. Una vez hecho esto lo que hemos de hacer es abrir nuestra terminal de PowerShell, u otra, en este directorio que hemos creado.