R|R

HTML
¿QUÉ PASO SIGUE?
¿QUE QUIERO? (Que se quede quieta, que se mueva, que mantenga una
margen , que se agrande , que se achique?
DUDAS
¿Qué remplaza un max-font-size?
 PASO A PASO PARA HACER
UN SITIO WEB
1. BRIEF DEL SITIO
1.1 DESCRIPCIÓN GENERAL
1.1.1 Objetivos
del sitio
1.1.2 Público al que va dirijido
1.1.3 Descripción de la empresa (breve descripción, enfoque, valores, imagen
corporativa)
[Link] Necesidades específicas de la empresa y del sitio web.
1.1.4 Kpls, Indicadores de éxito del sitio web
1.1.5 Condiciones - limitaciones (empresa, industria,sector,historia,valores)
1.1.6 TIMMING Plazos de ejecución.
1.1.7 look & Feel, estilo con ejemplos. Idea estética,prototipo, benchmarking)
1.1.8 Formato de entrega.
1.1.9 Prototipo del sitio
2. Hacer el ps o el diagrama, definiendo:
-secciones.
-dimensiones.
-paleta de colores.
-fuentes.
-imágenes.
3. Hacer la estructura del sitio web
3.1 [Link]
Carpeta css
Carpeta js
Carpeta Media
Carpeta Fonts
Adicionales
3.2 Crear documentos básicos en cada carpeta
[Link] , [Link]
3.3 Enlazar con link el css, probar si funciona, y colocar las
generales *{margin=0, padding=0, box sising=border-box
4. Crear en less las variables generales, alistar y probar las
fuentes, colocarlas como variables generales en [Link]
Puede ser por fonts google, o en linea, o descargadas
[Link] las variables de colores [Link].
6. Pasar el prefixfree, se vincula con script.
7. Colocar las etiquetas meta
 MAQUETACIÓN DEL SITIO WEB SIN JS

[Link] las secciones una por una de arriba a

abajo ,
Todo está dentro de un contenedor grande
Primero se encuentra un encabezado
Ala derecha tiene dos elementos, el nombre, adentro
del nombre el logo.
A la izquierda, tiene el menú, dentro de una burbuja
pequeña por nombre, todo lo de la izquierda dentro
de una burbuja grande
Así voy maquetando sección por sección
ORGANIZACIÓN DE ESPACIOS INDEX
[Link] básica de carpetas.
2. Estructura de espacios pro secciones semánticas en el index.
Tengo el logo o logos, del sitios de redes, de awesome, para ver tamaños.
[Link] dando estilos de ubicación por sección,le doy estilos a cada componente
del header
3. Estructura Básica de los HTML,
Colocar las etiquetas meta

Colocar las etiquetas link

1. css
2. google fonts
GOOGLE FONTS

1. Ir a google fonts
2. Buscar en google fontys,
la fuente que voy a usar

GOOGLE FONTS
Doy click en el cuadrado de la fuente, y
señalar +select this select y se añade en la zona
de derecha en el chick list de link, puedo tomar
más de una.
GOOGLE FONTS
Se organizan las url en el link que aparece en la ventana use on the
web, se copia el link herf se pega con su etiqueta link en el archivo index
se puede hacer un párrafo por fuente y probar
en el css ( agregar el css y el less al prepross )
Se pueden crear crear p para mirar si sirven las fuentes,
se organizan en variables generales Se colocan las font family,
que aparece en google fonts , como variables fonts en
.less
 Se puede también descargar las fuentes, y subirlas a las carpeta fonts
con una carpeta adentro, por cada fuente.
- Se busca la fuente en internet (en font squirrel).
- Se escoge la fuente por pago, o gratis.
- Se descarga el DOWNLOAD OTF , o los ff relacionados, se descarga el
zip, creo una carpeta en el pc y extraigo allí el zip.
 Subo los ff, que extreaje, señalo expert , y los
check listo de font formats, acepto el check legally,
y le doy download your kit

Se descarga el webkit, lo llevo a la carpeta que cree para la fuente y adentro creo una carp
webkit, y extraigo ahi. Creo en fonts, una carpeta, en el sitio web, con el nombre de la fuen
arrastro los archivos de webkit, los tf scg,etc.

se abre la hoja de estilos de css, en el st, y se copia y pega en el less los @ y url.
Cambio la direccion de url de acuerdo a la ruta del sitio, se puede agregar como
variable.
Descargar las imágenes de acuerdo a los
tamaños que se necesitan

Ajustar tamaños en illustrator

y guardarlos en la carpeta de img
Descargar los íconos puede ser de awesome

Se crea la cuenta y asignan

un numero y una url se da click en el número
y dan una script para pegar en el script
Buscar el ícono en font awesome da estiquetas i, pegarla en el código y sale...

Sino sale puede ser problemas de actualización de awesome

Se puede descargar , me meto opción download, descargo versión web

 Extraigo en el pc
Llevo a carpeta del sitio
carpeta css ctrl webfont copiar y pegar , los css, se
meteran en la carpeta de css, los webfont abriran
una nueva carpeta

quedan en las carpetas de sitio

por link, agrego la ruta y el achivo que
está en css, [Link]

se copian los i, del sitio de awesome

en css le puedo dar estilos

para awesome, toca estar pendiente de las
actualizaciones para descargarlas

se puede consultar en
[Link]
8F8s&t=675 ó en
[Link]
v=I3WXRAfnAhE&t=769s
descargar y vincular el prefixfree

- Ir al la página de prefixfree, ttps://[Link]/prefixfree/

- Dar click en el circulo rojo.
- Me muestra el código, lo copio.O LO GUARDO EN LA CARPETA
JS, YA ME PONE EL NOMBRE, LO AGREGO CON SCRIPT
DEBAJO DEL LINK DE CSS- Creo un documento nuevo en js, y
pedo el código que copie.
- Le doy nombre [Link].
- Lo vinculo en el [Link], con un script
<script type="text/javascript" src="js/[Link]"></script>
Empiezo a maquetar,
1) Empiezo con la etiqueta header.
2) Encabezado,delimito con comentarios.
- Empiezo con el menú, para el pc, class="menu_pc"
- Dentro de este menú, empiezo por el logo, en etiqueta a y con etiqueta img
<a href="#" class="logo">
<img src="img/[Link]" alt="icono" title="icono">
</a>

