Desarrollo Web

viernes, 20 de enero de 2017

Practica Calificada con Microsoft Access

Practica Calificada con Microsoft Access

Practica para clase : Academia de Capacitacion

Practica Domiciliaria : Control de Alquiler de Libros
Fecha de presentación limite : 27-01.2017

Descargar Manual de Access 2010

viernes, 6 de enero de 2017

Practica con documentos Financieros en Excel 2016

Practica con documentos Financieros en Excel 2016

El Cashflow o Flujo de Caja

La Planilla de Excel para el Flujo de Caja Mensual detalla los movimientos de operativos, de inversión y financieros

El Cashflow o Flujo de Caja se usa para medir los recursos que genera la empresa y es la diferencia entre el dinero recibido y el dinero desembolsado al emprender un proyecto de inversión.

Muchas veces es confundido con el beneficio neto, sin embargo en este último se incluyen una serie de gastos que no son incluidos en el cashflow, como ser las amortizaciones o las provisiones que a pesar de que son pérdidas que la empresa enfrenta no generan salida de dinero.

El Balance Contable

La planilla de Excel para Balance Contable lleva al detalle y por año el estado de situación patrimonial de la empresa.

Posee un control de calidad para respetar la norma contable “Activo igual a Patrimonio Neto más Pasivo”

En todas las empresas es necesario conocer la situación patrimonial y financiera, así como los resultados que se hayan obtenido durante cada período (ya sea año, trimestre o mes).

El Balance Contable es el documento en donde se incluye dicha información patrimonial y financiera.

En el mismo figuran tres grandes categorías:

Activos: Corriente y no Corriente
Pasivos: Corriente y no Corriente
Patrimonio Neto: es la diferencia entre Activos y Pasivo

Descargar modelo

viernes, 30 de diciembre de 2016

Registro de Compras y Ventas

Registro de Compras

Definición

El registro de Compras es un libro auxiliar obligatorio de característica tributario de foliación doble. El registro se realiza en forma detallada, ordenada y cronológica de cada uno de los documentos de compras de bienes y servicios que registre diariamente.

Los documentos que sustentan las operaciones realizadas son las facturas, las boletas de venta, notas de crédito, notas de débito, etc.

Aspecto legal

Es obligatorio para todas las empresas o personas individuales que desarrollen actividades consideradas como rentas de tercera categoría y que estén dentro del alcance del Impuesto General a las Ventas y debe ser legalizado en el primero folio ante un Notario o Juez de Paz.

Rayado

El rayado que presenta este libro es el siguiente:

a. Fecha de la factura del proveedor.
b. Número de factura.
c. Número del RUC del proveedor.
d. Nombre del proveedor.
e. Artículo comprado.
f. Bienes gravados.
g. Servicios gravados.
h. Tasa e importe de los descuentos y bonificaciones.
i. Importe de los bienes y servicios no gravados.
j. Tasa e importe del Impuesto Selectivo al Consumo.
k. Tasa e importe del Impuesto General a las Ventas.
l. Importe total.

Practica de Creación de Registro de Compras

Registro de Ventas

Definición

Es un auxiliar obligatorio de característica tributario de foliación doble en el cual se registran en forma detallada, ordenada y cronológica, cada una de las ventas de bienes o servicios que realiza la empresa en el desarrollo habitual de sus operaciones. Los documentos que sustentan las ventas realizadas son las facturas, boletas de venta, notas de crédito, notas de débito, etc.

A través de este libro se obtiene el importe mensual del Impuesto General a las Ventas el cual es considerado como impuesto retenido al cliente por las ventas realizadas, a este IGV retenido se le deduce el IGV anotado en el Registro de Compras.

Aspecto legal
Este libro debe ser legalizado en el primer folio ante un Notario Público o Juez de Paz adquiriendo valor legal.

Rayado

El rayado que adopta este libro se muestra a continuación debiendo cada empresa adecuarlo a sus necesidades de información.

a) Fecha.
b) Número de RUC del cliente.
c) Número de la Factura, Boleta de Venta, Nota de Débito, Nota de Crédito.
d) Nombre o Razón Social del Cliente.
e) Ventas Comercio Exterior: Moneda, tipo de cambio, importe.
f) Importe de los Bienes y Servicios grabados.
g) Importe de los descuentos y bonificaciones.
h) Otros cargos.
i) Importe de los Bienes y Servicios no gravados.
j) Importe Base imponible del Impuesto Selectivo al Consumo.
k) Tasa e Importe del Impuesto Selectivo al Consumo.
l) Tasa e Importe de la base imponible del IGV.
m) Tasa e importe del Impuesto General a las ventas.
n) Importe total a cobrar.

Practica de creación de registro de ventas

sábado, 17 de diciembre de 2016

Examen Parcial 01 - Ofimática Gerencial Grupo 02

