martes, 15 de octubre de 2013

Adobe Photoshop

¿QUÉ ES PHOTOSHOP?
Es uno de los programas más famosos de la familia Adobe, es utilizado para armar, editar, componer, retocar y transformar imágenes.
Tiene una gran facilidad para crear y manejar distintas capas superpuestas, también nos permite combinar distintos objetos y efectos sin necesidad de modificar la imagen original como una superposición de transparencia, y poder corregir la imagen completa o solo una parte de ella, por ejemplo:
Subir el brillo de algún rostro que aparece oscuro.

Cambiar la tonalidad de la imagen para transformar un día nublado en un día de sol.

CARACTERÍSTICAS
Las acciones básicas de Photoshop son:
Ø  Copiar y pegar una imagen en otra hoja.
Ø  Seleccionar una imagen o parte de ella.
Ø  Agregar efectos rápidos para imagen.
Ø  Crear una nueva capa.
Ø  Copiar una parte de una imagen y duplicarla en la misma.
Ø  Desenfocar el contorno de una figura o imagen cortada para que se fusione con el fondo.
Ø  Duplicar una imagen.
Ø  Borrar imperfecciones. 
d
dREQUISITOS DEL SISTEMA PARA INSTALARLO

Existen distintas versiones de Photoshop y para cada una de ellas existen diferentes requisitos, aquí mencionare los requisitos de algunas versiones.

Photoshop CC
Windows
ü  Procesador Intel® Pentium® 4 o AMD Athlon® de 64 bits. (de 2 GHz o superior).
ü  Microsoft® Windows® 7 con Service Pack 1 o Windows 8.
ü  1 GB de RAM.
ü  2,5 GB de espacio disponible en el disco duro para la instalación; se requiere espacio libre adicional durante la instalación (no se puede instalar en dispositivos de almacenamiento flash extraíbles).
ü  Resolución de 1024 x 768 (se recomienda 1280 x 800) con tarjeta gráfica OpenGL® 2.0, color de 16 bits y 512 MB de VRAM (se recomienda 1 GB)*
ü  Se requiere disponer de una conexión a Internet y registrarse para la activación del software y la validación de los abonos obligatorios, y para el acceso a los servicios online.


Photoshop CS6
Windows
ü  Procesador Intel® Pentium® 4 o AMD Athlon® 64
ü  Microsoft Windows 7 con Service Pack 1. Las aplicaciones de Adobe® Creative Suite® 5.5 y CS6 también son compatibles con Windows 8. Consulte las preguntas frecuentes de CS6 para obtener más información sobre la compatibilidad con Windows 8.*
ü  1 GB de RAM
ü  1 GB de espacio libre en disco duro para la instalación; se necesitará espacio libre adicional durante la instalación (no se puede instalar en dispositivos extraíbles de almacenamiento basados en memoria flash).
ü  Pantalla de 1024 x 768 (se recomienda 1280 x 800) con color de 16 bits y 256 MB de VRAM (se recomienda 512 MB)
ü  Sistema con OpenGL 2.0
ü  Unidad de DVD-ROM
ü  Es necesario activar el software para que funcione. Para activar el software, validar las suscripciones y acceder a los servicios en línea se necesita una conexión a Internet de banda ancha y llevar a cabo un proceso de registro. La activación por teléfono no está disponible.


Photoshop CS5
Windows
ü  Procesador Intel® Pentium® 4 o AMD Athlon® 64
ü  Microsoft® Windows® XP con Service Pack 3; Windows Vista® Home Premium, Business, Ultimate o Enterprise con Service Pack 1 (se recomienda Service Pack 2); o Windows 7
ü  1 GB de RAM
ü  1 GB de espacio disponible en disco duro para la instalación; se requiere espacio libre adicional durante la instalación (no se puede instalar en dispositivos de almacenamiento extraíbles basados en flash)
ü  Resolución de 1024 x 768 (se recomienda de 1280 x 800) con adaptador de gráficos OpenGL cualificado y acelerado por hardware, color de 16 bits y 256 MB de VRAM
ü  Algunas funciones aceleradas por GPU requieren gráficos compatibles con Shader Model 3.0 y OpenGL 2.0
ü  Unidad de DVD-ROM
ü  Se requiere el software QuickTime 7.6.2 para las funciones multimedia
Se requiere una conexión a Internet de banda ancha para los servicios en línea