- Se agrega con etiqueta nav, la lista de menú , en la etiqueta nav se le da una clase
class="menu_principal">, la lista de menu se coloca en enlaces
 Después se colocan las redes sociales
en un div con una clase top redes, con enlaces y con la etiqueta traida de
fontawesome

queda pendiente
el encabezado de la sección
movíl, pero se maqueta con
los mediaqueries
 APLICAR
ESTILOS CSS
 [Link] por inspeccionar la ventana para first móvil
[Link] las variables generales como padding , margin
cero, y boxsizing:border box, colocar los @ de colores,
las fuentes que son descargadas y los font-family que no
[Link] dándole estilos de arriba a abajo
Se pueden usar abreviaturas por rapidez
y comentarios automáticos
Ejemplo de estilos para móvil first

1) Contenedor general mida el 100% width

2) Colocar un max-width, según el diseño del prototipo
3)margin:auto, para que centre al contenedor.
4)La primera sección, (generalmente header width:100%;
5)las imágenes se deben poner %; Cuadrar todo lo de imagen como repeteción,
centrar ,tamaño. Ir mirando alturas.
6) En caso de tener un encabezado fijo, que este en position:fixed, width:100%,z-index,
top:0px, este pegado arriba
 margin :0;

padding:0;

[Link]:border-box (pre-fijos)

PRIMEROS body{

font-size:(tamaño)

COLORES font-family

color}
FUENTES
container generales width, max-width margin 0
auto

, img generales vertical align, max-width

 margin :0;

padding:0;

[Link]:border-box (pre-fijos)

PRIMEROS body{

font-size:(tamaño)

COLORES font-family

color}
FUENTES
container generales width, max-width margin 0
auto

, img generales vertical align, max-width

ANIMACIONES TRANSICIONES
DISEÑOS ESPECIALES
PARA LOS SLIDER

MAQUETACIÓN

- Un contenedor general class ="col".

- Adentro de col un contenedor slider.
-Adentro de slider una class slide por
cada imágen
 CSS

Para .col, lo básico

width:%:
overflow:hidden;
Para slider:
width: el total de la suma de la cantidad de las
imágenes, cada imágen tiene 100%, si son 3 es
300%, si son 5 es 500% etc
display:flex;
Para slide:
width:100%;
Un [Link];
background-size:cover;
background-position:center;
&.foton{ (por cada imágen)
background:image;url();}
sE PUEDE CREAR UN CONTENEDOR MAS GRANDE
PARA DARLE UN MARCO
TABLAS DE MENÚS (OPCIONES)
paso a paso
1. Se abre la sección con clase y id
para el ejemplo
class ="nuestros_productos"
id="portafolios"
[Link] abre un contenedor general dentro de la seccion
class="contenedor"
[Link] abre un div para el título del menú
con class ="titulo-seccion"
4. Se crea un contenedor para las listas
5. Un div para títulos de las opciones
[Link] crea un contenedor para los contenidos
class="contenido", id="contenido_listas"
7. Contenedor por titulo con active
8. Cada item con columna izq y der
 ESTILOS CSS DE TABLAS DE MENÚS