Examen Parcial 01 - Ofimática Gerencial Grupo 02

Grupo 02

Fecha de incio : 6:30 am

Fecha de Termino : 10:30 pm

1. Uso de las herramientas de Microsoft Word

La Municipalidad Provincial de Tumbes realizará una sesion solemne y desfile civico patriotico para el dia 07 de enero del 2017; por el aniversario de independencia de la ciudad de Tumbes, para lo cual deberá invitar a participar en dicha actividad al personal docente, administrativo y alumnado del ISTP "Modern Systems". Redacte el documento que deberá ser cursado para la fecha y hora indicada.

2. Uso de las herramientas de Microsoft Excel

Completa el cuadro adjunto aplicando las formulas y funciones correspondientes.

Descargar practica Excel

3. Uso de las herramientas de Microsoft Power Point.

Elabora una presentacion con 10 diapositivas como mínimo tomando como tema central la contaminacion ambiental en la region Tumbes.

Indicaciones:

- Deberás crear una nueva entrada en tu blog denominada Resolución de examen parcial 01 - Ofimatica Gerencial.

- Guarda los documentos en Driver y compartelos debajo de cada pregunta.

Examen Parcial 01 - Ofimática Gerencial

Examen Parcial 01 - Ofimática Gerencial

Grupo 01

Fecha de incio : 8:30 am

Fecha de Termino : 12:30 pm

1. Uso de las herramientas de Microsoft Word

La empresa constructora: "Vida feliz" requiere con urgencia el uso de maquinaria pesada para nivelar ciertas hectreas de terreno, para lo cual deberá solicitar en alquier a la Direccion Regional de Transportes lo siguiente: Tres volquetes, una carterpilla motoniveladora y un rodillo vibrador. Redacte el documento correspondiente para obtener lo requerido, proponga nombres, fecha y la cantidad de horas promedio de alquiler.

2. Uso de las herramientas de Microsoft Excel

Completa el cuadro adjunto aplicando las formulas y funciones correspondientes.

Descargar practica Excel

3. Uso de las herramientas de Microsoft Power Point.

Elabora una presentacion con 10 diapositivas como mínimo tomando como tema central el turismo en la region Tumbes.

Indicaciones:

- Deberás crear una nueva entrada en tu blog denominada Resolución de examen parcial 01 - Ofimatica Gerencial.

- Guarda los documentos en Driver y compartelos debajo de cada pregunta.

viernes, 16 de diciembre de 2016

PRACTICA CALIFICADA

REDACCIÓN COMERCIAL APLICANDO HERRAMIENTAS DE MICROSOFT OFFICE WORD 2013

ACTIVIDADES

1.- El director de la IE. “Ramón Castilla” necesita contar con las instalaciones del Coliseo “Coloma”; con miras a desarrollar las actividades deportivas por la semana de aniversario de dicha institución, para lo cual deberá redactar un documento dirigido al general de brigada EP Jefe de la 1ra. División Blindada de Tumbes. Especifique la fecha y hora de acuerdo al cronograma de actividades.

2.- Los profesores de la IE “Ramón Castilla” deberán suspender labores para el día especificado por el director de dicha institución, a efectos de lo cual la secretaria de dirección deberá redactar un documento comunicando dicha disposición.

3.- Un profesor no podrá asistir a las labores académicas a dicha institución por lo cual deberá presentar un documento solicitando permiso. Especifique fecha y hora.

miércoles, 14 de diciembre de 2016

Ideas de Negocios para emprender en Internet

Descargar

viernes, 9 de diciembre de 2016

Excel Basico Apliacado a la Administracion

Excel Basico Aplicado a la Administracion

Fichero para descargar

Ofimatica - Excel

jueves, 1 de diciembre de 2016

Trabajo de Análisis: The Pirate Bay

Trabajo de Análisis: The Pirate Bay

DESARROLLO DE PREGUNTAS SOBRE EL CONTENIDO DEL TEMA DE LECTURA THE PIRATE BAY

1.- ¿Cree Ud. que The Pirate Bay puede sobrevivir en un mundo global de internet?

A mi parecer si la tecnología evoluciona o avanza siempre primero que la ley este tipo de sitios web, como el tratado en la lectura, si podría sobrevivir, debido a que sistemáticamente estos proveedores de servicios de internet se esconden bajo otros nombres cambiando su dirección IP o duplicando sus programas en otras más, así mismo la fácil accesibilidad que existe actualmente en encontrar dichos sitios web. Muy distinto es que se reduzca el ingreso o que depende de las operadoras de sitios web en prohibir el acceso a ellas.

2.- ¿Por qué Google y varios grupos que están en favor de las libertades civiles se oponen a una legislación como la ley de protección de direcciones IP?

Simplemente porque como la tecnología o más precisamente estos operadores web, reciben una muy elevada rentabilidad por los anuncios de los espacios que venden a estas direcciones o servidores de la información en el mercado negro. Por ende promulgar esto les restaría elevados ingresos económicos.

