Diseño de papel a digital RESPOSIVO

                              PC                                                                                                 tableta

     CELULAR













DISEÑO A PAPEL







INTEGRANTES:Johana Cayetano Dominguez
Itzel Abigail Zoto Miron
Samantha Parra Espinosa
Alvaro Alexis Ocampo Garcia

DISEÑO DE UNA WEB SEGUN LOS REQUERIMIENTOS DEL CLIENTE

Requerimientos de música
1.-"La mas sabrosa"   (tienda de productos musicales)

2.-Quiero integración con redes sociales:
 -facebook
 -youtube
 -instagram
 -twitter

3.-formulario de contacto.
4.-Slider en la portada
5.-Telefonos
      -Local
      -movil

                                                                                      Integrantes:

                                                                                                                  -Calletano Dominguez Johana

                                                                                                               -Parra Espinosa Samantha

                                                                                                                 -Ocampo Garcia Alvaro Alexis

DIFERENCIAS ENTRE RESOLUCIÒN DE PPP

La resolución expresada en (ppp) o (ppi), son los píxeles por unidad de longitud, es decir, los píxeles por pulgada. La pulgada mide 2,54 cm.

La resolución define la cantidad de píxeles que contiene una imagen y la dimensión de estos píxeles expresan de qué forma se reparten en el espacio. La resolución es la relación entre las dimensiones digitales (los píxeles) y las físicas, las que tendrá una vez impresa sobre papel

Para calcular del tamaño en píxeles a tamaño en centímetros para la impresión podemos aplicar la siguiente fórmula:

* Tamaño de impresión= Número de píxeles/ Resolución (PPI píxeles por pulgada)


Cuando hacemos referencia a la resolución de imagen de una pantalla o monitor, utilizamos los términos: PPP (Píxeles por pulgada) o  por su acrónimo en inglés PPI (Points Per Inch).

Mientras tanto cuando hablamos en términos de impresión, la resolución que es empleada es DPI (Dots Per Inch) también conocida en español como PPP (Puntos por pulgada).

DIFERENCIAS ENTRE FORMATOS PNG Y JPG

IMAGENES JPG

El formato de imagen jpg :
-Reduce el tamaño del archivo
-Puede mostrar millones de colores
-Es compatible con muchas plataformas
-Al acercar demasiado la imagen en formato jpg la imagen se pixelea

IMAGENES PNG

El formato de imagen png tiene mayor calidad, pero no es recomendable para navegadores ya que el peso de este formato de imagen es demasiado alto y por lo tanto el consumo de datos es muy alto


DIFERENCIA ENTRE FORMATO PNG Y JPG

Diseño de papel photoshop

Las herramientas que utilice fueron crear texto,dibujar lineas, después duplique las lineas combine las capas para crear una sola capa

Diferencias entre archivos graficos

Las diferencias de guardar lo que hagas en Photoshop en las extensiones JPG,PNG,PSD son las siguientes: 
JPG:JPG es un formato gráfico con compresión. Quiere decir que el formato jpg se utiliza para guardar imágenes y que comprime esas imágenes para que ocupen menos en el disco. JPG hace compresión con pérdida, lo que quiere decir que es un formato gráfico que comprime las imágenes y en esa compresión la imagen comprimida no es exactamente igual a la imagen original, sino que se pierde algo de calidad de la imagen comprimida con JPG. El formato tiene un parámetro llamado calidad, que se puede alterar para que la compresión sea mayor o menor, siempre siendo a mayor compresión menor la calidad.

PNG:El formato PNG permite almacenar imágenes en blanco y negro (una profundidad de color de 16 bits por píxel) y en color real (una profundidad de color de 48 bits por píxel), así como también imágenes indexadas, utilizando una paleta de 256 colores.

Además, soporta la transparencia de canal alfa, es decir, la posibilidad de definir 256 niveles de transparencia, mientras que el formato GIF permite que se defina como transparente sólo un color de la paleta. También posee una función de entrelazado que permite mostrar la imagen de forma gradual.

La compresión que ofrece este formato es (compresión sin pérdida) de 5 a 25% mejor que la compresión GIF.