[Link] lo general se empiezar por la seccion, o el contenedor del comienzo de la sección

de acuerdo a lo que se tenga en el diseño. Lo general puede ser el padding o margin

[Link] dan estilos al [Link] dan estilos al

contenedor que sigue contenedor que sigue
después de section, después de section,
clase contenedor. Abro clase contenedor. Abro
esta parte en les, pero esta parte en les, pero
sigo con el siguiente sigo con el siguiente
elemento elemento
[Link] le colocan estilos al
título de encabezado,
desde el div o la etiqueta,
se le pueden agregar
pseudoclases

[Link] doy estilos a los

contenedores que esten
después de acuerdo a los
diseños
[Link] le da clase a la
etiqueta, <ul></ul>
se le dan estilos básicos,
importantes; [Link] le dan estilos
display:flex; a las li, a las etiquetas a
justify-content:center de enlaces
[Link] le da estilos
al título que tenga la clase
active, se le puede dar
estilos al enlace a
Puede ser algo de color
con peudoclase, y un
border-bottom
[Link] le estilos al contenido
[Link] le dan estilos al
contenido de listas

9. Se le dan estilos a los

div hijos de contenido
>div, se desaparecen todos
los items con display:none

y con la clase active, se

puede mostrar solo el
contenido que tiene está
clase
10. Le doy estilos a cada item:

- display:flex; (Se pone una columna al lado

de la otra)
-Justify-content: space-between;(para que
se pegen a las márgenes)
-flex-wrap:wrap; (si no caben, se ponga una
encima de la otra).
.align-items:center; (se alínien
veeticalmente)
-se le da un padding.
-Se le da borde abajo
11.-Se le da un width a la columna de
izquierda, se le dan estilos a lo que esté
adentro, h3, p.

se la da estilos a la columna derecha

Maquetado lista básica

Un contenedor general.
Adentro lo primero es crear la lista de los títulos, con id y
class

DESPUES SE
coloca un contenedor con
los contenidos, con class contenido e
id contenido_productos, y
adentro se coloca un div por cada título,
dentro de cada div se coloca los items
un item por producto con col izq y der
Estilos básicos
1)Empiezo por el contenedor:
Le doy estilos de tamaño, padding, margin y
background color
2)Sigo con los estilos para
los ul
con class listasl

3)Le doy estilos y puedo darle pseudo clase

a las li y a las a 3)Le doy estilos a la clase active, relacionados con los a
cuando se aplique js, acá es en donde se va a ver el
cambio en los títulos
para js
4)Le voy a dar clases
al contenedor del contenido

5)Ahora estilos a los div

hijos del contenido, con
un transition
6)Se le coloca un active
dentro del contenido
cuando a cada div que son
los id de cada producto
como id="primera"
7)Se la da estilos a item, para organizar
la posición de las columnas, que aparece
según active cuando se programe con js
8)Se le da estilos a las
columnas de contenidos y
precios
 diseño
para
formulario
clásico
para js
[Link] crea un contenedor class="formulario"
[Link] se pone la etiqueta form
la etiqueta form tiene:
class="formulario_contacto"
name="formulario_contacto"
[Link] empiezan a crear los campos con
class"input-group", adentro primero la etiqueta
input, después la label.
En el input: type, id,name
En el label: class for
LOS ESTILOS DEL FORMULARIO CSS

[Link] estilos al contenedor del formulario. ej:clase="formulario".

.Estilos como: position:relative, ESTILOS GENERALES DE APARIENCIAS y de ubicación.