3.- ¿Por qué la computación en la nube representa una amenaza para los sitios piratas?

Pues simplemente estas nuevas plataformas virtuales de música y videos, son de acceso instantáneo y la información que se transmite llega de manera más rápida sin necesidad de realizar ninguna descarga software.

Bienvenido al curso de Negocios Electrónicos

Bienvenido al curso de Negocios Electrónicos

El siguiente blog contiene información sobre el desarrollo del curso de Negocios Electrónicos de la especialidad de Asistencia Gerencial Ciclo IV del Centro de Informática y Telecomunicación de la Universidad Nacional de Tumbes dictado por el Prof. Carlos Rivas Noblecilla.

sábado, 16 de abril de 2016

MAQUETACION DE FORMULARIOS CON HTML5 Y CSS

MAQUETACION DE FORMULARIOS CON

HTML5 Y CSS

Código: index.php

<html>
<head>
<meta charset="UTF-8">
<title>Maquetacion de Formularios</title>
<link href="estilos.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="formulario">
<form id="form" method="post" action="pagina-destino.php">
<h1>Formulario de Registro</h1><br>
<label>Nombre</label>
<input type="text" id="name" name="nombre" required="" placeholder="Nombre" />

<label>Fecha de Registro</label>

<input type="date" name="fecha" id="fecha" required="" placeholder="Fecha" />
<label>Email</label>

<input type="text" name="email" id="email" required="" placeholder="Email" />

<label>Password : </label>
<input type="text" name="password" id="password" required="" placeholder="Password" />
<button type="submit" name="enviar">Enviar</button>
</form>
</div>
</body>
</html>

Código : estilos.css

body{
text-align:center;
font-family:verdana,arial,helvetica,sans-serif;
}

#formulario{
border:solid 2px #708090;
border-radius: 15px;
box-shadow: 12px 12px 15px #ABCABC;
backgroud:#dcdcdc;
margin:0 auto;
width :400px;
padding:14px;
}
#formulario h1{
font-size:24px;
font-weight:bold;
margin-bottom:10px;
}

#formulario label{
display:block;
font-weigth:bold;
text-aligin:right;
width:140px;
float:left;

}

#formulario input{
float:left;
font-size:12px;
padding:4px 2px;
border:salid 1px #708090;
width:200px;
margin:2px 0 20px 10px;

}

#formulario button{
clear:both;
margin:0 auto;
width:100px;
height:31px;
background:#696969;
text-align:center;
line-height:31px;
color : #fff;
font-size:11px;
font-weight:bold;
}

viernes, 6 de febrero de 2015

Maquetación con DIV

Descargar Archivo : Maquetacion con DIV

------------------------------------------------------------------------------------------------------
principal.css
-------------------------------------------------------------------------------------------------------

body {
margin: 0;
padding: 0;
background: #F2F5FE url("../imagenes/fondo.gif") 0 0 repeat-x;
font: 70%/160% "verdana", sans-serif;
color: #192666;
}

a {
color:#192666;
}
a:hover {
color:#4F6AD7;
}

p {
margin: 1em 0;
padding: 0;
}

.clear {
clear: both;
}

h1, h2, h3, h4, h5 {
margin: 1em 0;
padding:0;
}

h1 {
font-size: 260%;
font-family: "georgia", serif;
font-weight: normal;
}

h2 {
font-size:180%;
font-family: "georgia", serif;
font-weight:normal;
}

h3 {
font-size:120%;
font-weight:bold;
}

ul, ol {
margin: 1em 0 1em 2em;
padding:0;
}

/* ---- Layout ------------------------------------------------------------- */

#contenedor {
width: 1000px;
margin-top: 50px;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}

#cabecera {
width: 1000px;
position: relative;
height: 100px;
margin: 0;
padding: 0;
background: #233C9B url("../imagenes/cabecera.jpg") no-repeat;
color: #FFF;
}

#contenido {
width: 990px;
background: #FFF;
margin-top: 0;
margin-right: 5px;
margin-bottom: 0;
margin-left: 5px;
}

#contenido #principal {
float: left;
width: 720px;
margin-top: 15px;
background: #FFF;
padding-top: 0;
padding-right: 0;
padding-bottom: 0;
padding-left: 20px;
}

#contenido #secundario {
float: left;
width: 250px;
padding: 0;
background: #CEDBF9 url("../imagenes/fondo_columna.gif") no-repeat;
margin-top: 15px;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
}

#pie {
clear: both;
height: 60px;
margin-bottom: 50px;
background: url("../imagenes/fondo_pie.jpg") no-repeat;
color: #6685CC;
position: relative;
}

/* ---- Cabecera ----------------------------------------------------------- */
#cabecera #logo {
position: absolute;
top: 35px;
left: 35px;
margin: 0;
width: 170px;
}