Por último, el PNG almacena información gama de la imagen, que posibilita una corrección de gama y permite que sea independiente del dispositivo de visualización. Los mecanismos de corrección de errores también están almacenados en el archivo para garantizar la integridad.

PSD: PSD es un formato nativo de photoshop y permite guardar todas las presentaciones, retoques, nuevas creaciones realizadas con este programa.

Guarda los archivos con 48 bits de color y permite almacenar todas las capas, canales etc. que exista en el archivo de imagen.

PSD casi no tiene compatibilidad con otros programas, por lo que se recomienda tener dos archivos: uno en el propio formato nativo (.PSD), y otro en algún formato compatible con otros programas, como JPGE o TIFF.

Primer diseño de interfaz web

Recordé como diseñar en photoshop, y aprendí a crear una interfaz web

Photoshop

Herramientas basicas de photshop
-seleccionar Te permite seleccionar un area de campo
-capas esta opciòn te permite tener varias capas en una misma imagen las cuales puedes modificar individualmente
-gradiente te permite poner un fondo 
-tamaños esta opcion te permite modificar el tamaño de la imagen que hayas seleccionado
-lazo_contorno te permite seleccionar y borrar el contorno de una imagen
-texto te permite escribir un texto en una imagen o fondo
-desacoplar ventana te permite mover o desplazar una ventana

Entrada 3

TEORIA DEL COLOR

Es un grupo de reglas básicas en la mezcla de colores para conseguir el efecto deseado combinándolos.
El color es una sensación producida por el reflejo de la luz en la materia y transmitida por el ojo al cerebro. La materia capta las longitudes de onda que componen la luz excepto las que corresponden al color que observamos y que son reflejadas.
La luz blanca se puede producir combinando el rojo, el verde y el azul, mientras que combinando pigmentos cian, magenta y amarillo se produce el color neutro.

Los colores se clasifican en primarios, secundarios y terciarios.
Los colores primarios son aquellos establecidos científicamente como los originantes de las combinaciones cromáticas más extensas y satisfactorias. Estos son: amarillo, azul y rojo.
Los colores secundarios se obtienen mezclando los primarios entre si en la misma proporción. Son el violeta, naranja y verde.
Finalmente los colores terciarios son el rojo violáceo, rojo anaranjado, amarillo anaranjado, amarillo verdoso, azul verdoso y azul violáceo.
Las cualidades del color son: tono (nombre especifico), valor (grado de brillantez o luminosidad) y saturación (grado de pureza).

Entrada 2

1.NOMBRE DE LA MATERIA: Desarrolla Aplicaciones Web




2.PRESENTACIO (Nombre del Docente): Lic. Gilberto Bahena Salas
3.INTEGRACIÓN DE ALUMNOS: El profesor realizará una dinámica de integración,
motivando la participación de los alumnos.
4.OBJETIVOS DEL CURSO: Desarrolla interfaces
Desarrolla páginas web estáticas
Desarrolla aplicaciones web dinámicas
5.EXPECTATIVAS: Realizar practicas, no exámenes escritos, comprender todo lo que abarca la materia
6.BENEFICIOS DEL CURSO Aprender a desarrollar páginas web estáticas y dinámicas
7.REGLAS: Prohibidos los celulares, se pasa lista10 minutos antes después de sonar la campana
Si llegas tarde hazlo brevemente y en silencio, habrá sanciones económicas por faltas al respeto a compañeros o al profesor
8.CRITERIOS DE EVALUACION
DECLARATIVO 30%
PROCEDIMIENTO 40%
ACTITUDINAL 30%
CERO FALTAS 5% MÁS SOBRE CALIFICACIÓN
TOTAL 100%
9.CONTENIDO DEL PROGRAMA: Desarrolla interfaces utilizando herramientas de diseño grafico
Desarrollo de paginas web dinámicas
10.BIBLIOGRAFIA:... NO HAY BIBLIOGRAFIA
11.EXAMEN DE DIAGNÓSTICO:

Entrada 1

Nombre: Ocampo García Álvaro Alexis
Materia: Desarrolla Aplicaciones Web
Escuela: CENTRO DE BACHILLERATO TECNOLOGICO INDUSTRIAL Y DE SERVICIOS  #166 PABLO TORRES BURGOS
Profesor: Gilberto Bahena Salas