[Link] de formulario entrar a la clase de la etiqueta form = class =" formulario_contacto", y adentro de este estilo,
acceder a la clase de cada elemento del formulario. ej:class="input_group", estilos como:
position:relative (porque a los labe se le va a dar posicion:absolute;
que cada input_group, tenga un margen abajo.

3. Adentro de formulario_contacto, se le va a dar estilos a varias partes con un selectro multiple de css:

Al input tipo text , al input de tipo email, y a la etiqueta textarea , las cosas que estpan dentro de
las etiqueta input, y la etiqueta textarea, esto es para el estilo de las cajas donde el usuario escribe

se le ponen estilos como tamaños, colores, distancias,

outline:none, para quitar la linea que le pone google chrome
un padding interno, un background: none(para quitar el que el navegador pone por defecto)
border:none; para quitar el que pone por defecto el navegador ,
un borde abajo que puede ser con ej: fade border-bottom: 2px solid fade(red, 50%);
un vertical-align:top;
Se le da la pseudoclase: focus (para que pase algo cuando se haga click dentro del
campo)

Darle solo estilos al textarea

Se la dan estilos de dimensión,
para dare límites a las
dimensiones de la caja de
mensaje las personas ya no pueden deformar
la caja hacia los lados, si la pueden ampliar con
límites, hacia abajo y hacia arriba
Ahora darle estilos a los label, y a los label que tienen las class label,
los label, cualquier etiqueta

- A los label cualquier estilo como color, tipo de letra

- A los de class label:
position:absolute; (para poderlos mover)
top:16px;
Un transition para que la transición no sea brusca
ENTRE OTROS
LA DIFERENCIA PARA EL EFECTO JS ESTÁ EN AGREGAR
LA CLASE ACTIVE

El js lo que
hace es agregar esta clase
active , por eso de entrada no se coloca
cuando se colocan mas class
en un elemento,
se coloca, en un solo class, separado por espacio
ejemplo:
class="label active"
 Para finalizar, se le coloca
una clase de error
amarrada al enviar,
para cuando no se llenen los campos
en el input_group
 CREANDO UN MENÚ PC
Y UN MENÚ MÓVIL
UNA CONFIGURACIÓN PARA
PC Y UNA PARA MÓVIL
la idea es que se tenga un menú normal que ocupe
una posición determinada, pero cuando se de click
en la opción de menú movíl que es el de hamburguer
la posición y forma del menú cambie.

Se puede colocar fijo, que permanece aunque

se mueva la página
Importante
position:fixed;Que se mantenga fijo
z-indez:99;Encima de las demás cosas
top:0;Pegado a arriba
padding para acotarlo
MENU PC
CONTENEDOR Y NAV

LO HAGO CON ETIQUETA a

ejemplo de css
básico en menú
 menú móvil

se maqueta después del menú pc

con la class, menu-movil

 menú móvil
EN ESTE MENÚ SE DEJAN LAS COSAS DEL ENCABEZADO, LOGOS,
REDES SOCIALES, ETC
Debajo del menu-pc, se crea el menu-movil

se le pueden hacer cambios

Antes del nav, se le coloca el hamburguer- menu

Se trae el ícono de font awesome

RESPONSIVO
¿Qué quiero que pase a medida que va cambiando el
tamaño de la página?, ¿qué desaparezca algo o
aparezca?,¿qué se reacomode algo?
SE FACILITA SI EN LAS CLASES E
ID PIENSO EN COMO SERÁ
HACERLO RESPONSIVO, cosas
en comun títulos textos, img,
etc
 DEFINICIÓN

- Sitio que se adapte a cualquier dispositivo.

- Cambia la página a medida que cambia el tamaño de la ventana, es

responsivo porque va respondiendo a medida que va cambiando la
página.

- La clave es pensar que quiero que pase a medida que va cambiando la

ventana, pueden aparecer o desaparecer cosas, reacomodar el orden de
las cosas, acortar o cambiar direcciones, etc.

- Se debe determinar el viewport, se definen los media-queries

 RESOLUCIONES DE PANTALLAS

Este es un ejemplo de distribución

SE VE COMO
SE TIENEN MENOS COLUMNAS
A MEDIDA QUE SE REDUCE
EL TAMAÑO,
HASTA QUE
QUEDA SOLO UNA COLUMNA
DEPENDIENDO DEL
DISEÑO
A parte de la resolución;
La orientación
Densidad de pixeles
Si es retina display
 PARA DISEÑAR
Definir la etiqueta meta, viewport, para que
respete las reglar responsivas.
 Paso a paso

Defino el tamaño de partida para el prototipo

Para diseñar puedo usar la herramienta de google
chrome.
Click derecho inspeccionar, acomodo el panel a la
derecha, le doy click al ícono de la pantalla pequeña
dentro de la grande.
PASO A PASO PARA LAS REGLAS CSS PARA DISEÑO
RESPONSIVO

Con max-width, digo cuanto es lo

máximo que crece
para pantallas grandes o por
diseño
COn min-width, digo cuanto es lo
mínimo que
disminuye para pantallas
pequeñas o
por diseño
también con
min-height y max-height
2) Se puede hacer lo mismo
con los videos responsivos
 Empezar a diseñar