#cabecera #logo a {
color: #FFF;
display: block;
line-height: 35px;
}

#cabecera #logo a:hover {
color: #B5C4E3;
text-decoration: underline;
}

#cabecera #buscador {
position: absolute;
top: 40px;
right: 20px;
}

#cabecera #buscador legend {
display: none;
}

#cabecera #buscador fieldset {
border: none;
}

/* ---- Menú --------------------------------------------------------------- */
#menu {
background: #192666;
margin: 0 5px;
padding: 10px 0 0 0;
}

#menu ul {
margin: 0 10px;
padding: 0;
list-style:none;
}

#menu ul li {
margin: 0 5px 0 0;
padding: 0;
float:left;
}

#menu ul li a {
display: block;
position: relative;
padding: 5px 15px;
border: 0;
background: #253575;
color: #B5C4E3;
font-weight: bold;
text-decoration: none;
cursor: pointer;
}

#menu ul li a:hover {
background-color: #FFFFFF;
color: #FF902E;
}

#menu ul li.seleccionado a {
color: #FF9000;
background-color: #253575;
}

/* ---- Contenidos --------------------------------------------------------- */
#contenido .articulo {
clear: both;
margin: 0;
padding: 20px;
background: url("../imagenes/fondo_articulo.jpg") no-repeat;
}

#contenido .articulo h2 {
margin: 0 -20px;
padding: 10px;
background: #DEE5FD;
color: #192666;
}

#contenido .info {
margin: 10px 0;
padding-bottom: 8px;
border-bottom: 1px solid #DEE5FD;
color:#6685CC;
}

#contenido .info a { color:#6685CC; }
#contenido .info a:hover { color:#FF9000; }

#contenido .info span.fecha, #contenido .info span.categoria, #contenido .info span.autor, #contenido .info span.comentarios {
padding-left:15px;
}

#contenido .info span.fecha { background: url("../imagenes/icono_fecha.gif") 0 50% no-repeat; }
#contenido .info span.categoria { background: url("../imagenes/icono_categoria.gif") 0 50% no-repeat; margin-left: 8px; }
#contenido .info span.autor { background: url("../imagenes/icono_autor.gif") 0 50% no-repeat; margin-left: 8px; }
#contenido .info span.comentarios { background: url("../imagenes/icono_comentarios.gif") 0 50% no-repeat; margin-left: 8px; }

#contenido #secundario h3 {
padding: 10px 0 10px 10px;
margin-top: 20px;
background: #A0B9F3;
color: #192666;
}

#contenido #secundario #sobremi img {
float: left;
margin: 4px 5px 0 0;
}

#contenido #secundario #sobremi p {
}

#contenido #secundario div {
padding: 0 10px;
}

#contenido #secundario ul {
margin: 15px 0;
padding: 0;
list-style:none;
}

#contenido #secundario li {
margin: 0;
padding: 0;
border-bottom: 1px solid #E0E8FA;
}

#contenido #secundario li a {
display: block;
padding: 3px 0 3px 22px;
background: url("../imagenes/icono_elemento.gif") 8px no-repeat;
text-decoration: none;
}

#contenido #secundario li a:hover {
background-color: #E0E8FA;
color: #192666;
}

#contenido #secundario li.seleccionado a {
background: #E0E8FA url("../imagenes/icono_elemento_seleccionado.gif") 8px no-repeat;
font-weight: bold;
}

/* ---- Pie ---------------------------------------------------------------- */
#pie p {
margin: 0;
padding: 0;
position: absolute;
top: 10px;
left: 40px;
}

---------------------------------------------------------------------------------------------------------------
index.html
---------------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="content-language" content="es" />

<meta name="copyright" content="Design/Code: Vit Dlouhy [Nuvio - www.nuvio.cz]; e-mail: vit.dlouhy@nuvio.cz" />

<title>Mi sitio web</title>
<meta name="description" content="Mi sitio web" />
<meta name="keywords" content="sitio, web" />

<link rel="index" href="./" title="Inicio" />
<link rel="stylesheet" media="screen,projection" type="text/css" href="./css/principal.css" />
</head>

<body>


<div id="contenedor">


<div id="cabecera">


<h1 id="logo"><a href="./" title="Mi sitio web">Mi sitio web</a></h1>


<div id="buscador">
<form action="" method="get">
<fieldset>
<legend>Buscador</legend>
<input type="text" name="busqueda" size="30" />
<input type="submit" name="botonbuscar" value="Buscar" />
</fieldset>
</form>
</div> 

<div class="clear"></div>
</div> 


<div id="menu">
<ul>
<li class="seleccionado"><a href="index.html">Inicio</a></li>
<li ><a href="blog.html">Blog</a></li>
<li><a href="#">Sobre mi</a></li>
<li><a href="#">Fotos</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contacto</a></li>
<li><a href="#">Enlaces</a></li>
</ul>