¿Como hacer un Formulario en KompoZer?




<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Formulario</title>
</head>
<body>
<form action="mailto:erick-je@hotmail.com" method="post"-----------Esta parte es para enviar el formulario a una dirección de correo.
enctype="text/plain"><big><big>&nbsp; <span
style="font-weight: bold; color: red;">Contesta el siguiente
formulario: </span></big></big><br>
<br>
Nombre: <input name="campo" value="Campo de texto" size="20"-----Estos son para ingresar campos de textos
maxlength="15" type="text"><br>
Apellido paterno: <input name="campo" value="Campo de texto" size="20"
maxlength="15" type="text"><br>
Apellido materno: <input name="campo" value="Campo de texto" size="20"
maxlength="15" type="text"><br>
Edad: <input name="campo" value="Campo numerico" size="20"-----Este es para ingresar campos numericos
maxlength="15" type="int"><br>
Sexo:<br>
Hombre &nbsp;&nbsp;&nbsp;&nbsp; <input name="prefiere" value="hombre"--- Es para ingresar una selección
checked="checked" type="radio"> <br>
Mujer &nbsp; &nbsp; &nbsp; &nbsp; <input name="prefiere"
value="mujer" type="radio"> <br>
<br>
Describe tus habilidades: <br>
<textarea name="ejemploarea" cols="30" rows="3">Escribe
el texto que quieras</textarea><br>
<br>
&nbsp; <input name="boton" value="Enviar" type="submit"><br>
</form>
<br>
<br>
</body>
</html>





miércoles, 18 de septiembre de 2013

Estilos Básicos

Ejemplo de una pagina web con estilos básicos: 

<html>
<head>
 <title>Herramientas Web</title>
