Presentación de PowerPoint · -TabIndex: establece el orden de tabulación del documento su valor oscila de 0 a 32.767.-OnFocus: se ejecuta la accion cuando se detecta el foco sobre

Catedra de Base de Datos

Facultad de Ciencias Exactas y Tecnología

Universidad Nacional de Tucumán

Ciclo Lectivo 2018

BASES DE DATOS - SEMINARIO DE DQL CON PHP Y MYSQL

Bases de Datos Ing. Franco D. Menendez

• Diseño en HTML y CSS

– Tipología de los sitios web.

– La estructura de las paginas.

– Etiquetas y atributos: definición.

– Elementos HTML Fondos, CSS, textos, imagen, enlaces.

– Listas.

• Instalación del paquete XAMPP en Windows

– Instalación de directorios virtuales.

– Creación y ejecución de la primera pagina PHP.

• Fundamentos de PHP

– Estructura de un script php.

– Reglas de sintaxis, comentarios.

– Trabajo con expresiones, variables y tipos de datos.

– Manejo de Matrices.

– Evaluación de parámetros de URL.

– Control de flujo.

– Creación y ejecución de funciones.

– Elaboración y edición de cadenas de caracteres.



• Creación de formularios de entrada

– Fundamentos de la creación de formularios.

– Creación automática de formularios de entrada.

• Acceso a bases de datos MySQL con PHP

– Creación de un vínculo a base de datos.

– Ejecutar consultas y mostrar los resultados.

– Determinar informaciones de las bases de datos.

– Ejecución de instrucciones en SQL.

– Tratamiento de errores con acceso a base de datos.

• Creación de bases de datos y tablas PHP

– Comprobar si hay tabla.

– Creación de tablas de base de datos.

– Modificar tablas.

– Borrar una tabla.

• Generación de listas y vínculos

– Representar registros de datos como lista.

– Introducir funciones de administración.

– Consignar los vínculos con acciones.



TABLA - atributos• <border=#> <table

Establece el ancho de borde alrededor de celdas de la tabla

• cellspacing=#> <tableAjusta la cantidad de espacio entre las celdas de la tabla

• cellpadding=#> <tableAjusta la cantidad de espacio entre el borde de una celda y su contenido

• width=# <table o %>Establece la anchura de la mesa - en píxeles o como porcentaje del ancho del documento

• align=?> <tr o align=?> <tdEstablece la alineación de la celda (s) (a la izquierda, centro o derecha)

• valign=?> <tr o valign=?> <tdEstablece la alineación vertical de la celda (s) (, superior, media o inferior)

• <td colspan=#>Establece el número de columnas de una celda debe abarcar

• <td rowspan=#>Establece el número de filas de una célula debe abarcar (por defecto = 1)

• <td nowrap>Evita las líneas dentro de una célula se rompa para adaptarse a



IMAGEN

• <img src="name">Agrega una imagen

• <img src="name“ alt=“descripcion”>

Se utiliza para describir el contenido de la imagen hasta 1024 caracteres.

• <img src="name" align=?>Alinea una imagen: izquierda, derecha, centro, superior, medio fondo

• <img src="name" border=?>Ajusta tamaño del borde alrededor de una imagen

• <img src="name“ longdesc=“indica una direccion para mas información de la imagen”



AtributosAtributos que se presentan frecuentemente en HTML

- Id: Identifica de manera única a cada elemento dentro de un documento HTML.

- Class: determina la clase CSS que afectara al elemento.

- Style: determina de manera directa las propiedades CSS que afectarán al elemento.

- Title: añade un titulo al elemento. Esto es de utilidad para mejorar la accesibilidad del documento.

Los atributos Id y class pueden contener letras, números, guiones medios y bajos como valor, pero no pueden comenzar con un numero.

Atributos de Idioma

- Lang: indica el idioma del elemento.

- Xml:Lang indica el idioma del elemento pero con mayor prioridad.

- Dir: indica la dirección del texto , es decir se lo utiliza con idiomas que no se escriben de izquierda a derecha.



Atributos

Atributos dinámicos

Se encuentran en este grupo a aquellos atributos que son los encargados de exhibir los efectos y animaciones de las paginas.