<div class="clear"></div>
</div> 


<div id="contenido">


<div id="principal">


<div class="articulo">
<h2><a href="#">BIENVENIDOS A MI PAGINA WEB</a></h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enim bibendum blandit.
Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere malesuada. Nullam ac metus. Cras non leo
ut est placerat condimentum.</p>

<p class="btn-more"><a href="#">Seguir leyendo...</a></p>
</div> 

<div class="clear"></div>



<div class="clear"></div>



<div class="clear"></div>

</div>


<div id="secundario">


<h3><a href="#">Sobre mí</a></h3>

<div id="sobremi">
<img src="imagenes/mifoto.gif" alt="Mi foto" />
<p><strong>Nombre apellidos</strong><br />
Edad<br />
Ciudad de residencia<br />
<a href="#">Mi perfil público</a></p>
</div> 

<div class="clear"></div>


<h3>Categorías</h3>

<ul id="categorias">
<li class="seleccionado"><a href="#">Categoría 1</a></li>
<li><a href="#">Categoría 2</a></li>
<li><a href="#">Categoría 3</a></li>
<li><a href="#">Categoría 4</a></li>
<li><a href="#">Categoría 5</a></li>
</ul>

<div class="clear"></div>


<h3>Archivo</h3>

<ul id="archivo">
<li class="seleccionado"><a href="#">Enero 200X</a></li>
<li><a href="#">Diciembre 200X</a></li>
<li><a href="#">Noviembre 200X</a></li>
<li><a href="#">Octubre 200X</a></li>
<li><a href="#">Septiembre 200X</a></li>
</ul>

<div class="clear"></div>


<h3>Enlaces</h3>

<ul id="enlaces">
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
<li><a href="#">Enlace 5</a></li>
</ul>

<div class="clear"></div>

</div> 

<div class="clear"></div>
</div> 


<div id="pie">
<p id="copyright">© 2015 karlosrivas@gmail.com</p>
</div> 

</div> 

</body>
</html>

------------------------------------------------------------------------------------------------------------------------

blog.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<!-- Este diseño está basado en un diseño web libre llamado CrystalX y que se puede descargar desde

la dirección http://www.oswd.org/design/preview/id/3465 -->

<title>Mi sitio web</title>

</head>

<body>

<h1 id="logo"><a href="./" title="Mi sitio web">Mi sitio web</a></h1>

<legend>Buscador</legend>

</fieldset>

</form>

</div>

</div>

<ul>

<li><a href="index.html">Inicio</a></li>

<li><a href="#">Sobre mi</a></li>

<li><a href="#">Fotos</a></li>

<li><a href="#">Portfolio</a></li>

<li><a href="#">Contacto</a></li>

<li><a href="#">Enlaces</a></li>

</ul>

</div>

<h2><a href="#">Articulo 01</a></h2>

<span class="categoria"><a href="#">diseño</a></span>

<span class="autor"><a href="#">Nombre Apellido</a></span>

<span class="comentarios"><a href="#">Añadir comentario</a></span>

</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enim bibendum blandit.

Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere malesuada. Nullam ac metus. Cras non leo

ut est placerat condimentum.</p>

<p class="btn-more"><a href="#">Seguir leyendo...</a></p>

</div>

<h2><a href="#">Articulo 02</a></h2>

<span class="categoria"><a href="#">diseño</a></span>

<span class="autor"><a href="#">Nombre Apellido</a></span>

<span class="comentarios"><a href="#">Añadir comentario</a></span>

</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enim bibendum blandit.

Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere malesuada. Nullam ac metus. Cras non leo

ut est placerat condimentum.</p>

<p class="btn-more"><a href="#">Seguir leyendo...</a></p>

</div>

<h2><a href="#">Articulo 03</a></h2>

<span class="categoria"><a href="#">diseño</a></span>

<span class="autor"><a href="#">Nombre Apellido</a></span>

<span class="comentarios"><a href="#">Añadir comentario</a></span>

</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam pellentesque enim blandit enim bibendum blandit.

Integer eu leo ac est aliquet imperdiet. Quisque nec justo id augue posuere malesuada. Nullam ac metus. Cras non leo

ut est placerat condimentum.</p>

<p class="btn-more"><a href="#">Seguir leyendo...</a></p>

</div>

</div>

<h3><a href="#">Sobre mí</a></h3>

<p><strong>Nombre apellidos</strong><br />

Edad<br />

Ciudad de residencia<br />

<a href="#">Mi perfil público</a></p>

</div>

<h3>Categorías</h3>

<li class="seleccionado"><a href="#">Categoría 1</a></li>

<li><a href="#">Categoría 2</a></li>

<li><a href="#">Categoría 3</a></li>

<li><a href="#">Categoría 4</a></li>