media
movil first en
estilos, o se puede
ir de grande a

queris pequeño, se va
reduciendo y se va
mirando
tener cuidado con los que cambio se
puede hacer

@mediaquery, para (ejemplo:eliminar

algún elemento(s)

que el orden no los Puedo copiar las

rutas
anule entre si de inspeccionar
RESOLUCIONES
Se pueden definir los tamaños entre otras cosas
por @media (dispositivos) and () entre los ()
a los intervalos mayor o menor, entre dos
tamaños and()and() dispositivos (all , print screen etc)
SE DEBE DAR BIEN LA DIRECCIÓN
DEL ELEMENTO A CAMIAR
 EN ESTE EJEMPLO, NO
ME CAMBIABA LA FUENTE
CON EL MEDIA QUERY,PORQUE
NO ESTABA RELACIONANDO BIEN
LA RUTA, ME FALTABA INCLUIR LA
etiqueta li
 DEPENDE DEL DISEÑO
Y LOS
PATRONES DE DISEÑO
Empezar a diseñar
movil first en estilos, o se puede ir de grande a
pequeño, se va reduciendo y se va mirando
que cambio se puede hacer (ejemplo:eliminar algún
elemento(s)
 Tiny Tweaks
Patrón simple, se puede colocar en una sola columna
No necesita muchos puntos de quiebra

Hace énfasis en la letra

en las distancias.
Alineaciones básicas,
padding, margin.
 MOSTLY FLUID

Pueden ser varias columnas

Con un contenedor con un margin,
al reducir el margin va desapareciendo
Todas las columnas se apilan en una sola.

Un contenedor con display :flex, flex wrap: wrap

que al estar en menores de 420px, los bloques
que eran dos columnas cada una con width 50%, se le
puede colocar width 100%, pasan a estar una debajo de la otra
con @media, cuidado con los pading, es bueno empezrcon* generales
 COLUMN DROP
Al reducir la pantalla, las columnas
se van apilando unas debajo de otras,
reduciendo el número de columnas
hasta quedar en una sola

se apilan por oden de importancia,

como en el ejemplo:
Aqua, más improtante
Verde, segunda más importantes
Azul, tercera columna mas importante
 COLUMN DROP
PARA TABLET

el media
con
width
 COLUMN DROP
PARA CELULARES

el media
con
width

Y CON ORDER

La azul oscura
quedó abajo
LAYOUT SHIFTER
Cambian mucho las distribuciones al reducir,
Tiene muchos puntos de quiebre

Los subitulos de los botónes se

desaparecen
 LAYOUT SHIFTER
Al reducir más, pasan mas cosas en otro
punto de quiebre.
El menú en ester caso
pasa de estar al lado en
vertical
A estar arriba en
horizontal.
Algunas cosas
han desaparecido
 LAYOUT SHIFTER
En otro
punto de quiebre.
El diseño del menú cambia, ya no
tiene íconos ,
algunas cosas
desaparecen
Letreros pasan a estar dentro
de la imágen
 LAYOUT SHIFTER
EL MENÚ
PASA
A ESTAR EN LO MÁS ALTO
 PATRÓN OFF CANVAS

Aplicaciones de celular
Al reducir las columnas no se van debajo,
desaparecen, y se pueden activar con algun boton js.
O se pueden mover con el dedo en pantalla táctil
para mirar las columnas de los lados
 SURGE
SUBIR EL SITIO WEB
 PASO A PASO
1. EN google escribir [Link], meterse en pricing, get started for free
 2. Instalar el [Link], abrirlo como administrador, abrir el [Link]
copiar de la página de surge el comando npm install --global surge, con click
derecho se coloca automáticamente, en caso de error se abre el node que
aparece en negro
El programa hace instalaciones, deja listo el prompt del usuario , en el prompt se escribe
surge y [Link] a la cuenta
Aca escribo la ruta de donde tengo
puedo borrar el c:\users/Diego\ , y
el sitio web
poner la ruta que tenga

PARA QUE LA RUTA SIRVA,

TENGO QUE ENTRAR A LA CARPETA
Y ESCRIBIR ESA RUTA
NO SIRVE SI NO ENTRO A LA CARPETA