- Onclick: establece la accion que se va a realizar cuando se haga un clic sobre el elemento.

- Ondbclick: cuando se hace un doble click sobre el elemento.

- Onmousedown: se ejecuta cuando se detecta el boton del mouse presionado.

- Onmouseup: se ejecuta cuando detecta que el boton fue soltado.

- Onmouseover: establece cuando se detecta que el cursor se situa sobre el elemento.

- Onmousemove: establece la accion cuando se detecta que el cursor se encuentra en movimiento sobre el elemento.

- Onmouseout: establece la accion cuando el cursor abandona el elemento.

- Onkeypress: se ejecuta cuando se presiona una tecla del teclado.

- Onkeydown: se ejecuta cuando se detecta que esta pulsada la tecla.

- Onkeyup: se ejecuta cuando la tecla fue soltada.

Estos atributos son utilizados cuando se utilizan codigo javascript en el documento HTML, lo cual hace posible la iteraccion del usuario con el mismo.



AtributosAtributos de selección

Nos permiten asignar acciones que se realizaran en cada caso cuando se encuentre el foco del elemento.

- AccesKey: establece una tecla de acceso rápido a un elemento.

- TabIndex: establece el orden de tabulación del documento su valor oscila de 0 a 32.767.

- OnFocus: se ejecuta la accion cuando se detecta el foco sobre el elemento.

- OnBlur: se ejecuta cuando se detecta que el elemento ha perdido el foco.

El TabIndex exhibe su mayor funcionalidad cuando se trabajo sobre formularios de login o de registro.

Ejemplo:

<div> <img src="puentecongelado.png" alt="Puente" onClick="alert('¡Has hecho clic!')"> </div>

<img src="puentecongelado.png" alt="Puente" onClick="alert('¡Has hecho clic!')" onmouseover="" style="cursor: pointer;">



Ejemplo con div <html>

<head>

<meta charset="utf-8">

<title>Ejemplo etiqueta div - aprenderaprogramar.com</title>

</head>

<body>

<div style="border: 1px solid red;">

Cabecera de la página.

</div>

<div style="border: 1px solid green;">

Cuerpo de la página.

</div>

<div style="border: 1px solid blue;">

Pie de la página

</div>

</body>

</html>



Ejemplo con span<html>

<head>

<meta charset="utf-8">

<title>Ejemplo etiqueta span - aprenderaprogramar.com</title>

</head>

<body>

<div style="text-align: center; font-size: 60px; border: 1px solid red;">

Cabecera

<span style="color: green;">de</span>

la <span style="color: orange;">página</span>.

</div>

<div style="border: 1px solid green;">

Cuerpo de la página.

</div>

<div style="border: 1px solid blue;"> Pie de la página </div>

</body>

</html>



Ejemplo con div de dos columnas<html>

<head> <title>pagina con div</title>

</head>

<body>

<div style = "display: table; margin-left: auto; margin-right: auto;

width: 500px; border:0; ">

<div style = "height: 45px; width: 500px;">Cabecera</div>

<div style = "float: left; height: 75px; width: 150px;">

<p>MENU PRINCIPAL</p>

</div>

<div style = "float: right; height: 75px; width: 350px;">

<p>PAGINA PRINCIPAL</p></div>

<div style = " clear: both; background-color:#33FF00;



cursor:crosshair; text-align:center; height: 35px; width: 500px;">

<p>PIE DE PAGINA</p></div>

</div></body></html>



CSS

Las hojas de estilo CSS son un conjunto reglas que enumeran en un fichero .css y que describen elaspecto que deben tener los diferentes elementos HTML de una página.

Lo interesante de esto es que funcionan con una filosofía de patrones o plantillas, es decir, no esnecesario especificar cada uno de los elementos, sino que se pueden definir reglas como estas dos:

“Los títulos de nivel 1 y 2 han de ser de color negro y un tamaño de fuente de 16 y 14 pixelesrespetivamente.”

“El texto de los párrafos están alineados a la izquierda, tienen un tamaño de fuente de 12 pixeles yun color gris oscuro.”



CSS – Propiedades basicas