<li><a href="#">Categoría 5</a></li>

</ul>

<h3>Archivo</h3>

<li class="seleccionado"><a href="#">Enero 200X</a></li>

<li><a href="#">Diciembre 200X</a></li>

<li><a href="#">Noviembre 200X</a></li>

<li><a href="#">Octubre 200X</a></li>

<li><a href="#">Septiembre 200X</a></li>

</ul>

<h3>Enlaces</h3>

<li><a href="#">Enlace 1</a></li>

<li><a href="#">Enlace 2</a></li>

<li><a href="#">Enlace 3</a></li>

<li><a href="#">Enlace 4</a></li>

<li><a href="#">Enlace 5</a></li>

</ul>

</div>

</div>

</div>

</div>

</body>

</html>

viernes, 9 de enero de 2015

Ejemplo de Altas , bajas y modificaciones con php Ajax y jQuery v2.0

http://www.tutorialjquery.com/ejemplo-de-altas-bajas-y-modificaciones-con-php-ajax-y-jquery/

En este ejemplo encontrarán el código fuente PHP y javascript que muestra como crear un abm de forma muy simple.

Usando algo de php, ajax y jQuery, la idea es crear una pequeña aplicación que permita añadir , borrar y actualizar registros en una base de datos mysql.

El código es muy simple , para que cualquiera que este empezando a estudiar php pueda entenderlo, además fue separado en capas lo que les permitrá al mismo tiempo aprender como estructurar el código básicamente sin utilizar un framework.

Descargar Archivo

miércoles, 7 de enero de 2015

Comenzando con HTML + CSS

PASO 1: ESCRIBIR EL CÓDIGO HTML

El paso 1 consiste en abrir tu editor de texto (Notepad, TextEdit, HTML Kit o el que desees), comenzar con una ventana vacía y escribir lo siguiente:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
</head>

<body>

<!-- Menú de navegación del sitio -->
<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>

<!-- Contenido principal -->
<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.

<!-- Firma y fecha de la página, ¡sólo por cortesía! -->
<address>Creada el 5 de abril de 2004<br>
  por mí mismo.</address>

</body>
</html>

La primera línea que aparece en el archivo HTML, le dice al navegador el tipo de HTML (DOCTYPE significa DOCument TYPE - en español: TIPO de DOCumento). En este caso, se trata de la versión 4.01 de HTML.

Las palabras que se encuentran entre < y > se llaman etiquetas (tags) y, como puedes ver, el documento está entre las etiquetas <html> y </html>. Entre <head> y </head> hay espacio para diferentes tipos de información que no aparecerán en la pantalla. Hasta ahora, el documento sólo contiene el título pero posteriormente también se añadirá la hoja de estilos de CSS.

El <body> es dónde se sitúa el texto del documento. En un principio, cualquier cosa que se coloque ahí será mostrado, excepto el texto que esté dentro de las siguientes etiquetas , las cuales muestran el contenido situado en ese lugar como un comentario de referencia para nosotros mismos. El navegador la ignorará.

De las etiquetas del ejemplo, <ul> crea una “lista desordenada”, es decir, una lista en la cual los elementos no están numerados. La etiqueta <li> indica el comienzo de un “elemento lista”. <p> es un “párrafo”. Y <a> es un “enlace”, que es lo que crea un hipervínculo.

“ul” representa una lista con un hipervínculo por cada elemento. Esto mostrará nuestro “menú de navegación del sitio” con enlaces a otras páginas (ficticias) del sitio Web. Supuestamente, todas las páginas de nuestro sitio Web tienen un menú similar.
Los elementos “h1” y “p” componen el único contenido de esta página, mientras que la firma al final (“address”) será la misma para todas las páginas del sitio.

Vamos a suponer que va a ser una página de un sitio Web que tendrán varias páginas similares. Como es frecuente en páginas Web, ésta tiene un menú con enlaces a otras páginas en el sitio ficticio, un contenido único y una firma.

Ahora, selecciona “Guardar como…” del menú Archivo, ve hasta un directorio/carpeta donde quieras guardar el documento (el escritorio puede ser una opción) y guarda el archivo como “mipagina.html”. No cierres todavía el editor, lo necesitarás otra vez.

Después, abre el archivo en un navegador de la siguiente forma: encuentra el archivo con tu administrador de archivos (Windows Explorer, Finder o Firefox) y haz clic, o doble clic, sobre el archivo “mipagina.html”. El archivo HTML debería abrirse en tu navegador predeterminado. (Si no se abre el documento, abre el navegador y arrastra el archivo sobre él).

Como puedes ver, la página tiene un aspecto bastante aburrido...

PASO 2: AÑADIR ALGUNOS COLORES