<style type="text/css">....................................................Con esta sentencia iniciamos el estilo. 
body { font-family: Verdana,Arial,sans-serif;............Colocamos los tipos de letras que ocuparemos. 
 font-size: 15px;......................................................Colocamos el tamaño de letra.
 color: #735846;.....................................................Colocamos el color de la letra.
 text-align: justify;.....................................................Es la alineación del texto.
 background-color: #663330; }...............................Este es el color del fondo.
h1 { margin-left: 80px;.............................................h1 son las características del texto "Estilos basicos"
 margin-top: 20px;
 font-size: 180%;
 color: #CC3300; }
h2, h3 { font-family: Georgia, Times, serif;...............h2 son las características del texto "Equipo"
 font-size: 150%;
 color: #33FF00;
 margin-top: 0;
 margin-left: 30px;}
h3 { color: #33FF00; }.........................................h3 son las características del texto "Contacto"
p {line-height: 1.5em;
 text-indent: 15px; 
 margin: 35px;}
img { border: 2px solid #d38451;.........................Son las características de la imagen.
 margin: 10px;........................................................................margen
 float: right; }..........................................................................alineación a la derecha
div.cuerpo { margin: 0 20px 20px;
 background-color: #FF6650; }
.azul { font-weight: bold;
color: #6C6CCA; }  

</style>...................................................................... Cerramos el estilo.

</head>.....................................................................Cerramos el head.
<body>.....................................................................Comienza el cuerpo.
<div class="cuerpo">

<h1>Estilos basicos</h1>..........................................Aquí solo colocamos el texto que deseamos y el formato con el que queremos que se muestre.
<h2>Equipo</h2>
<div class="img">
<img src="imagenes/esta.jpg" width="350" height="300" alt="No se encuentra esta imagen" />.....Aquí colocamos la imagen, y el ancho y alto de esta.
 </div>
 <p> Arroyo Toledo Mariela.</p>
<p>Blancas Velasco Erick Francisco.</p>
<h3>Contacto</h3>
<P ALIGN=center>
<a href="http://hweym.blogspot.mx">Haz clic para ir al blog</a>
<br>
</div>
</body>
</html>


martes, 17 de septiembre de 2013

Sitios Web

Para poder crear nuestro sitio web, primero tenemos que crear una carpeta.
 Y dentro de esta carpeta debemos crear otras 2 carpetas:

Dentro de la carpeta imágenes, debemos colocar todas las imágenes que ocupemos en nuestras paginas web.

EJEMPLO DE COMO SE MUESTRA UNA PAGINA WEB SENCILLA: 









<html>
<head>
<title>Mi primer pagina</title>
</head>
<P ALIGN=center> -------------(para centrar el contenido de la pagina)
<body bgcolor="#FFCC99">
<font color="CC3300" size="5">Mi pagina web</font>
<br>
<br>-------------(para dar saltos de linea=
<br>
Blancas Velasco Erick Francisco
<br>
<br>
<br>

<img src=(para insertar una imagen)"imagenes/EFBV.png"(la ruta de la imagen) WIDTH=178(ancho de la imagen) HEIGHT=180(alto de la imagen) ALT="El futuro bienvenido">(descripcion de la imagen al pasar el cursor)

<br>
<br>
<br>
<P ALIGN=left>------------(para acomodar el contenido a la izquierda)
<a href="pagina2.html">Has clic para ir a la siguiente pagina</a>-----enlace para ir a otra pagina

</html>

miércoles, 11 de septiembre de 2013

Softwares editores de HTML

Existen diferentes tipos de software editores de HTML, podemos describir 3 tipos diferentes:

  • Editor de texto sin formato.- Este tipo de editor suele ser muy sencillo.
  • Editor de texto con ventanas desdobladas.- Este tipo de editor suelen constar de un par de ventanas. 
  • Editores WYSIWYG.- La manera de trabajar de estos editores es muy similar a la que se usa cuando se trabaja con un procesador de texto. 
A continuación mencionaremos algunos editores de paginas web mas populares.

AMAYA.
Se pueden ver y generar paginas HTML y XHTML y cualquier pagina web que se abra puede ser editada inmediatamente. Los gráficos están escritos en XML y pueden ser mezclados libremente con HTML y MathML, es software libre, y esta disponible para sistemas tipo Unix, GNU/Linux, Mac OS X, Windows y otras plataformas.  



ADOBE DREAMWEAVER.
Es una aplicación en forma de estudio que esta destinada a la construcción, diseño y edición de sitios, vídeos y aplicaciones web basados en estándares. Es el programa mas utilizado en el sector del diseño y la programación web, por sus diferentes funcionalidades. Sus principales competidores son Microsoft Expression Web y BlueGriffon. 



KOMPOZER
Es un editor de fuente abierta, y hay disponibles para GNU/Linux, Windows, MacOSX y OS/2. Las capacidades WYSIWYG de KompoZer son una de las principales atracciones del software. 




MOZILLA COMPOSER
Es un editor de paginas web libre y de código abierto, es usado para crear y editar paginas web, e.mail y documentos de texto fácilmente. Es compatible con Microsoft Windows, Mac OS X y Linux. Mozilla Composer permite ver, escribir y editar código HTML de manera WYSIWYG.







Sentencias Básicas de HTML

Para la realización de una pagina web tenemos que colocar etiquetas y a su vez cerrarlas.

Un ejemplo sencillo de una pagina web es el siguiente.
Abrimos un bloc de notas.
Utilizamos la etiqueta <html> para iniciar nuestra pagina.
<html>
Colocamos la eiqueta <head> que es la cabeza de nuestra pagina
<html>
<head>
Colocamos la etiqueta <title> que es para colocar el titulo de la pagina y esta se mostrara en la pestaña de nuestro navegador, cerramos la etiqueta </head>.
<html>
<head>
<title>Mi Primer Pagina </title>
</head>
Colocamos la etiqueta <body> y un color de fondo, para eso utilizamos bgcolor y el código del color.
<html>
<head>
<title>Mi Primer Pagina</title>
</head>
<body bgcolor="#FFCC99">
Colocamos un color de Fuente con font color y el codigo del color, size para el tamaño, lo que deseamos escribir y cerramos la etiqueta </font>
<html>
<head>
<title>Mi Primer Pagina</title>
</head>
<body bgcolor="#FFCC99">
<font color="CC3300" size="5">Herramientas Web</font>
Finalmente cerramos la etiqueta </html> y guardamos nuestro documento de la siguiente manera.
Archivo-Guardar como
"nombre".html(para establecer que es una pagina web) y guardar.
Para ejecutarla abrimos la pagina que se creo al guardar con nuestro navegador.

Aquí una imagen de una tabla de colores.


Para colocar un fondo de imagen solo hay que reemplazar <bgcolor> por la etiqueta <background> el nombre de la imagen y su extensión.

<body background="EFBV.png">