1 Maquetación básica• width: Ancho de un elemento.• height: Alto de un elemento.• vertical-align: Alineamiento vertical dentro de un elemento.• margin: Espacio que se añade entre el elemento y sus vecinos. Se puede diferencia por

lado (arriba, abajo, izquierda, derecha).• padding: Relleno interior que se añade en los bordes del A diferencia de margin,

cuenta para el tamaño del elemento.• float: Mueve el elemento todo lo posible hacia el lado indicado. Esta propiedad se usa

en el posicionamiento flotante de CSS. El tema del posicionamiento en CSS no es trivialy conviene estudiar cómo funciona antes de usar esta propiedad.



CSS – Propiedades basicas2. Fuentes y texto• font-family: Tipo de letra• font-size: Tamaño de letra• font-weight: Peso (normal, negrita, …)• font-style: Estilo (normal, cursiva, …)• text-decoration: “Decoraciones” como subrayado, tachado, etc.• text-align: Alineación del texto (izquierda, derecha, etc.)• text-transform: Mostrar un texto en mayúsculas, minúsculas o la primera letra de cada

palabra en mayúsculas.

3. Color y fondos• color: Color del elemento. Se puede especificar en diferentes formatos como palabras

predefinidas (red, green, etc.) RGB o como valor hexadecimal.• background-color: Color del fondo del elemento.• background-image: Permite especificar una imagen de fondo.• background-repeat: Permite usar una imagen a modo de mosaico en diferentes

modalidades.• box-shadow: Crear un efecto de sombra para un elemento.



CSS – Propiedades basicas

4. Listas• list-style-image: Usar la imagen especificada como viñeta para la lista.• list-style-type: Diferentes estilos de viñetas y estilos de numeración para elementos de

lista.

5. Bordes• border: Añade un borde a un elemento y establece algunas propiedades (grosor, estilo

de línea, etc.)• border-color: Color del borde.• border-style: Diferentes estilos para el borde (sólido, puntos, etc.)• border-radius: Permite crear esquinas redondeadas para un elemento..”



<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

<head>

<title>Mi primera página con estilo</title>

</head>

<body>



<ul class="navbar">

<li><a href="indice.html">Página principal</a>

<li><a href="meditaciones.html">Meditaciones</a>

<li><a href="ciudad.html">Mi ciudad</a>

<li><a href="enlaces.html">Enlaces</a>

</ul>



<h1>Mi primera página con estilo</h1>

<p>¡Bienvenido a mi primera página con estilo!

<p>No tiene imágenes, pero tiene estilo.

También tiene enlaces, aunque no te lleven a

ningún sitio…

<p>Debería haber más cosas aquí, pero todavía no sé

qué poner.



<address>Creada el 5 de abril de 2004<br>

por mí mismo.</address>

</body>

</html>




<html>

<head>


<style type="text/css">

body {

color: purple;

background-color: #d8da3d }

</style>

</head>




<html>

<head>



body {

font-family: Georgia, "Times New Roman",

Times, serif;

color: purple;


h1 {

font-family: Helvetica, Geneva, Arial,

SunSans-Regular, sans-serif }

</style>

</head



<html>

<head>



body {

padding-left: 11em;


Times, serif;

color: purple;


ul.navbar {

position: absolute;

top: 2em;

left: 1em;

width: 9em }

h1 {



</style>

</head>




body {

padding-left: 11em;


Times, serif;

color: purple;


ul.navbar {

list-style-type: none;

padding: 0;

margin: 0;

position: absolute;

top: 2em;

left: 1em;

width: 9em }

h1 {



ul.navbar li {

background: white;

margin: 0.5em 0;

padding: 0.3em;

border-right: 1em solid black }

ul.navbar a {

text-decoration: none }

a:link {

color: blue }

a:visited {

color: purple }

</style>




<html>

<head>


<link rel="stylesheet" href="miestilo.css">

</head>

<body>

[etc.]

Sitio Web de la Cátedra http://catedras.facet.unt.edu.ar/bd

BASES DE DATOS


http://catedras.facet.unt.edu.ar/bd

Documents

Presentación de PowerPoint · -TabIndex: establece el orden de tabulación del documento su valor oscila de 0 a 32.767.-OnFocus: se ejecuta la accion cuando se detecta el foco sobre