Comenzaremos con una hoja de estilo interna en el archivo HTML. Más adelante, pondremos el HTML y el CSS en archivos diferentes. La separación de estos archivos es recomendable ya que facilita la utilización de la misma hoja de estilo para diferentes archivos HTML: sólo tienes que escribir la hoja de estilo una vez. Pero en este paso, vamos a dejarlo todo en el mismo archivo.

Necesitamos añadir un elemento <style> en el archivo HTML. La hoja de estilo estará en el interior de ese elemento. Volvamos entonces a la ventana del editor y añadamos las siguientes cinco líneas en la parte de la cabecera del archivo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
  <style type="text/css">
  body {
    color: purple;
    background-color: #d8da3d }
  </style>
</head>

<body>
[etc.]

Las líneas que tienes que añadir están marcadas en rojo. La primera línea dice que eso es una hoja de estilo y que está escrita en CSS ("text/css"). La segunda línea indica que hemos añadido estilo al elemento "body". La tercera línea establece el color del texto como morado y la siguiente línea lo que hace es darle al fondo una especie de amarillo verdoso.

Las hojas de estilo en CSS están compuestas de reglas. Cada regla tiene tres partes:

el selector (en el ejemplo sería: “body”), el cual le dice al navegador la parte del documento que se verá afectada por la regla;
la propiedad (en el ejemplo, 'color' y 'background-color' son ambas propiedades), las cuales especifican qué aspecto del diseño va a cambiarse;
y el valor ('purple' y '#d8da3d'), el cual da el valor para la propiedad.

El ejemplo muestra que es posible combinar las reglas. Hemos establecido dos propiedades, por lo que podemos tener dos reglas separadas:

body { color: purple }
body { background-color: #d8da3d }

El fondo del elemento body será el fondo para todo el documento. A los otros elementos (p, li, address…) no se les ha dado ningún fondo en concreto, por lo que de forma predeterminada no tendrán ninguno (o serán transparentes). La propiedad 'color' establece el color del texto que se encuentra en el elemento body, pero los otros elementos que se encuentran dentro de body heredarán ese color, a no ser que se especifique lo contrario. (Más adelante añadiremos más colores).

Imagen de la página con color en Firefox

Los colores pueden especificarse en la CSS de formas diferentes. El siguiente ejemplo muestra dos de ellas: por el nombre (“purple”) y por el código hexadecimal (“#d8da3d”). Hay aproximadamente 140 nombres de colores y más de 16 millones de colores disponibles en código hexadecimal.

PASO 3: AÑADIR TIPO DE LETRA

Otra cosa que es muy fácil de hacer es añadir diferentes tipos de letra para los diversos elementos de la página. Veamos el texto con el tipo de letra “Georgia”, excepto la cabecera h1, que irá con “Helvetica”.

En la Web, nunca puedes estar seguro de los tipos de letra que los usuarios tienen en sus ordenadores, por lo que añadiremos algunas alternativas: si Georgia no está disponible, Times New Roman o Times también pueden valer, y si ninguna de esas está presente, el navegador puede utilizar cualquier otro tipo de letra con serifs. Si Helvetica no está, Geneva, Arial y SunSans-Regular son bastante similares, y si ninguna de estas funciona, el navegador puede escoge cualquier otro tipo de letra que no sea serif.

Añade en el editor de texto las siguientes líneas:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
  <style type="text/css">
  body {
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[etc.]

PASO 4: AÑADIR UNA BARRA DE NAVEGACIÓN

La lista que aparece al principio de la página HTML será más adelante un menú de navegación. Algunos sitios Web tienen un menú al principio o en un lado de la página, y éste debería tenerlo también. Pondremos uno a la izquierda, ya que es más interesante ponerlo ahí que arriba…

El menú ya está en la página HTML. Es la lista <ul> que se encuentra al principio. Los enlaces que tiene no funcionan ya que nuestro "sitio Web", hasta el momento, sólo tiene una página, pero eso no es importante ahora. Por supuesto, en un sitio Web real no debería haber ningún enlace roto.

Tenemos que mover la lista a la izquierda y colocar el resto del texto un poco más hacia la derecha, para dejar espacio para el menú. Las propiedades de CSS que vamos a utilizar son 'padding-left' (para mover el texto del elemento body) y 'position' (para mover el menú).

En la ventana del editor, añade las siguientes líneas al archivo HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  </style>
</head>

<body>
[etc.]

Si guardas otra vez el archivo y lo actualizas en el navegador, deberías tener la lista de enlaces a la izquierda del texto principal. Ahora el resultado parece mucho más interesante ¿verdad?

El texto principal se ha movido hacia la derecha y la lista de enlaces está ahora a la izquierda en lugar de estar arriba.

'position: absolute' indica que el elemento ul está situado independientemente de cualquier texto que esté antes o después en el documento. 'left' y 'top' indican cuál es la posición. En este caso, está a 2em de la parte de arriba de la ventana y a 1em del lado izquierdo.

'2em' significa 2 veces el tamaño del tipo de letra actual. Por ejemplo, si el menú se muestra con un tipo de letra de 12 puntos, entonces '2em' es 24 puntos. 'em' es una unidad muy útil en CSS ya que se puede adaptar automáticamente al tipo de letra que el usuario esté utilizando. La mayoría de los navegadores tienen un menú para aumentar o disminuir el tamaño de letra: puedes probarlo y ver la forma en la que el menú aumenta de tamaño a la vez que lo hace el tipo de letra, lo que no ocurriría si hubiéramos utilizado un tamaño en píxeles.

PASO 5: DAR ESTILO A LOS ENLACES

El menú de navegación todavía parece una lista en lugar de un menú. Vamos a cambiar su aspecto. Quitaremos los puntos que indican los diferentes elementos de la lista y moveremos los elementos a la izquierda, donde estaban antes los puntos. También le daremos a cada elemento un fondo blanco y un cuadrado negro.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  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>
</head>

<body>
[etc.]

Normalmente, los navegadores muestran los hipervínculos subrayados y con color. Los colores son parecidos a los que especificamos aquí: azul para enlaces a páginas que no has visitado todavía (o visitaste hace mucho tiempo), morado para páginas que ya has visitado.

En HTML, los hipervínculos se crean con elementos <a>, por lo que para especificar el color, necesitamos añadir una regla de estilo para "a". Para diferenciar los enlaces visitados de los no visitados, CSS proporciona dos "pseudo-classes" (:link y :visited). Se llaman “pseudo-classes” para distinguirlas de los atributos de clase, que aparecen directamente en HTML, por ejemplo, class="navbar".

PASO 6: AÑADIR UNA LÍNEA HORIZONTAL

El último elemento a añadir en la hoja de estilo es una regla horizontal para separar el texto de la firma que se encuentra al final. Utilizaremos 'border-top' para añadir una línea punteada encima del elemento <address>:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
  <style type="text/css">
  body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman",
          Times, serif;
    color: purple;
    background-color: #d8da3d }
  ul.navbar {
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em }
  h1 {
    font-family: Helvetica, Geneva, Arial,
          SunSans-Regular, sans-serif }
  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 }
  address {
    margin-top: 1em;
    padding-top: 1em;
    border-top: thin dotted }
  </style>
</head>

<body>
[etc.]

Ahora, ya hemos terminado de darle estilo a la página. Lo siguiente es ver cómo se pone la hoja de estilo en un archivo diferente para que de esta forma otras páginas puedan utilizar el mismo estilo.

PASO 7: PONER LA HOJA DE ESTILO EN UN ARCHIVO SEPARADO

Ahora tenemos un archivo HTML con una hoja de estilo en su interior. Pero si nuestro sitio crece desearemos añadir más páginas que compartan el mismo estilo. Hay un método más adecuado que copiar la hoja de estilo dentro de cada página y que es: colocar la hoja de estilo en un archivo separado, haciendo que todas las páginas estén enlazadas a esa hoja.

Para separar la hoja de estilo del archivo HTML, necesitamos crear otro archivo de texto, que esté vacío. Puedes escoger "Nuevo" del menú Archivo del editor para crear una ventana vacía.

Después, corta y pega en la nueva ventana todo lo que hay dentro del elemento <style> del archivo HTML. No copies las etiquetas <style> y </style>. Éstas pertenecen a HTML, no a CSS. En la nueva ventana del editor, deberías tener la hoja de estilo completa:

body {
  padding-left: 11em;
  font-family: Georgia, "Times New Roman",
        Times, serif;
  color: purple;
  background-color: #d8da3d }
ul.navbar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 2em;
  left: 1em;
  width: 9em }
h1 {
  font-family: Helvetica, Geneva, Arial,
        SunSans-Regular, sans-serif }
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 }
address {
  margin-top: 1em;
  padding-top: 1em;
  border-top: thin dotted }

Elige “Guardar como…” del menú Archivo, comprueba que está en el mismo directorio/carpeta que el archivo mipagina.html, y guarda la hoja de estilo como “miestilo.css”.

Vuelve a la ventana que muestra el código HTML. Borra todo lo que hay desde la etiqueta <style> hasta </style>, ambas inclusive, y reemplázalo por un elemento <link> de la siguiente forma:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
  <title>Mi primera página con estilo</title>
  <link rel="stylesheet" href="miestilo.css">
</head>

<body>
[etc.]

De esta forma, se le indicará al navegador que la hoja de estilo se encuentra en el archivo llamado "miestilo.css". Al no especificarse ningún directorio, el navegador mirará en el mismo directorio en el que se encuentra el archivo HTML.

Si has guardado el archivo HTML y lo has actualizado en el navegador, no deberías apreciar ningún cambio en el aspecto de la página. Ésta sigue guardando el mismo estilo, pero ahora viene establecido por el archivo externo.